diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a40ebae0..ecd28f6c 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 8f1034ba..42dcab20 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/DataBase/DataProfileUser.jsx b/frontend/src/DataBase/DataProfileUser.jsx
new file mode 100644
index 00000000..5c19e67c
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/frontend/src/DataBase/DummyDBWinLoss.js b/frontend/src/DataBase/DummyDBWinLoss.js
new file mode 100644
index 00000000..a44b6410
--- /dev/null
+++ b/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',
+ },
+]
\ No newline at end of file
diff --git a/frontend/src/components/AnimatedRoute.jsx b/frontend/src/components/AnimatedRoute.jsx
new file mode 100644
index 00000000..5a11edb1
--- /dev/null
+++ b/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 (
+
+
+ }/>
+
+
+ )
+}
+
+export default AnimatedRoute
\ No newline at end of file
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
new file mode 100644
index 00000000..73f4fbb0
--- /dev/null
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+// import './Header.scss';
+
+function Footer() {
+ return (
+
+ );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
new file mode 100644
index 00000000..3c9370ca
--- /dev/null
+++ b/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 (
+
+ {/*
+
+
+
+ onClick={() => (modalOpen ? close() : open())}>
+
+
+
+
+
+
+
*/}
+ {/*
+
+
+
+
+
+
+
*/}
+
+ {/*
+
+
+
+ {SidebarData.map((item, index) => {
+ return (
+
+
+ {item.title}
+
+
+
+ )
+ })}
+
+ */}
+
+
(modalOpen ? close() : open())}>
+
+
+
+
+
+
+
null}>
+ {modalOpen && }
+
+
- bonjours ca va
+ bonjours ca va
)
diff --git a/frontend/src/components/Messages/MessageYou.jsx b/frontend/src/components/Messages/MessageYou.jsx
index 6d823a48..b3dad724 100644
--- a/frontend/src/components/Messages/MessageYou.jsx
+++ b/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(){
- bonjours ca va
+ bonjours ca va
)
diff --git a/frontend/src/components/Sidebar/Backdrop.jsx b/frontend/src/components/Sidebar/Backdrop.jsx
new file mode 100644
index 00000000..394b6d8b
--- /dev/null
+++ b/frontend/src/components/Sidebar/Backdrop.jsx
@@ -0,0 +1,16 @@
+import { motion } from "framer-motion"
+import "../../styles/Header.css"
+
+const Backdrop = ({ children, onClick }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default Backdrop
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar/Modal.jsx b/frontend/src/components/Sidebar/Modal.jsx
new file mode 100644
index 00000000..40f211e1
--- /dev/null
+++ b/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 (
+//
+//
+// {item.title}
+//
+//
+//
+// )
+// })}
+// )
+// }
+const Modal = ({ handleClose }) => {
+ return (
+
+
+
+
+
+ {SidebarData.map((item, index) => {
+ return (
+
+
+ {item.title}
+
+
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default Modal
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar/SidebarData.js b/frontend/src/components/Sidebar/SidebarData.js
new file mode 100644
index 00000000..3f3224c0
--- /dev/null
+++ b/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:
+ Match history Win/Loss
+ {/*
+ {item.title}
+ {item.score}
+
+ )
+ })}
+
+ )
+}
+
+// Card.propTypes = {
+// label: PropTypes.string,
+// title: PropTypes.string.isRequired,
+// picture: PropTypes.string,
+// }
+
+export default WinLoss
\ No newline at end of file
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 5182c7b4..33bbe09a 100644
--- a/frontend/src/index.js
+++ b/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 Login42 from './components/Login42';
-import Head from './components/Head';
-import Field from './components/Field';
-import PlayButton from './components/PlayButton';
+// import Home from './pages/Home.jsx';
+// import Login42 from './pages/Login42';
+import Head from './pages/Head';
+// import Field from './pages/Field';
+// import PlayButton from './pages/PlayButton';
import reportWebVitals from './reportWebVitals';
-import Messages from './components/Messages';
-import { BrowserRouter, Route, Routes} from 'react-router-dom'
+// import Messages from './pages/Messages';
+import { BrowserRouter } from 'react-router-dom';
+import AnimatedRoute from './components/AnimatedRoute';
+import './styles/App.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
- <>
+
-
-
- }/>
-
+
+
-
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/frontend/src/components/App.js b/frontend/src/pages/App.js
similarity index 100%
rename from frontend/src/components/App.js
rename to frontend/src/pages/App.js
diff --git a/frontend/src/components/Chat.js b/frontend/src/pages/Chat.js
similarity index 100%
rename from frontend/src/components/Chat.js
rename to frontend/src/pages/Chat.js
diff --git a/frontend/src/components/Field.js b/frontend/src/pages/Field.js
similarity index 97%
rename from frontend/src/components/Field.js
rename to frontend/src/pages/Field.js
index 7ebf1a6c..c937b880 100644
--- a/frontend/src/components/Field.js
+++ b/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';
diff --git a/frontend/src/components/Footer.js b/frontend/src/pages/Footer.js
similarity index 100%
rename from frontend/src/components/Footer.js
rename to frontend/src/pages/Footer.js
diff --git a/frontend/src/components/Head.js b/frontend/src/pages/Head.js
similarity index 100%
rename from frontend/src/components/Head.js
rename to frontend/src/pages/Head.js
diff --git a/frontend/src/components/Header.js b/frontend/src/pages/Header.js
similarity index 100%
rename from frontend/src/components/Header.js
rename to frontend/src/pages/Header.js
diff --git a/frontend/src/components/Home.js b/frontend/src/pages/Home.js
similarity index 100%
rename from frontend/src/components/Home.js
rename to frontend/src/pages/Home.js
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
new file mode 100644
index 00000000..74357c06
--- /dev/null
+++ b/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 (
+
+
+
+
Dipper Ratman
+
+
+
+ )
+}
+
+export default Home
\ No newline at end of file
diff --git a/frontend/src/components/Login42.js b/frontend/src/pages/Login42.js
similarity index 100%
rename from frontend/src/components/Login42.js
rename to frontend/src/pages/Login42.js
diff --git a/frontend/src/components/Messages.jsx b/frontend/src/pages/Messages.jsx
similarity index 57%
rename from frontend/src/components/Messages.jsx
rename to frontend/src/pages/Messages.jsx
index 30b767e0..90b337fa 100644
--- a/frontend/src/components/Messages.jsx
+++ b/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 (
<>
{/*
Welcome to the messages page
*/}
-
+
);
}
diff --git a/frontend/src/components/PlayButton.js b/frontend/src/pages/PlayButton.js
similarity index 100%
rename from frontend/src/components/PlayButton.js
rename to frontend/src/pages/PlayButton.js
diff --git a/frontend/src/components/canvas.js b/frontend/src/pages/canvas.js
similarity index 99%
rename from frontend/src/components/canvas.js
rename to frontend/src/pages/canvas.js
index 930cce6b..55e562bd 100644
--- a/frontend/src/components/canvas.js
+++ b/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;
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 9a21114e..a41169e4 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -1,5 +1,6 @@
.App {
text-align: center;
+ background-color: black;
}
.App-logo {
diff --git a/frontend/src/styles/Header.css b/frontend/src/styles/Header.css
new file mode 100644
index 00000000..0da0f3c1
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/Messages.css b/frontend/src/styles/Messages.css
index 8ebec276..b72d5208 100644
--- a/frontend/src/styles/Messages.css
+++ b/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;
diff --git a/frontend/src/styles/Profile.css b/frontend/src/styles/Profile.css
new file mode 100644
index 00000000..e9a41091
--- /dev/null
+++ b/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%;
+} */
\ No newline at end of file
diff --git a/frontend/src/styles/field.css b/frontend/src/styles/field.css
index 2971ff77..07778408 100644
--- a/frontend/src/styles/field.css
+++ b/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%;
- height: 100%;
+ /* width: 100%; */
+ height: 100vh;
}
@media screen and (max-width: 768px) {
+
+