warning sidebar fixed warning Win_Loss fixed modif bouton edit_name
This commit is contained in:
PrStein
parent
a7d2917f91
commit
37e500f9d8
15026
containers/react/package-lock.json
generated
15026
containers/react/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
"react-scripts": "5.0.1",
|
||||
"socket.io-client": "^4.6.1",
|
||||
"styled-components": "^5.3.10",
|
||||
"typescript": "^5.0.4",
|
||||
"typescript": "^3.2.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -2,29 +2,36 @@ export const DBWinLoss = [
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 6',
|
||||
opponent: 'chef bandit'
|
||||
},
|
||||
{
|
||||
title: 'Defeat',
|
||||
score: '9 - 10',
|
||||
opponent: 'ex tueur'
|
||||
},
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 0',
|
||||
opponent: 'tueur'
|
||||
},
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 9',
|
||||
opponent: 'boulanger'
|
||||
},
|
||||
{
|
||||
title: 'Defeat',
|
||||
score: '3 - 10',
|
||||
opponent: 'charcutier'
|
||||
},
|
||||
{
|
||||
title: 'Deafet',
|
||||
score: '9 - 10',
|
||||
opponent: 'preach'
|
||||
},
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 9',
|
||||
opponent: 'aba'
|
||||
},
|
||||
]
|
||||
@ -16,6 +16,7 @@ import SuccessToken from '../script/tokenSuccess'
|
||||
|
||||
import DoubleAuth from "../pages/2fa.js";
|
||||
import Game from "../pages/Game.jsx";
|
||||
import Social from "../pages/Social.jsx";
|
||||
|
||||
function AnimatedRoute () {
|
||||
const location = useLocation();
|
||||
@ -27,6 +28,7 @@ function AnimatedRoute () {
|
||||
<Route exact path="/profile" element={<Home/>}/>
|
||||
|
||||
<Route exact path="/2fa" element={<DoubleAuth/>}/>
|
||||
<Route exact path="/Social" element={<Social/>}/>
|
||||
|
||||
<Route exact path="/token" element={<SuccessToken />}/>
|
||||
<Route path="/game" element={<PlayButton />}/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {motion} from "framer-motion"
|
||||
// import Backdrop from "./Sidebar/Backdrop"
|
||||
// import Backdrop from "../Sidebar/Backdrop"
|
||||
import {Link} from 'react-router-dom';
|
||||
import { UserProfile } from "../../DataBase/DataUserProfile";
|
||||
import {useState} from 'react';
|
||||
@ -30,6 +30,7 @@ const ModalEdit = ({ handleClose }) => {
|
||||
{
|
||||
setUserName (e.target.value);
|
||||
}
|
||||
void(handleClose);
|
||||
return (
|
||||
// <Backdrop onClick={handleClose}>
|
||||
<motion.div
|
||||
@ -40,9 +41,11 @@ const ModalEdit = ({ handleClose }) => {
|
||||
exit="exit">
|
||||
<h2>Type your new name</h2>
|
||||
<input className="text" type="text" value={username} onChange={handler} handleClose/>
|
||||
<div onClick={handleClose}>
|
||||
<div onClick={() => {UserProfile.UserName = username;}}>
|
||||
<Link className="button">change</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
// </Backdrop>
|
||||
|
||||
|
||||
@ -52,11 +52,11 @@ function WinLoss() {
|
||||
<div className='scroll'>
|
||||
{DBWinLoss.map((item, index) => {
|
||||
return (
|
||||
<div className='elements'>
|
||||
<div key={index} className='elements'>
|
||||
<li key={index}>
|
||||
<h4 className='content'>{item.title}</h4>
|
||||
<div className='content2nd'>
|
||||
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score} {item.openent}</h4>
|
||||
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score}</h4> <h4 className="opponent">{item.opponent}</h4>
|
||||
</div>
|
||||
{/* <h4 className='content'>{item.openent}</h4> */}
|
||||
</li>
|
||||
|
||||
@ -5,9 +5,9 @@ const Backdrop = ({ children, onClick }) => {
|
||||
return (
|
||||
<motion.div className="backdrop"
|
||||
onClick={onClick}
|
||||
initial={{ opacity: 0}}
|
||||
initial={{ opacity: -1}}
|
||||
animate={{ opacity: 1}}
|
||||
exit={{ opacity: 0}}>
|
||||
exit={{ opacity: -1}}>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
|
||||
@ -58,8 +58,7 @@ const Modal = ({ handleClose }) => {
|
||||
<ul className='nav-menu-items'>
|
||||
{SidebarData.map((item, index) => {
|
||||
return (
|
||||
<motion.div whileHover={{scale: 1.1}}
|
||||
className>
|
||||
<motion.div key={index} whileHover={{scale: 1.1}}>
|
||||
<li key={index} className={item.cName}>
|
||||
<Link to={item.path}>
|
||||
{item.icon}
|
||||
|
||||
@ -27,7 +27,7 @@ export const SidebarData = [
|
||||
},
|
||||
{
|
||||
title: 'Social',
|
||||
path: '/team',
|
||||
path: '/social',
|
||||
icon: <IoIcons.IoMdPeople />,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
|
||||
@ -4,26 +4,54 @@ import '../styles/Profile.css'
|
||||
import DefaultPicture from "../assets/profile.jpg";
|
||||
import WinLoss from "../components/Profile/Win_Loss";
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { AiFillEdit } from 'react-icons/ai'
|
||||
// import { AiFillEdit } from 'react-icons/ai'
|
||||
// import { GrClose } from 'react-icons/gr'
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalEdit from "../components/Profile/EditName";
|
||||
import {AiOutlineHistory} from 'react-icons/ai'
|
||||
// import { Link } from "react-router-dom";
|
||||
import {UserProfile} from "../DataBase/DataUserProfile";
|
||||
// import axios from "axios";
|
||||
import api from '../script/axiosApi';
|
||||
import { CgEditMarkup } from 'react-icons/cg'
|
||||
import { IoCloseCircleOutline } from "react-icons/io5";
|
||||
|
||||
|
||||
// axios.get("http://localhost/api")
|
||||
// .then((response) => {
|
||||
// response = response.json()
|
||||
// response.then((result) => {
|
||||
// console.log(result)
|
||||
// console.log("ceci est un test")
|
||||
// })
|
||||
// })
|
||||
|
||||
|
||||
function Profile () {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const close = () => setModalOpen(false);
|
||||
const open = () => setModalOpen(true);
|
||||
|
||||
const getConv = async ()=>{
|
||||
try{
|
||||
const convs = await api.get("/profile")
|
||||
// const tmpUser = await api.get("/profile")
|
||||
console.log(convs.data);
|
||||
// setUser(tmpUser);
|
||||
// setConversation(convs.data);
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
getConv();
|
||||
};
|
||||
return (
|
||||
<div className="profile">
|
||||
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
|
||||
<h1>{UserProfile.UserName}</h1>
|
||||
<motion.div onClick={() => (modalOpen ? close() : open())}>
|
||||
<Link to="#" className="edit_name">
|
||||
<AiFillEdit/>
|
||||
{modalOpen === true ? <IoCloseCircleOutline/> : <CgEditMarkup/>}
|
||||
</Link>
|
||||
</motion.div>
|
||||
<AnimatePresence
|
||||
@ -39,15 +67,15 @@ function Home () {
|
||||
const [move, setmove ] = useState(false);
|
||||
return (
|
||||
<motion.div className="page"
|
||||
initial={{opacity: 0}}
|
||||
initial={{opacity: -1}}
|
||||
animate={{opacity: 1}}
|
||||
exit={{opacity: 0}}>
|
||||
exit={{opacity: -1}}>
|
||||
<div className="home">
|
||||
<motion.div animate={{x: move ? -200: 170}}
|
||||
transition={{type: "tween", duration: 0.5}}>
|
||||
<Profile/>
|
||||
</motion.div>
|
||||
<motion.div animate={{opacity: !move ? 0 : 1}}>
|
||||
<motion.div animate={{opacity: !move ? -1 : 1}}>
|
||||
<WinLoss/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
9
containers/react/src/pages/Social.jsx
Normal file
9
containers/react/src/pages/Social.jsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
function Social (){
|
||||
return (
|
||||
<div>je suis la partie social</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Social
|
||||
@ -1,6 +1,6 @@
|
||||
.tab{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* display: flex; */
|
||||
/* flex-direction: column; */
|
||||
/* background-color: red; */
|
||||
height: 70vh;
|
||||
/* padding: 15px; */
|
||||
@ -16,6 +16,7 @@
|
||||
}
|
||||
|
||||
.elements {
|
||||
/* display: flex; */
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
/* background-color: #5843e4; */
|
||||
@ -34,31 +35,34 @@
|
||||
color: white;
|
||||
/* font-size: 22px; */
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
/* display: flex; */
|
||||
flex-direction: column;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content2nd {
|
||||
display:inline;
|
||||
flex-direction: row;
|
||||
color: white;
|
||||
/* font-size: 22px; */
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: justify;
|
||||
/* text-align: justify; */
|
||||
/* margin-bottom: 5px; */
|
||||
}
|
||||
|
||||
.me {
|
||||
text-align: start;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.score {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.oponent {
|
||||
align-items: flex-end;
|
||||
.opponent {
|
||||
text-align: end;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
div::-webkit-scrollbar {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user