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',
score: '10 - 6',
openent: 'kinou'
},
{
title: 'Defeat',
score: '9 - 10',
openent: 'Flatman'
},
{
title: 'Victory',
score: '10 - 0',
openent: 'fuck dat'
},
{
title: 'Victory',
score: '10 - 9',
openent: 'Eren jeager'
},
{
title: 'Defeat',
score: '3 - 10',
openent: 'justin'
},
{
title: 'Deafet',
title: 'Defeat',
score: '9 - 10',
openent: 'blabla car'
},
{
title: 'Victory',
score: '10 - 9',
openent: 'jean-marie',
},
]

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

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

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

@ -1,39 +1,42 @@
// import PropTypes from "prop-types"
import styled from 'styled-components';
import '../DataBase/DummyDBWinLoss.js'
// import styled from 'styled-components';
// import '../DataBase/DummyDBWinLoss.js'
// import '../DataBase/DataProfileUser.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';
const CardWrapper = styled.div`
display: flex;
flex-direction: column;
padding: 15px;
// background-color: black;
// border-radius: 30px;
// width: 350px;
// transition: 200ms;
// margin-top: 50px;
// &:hover {
// cursor: pointer;
// box-shadow: 2px 2px 10px #b6b6b6;
}
`
// const CardWrapper = styled.div`
// display: flex;
// flex-direction: column;
// padding: 15px;
// background-color: black;
// border-radius: 30px;
// width: 350px;
// transition: 200ms;
// margin-top: 50px;
// &:hover {
// cursor: pointer;
// box-shadow: 2px 2px 10px #b6b6b6;
// }
// `
const CardLabel1 = styled.span`
color: #5843e4;
font-size: 22px;
font-weight: bold;
margin-bottom: 25px;
`
const CardLabel2 = styled.span`
color: #5843e4;
font-size: 22px;
font-weight: bold;
display: flex;
flex-direction: column;
`
// const CardLabel1 = styled.h1`
// color: #5843e4;
// // font-size: 22px;
// font-weight: bold;
// margin-bottom: 25px;
// `
// const CardLabel2 = styled.span`
// color: #5843e4;
// font-size: 22px;
// font-weight: bold;
// display: flex;
// flex-direction: column;
// `
// const CardImage = styled.img`
// heigh: 80px;
@ -43,18 +46,23 @@ const CardLabel2 = styled.span`
function WinLoss() {
return (
<CardWrapper>
<CardLabel1>Match history Win/Loss</CardLabel1>
{/* <CardImage src={picture} alt="freelance" height={80} width={80} /> */}
<div className='tab'>
<h1 className='title'>Match history Win/Loss</h1>
<div className='scroll'>
{DBWinLoss.map((item, index) => {
return (
<div className='elements'>
<li key={index}>
<CardLabel2>{item.title}</CardLabel2>
<CardLabel2>{item.score}</CardLabel2>
<h4 className='content'>{item.title}</h4>
<h4 className='content'>you {item.score} {item.openent}</h4>
{/* <h4 className='content'>{item.openent}</h4> */}
</li>
</div>
)
})}
</CardWrapper>
</div>
</div>
)
}

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

@ -3,7 +3,10 @@ import '../styles/Profile.css'
import '../styles/App.css'
import DefaultPicture from "../assets/profile.jpg";
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 { Link } from "react-router-dom";
// import UserProfile from "../DataBase/DataProfileUser";
@ -11,10 +14,24 @@ import { motion } from 'framer-motion'
function Profile () {
const [modalOpen, setModalOpen] = useState(false);
const close = () => setModalOpen(false);
const open = () => setModalOpen(true);
return (
<div className="profile">
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
<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>
)
}
@ -27,7 +44,7 @@ function Home () {
animate={{opacity: 1}}
exit={{opacity: 0}}>
<div className="home">
<motion.div animate={{x: move ? -200: 150}}
<motion.div animate={{x: move ? -200: 170}}
transition={{type: "tween", duration: 0.5}}>
<Profile/>
</motion.div>

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

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