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 {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";

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

@ -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;
}
`

2
frontend/src/index.js
View File

@ -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'));

40
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/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>
)

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

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

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

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