rank et option de jeu

containers/react/package-lock.json

@@ -22,6 +22,7 @@
         "react-scripts": "5.0.1",
         "socket.io-client": "^4.6.1",
         "styled-components": "^5.3.10",
+        "typescript": "^5.0.4",
         "web-vitals": "^2.1.4"
       }
     },
@@ -20057,16 +20058,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
+      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=12.20"
       }
     },
     "node_modules/unbox-primitive": {

containers/react/package.json

@@ -17,6 +17,7 @@
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.6.1",
     "styled-components": "^5.3.10",
+    "typescript": "^5.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

containers/react/src/DataBase/DataProfileUser.jsx

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

containers/react/src/DataBase/DataRank.js

@@ -0,0 +1,58 @@
+export const Rank = [
+	{
+		rank: '1',
+		name: 'jean',
+	},
+	{
+		rank: '2',
+		name: 'marc',
+	},
+	{
+		rank: '3',
+		name: 'dujardain',
+	},
+	{
+		rank: '4',
+		name: 'mom',
+	},
+	{
+		rank: '5',
+		name: 'fary',
+	},
+	{
+		rank: '6',
+		name: 'aba',
+	},
+	{
+		rank: '7',
+		name: 'preach',
+	},
+	{
+		rank: '1',
+		name: 'jean',
+	},
+	{
+		rank: '2',
+		name: 'marc',
+	},
+	{
+		rank: '3',
+		name: 'dujardain',
+	},
+	{
+		rank: '4',
+		name: 'mom',
+	},
+	{
+		rank: '5',
+		name: 'fary',
+	},
+	{
+		rank: '6',
+		name: 'aba',
+	},
+	{
+		rank: '7',
+		name: 'preach',
+	},
+]

containers/react/src/DataBase/DataUserProfile.js

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

containers/react/src/components/App.jsx

@@ -4,7 +4,7 @@ import HomeLogin from "../pages/Home.js";
 
 import Home from "../pages/Home.jsx";
 
-import PlayButton from "../pages/PlayButton.js";
+import PlayButton from "./Game/PlayButton.js";
 import Field from "../pages/Field";
 import Login42 from "../pages/Login42.js";
 import Messages from "../pages/Messages.jsx";
@@ -15,6 +15,7 @@ import SuccessToken from '../script/tokenSuccess'
 
 
 import DoubleAuth from "../pages/2fa.js";
+import Game from "../pages/Game.jsx";
 
 function AnimatedRoute () {
 	const location = useLocation();
@@ -29,7 +30,7 @@ function AnimatedRoute () {
 
 				<Route exact path="/token" element={<SuccessToken />}/>
 				<Route path="/game" element={<PlayButton />}/>
-				<Route exact path="/pong" element={<PlayButton />}/>
+				<Route exact path="/pong" element={<Game />}/>
 				<Route exact path="/pong/play" element={<Field />}/>
 				{/* <Route path="/profile" element={<PlayButton />}/> */}
 

containers/react/src/components/Game/PlayButton.js

@@ -1,4 +1,4 @@
-import '../styles/field.css';
+import '../../styles/field.css';
 // import { useHistory } from 'react-router-dom';
 import { useNavigate } from "react-router-dom";
 
@@ -15,7 +15,11 @@ function PlayButton() {
 		<div className="notClicked" id="canvas_container">
 			<button onClick={handleButtonClick} className="playButton">Play</button>
 			{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
-
+			<div className='checkbox'>
+				<p><input type="checkbox" value="superpower"/> Super Power </p>
+				<p><input type="checkbox" value="obstacle"/> Obstacle </p>
+				<p><input type="checkbox" value="speed"/> Faster and Faster </p>
+			</div>
 		</div>
 		);
 }

containers/react/src/components/Game/Ranking.jsx

@@ -0,0 +1,27 @@
+import React from "react"
+import {Rank} from '../../DataBase/DataRank.js'
+import defaultpic from '../../assets/profile.jpg'
+
+function Ranking(){
+	return (
+		<div>
+			<h1 className='title'>Ranking</h1>
+            <div className='scroll'>
+                {Rank.map((item, index) => {
+                    return (
+                        <div className='rank_elements'>
+                        <li key={index}>
+                                <div>
+                                    <h4>{item.rank}: {item.name} <img className="profilePic" src={defaultpic}/></h4>
+                                </div>
+                                {/* <h4 className='content'>{item.openent}</h4> */}
+                            </li>
+                        </div>
+                        )
+                    })}
+            </div>
+		</div>
+	)
+}
+
+export default Ranking

containers/react/src/components/Profile/EditName.jsx

@@ -0,0 +1,52 @@
+import {motion} from "framer-motion"
+// import Backdrop from "./Sidebar/Backdrop"
+import {Link} from 'react-router-dom';
+import { UserProfile } from "../../DataBase/DataUserProfile";
+import {useState} from 'react';
+import "../../styles/Profile.css"
+
+const dropIn = {
+	hidden: {
+		opacity: '0',
+	},
+	visible: {
+		opacity: "1",
+	},
+	exit: {
+		opacity: "0",
+	},
+}
+
+// const changeName = ({handleClose, name}) => {
+// 	return (
+// 		UserProfile.UserName = name
+// 	)
+// }
+
+const ModalEdit = ({ handleClose }) => {
+	// let new_name = "";
+	const [username, setUserName] = useState("");
+	const handler = e =>
+	{
+		setUserName (e.target.value);
+	}
+	return (
+		// <Backdrop onClick={handleClose}>
+			<motion.div 
+						className="modal"
+						variants={dropIn}
+						initial="hidden"
+						animate="visible"
+						exit="exit">
+				<h2>Type your new name</h2>
+				<input className="text" type="text" value={username} onChange={handler} handleClose/>
+				<div onClick={() => {UserProfile.UserName = username;}}>
+					<Link className="button">change</Link>
+				</div>
+			</motion.div>
+		// </Backdrop>
+		
+	)
+}
+
+export default ModalEdit

containers/react/src/components/Profile/Win_Loss.jsx

@@ -0,0 +1,77 @@
+// import PropTypes from "prop-types"
+// 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/DataUserProfile';
+// 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 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;
+//     width: 80px;
+//     border-radius: 50%;
+// `
+  
+function WinLoss() {
+    return (
+
+        <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}>
+                                <h4 className='content'>{item.title}</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>
+                        )
+                    })}
+            </div>
+        </div>
+    )
+}
+
+// Card.propTypes = {
+//     label: PropTypes.string,
+//     title: PropTypes.string.isRequired,
+//     picture: PropTypes.string,
+// }
+ 
+export default WinLoss

containers/react/src/components/Sidebar/Modal.jsx

@@ -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>

containers/react/src/components/Win_Loss.jsx

@@ -1,67 +0,0 @@
-// import PropTypes from "prop-types"
-import styled from 'styled-components';
-import '../DataBase/DummyDBWinLoss.js'
-import { DBWinLoss } from '../DataBase/DummyDBWinLoss.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 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 CardImage = styled.img`
-//     heigh: 80px;
-//     width: 80px;
-//     border-radius: 50%;
-// `
-
-function WinLoss() {
-    return (
-        <CardWrapper>
-            <CardLabel1>Match history Win/Loss</CardLabel1>
-            {/* <CardImage src={picture} alt="freelance" height={80} width={80} /> */}
-			{DBWinLoss.map((item, index) => {
-					return (
-						<li key={index}>
-							<CardLabel2>{item.title}</CardLabel2>
-							<CardLabel2>{item.score}</CardLabel2>
-						</li>
-					)
-				})}
-        </CardWrapper>
-    )
-}
-
-// Card.propTypes = {
-//     label: PropTypes.string,
-//     title: PropTypes.string.isRequired,
-//     picture: PropTypes.string,
-// }
- 
-export default WinLoss

containers/react/src/pages/Game.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import PlayButton from "../components/Game/PlayButton";
+import Ranking from "../components/Game/Ranking";
+import '../styles/Game.css'
+
+function Game(){
+	return (
+		<div className="game">
+			<div className="game">
+				<Ranking/>
+			</div>
+			<div className="game">
+				<PlayButton/>
+			</div>
+		</div>
+	)
+}
+export default Game

containers/react/src/pages/Home.jsx

@@ -1,32 +1,62 @@
-import React from "react";
+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 WinLoss from "../components/Profile/Win_Loss";
-import { motion } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
-// import {AiOutlineHistory} from 'react-icons/ai'
+import { AiFillEdit } from 'react-icons/ai'
 import { Link } from "react-router-dom";
-import UserProfile from "../DataBase/DataProfileUser";
+import ModalEdit from "../components/Profile/EditName";
+import {AiOutlineHistory} from 'react-icons/ai'
+// import { Link } from "react-router-dom";
+import {UserProfile} from "../DataBase/DataUserProfile";
 
 
 
+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>{UserProfile.UserName}</h1>
+				<motion.div  onClick={() => (modalOpen ? close() : open())}>
+					<Link to="#" className="edit_name">
+						<AiFillEdit/>
+					</Link>
+				</motion.div>
+			<AnimatePresence
+			initial={false}
+			onExitComplete={() => null}>
+				{modalOpen && <ModalEdit modalOpen={modalOpen} handleClose={close}/>}
+			</AnimatePresence>
+		</div>
+	)
+}
+
 function Home () {
-	let name = UserProfile.UserName
+	const [move, setmove ] = useState(false);
     return (
-		<motion.div className="App"
+		<motion.div className="page"
 		initial={{opacity: 0}}
 		animate={{opacity: 1}}
 		exit={{opacity: 0}}>
-			<div className="profile">
+		<div className="home">
-				<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
+			<motion.div animate={{x: move ? -200: 170}}
-				<h1>Dipper Ratman</h1>
+				transition={{type: "tween", duration: 0.5}}>
-
+					<Profile/>
-				<div>
+			</motion.div>
-					<div className="history">
+			<motion.div animate={{opacity: !move ? 0 : 1}}>
-						<Link to='#' className=" history">Match history</Link>
+				<WinLoss/>
-					</div>
+			</motion.div>
-				</div>
 			</div>
+			<motion.div
+				className="div_history"
+			// className="history"
+				onClick={ () => setmove(!move)}>
+					<Link to="#" className="history"><AiOutlineHistory/>  Match History</Link>
+			</motion.div>
 		</motion.div>
     )
 }

containers/react/src/styles/App.css

@@ -1,5 +1,7 @@
 .App {
   text-align: center;
+	height: 100%;
+  width: 100%;
   background-color: black;
 }
 

containers/react/src/styles/Game.css

@@ -0,0 +1,28 @@
+.game{
+	display:inline-flex;
+	margin: 50px;
+}
+
+.rank_elements {
+	border-width:1px;
+	border-style:solid;
+	/* background-color: #5843e4; */
+	border-color: grey;
+	/* overflow: scroll; */
+	padding: 5px 100px;
+	font-size: 25px;
+}
+
+.scroll {
+	/* border:3px; */
+	/* background-color: #5843e4; */
+	/* border-color: white; */
+	overflow: scroll;
+	height: 70vh;
+}
+
+.profilePic{
+	height: 30px;
+	width: 30px;
+	border-radius: 50%;
+}

containers/react/src/styles/Header.css

@@ -41,6 +41,7 @@
 	/* justify-content: start; */
 	align-items:  center;
 	padding: 8px 0px 8px 16px;
+
 	list-style: none;
 	height: 60px;
 }
@@ -53,8 +54,10 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: 0 16px;
+	/* padding: 0 16px; */
-	border-radius: 4px;
+	padding: 8px 8px 8px 8px;
+
+	border-radius: 20px;
 }
 
 .nav-text a:hover {

containers/react/src/styles/Profile.css

@@ -1,6 +1,12 @@
+.page {
+	text-align: center;
+	/* height: 50vh; */
+	/* width: 50vh; */
+	/* background-color: black; */
+}
+
 .profile {
 	flex-direction: row;
-	height: 100vh;
 	color: white;
 }
 
@@ -15,14 +21,73 @@
 	margin-top: 20px;
 }
 
+.home{
+	/* margin-top: -100px; */
+	/* display:inline-block; */
+	/* flex-direction: column; */
+	/* position: absolute; */
+	background-color: black;
+	text-align: center;
+
+}
 
 .history{
+	display: inline-block;
 	color: white;
 	background-color:  #5843e4;
-	border-radius: 4px;
+	border-radius: 20px;
-	padding: 8px 8px 8px 8px;
+	padding: 14px;
-	font-size: 30px;
+	font-size: 1.7rem;
 	text-decoration: none;
+	font-weight: bold;
+}
+
+.div_history {
+	flex-direction: row;
+	align-items: center;
+	margin-top: -80px;
+}
+
+.edit_name {
+	margin-left: 2rem;
+	font-size: 1.7rem;
+	background: #5843e4;
+	color:#f5f5f5;
+	margin: 0 16px;
+	text-decoration: none;
+	padding: 10px 16px;
+	border-radius: 20px;
+}
+
+.modal {
+	position:initial;
+	width: 400px;
+	height: 150px;
+
+	margin: auto;
+	padding: 0 2rem;
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: rgb(42, 41, 41);
+}
+
+.text {
+	background-color: black;
+	color: grey;
+	margin-bottom: 10px;
+}
+
+.button{
+	display: inline-block;
+	color: white;
+	background-color:  #5843e4;
+	border-radius: 15px;
+	padding: 8px;
+	font-size: 20px;
+	text-decoration: none;
+	font-weight: bold;
 }
 /* canvas {
 	margin-top: 20px;

containers/react/src/styles/Win_Loss.css

@@ -0,0 +1,75 @@
+.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;
+}
+
+.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;
+}
+   
+div::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+   
+div::-webkit-scrollbar-thumb {
+	background-color: red;
+	outline: 3px solid black;
+}

containers/react/src/styles/field.css

@@ -1,5 +1,5 @@
 .playButton {
-	background-color: rgb(0, 0, 0);
+	background-image: linear-gradient(90deg, #5843e4, #5a0760);;
 	border-radius: 5vh;
 	color: white;
 	display: block;
@@ -34,8 +34,8 @@
 	top: 0;
 	left: 0;
 	cursor: none;
-	width: 100%;
+	/* width: 100%; */
-	height: 100%;
+	height: 100vh;
 }
 
 @media screen and (max-width: 768px) {
@@ -52,3 +52,37 @@
 	  width: 100%;
 	} */
   }
+
+  .checkbox{
+	font-size: 25px;
+	left: 1px;
+  }
+
+
+  input[type=checkbox] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+}
+
+input[type=checkbox] {
+    border-radius: 4px;
+    height: 25px;
+    width: 25px;
+    background: grey;
+    /* border: 1px solid #ccc; */
+}
+
+  input[type="checkbox"]:checked {
+	background: #5843e4;
+	margin:0px;
+	/* position: relative; */
+	&:before {
+	  font-family: FontAwesome;
+	  /* content: '\f00c'; */
+	  display: block;
+	  color: grey;
+	  font-size: 40px;
+	  /* position: absolute; */
+	}
+  }