Merge branch 'main' into SWUDB-deck-links

package.json

@@ -15,6 +15,7 @@
 		"@mui/material": "^6.1.8",
 		"html-react-parser": "^5.1.18",
 		"next": "14.2.14",
+		"next-auth": "^4.24.10",
 		"react": "^18",
 		"react-dom": "^18",
 		"react-icons": "^5.3.0",

src/app/ClientLayout.tsx

@@ -2,6 +2,8 @@
 'use client';
 
 import dynamic from 'next/dynamic';
+import { usePathname } from 'next/navigation';
+import { GameProvider } from "@/app/_contexts/Game.context";
 
 const ClientProviders = dynamic(
   () => import('@/app/_components/ClientProviders/ClientProviders'),
@@ -11,10 +13,25 @@ const ClientProviders = dynamic(
 const Navbar = dynamic(() => import('./Navigation/NavBar'), { ssr: false });
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  const path = usePathname();
+  const pagesWithWebsocket = ['/GameBoard', '/lobby'];
+  const isPageWithWebsocket = pagesWithWebsocket.includes(path);
+
   return (
-    <ClientProviders>
-      <Navbar />
-      {children}
-    </ClientProviders>
+    <>
+      {isPageWithWebsocket ? (
+        <ClientProviders>
+          <GameProvider>
+            <Navbar />
+            {children}
+          </GameProvider>
+        </ClientProviders> 
+      ) : (
+        <ClientProviders>
+          <Navbar />
+          {children}
+        </ClientProviders>
+      )}
+    </>
   );
 }

src/app/GameBoard/page.tsx

@@ -8,11 +8,11 @@ import Board from "../_components/Gameboard/Board/Board";
 import PlayerCardTray from "../_components/Gameboard/PlayerCardTray/PlayerCardTray";
 import ResourcesOverlay from "../_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay";
 import BasicPrompt from "../_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt";
-import { usePlayer } from "../_contexts/Player.context";
+import { useGame } from "../_contexts/Game.context";
 import { useSidebar } from "../_contexts/Sidebar.context";
 
 const GameBoard = () => {
-	const { getOpponent, connectedPlayer, gameState } = usePlayer();
+	const { getOpponent, connectedPlayer, gameState } = useGame();
 	const { sidebarOpen, toggleSidebar } = useSidebar();
 	const [chatMessage, setChatMessage] = useState("");
 	const [chatHistory, setChatHistory] = useState<string[]>([]);

src/app/Navigation/NavBar.tsx

@@ -3,41 +3,40 @@ import { usePathname } from "next/navigation";
 import { Typography, Grid2 as Grid } from "@mui/material";
 import ControlHub from "../_components/_sharedcomponents/ControlHub/ControlHub";
 import { useSidebar } from "../_contexts/Sidebar.context";
-import { useUser } from "../_contexts/User.context"; // Import UserContext
+import { useUser } from "../_contexts/User.context";
 
 const Navbar = () => {
-	const { user, logout } = useUser(); // Get user and logout from UserContext
+	const { user, logout } = useUser();
 	const pathname = usePathname();
 	const { sidebarOpen, toggleSidebar } = useSidebar();
 
-	//------------------------STYLES------------------------//
-
-	const navbarContainerStyle = {
-		position: "fixed",
-		top: 0,
-		left: 0,
-		right: 0,
-		zIndex: 1100,
-		width: "100%",
-	};
-
-	const gameLobbyTextStyle = {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontSize: "2.6em",
-		fontWeight: "600",
-		color: "#fff",
-		ml: ".5vw",
+	// ---------------------- Styles ---------------------- //
+	const navbarStyles = {
+		container: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			right: 0,
+			zIndex: 1100,
+			width: "100%",
+		},
+		gameLobbyText: {
+			fontFamily: "var(--font-barlow), sans-serif",
+			fontSize: "2.6em",
+			fontWeight: "600",
+			color: "#fff",
+			ml: ".5vw",
+		},
 	};
-
 	return (
 		<Grid
 			container
 			justifyContent="space-between"
 			alignItems="center"
-			sx={navbarContainerStyle}
+			sx={navbarStyles.container}
 		>
 			{pathname === "/lobby" && (
-				<Typography variant="h1" sx={gameLobbyTextStyle}>
+				<Typography variant="h1" sx={navbarStyles.gameLobbyText}>
 					GAME LOBBY
 				</Typography>
 			)}

src/app/_components/Auth/AuthTypes.ts

@@ -1,27 +1,7 @@
 import React from "react";
 
 export interface LoginProps {
-	username: string;
-	setUsername: (value: string) => void;
-	password: string;
-	setPassword: (value: string) => void;
-	rememberMe: boolean;
-	setRememberMe: (value: boolean) => void;
-	handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-	toggleAuth: () => void;
-}
-
-export interface SignUpProps {
-	email: string;
-	setEmail: (value: string) => void;
-	password: string;
-	setPassword: (value: string) => void;
-	confirmPassword: string;
-	setConfirmPassword: (value: string) => void;
-	passwordError: boolean;
-	passwordMatchError: boolean;
-	handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
-	toggleAuth: () => void;
+	handleSubmit: (provider: "google" | "discord") => void;
 }
 
 export interface StyledTextFieldProps {