nouveau front

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.3.5",
+        "framer-motion": "^10.12.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
@@ -8467,6 +8468,49 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.12.8",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.8.tgz",
+      "integrity": "sha512-ylobYq3tGFjjAmRdBs5pL/R1+4AmOm69g/JbF5DcNETfRe8L9CjaX4acG83MjYdIsbsTGJmtR5qKx4glNmXO4A==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/framer-motion/node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",

frontend/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.5",
+    "framer-motion": "^10.12.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",

frontend/src/DataBase/DataProfileUser.jsx

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

frontend/src/DataBase/DummyDBWinLoss.js

@@ -0,0 +1,30 @@
+export const DBWinLoss = [
+	{
+		title: 'Victory',
+		score: '10 - 6',
+	},
+	{
+		title: 'Defeat',
+		score: '9 - 10',
+	},
+	{
+		title: 'Victory',
+		score: '10 - 0',
+	},
+	{
+		title: 'Victory',
+		score: '10 - 9',
+	},
+	{
+		title: 'Defeat',
+		score: '3 - 10',
+	},
+	{
+		title: 'Deafet',
+		score: '9 - 10',
+	},
+	{
+		title: 'Victory',
+		score: '10 - 9',
+	},
+]

frontend/src/components/AnimatedRoute.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {Routes, Route} from 'react-router-dom';
+import Home from "../pages/Home.jsx";
+import PlayButton from "../pages/PlayButton.js";
+import Field from "../pages/Field";
+import Login42 from "../pages/Login42.js";
+import Messages from "../pages/Messages.jsx";
+import { useLocation } from "react-router-dom";
+import {AnimatePresence} from "framer-motion";
+
+function AnimatedRoute () {
+	const location = useLocation();
+	return (
+		<AnimatePresence>
+			<Routes location={location} key={location.pathname}>
+				<Route exact path="/" element={<Home/>}/>
+				<Route path="/game" element={<PlayButton />}/>
+				<Route exact path="/pong/play" element={<Field />}/>
+				<Route exact path="/login42" element={<Login42 />}/>
+				<Route exact path="/messages" element={<Messages />}/>
+			</Routes>
+		</AnimatePresence>
+	)
+}
+
+export default AnimatedRoute

frontend/src/components/Footer.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+// import './Header.scss';
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <p>&copy; 2023 Paris France</p>
+    </footer>
+  );
+}
+
+export default Footer;

frontend/src/components/Header.jsx

@@ -0,0 +1,90 @@
+import React,  {useState} from 'react';
+import {AiOutlineMenuUnfold} from 'react-icons/ai';
+// import * as AiIcons from 'react-icons/ai';
+import {Link} from 'react-router-dom';
+// import { SidebarData } from './Sidebar/SidebarData';
+import DefaultPicture from '../assets/profile.jpg'
+import { motion, AnimatePresence } from 'framer-motion'
+import Modal from './Sidebar/Modal';
+// import {BiLogOutCircle} from 'react-icons/bi';
+// import AnimatePresence from 
+import '../styles/Header.css';
+
+
+
+function Header() {
+	// const [sidebar, setSidebar] = useState(false);
+	// const showSidebar = () => setSidebar(!sidebar);
+	const [modalOpen, setModalOpen] = useState(false);
+	const close = () => setModalOpen(false);
+	const open = () => setModalOpen(true);
+
+  return (
+	<div className='Header'>
+		{/* <div className='Header'>
+		<Link to="#" className='menu-bars'>
+		<motion.div>
+
+			onClick={() => (modalOpen ? close() : open())}>
+				<AiOutlineMenuUnfold/>
+		</motion.div>
+		</Link>
+		<div className='end'>
+			<Link to="/" className='menu-bars'>
+				<img className='Header-pic' src={DefaultPicture} alt='profile'/>
+			</Link>
+			</div> */}
+			{/* <Link to="#" className='menu-bars'>
+				<AiOutlineMenuUnfold onClick={showSidebar}/>
+			</Link>
+			<div className='end'>
+			<Link to="/" className='menu-bars'>
+				<img className='Header-pic' src={DefaultPicture} alt='profile'/>
+			</Link>
+			</div> */}
+		{/* </div> */}
+
+		{/* <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
+			<ul  className='nav-menu-items' onClick={showSidebar}>
+				<li className='Header-toggle'>
+					<Link to="#" className='menu-bars'>
+						<AiIcons.AiOutlineClose />
+					</Link>
+				</li>
+				{SidebarData.map((item, index) => {
+					return (
+						<motion.div
+							whileHover={{scale: 1.1}}>
+						<li key={index} className={item.cName}>
+							<Link to={item.path}>
+								{item.icon}
+								<span>{item.title}</span>
+							</Link>
+						</li>
+					</motion.div>
+					)
+				})}
+			</ul>
+		</nav> */}
+
+		<motion.div
+				onClick={() => (modalOpen ? close() : open())}>
+				<Link to="#" className='menu-bars'>
+					<AiOutlineMenuUnfold/>
+				</Link>
+		</motion.div>
+		<div className='end'>
+			<Link to="/" className='menu-bars'>
+				<img className='Header-pic' src={DefaultPicture} alt='profile'/>
+			</Link>
+			</div>
+			<AnimatePresence
+			initial={false}
+			onExitComplete={() => null}>
+				{modalOpen && <Modal modalOpen={modalOpen} handleClose={close}/>}
+			</AnimatePresence>
+	</div>
+  );
+}
+
+export default Header

frontend/src/components/Messages/Input.jsx

@@ -1,5 +1,5 @@
 import { TbSend } from 'react-icons/tb';
-import '../../styles/Messages.css'
+
 
 function Input(){
 	return (

frontend/src/components/Messages/MessageMe.jsx

@@ -5,7 +5,7 @@ import { useRef } from "react";
 import { useEffect } from "react";
 import '../../styles/Messages.css'
 
-const MestylesP = styled.p`
+const MeStyleP = styled.p`
 	background-color: lightgray;
 	padding 10px 20px;
 	border-radius 10px 0px 10px 10px;
@@ -25,7 +25,7 @@ function MessageMe(){
 				<img className="messageInfo" src={DefaultPic} alt="profile" />
 			</div>
 			<div className="messageContent">
-				<MestylesP>bonjours ca va</MestylesP>
+				<MeStyleP>bonjours ca va</MeStyleP>
 			</div>
 		</div>
 	)

frontend/src/components/Messages/MessageYou.jsx

@@ -5,7 +5,7 @@ import { useRef } from "react"
 import { useEffect } from "react"
 import '../../styles/Messages.css'
 
-const StylesP = styled.p`
+const StyleP = styled.p`
 	background-color: white;
 	padding 10px 20px;
 	border-radius 0px 10px 10px 10px;
@@ -25,7 +25,7 @@ function MessageYou(){
 				<img className="messageInfo" src={DefaultPic} alt="profile" />
 			</div>
 			<div className="messageContent">
-				<StylesP>bonjours ca va</StylesP>
+				<StyleP>bonjours ca va</StyleP>
 			</div>
 		</div>
 	)

frontend/src/components/Sidebar/Backdrop.jsx

@@ -0,0 +1,16 @@
+import { motion } from "framer-motion"
+import "../../styles/Header.css"
+
+const Backdrop = ({ children, onClick }) => {
+	return (
+		<motion.div className="backdrop"
+					onClick={onClick}
+					initial={{ opacity: 0}}
+					animate={{ opacity: 1}}
+					exit={{ opacity: 0}}>
+			{children}
+		</motion.div>
+	)
+}
+
+export default Backdrop

frontend/src/components/Sidebar/Modal.jsx

@@ -0,0 +1,76 @@
+import {motion} from "framer-motion"
+import Backdrop from "./Backdrop"
+import { SidebarData } from "./SidebarData"
+import {Link} from 'react-router-dom';
+import * as AiIcons from 'react-icons/ai';
+
+
+import "../../styles/Header.css"
+
+const dropIn = {
+	hidden: {
+		x: "-100vh",
+	},
+	visible: {
+		x: "0",
+	},
+	exit: {
+		x: "-100vh",
+	},
+}
+
+
+// function showBar (){
+// 	return (
+// 		 {SidebarData.map((item, index) => {	
+// 					 return (	
+// 					<motion.div
+// 					className="nav-menu"
+// 					// whileHover={{scale: 1.1}}
+// 					>
+// 				 <li key={index} className={item.cName}>	
+// 					 <Link to={item.path}>	
+// 						 {item.icon}	
+// 						 <span>{item.title}</span>	
+// 					 </Link>	
+// 				 </li>	
+// 			</motion.div>
+// 			 )
+// 		 })}	
+// 	)
+// }
+const Modal = ({ handleClose }) => {
+	return (
+		<Backdrop onClick={handleClose}>
+			<motion.div 
+						className="nav-menu"
+						variants={dropIn}
+						initial="hidden"
+						animate="visible"
+						exit="exit">
+							<li className='Header-toggle'>
+					<Link to="#" className='menu-bars'>
+						<AiIcons.AiOutlineClose />
+					</Link>
+				</li>
+				<div
+					className="nav-menu">
+			{SidebarData.map((item, index) => {
+					return (
+					<motion.div   whileHover={{scale: 1.1}}>
+						<li key={index} className={item.cName}>
+							<Link to={item.path}>
+								{item.icon}
+								<span>{item.title}</span>
+							</Link>
+						</li>
+						</motion.div>
+					)
+				})}
+					</div>
+			</motion.div>
+		</Backdrop>
+	)
+}
+
+export default Modal

frontend/src/components/Sidebar/SidebarData.js

@@ -0,0 +1,46 @@
+import React from "react";
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import * as IoIcons from 'react-icons/io';
+import {BiLogOutCircle} from 'react-icons/bi';
+import {IoSettingsSharp} from 'react-icons/io5'
+
+
+export const SidebarData = [
+	{
+		title: 'Dipper Ratman',
+		path: '/',
+		icon: <AiIcons.AiFillHome />,
+		cName: 'nav-text'
+	},
+	{
+		title: 'Game',
+		path: '/game',
+		icon: <FaIcons.FaGamepad/>,
+		cName: 'nav-text'
+	},
+	{
+		title: 'Messages',
+		path: '/messages',
+		icon: <FaIcons.FaEnvelopeOpenText/>,
+		cName: 'nav-text'
+	},
+	{
+		title: 'Social',
+		path: '/team',
+		icon: <IoIcons.IoMdPeople />,
+		cName: 'nav-text'
+	},
+	{
+		title: 'Settings',
+		path: '/team',
+		icon: <IoSettingsSharp />,
+		cName: 'nav-text'
+	},
+	{
+		title: 'Log out',
+		path: '/team',
+		icon: <BiLogOutCircle />,
+		cName: 'nav-text'
+	},
+]

frontend/src/components/Win_Loss.jsx

@@ -0,0 +1,67 @@
+// 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

frontend/src/index.js

@@ -2,32 +2,29 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import './styles/index.css';
-import App from './components/App';
+// import App from './components/App';
+// import Header from './pages/Header';
 import Header from './components/Header';
-import Home from './components/Home';
+// import Home from './pages/Home.jsx';
-import Login42 from './components/Login42';
+// import Login42 from './pages/Login42';
-import Head from './components/Head';
+import Head from './pages/Head';
-import Field from './components/Field';
+// import Field from './pages/Field';
-import PlayButton from './components/PlayButton';
+// import PlayButton from './pages/PlayButton';
 import reportWebVitals from './reportWebVitals';
-import Messages from './components/Messages';
+// import Messages from './pages/Messages';
-import { BrowserRouter, Route, Routes} from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom';
+import AnimatedRoute from './components/AnimatedRoute';
+import './styles/App.css'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <>
+  <div className='App'>
 	<Head />
-	<Header />
 	<BrowserRouter>
-    	<Routes>
+	<Header />
-			<Route exact path="/" element={<Home/>}/>
+    	<AnimatedRoute/>
-			<Route exact path="/pong" element={<PlayButton />}/>
-			<Route exact path="/pong/play" element={<Field />}/>
-			<Route exact path="/login42" element={<Login42 />}/>
-			<Route exact path="/messages" element={<Messages />}/>
-    	</Routes>
   	</BrowserRouter>
-  </>
+  </div>
 );
 
 // If you want to start measuring performance in your app, pass a function

frontend/src/pages/Field.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useState, useRef } from 'react';
+// import { useState, useRef } from 'react';
 import { drawCanvas } from './canvas.js';
 import '../styles/field.css';
 

frontend/src/pages/Home.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+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 {AiOutlineHistory} from 'react-icons/ai'
+import { Link } from "react-router-dom";
+import UserProfile from "../DataBase/DataProfileUser";
+
+
+
+function Home () {
+	let name = UserProfile.UserName
+    return (
+		<motion.div className="App"
+		initial={{opacity: 0}}
+		animate={{opacity: 1}}
+		exit={{opacity: 0}}>
+			<div className="profile">
+				<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
+				<h1>Dipper Ratman</h1>
+
+				<div>
+					<div className="history">
+						<Link to='#' className=" history">Match history</Link>
+					</div>
+				</div>
+			</div>
+		</motion.div>
+    )
+}
+
+export default Home

frontend/src/pages/Messages.jsx

@@ -1,35 +1,43 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import Sidebar from '../components/Messages/Sidebar'
 import Chat from "../components/Messages/Chat"
 import '../styles/Messages.css'
-import {io} from 'socket.io-client'
+import { motion } from 'framer-motion'
+
+// import {io} from 'socket.io-client'
 
 function Messages(params) {
-	const socket = useRef(io("ws://localhost:8900"))
+	// const socket = useRef(io("ws://localhost:8900"))
 
 	// useEffect(() => {
 	// 	setSocket(io("ws://localhost:8900"))
 	// }, [])
+	// const socket = socketIO.connect('http://localhost:4000');
 
-	console.log(socket)
+	// axios.get('http://localhost/api/user/id')
+	// 	.then(function());
+
+	// console.log(socket)
 	// useEffect(() => {
 	// 	socket.current.emit("addUser", user._id);
 		// socket.current.on("getUsers", users=>{
 		// 	console.log(users)
 		// })
 	// }, [user])
-
 	return (
 		<>
 		{/* <div>
 			<h1>Welcome to the messages page</h1>
 		</div> */}
-		<div className="home">
+		<motion.div className="home"
+		initial={{opacity: 0}}
+		animate={{opacity: 1}}
+		exit={{opacity: 0}}>
 			<div className="container">
 				<Sidebar/>
 				<Chat/>
 			</div>
-		</div>
+		</motion.div>
 		</>
 	);
 }

frontend/src/pages/canvas.js

@@ -1,6 +1,6 @@
 // import io from 'socket.io-client';
 
-import { useEffect } from 'react';
+// import { useEffect } from 'react';
 import io from 'socket.io-client';
 // const socket = io('http://192.168.1.14:4000');
 // const socket = io('http://86.209.110.20:4000');
@@ -24,7 +24,7 @@ export function drawCanvas() {
 	let gameId = 0;
 
 	//general canvas
-	const scale = window.devicePixelRatio; 
+	// const scale = window.devicePixelRatio; 
 	canvas.width = canvas.offsetWidth;
 	canvas.height = canvas.offsetHeight;
 	

frontend/src/styles/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: black;
 }
 
 .App-logo {

frontend/src/styles/Header.css

@@ -0,0 +1,116 @@
+.Header {
+	background-image: linear-gradient(90deg, #5843e4, #5a0760);
+	/* background-color: blue; */
+
+	height: 80px;
+	display: flex;
+	/* justify-content: start; */
+	align-items: center;
+}
+
+.menu-bars {
+	margin-left: 2rem;
+	font-size: 2rem;
+	background: none;
+	color:#f5f5f5
+}
+
+.nav-menu{
+	background-color: #060b26;
+	width: 250px;
+	height: 100vh;
+	display: grid;
+	justify-content: center;
+	position: fixed;
+	top: 0; 
+	left: 0;
+	transition: 350ms;
+	/* margin-top: 10px; */
+
+	/* left: -100%; */
+	/* transition: 850ms; */
+}
+
+.nav-menu.active {
+	left: 0;
+	transition: 350ms;
+}
+
+.nav-text {
+	display: flex;
+	/* justify-content: start; */
+	align-items:  center;
+	padding: 8px 0px 8px 16px;
+	list-style: none;
+	height: 60px;
+}
+
+.nav-text a {
+	text-decoration: none;
+	color: #f5f5f5;
+	font-size: 18px;
+	width: 95%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding: 0 16px;
+	border-radius: 4px;
+}
+
+.nav-text a:hover {
+	background-color: #5843e4;
+}
+
+.nav-menu-items {
+	width: 100%;
+}
+
+.Header-toggle {
+	background-color: #060b26;
+	width: 100%;
+	height: 80px;
+	display: flex;
+	/* justify-content: start; */
+	align-items: center;
+}
+
+span {
+	margin-left: 16px;
+}
+
+.Header-pic {
+	height: 50px;
+	width: 50px;
+	border: solid;
+	border-color: black;
+	border-radius: 50%;
+}
+
+.header-pic{
+	text-align: end;
+	/* id: right; */
+}
+
+.footer {
+	height: 0.1px;
+	color: #060b26;
+}
+
+.end{
+	display: flex;
+	justify-content: flex-end;
+	margin-right: 2rem;
+}
+
+.backdrop{
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	/* background: #000000e1; */
+	backdrop-filter: blur(1.5rem);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

frontend/src/styles/Messages.css

@@ -1,6 +1,6 @@
 .home{
 	background-color: black;
-	height: 100vh;
+	height: 90vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -8,7 +8,6 @@
 }
 
 .container{
-	/* border: thick; */
 	border-color: #FFFFFF ;
 	border-radius: 50%;
 	width: 65%;
@@ -39,7 +38,6 @@
 	background-color: #000c66;
 	color: white;
 	padding: 3px;
-	/* margin-bottom: 30px; */
 }
 
 .pic{
@@ -49,7 +47,6 @@
 	margin-top: 10px;
 	margin-left: 10px;
 	margin-right: 10px;
-
 }
 
 .end{
@@ -79,7 +76,6 @@
 	background-color: white;
 	color:#060b26;
 	border: none;
-
 }
 
 input{
@@ -115,19 +111,6 @@ input{
 	gap: 10px;
 }
 
-/* .meMessageInfo{
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-}
-
-.meMessageContent{
-	display: flex;
-	flex-direction: row-reverse;
-	max-width: 80%;
-	gap: 10px;
-} */
-
 .meMessage{
 	display: flex;
 	flex-direction: row-reverse;

frontend/src/styles/Profile.css

@@ -0,0 +1,32 @@
+.profile {
+	flex-direction: row;
+	height: 100vh;
+	color: white;
+}
+
+.profile-pic {
+	height: 350px;
+	width: 350px;
+	border-radius: 50%;
+	border: thick;
+	border-color: red;
+	/* border-image: linear-gradient(90deg, #5843e4, #5a0760); */
+
+	margin-top: 20px;
+}
+
+
+.history{
+	color: white;
+	background-color:  #5843e4;
+	border-radius: 4px;
+	padding: 8px 8px 8px 8px;
+	font-size: 30px;
+	text-decoration: none;
+}
+/* canvas {
+	margin-top: 20px;
+    border: solid 0px #ccc;
+    background-color: #000;
+	border-radius: 3%;
+} */

frontend/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) {