Stuff has been done, don't know what, just wanted to push

client/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "firebase": "^10.11.1",
+        "gl-matrix": "^3.4.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-google-button": "^0.8.0",
@@ -9713,6 +9714,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "firebase": "^10.11.1",
+    "gl-matrix": "^3.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.8.0",

client/src/Views/Home.jsx

@@ -15,12 +15,11 @@ const Home=()=>{
         <div className='grid-container'>
             <section className='logo'>
                 <div>
-                   
                      <img src={logo} width={300} height={300} alt="tic-tic warfare"/>
                 </div>
                 <p className='welcoming-text'>Head to the lobby to fetch you a worthy opponent</p>
             </section>
-            
+
         </div>
         
     )

client/src/components/SideBar.css

@@ -32,6 +32,7 @@
     border-radius: 10px;
     border: solid rgba(255, 255, 255, 0.0);
     color: black;
+    background: #efeeee;
     transition: box-shadow 0.3s ease;
     text-decoration: none; /* No line underneath text */
 }
@@ -40,7 +41,7 @@
     /* background-color: #efeeee; */
     box-shadow:  -6px -6px 16px rgba(255, 255, 255, 1.0),
                   6px 6px 16px rgba(209, 205, 199, 1.0);
-    border: solid rgba(255, 255, 255, 0.1)
+    border: solid rgba(255, 255, 255, 0.1);
 }
 
 .icon-text {

client/src/components/SideBar.jsx

@@ -31,16 +31,16 @@ function SideBar({pageTitle}) {
             <text className="icon-text">Home</text>
           </NavLink>
 
-          <NavLink to="/lobby" className="icon" title="Lobby" style={({ isActive }) => isActive ? { boxShadow: '-6px -6px 16px rgba(255, 255, 255, 1.0), 6px 6px 16px rgba(209, 205, 199, 1.0)'} : {}}>
-            <IoIosChatboxes size={40} />
-            <text className="icon-text">Lobby</text>
-          </NavLink>
-
           <NavLink to="/play" className="icon" title="Play" style={({ isActive }) => isActive ? { boxShadow: '-6px -6px 16px rgba(255, 255, 255, 1.0), 6px 6px 16px rgba(209, 205, 199, 1.0)'} : {}}>
             <GiTicTacToe size={40} />
             <text className="icon-text">Play</text>
           </NavLink>
 
+          <NavLink to="/lobby" className="icon" title="Lobby" style={({ isActive }) => isActive ? { boxShadow: '-6px -6px 16px rgba(255, 255, 255, 1.0), 6px 6px 16px rgba(209, 205, 199, 1.0)'} : {}}>
+            <IoIosChatboxes size={40} />
+            <text className="icon-text">Lobby</text>
+          </NavLink>
+
           <NavLink to="/profile" className="icon" title="Profile" style={({ isActive }) => isActive ? { boxShadow: '-6px -6px 16px rgba(255, 255, 255, 1.0), 6px 6px 16px rgba(209, 205, 199, 1.0)'} : {}}>
             <GiVikingHelmet size={40} />
             <text className="icon-text">Profile</text>