Use dev users for flow (#30)

src/app/_components/Gameboard/Board/Board.tsx

@@ -13,7 +13,7 @@ const Board: React.FC<IBoardProps> = ({
 	const { gameState, connectedPlayer } = useGame();
 
 	const titleOpponent =
-		connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay";
+		connectedPlayer === "th3w4y" ? "exe66" : "th3w4y";
 
 	const playerLeader = gameState?.players[connectedPlayer].leader;
 	const playerBase = gameState?.players[connectedPlayer].base;

src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState} from "react";
 import { Box, Button, Typography } from "@mui/material";
-import { usePathname, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useUser } from "@/app/_contexts/User.context";
 interface ILobby {
 	id: string;
 	name: string;
@@ -9,6 +10,7 @@ interface ILobby {
 const JoinableGame: React.FC = () => {
 	//const randomGameId = Math.floor(Math.random() * 10000);
 	const router = useRouter();
+	const { user } = useUser();
 	const [lobbies, setLobbies] = useState<ILobby[]>([]);
 	useEffect(() => {
 		// Fetch unfilled lobbies from the server
@@ -35,7 +37,7 @@ const JoinableGame: React.FC = () => {
 				headers: {
 					'Content-Type': 'application/json',
 				},
-				body: JSON.stringify({ lobbyId, userId: 'ThisIsTheWay' }),
+				body: JSON.stringify({ lobbyId, user }),
 			});
 
 			if (!response.ok) {
@@ -44,8 +46,7 @@ const JoinableGame: React.FC = () => {
 				alert(errorData.message);
 				return;
 			}
-			alert('Successfully joined the lobby');
-			router.push("/lobby?player=ThisIsTheWay");
+			router.push("/lobby");
 		} catch (error) {
 			console.error('Error joining lobby:', error);
 		}

src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx

@@ -16,6 +16,7 @@ import {
 import StyledTextField from "../_styledcomponents/StyledTextField/StyledTextField";
 import { usePathname, useRouter } from "next/navigation";
 import {updateIdsWithMapping, mapIdToInternalName, transformDeckWithCardData} from "@/app/_utils/s3Utils";
+import { useUser } from "@/app/_contexts/User.context";
 
 interface ICreateGameFormProps {
 	format?: string | null;
@@ -55,6 +56,7 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 	const pathname = usePathname();
 	const router = useRouter();
 	const isCreateGamePath = pathname === "/creategame";
+	const { user } = useUser();
 
 	// Common State
 	const [favouriteDeck, setFavouriteDeck] = useState<string>("");
@@ -113,12 +115,12 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 		console.log("Favourite Deck:", favouriteDeck);
 		console.log("SWUDB Deck Link:", deckLink);
 		console.log("beginning fetch for deck link");
-		const deckData = await fetchDeckData(deckLink);
+		const deckData = deckLink ? await fetchDeckData(deckLink) : null;
 		console.log("fetch complete, deck data:", deckData);
 		console.log("Save Deck To Favourites:", saveDeck);
 		try {
 			const payload = {
-				user: favouriteDeck,
+				user: user,
 				deck: deckData
 			};
 			const response = await fetch("http://localhost:9500/api/create-lobby",
@@ -203,7 +205,6 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 									setFavouriteDeck(e.target.value)
 								}
 								placeholder="Vader Green Ramp"
-								required
 							>
 								{deckOptions.map((deck) => (
 									<MenuItem key={deck} value={deck}>

src/app/_contexts/Game.context.tsx

@@ -9,6 +9,7 @@ import React, {
 	useEffect,
 } from "react";
 import io, { Socket } from "socket.io-client";
+import { useUser } from "./User.context";
 
 interface IGameContextType {
 	gameState: any;
@@ -27,21 +28,19 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
 	const [socket, setSocket] = useState<Socket | undefined>(undefined);
 	const [connectedPlayer, setConnectedPlayer] = useState<string>("");
 	const [connectedDeck, setDeck] = useState<any>(null);
+	const { user } = useUser();
 
 	useEffect(() => {
-		const urlParams = new URLSearchParams(window.location.search);
-		const playerName = urlParams.get("player") || "Order66";
-		setConnectedPlayer(playerName);
+		if (!user) return;
+		setConnectedPlayer(user.id || "");
 		const newSocket = io("http://localhost:9500", {
 			query: {
-				user: JSON.stringify({
-					username: playerName,
-				}),
+				user: JSON.stringify(user)
 			},
 		});
 
 		newSocket.on("connect", () => {
-			console.log(`Connected to server as ${playerName}`);
+			console.log(`Connected to server as ${user.username}`);
 		});
 		newSocket.on("gamestate", (gameState: any) => {
 			setGameState(gameState);
@@ -56,7 +55,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
 		return () => {
 			newSocket?.disconnect();
 		};
-	}, []);
+	}, [user]);
 
 	const sendMessage = (message: string, args: any[] = []) => {
 		console.log("sending message", message, args);

src/app/_contexts/User.context.tsx

@@ -46,17 +46,17 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 		});
 	};
 
-	const handleSetUser = (user: "Order66" | "ThisIsTheWay") => {
+	const handleDevSetUser = (user: "Order66" | "ThisIsTheWay") => {
 		if (user === "Order66") {
 			setUser({
-				id: "66",
+				id: "exe66",
 				username: "Order66",
 				email: null,
 				provider: null,
 			});
 		} else if (user === "ThisIsTheWay") {
 			setUser({
-				id: "Mandalorian",
+				id: "th3w4y",
 				username: "ThisIsTheWay",
 				email: null,
 				provider: null,
@@ -65,7 +65,7 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 	}
 
 	const devLogin = (user: "Order66" | "ThisIsTheWay") => {
-		handleSetUser(user);
+		handleDevSetUser(user);
 		localStorage.setItem("devUser", user);
 		router.push("/");
 	};
@@ -74,7 +74,7 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 		if (process.env.NODE_ENV === "development" && !user ) {
 			const storedUser = localStorage.getItem("devUser");
 			if (storedUser === "Order66" || storedUser === "ThisIsTheWay") {
-				handleSetUser(storedUser);
+				handleDevSetUser(storedUser);
 			}
 		}
 	}, [user]);