From 66e1f11f1b5387cea50bdd7f52a26cc1f61ba95e Mon Sep 17 00:00:00 2001 From: Dan Bastin Date: Mon, 23 Dec 2024 12:25:41 -0500 Subject: [PATCH] Use dev users for flow (#30) --- src/app/_components/Gameboard/Board/Board.tsx | 2 +- .../_subcomponents/JoinableGame/JoinableGame.tsx | 9 +++++---- .../CreateGameForm/CreateGameForm.tsx | 7 ++++--- src/app/_contexts/Game.context.tsx | 15 +++++++-------- src/app/_contexts/User.context.tsx | 10 +++++----- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx index 1dc64ee0..e63ea8a3 100644 --- a/src/app/_components/Gameboard/Board/Board.tsx +++ b/src/app/_components/Gameboard/Board/Board.tsx @@ -13,7 +13,7 @@ const Board: React.FC = ({ 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; diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx index 20fbdcb5..17fe2c6b 100644 --- a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx +++ b/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([]); 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); } diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx index 642876cb..81865b26 100644 --- a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx +++ b/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 = ({ const pathname = usePathname(); const router = useRouter(); const isCreateGamePath = pathname === "/creategame"; + const { user } = useUser(); // Common State const [favouriteDeck, setFavouriteDeck] = useState(""); @@ -113,12 +115,12 @@ const CreateGameForm: React.FC = ({ 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 = ({ setFavouriteDeck(e.target.value) } placeholder="Vader Green Ramp" - required > {deckOptions.map((deck) => ( diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx index 967b243b..8c22fd73 100644 --- a/src/app/_contexts/Game.context.tsx +++ b/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(undefined); const [connectedPlayer, setConnectedPlayer] = useState(""); const [connectedDeck, setDeck] = useState(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); diff --git a/src/app/_contexts/User.context.tsx b/src/app/_contexts/User.context.tsx index 4943089a..da452f92 100644 --- a/src/app/_contexts/User.context.tsx +++ b/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]);