teletilt (#3)

- Context
- sync _tilts_ between participants
- shiny cards
- reconnect clients
- updates Settings
- re-animate Switches

Co-authored-by: Gavin McDonald <gavinmcdoh@gmail.com>
Reviewed-on: #3

app/AppContext.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import useSocket from '@/hooks/useSocket';
+
+import { GAME_START, LOCAL_DEFAULTS } from '@/constants';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { GameUpdate, LocalSettings, Settings, Tilt } from '@/types';
+
+const AppContext = createContext<AppContext | undefined>(undefined);
+
+export interface AppContext {
+	gameData: GameUpdate;
+	isDM: boolean;
+	noGame: boolean;
+	selectCardIndex: number;
+	settings: Settings;
+	tilt: Tilt[];
+	emitFlip: (cardIndex: number) => void;
+	emitSettings: (gameData: GameUpdate) => void;
+	emitRedraw: (cardIndex: number) => void;
+	emitSelect: (cardID: string) => void;
+	setGameID: (gameID: string) => void;
+	setLocalSettings: Dispatch<SetStateAction<LocalSettings>>;
+	setSelectCardIndex: (cardIndex: number) => void;
+	setTilt: (tilt: Tilt[]) => void;
+}
+
+export function AppProvider({ children }: { children: ReactNode }) {
+	const [gameData, setGameData] = useState<GameUpdate>({ ...GAME_START });
+	const [localSettings, setLocalSettings] = useState<LocalSettings>(() => ({ ...LOCAL_DEFAULTS }));
+	const [gameID, setGameID] = useState('');
+	const [noGame, setNoGame] = useState(false);
+	const [selectCardIndex, setSelectCardIndex] = useState(-1);
+	const [tilt, setTilt] = useState<Tilt[]>([]);
+
+	const { emitFlip, emitRedraw, emitSelect, emitSettings, emitTilt } = useSocket({
+		gameID,
+		setGameData,
+		setNoGame,
+	});
+
+	useEffect(() => {
+		if (localSettings.remoteTilt) {
+			const cardIndex = tilt.findIndex((tilt) => !!tilt);
+
+			if (tilt[cardIndex]) {
+				emitTilt(cardIndex, tilt[cardIndex]);
+			} else {
+				// cardIndex does not matter
+				// all tilts for this user will be cleared
+				emitTilt(0, { rotateX: 0, rotateY: 0 });
+			}
+		}
+	}, [tilt, localSettings]);
+
+	const handleSelect = (cardID: string) => {
+		setSelectCardIndex(-1);
+
+		emitSelect(selectCardIndex, cardID);
+	};
+
+	const { dmID } = gameData;
+	const isDM = !!dmID;
+
+	const appInterface = {
+		gameData,
+		isDM,
+		noGame,
+		selectCardIndex,
+		settings: { ...gameData.settings, ...localSettings },
+		tilt,
+		emitFlip,
+		emitSettings,
+		emitRedraw,
+		emitSelect: handleSelect,
+		setGameID,
+		setLocalSettings,
+		setSelectCardIndex,
+		setTilt,
+	};
+
+	return <AppContext.Provider value={appInterface}>{children}</AppContext.Provider>;
+}
+
+export function useAppContext(): AppContext {
+	const context = useContext(AppContext);
+	if (!context) throw new Error('useAppContext must be used within AppProvider');
+	return context;
+}