Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animation profile

Browse Source
This commit is contained in:
PrStein 2023-05-14 20:39:29 +02:00
parent 52d83ea7b3
commit c5889b149d
7 changed files with 45 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/AnimatedRoute.jsx
View File

@ -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

2
frontend/src/components/App.jsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import {Routes, Route} from 'react-router-dom'; 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 PlayButton from "../pages/PlayButton.js";
import Field from "../pages/Field"; import Field from "../pages/Field";
import Login42 from "../pages/Login42.js"; import Login42 from "../pages/Login42.js";

10
frontend/src/components/Win_Loss.jsx
View File

@ -10,14 +10,14 @@ const CardWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 15px; padding: 15px;
background-color: black; // background-color: black;
// border-radius: 30px; // border-radius: 30px;
// width: 350px; // width: 350px;
// transition: 200ms; // transition: 200ms;
margin-top: 50px; // margin-top: 50px;
&:hover { // &:hover {
cursor: pointer; // cursor: pointer;
box-shadow: 2px 2px 10px #b6b6b6; // box-shadow: 2px 2px 10px #b6b6b6;
} }
` `

2
frontend/src/index.js
View File

@ -13,7 +13,7 @@ import Head from './pages/Head';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
// import Messages from './pages/Messages'; // import Messages from './pages/Messages';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import AnimatedRoute from './components/AnimatedRoute'; import AnimatedRoute from './components/App';
import './styles/App.css' import './styles/App.css'
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));

38
frontend/src/pages/Home.jsx
View File

@ -1,31 +1,43 @@
import React from "react"; import { React, useState } from "react";
import '../styles/Profile.css' import '../styles/Profile.css'
import '../styles/App.css' import '../styles/App.css'
import DefaultPicture from "../assets/profile.jpg"; import DefaultPicture from "../assets/profile.jpg";
// import WinLoss from "../components/Win_Loss"; import WinLoss from "../components/Win_Loss";
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
// import {AiOutlineHistory} from 'react-icons/ai' // import {AiOutlineHistory} from 'react-icons/ai'
import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
import UserProfile from "../DataBase/DataProfileUser"; // 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 () { function Home () {
let name = UserProfile.UserName const [move, setmove ] = useState(false);
return ( return (
<motion.div className="App" <motion.div className="App"
initial={{opacity: 0}} initial={{opacity: 0}}
animate={{opacity: 1}} animate={{opacity: 1}}
exit={{opacity: 0}}> exit={{opacity: 0}}>
<div className="profile"> <div className="home">
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" /> <motion.div animate={{x: move ? -200: 150}}
<h1>Dipper Ratman</h1> transition={{type: "tween", duration: 0.5}}>
<Profile/>
</motion.div>
<motion.div animate={{opacity: !move ? 0 : 1}}>
<WinLoss/>
</motion.div>
</div>
<div> <div>
<div className="history"> <button className="history"
<Link to='#' className=" history">Match history</Link> onClick={ () => setmove(!move)}>Match History</button>
</div>
</div>
</div> </div>
</motion.div> </motion.div>
) )

1
frontend/src/styles/App.css
View File

@ -1,5 +1,6 @@
.App { .App {
text-align: center; text-align: center;
/* height: 100vh; */
background-color: black; background-color: black;
} }

13
frontend/src/styles/Profile.css
View File

@ -1,6 +1,5 @@
.profile { .profile {
flex-direction: row; flex-direction: row;
height: 100vh;
color: white; color: white;
} }
@ -15,12 +14,22 @@
margin-top: 20px; margin-top: 20px;
} }
.home{
/* margin-top: -100px; */
display: block;
/* flex-direction: column; */
/* background-color: black; */
text-align: center;
}
.history{ .history{
display: inline-block;
color: white; color: white;
background-color: #5843e4; background-color: #5843e4;
border-radius: 4px; border-radius: 4px;
padding: 8px 8px 8px 8px; margin: 10px;
/* padding: 8px 8px 8px 8px; */
font-size: 30px; font-size: 30px;
text-decoration: none; text-decoration: none;
} }