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

reglage bouton history

Browse Source
This commit is contained in:
PrStein 2023-05-18 17:56:50 +02:00
parent 952ad35781
commit da2677cf4c
5 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
// import '../DataBase/DataProfileUser.js' // import '../DataBase/DataProfileUser.js'
import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js'; import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js';
import '../styles/Win_Loss.css' import '../styles/Win_Loss.css'
// import { UserProfile } from '../DataBase/DataProfileUser.js'; import { UserProfile } from '../DataBase/DataUserProfile';
// import color from '../../utils/style/color.js'; // import color from '../../utils/style/color.js';
@ -55,7 +55,9 @@ function WinLoss() {
<div className='elements'> <div className='elements'>
<li key={index}> <li key={index}>
<h4 className='content'>{item.title}</h4> <h4 className='content'>{item.title}</h4>
<h4 className='content'>you {item.score} {item.openent}</h4> <div className='content2nd'>
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score} {item.openent}</h4>
</div>
{/* <h4 className='content'>{item.openent}</h4> */} {/* <h4 className='content'>{item.openent}</h4> */}
</li> </li>
</div> </div>

4
frontend/src/index.js
View File

@ -7,7 +7,7 @@ import './styles/index.css';
import Header from './components/Header'; import Header from './components/Header';
// import Home from './pages/Home.jsx'; // import Home from './pages/Home.jsx';
// import Login42 from './pages/Login42'; // import Login42 from './pages/Login42';
import Head from './pages/Head'; // import Head from './pages/Head';
// import Field from './pages/Field'; // import Field from './pages/Field';
// import PlayButton from './pages/PlayButton'; // import PlayButton from './pages/PlayButton';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
@ -19,7 +19,7 @@ import './styles/App.css'
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<div className='App'> <div className='App'>
<Head /> {/* <Head /> */}
<BrowserRouter> <BrowserRouter>
<Header /> <Header />
<AnimatedRoute/> <AnimatedRoute/>

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

@ -1,13 +1,13 @@
import { React, useState } 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, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { AiFillEdit } from 'react-icons/ai' import { AiFillEdit } from 'react-icons/ai'
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import ModalEdit from "../components/EditName"; import ModalEdit from "../components/EditName";
// 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/DataUserProfile"; import {UserProfile} from "../DataBase/DataUserProfile";
@ -38,7 +38,7 @@ function Profile () {
function Home () { function Home () {
const [move, setmove ] = useState(false); const [move, setmove ] = useState(false);
return ( return (
<motion.div className="App" <motion.div className="page"
initial={{opacity: 0}} initial={{opacity: 0}}
animate={{opacity: 1}} animate={{opacity: 1}}
exit={{opacity: 0}}> exit={{opacity: 0}}>
@ -52,10 +52,10 @@ function Home () {
</motion.div> </motion.div>
</div> </div>
<motion.div <motion.div
// {/* <button className="history" */} className="div_history"
// className="history" // className="history"
onClick={ () => setmove(!move)}> onClick={ () => setmove(!move)}>
<Link to="#" className="history">Match History</Link> <Link to="#" className="history"><AiOutlineHistory/> Match History</Link>
</motion.div> </motion.div>
</motion.div> </motion.div>
) )

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

@ -1,3 +1,10 @@
.page {
text-align: center;
/* height: 50vh; */
/* width: 50vh; */
/* background-color: black; */
}
.profile { .profile {
flex-direction: row; flex-direction: row;
color: white; color: white;
@ -29,13 +36,18 @@
color: white; color: white;
background-color: #5843e4; background-color: #5843e4;
border-radius: 20px; border-radius: 20px;
padding: 16px; padding: 14px;
font-size: 30px; font-size: 1.7rem;
text-decoration: none; text-decoration: none;
margin-top: -400px;
font-weight: bold; font-weight: bold;
} }
.div_history {
flex-direction: row;
align-items: center;
margin-top: -80px;
}
.edit_name { .edit_name {
margin-left: 2rem; margin-left: 2rem;
font-size: 1.7rem; font-size: 1.7rem;

26
frontend/src/styles/Win_Loss.css
View File

@ -39,6 +39,28 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
.content2nd {
color: white;
/* font-size: 22px; */
font-weight: bold;
display: flex;
flex-direction: row;
text-align: justify;
/* margin-bottom: 5px; */
}
.me {
text-align: start;
}
.score {
text-align: center;
}
.oponent {
align-items: flex-end;
}
div::-webkit-scrollbar { div::-webkit-scrollbar {
width: 1; width: 1;
} }
@ -48,6 +70,6 @@ div::-webkit-scrollbar-track {
} }
div::-webkit-scrollbar-thumb { div::-webkit-scrollbar-thumb {
background-color: black; background-color: red;
outline: 1px solid black; outline: 3px solid black;
} }