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

reglage sidebar ajout bouton edit name

Browse Source
This commit is contained in:
PrStein 2023-05-16 19:41:59 +02:00
parent c5889b149d
commit 2f9f840b0c
8 changed files with 158 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/DataBase/DataProfileUser.js Normal file
View File

@ -0,0 +1,10 @@
import DefaultPic from '../assets/profile.jpg';
export const UserProfile = [
{
Pic: DefaultPic,
UserName: 'Dipper Ratman',
},
]
// export default UserProfile

10
frontend/src/DataBase/DataProfileUser.jsx
View File

@ -1,10 +0,0 @@
import DefaultPic from '../assets/profile.jpg';
const UserProfile = [
{
Pic: DefaultPic,
UserName: "Dipper Ratman",
},
]
export default UserProfile

9
frontend/src/DataBase/DummyDBWinLoss.js
View File

@ -2,29 +2,36 @@ export const DBWinLoss = [
{ {
title: 'Victory', title: 'Victory',
score: '10 - 6', score: '10 - 6',
openent: 'kinou'
}, },
{ {
title: 'Defeat', title: 'Defeat',
score: '9 - 10', score: '9 - 10',
openent: 'Flatman'
}, },
{ {
title: 'Victory', title: 'Victory',
score: '10 - 0', score: '10 - 0',
openent: 'fuck dat'
}, },
{ {
title: 'Victory', title: 'Victory',
score: '10 - 9', score: '10 - 9',
openent: 'Eren jeager'
}, },
{ {
title: 'Defeat', title: 'Defeat',
score: '3 - 10', score: '3 - 10',
openent: 'justin'
}, },
{ {
title: 'Deafet', title: 'Defeat',
score: '9 - 10', score: '9 - 10',
openent: 'blabla car'
}, },
{ {
title: 'Victory', title: 'Victory',
score: '10 - 9', score: '10 - 9',
openent: 'jean-marie',
}, },
] ]

6
frontend/src/components/Sidebar/Modal.jsx
View File

@ -55,9 +55,11 @@ const Modal = ({ handleClose }) => {
</li> </li>
<div <div
className="nav-menu"> className="nav-menu">
<ul className='nav-menu-items'>
{SidebarData.map((item, index) => { {SidebarData.map((item, index) => {
return ( return (
<motion.div whileHover={{scale: 1.1}}> <motion.div whileHover={{scale: 1.1}}
className>
<li key={index} className={item.cName}> <li key={index} className={item.cName}>
<Link to={item.path}> <Link to={item.path}>
{item.icon} {item.icon}
@ -67,6 +69,8 @@ const Modal = ({ handleClose }) => {
</motion.div> </motion.div>
) )
})} })}
</ul>
</div> </div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>

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

@ -1,39 +1,42 @@
// import PropTypes from "prop-types" // import PropTypes from "prop-types"
import styled from 'styled-components'; // import styled from 'styled-components';
import '../DataBase/DummyDBWinLoss.js' // import '../DataBase/DummyDBWinLoss.js'
// import '../DataBase/DataProfileUser.js'
import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js'; import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js';
import '../styles/Win_Loss.css'
// import { UserProfile } from '../DataBase/DataProfileUser.js';
// import color from '../../utils/style/color.js'; // import color from '../../utils/style/color.js';
const CardWrapper = styled.div` // 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;
} // }
` // `
const CardLabel1 = styled.span` // const CardLabel1 = styled.h1`
color: #5843e4; // color: #5843e4;
font-size: 22px; // // font-size: 22px;
font-weight: bold; // font-weight: bold;
margin-bottom: 25px; // margin-bottom: 25px;
` // `
const CardLabel2 = styled.span` // const CardLabel2 = styled.span`
color: #5843e4; // color: #5843e4;
font-size: 22px; // font-size: 22px;
font-weight: bold; // font-weight: bold;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
` // `
// const CardImage = styled.img` // const CardImage = styled.img`
// heigh: 80px; // heigh: 80px;
@ -43,18 +46,23 @@ const CardLabel2 = styled.span`
function WinLoss() { function WinLoss() {
return ( return (
<CardWrapper>
<CardLabel1>Match history Win/Loss</CardLabel1> <div className='tab'>
{/* <CardImage src={picture} alt="freelance" height={80} width={80} /> */} <h1 className='title'>Match history Win/Loss</h1>
{DBWinLoss.map((item, index) => { <div className='scroll'>
return ( {DBWinLoss.map((item, index) => {
<li key={index}> return (
<CardLabel2>{item.title}</CardLabel2> <div className='elements'>
<CardLabel2>{item.score}</CardLabel2> <li key={index}>
</li> <h4 className='content'>{item.title}</h4>
) <h4 className='content'>you {item.score} {item.openent}</h4>
})} {/* <h4 className='content'>{item.openent}</h4> */}
</CardWrapper> </li>
</div>
)
})}
</div>
</div>
) )
} }

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

@ -3,7 +3,10 @@ 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, AnimatePresence } from 'framer-motion'
import { AiFillEdit } from 'react-icons/ai'
import { Link } from "react-router-dom";
import Modal from "../components/Sidebar/Modal";
// 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";
@ -11,10 +14,24 @@ import { motion } from 'framer-motion'
function Profile () { function Profile () {
const [modalOpen, setModalOpen] = useState(false);
const close = () => setModalOpen(false);
const open = () => setModalOpen(true);
return ( return (
<div className="profile"> <div className="profile">
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" /> <img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
<h1>Dipper Ratman</h1> <h1>Dipper Ratman</h1>
{/* <motion.div
> */}
<motion.button to="#" className="edit_name" onClick={() => (modalOpen ? close() : open())}>
<AiFillEdit/>
</motion.button>
{/* </motion.div> */}
<AnimatePresence
initial={false}
onExitComplete={() => null}>
{modalOpen && <Modal modalOpen={modalOpen} handleClose={close}/>}
</AnimatePresence>
</div> </div>
) )
} }
@ -27,7 +44,7 @@ function Home () {
animate={{opacity: 1}} animate={{opacity: 1}}
exit={{opacity: 0}}> exit={{opacity: 0}}>
<div className="home"> <div className="home">
<motion.div animate={{x: move ? -200: 150}} <motion.div animate={{x: move ? -200: 170}}
transition={{type: "tween", duration: 0.5}}> transition={{type: "tween", duration: 0.5}}>
<Profile/> <Profile/>
</motion.div> </motion.div>

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

@ -16,9 +16,9 @@
.home{ .home{
/* margin-top: -100px; */ /* margin-top: -100px; */
display: block; /* display:inline-block; */
/* flex-direction: column; */ /* flex-direction: column; */
/* background-color: black; */ background-color: black;
text-align: center; text-align: center;
} }
@ -32,6 +32,15 @@
/* padding: 8px 8px 8px 8px; */ /* padding: 8px 8px 8px 8px; */
font-size: 30px; font-size: 30px;
text-decoration: none; text-decoration: none;
margin-top: -400px;
}
.edit_name {
margin-left: 2rem;
font-size: 2rem;
background: none;
color:#f5f5f5
} }
/* canvas { /* canvas {
margin-top: 20px; margin-top: 20px;

53
frontend/src/styles/Win_Loss.css Normal file
View File

@ -0,0 +1,53 @@
.tab{
display: flex;
flex-direction: column;
/* background-color: red; */
height: 70vh;
/* padding: 15px; */
/* overflow: scroll; */
}
.scroll {
/* border:3px; */
/* background-color: #5843e4; */
/* border-color: white; */
overflow: scroll;
}
.elements {
border-width:1px;
border-style:solid;
/* background-color: #5843e4; */
border-color: grey;
/* overflow: scroll; */
}
.title {
color: #5843e4;
/* font-size: 22px; */
font-weight: bold;
margin-bottom: 25px;
}
.content {
color: white;
/* font-size: 22px; */
font-weight: bold;
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
div::-webkit-scrollbar {
width: 1;
}
div::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
div::-webkit-scrollbar-thumb {
background-color: black;
outline: 1px solid black;
}