app/AppContext.tsx

@@ -1,14 +1,62 @@
 'use client';
 
 import { createContext, useContext, useState, ReactNode } from 'react';
-import type { AppContext, Tilt } from '@/types';
+import useSocket from '@/hooks/useSocket';
+import type { GameUpdate, Tilt } from '@/types';
 
 const AppContext = createContext<AppContext | undefined>(undefined);
 
+const gameStart: GameUpdate = {
+	dmID: '',
+	spectatorID: '',
+	cards: [],
+	settings: {
+		positionBack: false,
+		positionFront: false,
+		prophecy: false,
+		notes: false,
+		cardStyle: 'color',
+	},
+};
+
+export interface AppContext {
+	gameData: GameUpdate;
+	noGame: boolean;
+	tilts: Tilt[];
+	flipCard: (cardIndex: number) => void;
+	handleSettings: (gameData: GameUpdate) => void;
+	redraw: (cardIndex: number) => void;
+	select: (cardIndex: number, cardID: string) => void;
+	setGameID: (gameID: string) => void;
+	setTilts: (tilts: Tilt[]) => void;
+}
+
 export function AppProvider({ children }: { children: ReactNode }) {
+	const [gameID, setGameID] = useState('');
+	const [noGame, setNoGame] = useState(false);
+	const [gameData, setGameData] = useState<GameUpdate>(gameStart);
+
+	const { flipCard, redraw, select, handleSettings } = useSocket({
+		gameID,
+		setGameData,
+		setNoGame,
+	});
+
 	const [tilts, setTilts] = useState<Tilt[]>([]);
 
-	return <AppContext.Provider value={{ tilts, setTilts }}>{children}</AppContext.Provider>;
+	const appInterface = {
+		gameData,
+		noGame,
+		tilts,
+		flipCard,
+		handleSettings,
+		redraw,
+		select,
+		setGameID,
+		setTilts,
+	};
+
+	return <AppContext.Provider value={appInterface}>{children}</AppContext.Provider>;
 }
 
 export function useAppContext(): AppContext {

app/[gameID]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
-import useSocket from '@/hooks/useSocket';
+import { useAppContext } from '@/app/AppContext';
 import { Eye } from 'lucide-react';
 
 import Card from '@/components/Card';
@@ -14,43 +14,28 @@ import CardSelect from '@/components/CardSelect';
 
 import { cardMap, layout } from '@/constants/tarokka';
 
-import type { Deck, GameUpdate } from '@/types';
+import type { Deck } from '@/types';
 
 export default function GamePage() {
-	const { gameID: gameIDParam } = useParams();
+	const { gameData, noGame, flipCard, handleSettings, redraw, select, setGameID } = useAppContext();
+	const { gameID } = useParams();
 
-	const [gameID, setGameID] = useState('');
-	const [noGame, setNoGame] = useState(false);
 	const [selectCard, setSelectCard] = useState(-1);
-	const [gameData, setGameData] = useState<GameUpdate>({
-		dmID: '',
-		spectatorID: '',
-		cards: [],
-		settings: {
-			positionBack: false,
-			positionFront: false,
-			prophecy: false,
-			notes: false,
-			cardStyle: 'color',
-		},
-	});
 
 	const { dmID, cards, settings } = gameData;
 	const isDM = !!dmID;
 	const selectDeck: Deck | null = selectCard >= 0 ? cards[selectCard].deck : null;
 
-	const socket = useSocket({ gameID, setGameData, setNoGame });
-
 	useEffect(() => {
-		if (gameIDParam) {
+		if (gameID) {
-			setGameID(Array.isArray(gameIDParam) ? gameIDParam[0] : gameIDParam);
+			setGameID(Array.isArray(gameID) ? gameID[0] : gameID);
 		}
-	}, [gameIDParam]);
+	}, [gameID]);
 
-	const select = (cardIndex: number, cardID: string) => {
+	const handleSelect = (cardIndex: number, cardID: string) => {
 		setSelectCard(-1);
 
-		socket.select(cardIndex, cardID);
+		select(cardIndex, cardID);
 	};
 
 	// map our five Tarokka cards to their proper locations in a 3x3 grid
@@ -72,7 +57,7 @@ export default function GamePage() {
 				/>
 			)}
 
-			{isDM && <Settings gameData={gameData} changeAction={socket.handleSettings} />}
+			{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
 			<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
 				{Array.from({ length: 9 })
 					.map(arrangeCards)
@@ -84,8 +69,8 @@ export default function GamePage() {
 									card={card}
 									position={layout[cardMap[index]]}
 									settings={settings}
-									flipAction={() => socket.flipCard(cardMap[index])}
+									flipAction={() => flipCard(cardMap[index])}
-									redrawAction={() => socket.redraw(cardMap[index])}
+									redrawAction={() => redraw(cardMap[index])}
 									selectAction={() => setSelectCard(cardMap[index])}
 								/>
 							)}
@@ -98,7 +83,7 @@ export default function GamePage() {
 				hand={cards}
 				settings={settings}
 				closeAction={() => setSelectCard(-1)}
-				selectAction={(cardID) => select(selectCard, cardID)}
+				selectAction={(cardID) => handleSelect(selectCard, cardID)}
 			/>
 		</main>
 	) : null;

types/index.ts

@@ -109,8 +109,3 @@ export interface Tilt {
 	rotateX: number;
 	rotateY: number;
 }
-
-export interface AppContext {
-	tilts: Tilt[];
-	setTilts: (tilts: Tilt[]) => void;
-}