teletilting

app/AppContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import useSocket from '@/hooks/useSocket';
 import type { GameUpdate, Tilt } from '@/types';
 
@@ -17,12 +17,13 @@ const gameStart: GameUpdate = {
 		notes: false,
 		cardStyle: 'color',
 	},
+	tilts: Array.from({ length: 5 }, () => []),
 };
 
 export interface AppContext {
 	gameData: GameUpdate;
 	noGame: boolean;
-	tilts: Tilt[];
+	tilt: Tilt[];
 	selectCardIndex: number;
 	flipCard: (cardIndex: number) => void;
 	handleSettings: (gameData: GameUpdate) => void;
@@ -30,7 +31,7 @@ export interface AppContext {
 	select: (cardID: string) => void;
 	setGameID: (gameID: string) => void;
 	setSelectCardIndex: (cardIndex: number) => void;
-	setTilts: (tilts: Tilt[]) => void;
+	setTilt: (tilt: Tilt[]) => void;
 }
 
 export function AppProvider({ children }: { children: ReactNode }) {
@@ -38,14 +39,22 @@ export function AppProvider({ children }: { children: ReactNode }) {
 	const [gameID, setGameID] = useState('');
 	const [noGame, setNoGame] = useState(false);
 	const [selectCardIndex, setSelectCardIndex] = useState(-1);
-	const [tilts, setTilts] = useState<Tilt[]>([]);
+	const [tilt, setTilt] = useState<Tilt[]>([]);
 
-	const { flipCard, redraw, select, handleSettings } = useSocket({
+	const { flipCard, redraw, select, handleSettings, emitTilt } = useSocket({
 		gameID,
 		setGameData,
 		setNoGame,
 	});
 
+	useEffect(() => {
+		const cardIndex = tilt.findIndex((tilt) => !!tilt);
+
+		if (tilt[cardIndex]) {
+			emitTilt(cardIndex, tilt[cardIndex]);
+		}
+	}, [tilt]);
+
 	const handleSelect = (cardID: string) => {
 		setSelectCardIndex(-1);
 
@@ -55,7 +64,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
 	const appInterface = {
 		gameData,
 		noGame,
-		tilts,
+		tilt,
 		selectCardIndex,
 		flipCard,
 		handleSettings,
@@ -63,7 +72,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
 		select: handleSelect,
 		setGameID,
 		setSelectCardIndex,
-		setTilts,
+		setTilt,
 	};
 
 	return <AppContext.Provider value={appInterface}>{children}</AppContext.Provider>;