moved useSocket into Context

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) {
-			setGameID(Array.isArray(gameIDParam) ? gameIDParam[0] : gameIDParam);
+		if (gameID) {
+			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])}
-									redrawAction={() => socket.redraw(cardMap[index])}
+									flipAction={() => flipCard(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;