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 { DBWinLoss } from '../DataBase/DummyDBWinLoss.js';
import '../styles/Win_Loss.css'
// import { UserProfile } from '../DataBase/DataProfileUser.js';
import { UserProfile } from '../DataBase/DataUserProfile';
// import color from '../../utils/style/color.js';
@ -55,7 +55,9 @@ function WinLoss() {
<div className='elements'>
<li key={index}>
<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> */}
</li>
</div>

4
frontend/src/index.js
View File

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

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

@ -1,13 +1,13 @@
import { React, useState } from "react";
import '../styles/Profile.css'
import '../styles/App.css'
// import '../styles/App.css'
import DefaultPicture from "../assets/profile.jpg";
import WinLoss from "../components/Win_Loss";
import { motion, AnimatePresence } from 'framer-motion'
import { AiFillEdit } from 'react-icons/ai'
import { Link } from "react-router-dom";
import ModalEdit from "../components/EditName";
// import {AiOutlineHistory} from 'react-icons/ai'
import {AiOutlineHistory} from 'react-icons/ai'
// import { Link } from "react-router-dom";
import {UserProfile} from "../DataBase/DataUserProfile";
@ -38,7 +38,7 @@ function Profile () {
function Home () {
const [move, setmove ] = useState(false);
return (
<motion.div className="App"
<motion.div className="page"
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}>
@ -52,10 +52,10 @@ function Home () {
</motion.div>
</div>
<motion.div
// {/* <button className="history" */}
className="div_history"
// className="history"
onClick={ () => setmove(!move)}>
<Link to="#" className="history">Match History</Link>
<Link to="#" className="history"><AiOutlineHistory/> Match History</Link>
</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 {
flex-direction: row;
color: white;
@ -29,13 +36,18 @@
color: white;
background-color: #5843e4;
border-radius: 20px;
padding: 16px;
font-size: 30px;
padding: 14px;
font-size: 1.7rem;
text-decoration: none;
margin-top: -400px;
font-weight: bold;
}
.div_history {
flex-direction: row;
align-items: center;
margin-top: -80px;
}
.edit_name {
margin-left: 2rem;
font-size: 1.7rem;

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

@ -39,6 +39,28 @@
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 {
width: 1;
}
@ -48,6 +70,6 @@ div::-webkit-scrollbar-track {
}
div::-webkit-scrollbar-thumb {
background-color: black;
outline: 1px solid black;
background-color: red;
outline: 3px solid black;
}