diff --git a/client/package-lock.json b/client/package-lock.json
index d3a2353f38776b8a6e0db056c7bbfa5a870b1bea..c48b4eb852c251abe954c0fdfd0e4d5f484681c0 100644
--- a/client/package-lock.json
+++ b/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",
diff --git a/client/package.json b/client/package.json
index 286500c0b132d617aac6f4d940db8a9b873394dc..ba52865bc2b4266a740afca168bc88fe56817204 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/Views/Home.jsx b/client/src/Views/Home.jsx
index 34883db98ab5265f372aef18240f3623ed262a50..82229f367963d1f23c3579647ff319a60f746214 100644
--- a/client/src/Views/Home.jsx
+++ b/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>
)
diff --git a/client/src/components/SideBar.css b/client/src/components/SideBar.css
index 5f3baa992241768320e1a69aaee89d15948e3e8d..23933f3d016a27c1843d1f8c26dffc17b5344a5e 100644
--- a/client/src/components/SideBar.css
+++ b/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 {
diff --git a/client/src/components/SideBar.jsx b/client/src/components/SideBar.jsx
index 86bde7ca021a8be0ed64e99f34f5a177ca65d422..aa9d8969ce6e75ab992fdb6f24b8212d41f30646 100644
--- a/client/src/components/SideBar.jsx
+++ b/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>