From c5889b149d810dee5571b4f584505c3ed39ac5e0 Mon Sep 17 00:00:00 2001
From: PrStein <eliseesydney@gmail.com>
Date: Sun, 14 May 2023 20:39:29 +0200
Subject: [PATCH] animation profile

---
 frontend/src/components/AnimatedRoute.jsx | 26 ---------------
 frontend/src/components/App.jsx           |  2 +-
 frontend/src/components/Win_Loss.jsx      | 10 +++---
 frontend/src/index.js                     |  2 +-
 frontend/src/pages/Home.jsx               | 40 +++++++++++++++--------
 frontend/src/styles/App.css               |  1 +
 frontend/src/styles/Profile.css           | 13 ++++++--
 7 files changed, 45 insertions(+), 49 deletions(-)
 delete mode 100644 frontend/src/components/AnimatedRoute.jsx

diff --git a/frontend/src/components/AnimatedRoute.jsx b/frontend/src/components/AnimatedRoute.jsx
deleted file mode 100644
index 5a11edb1..00000000
--- a/frontend/src/components/AnimatedRoute.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import {Routes, Route} from 'react-router-dom';
-import Home from "../pages/Home.jsx";
-import PlayButton from "../pages/PlayButton.js";
-import Field from "../pages/Field";
-import Login42 from "../pages/Login42.js";
-import Messages from "../pages/Messages.jsx";
-import { useLocation } from "react-router-dom";
-import {AnimatePresence} from "framer-motion";
-
-function AnimatedRoute () {
-	const location = useLocation();
-	return (
-		<AnimatePresence>
-			<Routes location={location} key={location.pathname}>
-				<Route exact path="/" element={<Home/>}/>
-				<Route path="/game" element={<PlayButton />}/>
-				<Route exact path="/pong/play" element={<Field />}/>
-				<Route exact path="/login42" element={<Login42 />}/>
-				<Route exact path="/messages" element={<Messages />}/>
-			</Routes>
-		</AnimatePresence>
-	)
-}
-
-export default AnimatedRoute
\ No newline at end of file
diff --git a/frontend/src/components/App.jsx b/frontend/src/components/App.jsx
index 2458e2e3..5a11edb1 100644
--- a/frontend/src/components/App.jsx
+++ b/frontend/src/components/App.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {Routes, Route} from 'react-router-dom';
-import Home from "../pages/Home.js";
+import Home from "../pages/Home.jsx";
 import PlayButton from "../pages/PlayButton.js";
 import Field from "../pages/Field";
 import Login42 from "../pages/Login42.js";
diff --git a/frontend/src/components/Win_Loss.jsx b/frontend/src/components/Win_Loss.jsx
index 65436f9a..89349668 100644
--- a/frontend/src/components/Win_Loss.jsx
+++ b/frontend/src/components/Win_Loss.jsx
@@ -10,14 +10,14 @@ const CardWrapper = styled.div`
         display: flex;
         flex-direction: column;
         padding: 15px;
-        background-color: black;
+        // background-color: black;
         // border-radius: 30px;
         // width: 350px;
         // transition: 200ms;
-		margin-top: 50px;
-        &:hover {
-            cursor: pointer;
-            box-shadow: 2px 2px 10px #b6b6b6;
+		// margin-top: 50px;
+        // &:hover {
+        //     cursor: pointer;
+        //     box-shadow: 2px 2px 10px #b6b6b6;
         }
 `
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 33bbe09a..51ae5e7f 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -13,7 +13,7 @@ import Head from './pages/Head';
 import reportWebVitals from './reportWebVitals';
 // import Messages from './pages/Messages';
 import { BrowserRouter } from 'react-router-dom';
-import AnimatedRoute from './components/AnimatedRoute';
+import AnimatedRoute from './components/App';
 import './styles/App.css'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 74357c06..8224bbc9 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,31 +1,43 @@
-import React from "react";
+import { React, useState } from "react";
 import '../styles/Profile.css'
 import '../styles/App.css'
 import DefaultPicture from "../assets/profile.jpg";
-// import WinLoss from "../components/Win_Loss";
+import WinLoss from "../components/Win_Loss";
 import { motion } from 'framer-motion'
 // import {AiOutlineHistory} from 'react-icons/ai'
-import { Link } from "react-router-dom";
-import UserProfile from "../DataBase/DataProfileUser";
+// import { Link } from "react-router-dom";
+// import UserProfile from "../DataBase/DataProfileUser";
 
 
 
+function Profile () {
+	return (
+		<div className="profile">
+		<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
+		<h1>Dipper Ratman</h1>
+		</div>
+	)
+}
+
 function Home () {
-	let name = UserProfile.UserName
+	const [move, setmove ] = useState(false);
     return (
 		<motion.div className="App"
 		initial={{opacity: 0}}
 		animate={{opacity: 1}}
 		exit={{opacity: 0}}>
-			<div className="profile">
-				<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
-				<h1>Dipper Ratman</h1>
-
-				<div>
-					<div className="history">
-						<Link to='#' className=" history">Match history</Link>
-					</div>
-				</div>
+		<div className="home">
+			<motion.div animate={{x: move ? -200: 150}}
+				transition={{type: "tween", duration: 0.5}}>
+					<Profile/>
+			</motion.div>
+			<motion.div animate={{opacity: !move ? 0 : 1}}>
+				<WinLoss/>
+			</motion.div>
+			</div>
+			<div>
+				<button className="history"
+				onClick={ () => setmove(!move)}>Match History</button>
 			</div>
 		</motion.div>
     )
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index a41169e4..3b9cd18f 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+	/* height: 100vh; */
   background-color: black;
 }
 
diff --git a/frontend/src/styles/Profile.css b/frontend/src/styles/Profile.css
index e9a41091..ea271b00 100644
--- a/frontend/src/styles/Profile.css
+++ b/frontend/src/styles/Profile.css
@@ -1,6 +1,5 @@
 .profile {
 	flex-direction: row;
-	height: 100vh;
 	color: white;
 }
 
@@ -15,12 +14,22 @@
 	margin-top: 20px;
 }
 
+.home{
+	/* margin-top: -100px; */
+	display: block;
+	/* flex-direction: column; */
+	/* background-color: black; */
+	text-align: center;
+
+}
 
 .history{
+	display: inline-block;
 	color: white;
 	background-color:  #5843e4;
 	border-radius: 4px;
-	padding: 8px 8px 8px 8px;
+	margin: 10px;
+	/* padding: 8px 8px 8px 8px; */
 	font-size: 30px;
 	text-decoration: none;
 }