moved useSocket into Context

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 {