keep tilts synced

app/AppContext.tsx

@@ -0,0 +1,88 @@
+'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(() => {
+		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]);
+
+	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;
+}

app/[gameID]/page.tsx

@@ -1,105 +1,35 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'next/navigation';
-import useSocket from '@/hooks/useSocket';
-import { Eye } from 'lucide-react';
 
-import Card from '@/components/Card';
+import { useAppContext } from '@/app/AppContext';
-import CopyButton from '@/components/CopyButton';
+import CardSelect from '@/components/CardSelect';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
 import Settings from '@/components/Settings';
-import CardSelect from '@/components/CardSelect';
+import { SpectatorLink } from '@/components/SpectatorLink';
-
+import TarokkaGrid from '@/components/TarokkaGrid';
-import { cardMap, layout } from '@/constants/tarokka';
-
-import type { Deck, GameUpdate } from '@/types';
 
 export default function GamePage() {
-	const { gameID: gameIDParam } = useParams();
+	const { noGame, 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) => {
-		setSelectCard(-1);
-
-		socket.select(cardIndex, cardID);
-	};
-
-	// map our five Tarokka cards to their proper locations in a 3x3 grid
-	// common deck cards: left, top, and right
-	// high deck cards: bottom and center
-	const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
 
 	return noGame ? (
 		<NotFound />
-	) : cards ? (
+	) : (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
-			{isDM && (
+			<SpectatorLink />
-				<CopyButton
+			<Settings />
-					copy={`${location.origin}/${gameData.spectatorID}`}
+			<TarokkaGrid />
-					tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
+			<Notes />
-					Icon={Eye}
+			<CardSelect />
-					className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
-					size={24}
-				/>
-			)}
-
-			{isDM && <Settings gameData={gameData} changeAction={socket.handleSettings} />}
-			<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
-				{Array.from({ length: 9 })
-					.map(arrangeCards)
-					.map((card, index) => (
-						<div key={index} className="aspect-[2/3]}">
-							{card && (
-								<Card
-									dm={isDM}
-									card={card}
-									position={layout[cardMap[index]]}
-									settings={settings}
-									flipAction={() => socket.flipCard(cardMap[index])}
-									redrawAction={() => socket.redraw(cardMap[index])}
-									selectAction={() => setSelectCard(cardMap[index])}
-								/>
-							)}
-						</div>
-					))}
-			</div>
-			<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
-			<CardSelect
-				show={selectDeck}
-				hand={cards}
-				settings={settings}
-				closeAction={() => setSelectCard(-1)}
-				selectAction={(cardID) => select(selectCard, cardID)}
-			/>
 		</main>
-	) : null;
+	);
 }

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { Pirata_One, Eagle_Lake, Cinzel_Decorative } from 'next/font/google';
+import { AppProvider } from '@/app/AppContext';
 import './globals.css';
 
 const pirataOne = Pirata_One({
@@ -40,7 +41,9 @@ export default function RootLayout({
 			lang="en"
 			className={`${pirataOne.variable} ${eagleLake.variable} ${cinzel.variable} antialiased`}
 		>
-			<body className={`${eagleLake.className} antialiased`}>{children}</body>
+			<body className={`${eagleLake.className} antialiased`}>
+				<AppProvider>{children}</AppProvider>
+			</body>
 		</html>
 	);
 }

components/Card.tsx

@@ -1,48 +1,43 @@
 'use client';
 
 import { useState } from 'react';
+import { useAppContext } from '@/app/AppContext';
 import TiltCard from '@/components/TiltCard';
 import ToolTip from '@/components/ToolTip';
 import StackTheDeck from '@/components/StackTheDeck';
-import tarokkaCards from '@/constants/tarokkaCards';
 import getCardInfo from '@/tools/getCardInfo';
 import getURL from '@/tools/getURL';
 
-import { Layout, Settings, TarokkaGameCard } from '@/types';
+import tarokkaCards from '@/constants/tarokkaCards';
+import { layout } from '@/constants/tarokka';
+
+import { TarokkaGameCard } from '@/types';
 
 const cardBack = tarokkaCards.find((card) => card.back)!;
 
 type CardProps = {
-	dm: boolean;
 	card: TarokkaGameCard;
-	position: Layout;
+	cardIndex: number;
-	settings: Settings;
-	flipAction: () => void;
-	redrawAction: () => void;
-	selectAction: () => void;
 };
 
-export default function Card({
+export default function Card({ card, cardIndex }: CardProps) {
-	dm,
-	card,
-	position,
-	settings,
-	flipAction,
-	redrawAction,
-	selectAction,
-}: CardProps) {
 	const [tooltip, setTooltip] = useState<React.ReactNode>(null);
+	const { emitFlip, gameData, emitRedraw, setSelectCardIndex } = useAppContext();
+
+	const { dmID, settings } = gameData;
+	const isDM = !!dmID;
 
 	const { aria, flipped } = card;
+	const position = layout[cardIndex];
 
 	const handleClick = () => {
-		if (dm) {
+		if (isDM) {
-			flipAction();
+			emitFlip(cardIndex);
 		}
 	};
 
 	const getTooltip = () => {
-		const text = getCardInfo(card, position, dm, settings);
+		const text = getCardInfo(card, position, isDM, settings);
 
 		return text.length ? (
 			<>
@@ -59,14 +54,15 @@ export default function Card({
 	return (
 		<ToolTip content={tooltip || getTooltip()}>
 			<TiltCard
-				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${dm ? 'cursor-pointer' : ''} `}
+				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
-				onClick={handleClick}
+				cardIndex={cardIndex}
 			>
 				<div
 					className={`absolute inset-0 transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
+					onClick={handleClick}
 				>
 					<div className="absolute inset-0 group backface-hidden">
-						{dm && (
+						{isDM && (
 							<>
 								<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
 								<img
@@ -79,12 +75,12 @@ export default function Card({
 						<img
 							src={getURL(cardBack as TarokkaGameCard, settings)}
 							alt="Card Back"
-							className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
+							className={`absolute rounded-lg ${isDM ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
 						/>
-						{dm && !flipped && (
+						{isDM && !flipped && (
 							<StackTheDeck
-								onRedraw={redrawAction}
+								onRedraw={() => emitRedraw(cardIndex)}
-								onSelect={() => selectAction()}
+								onSelect={() => setSelectCardIndex(cardIndex)}
 								onHover={setTooltip}
 							/>
 						)}

components/CardSelect.tsx

@@ -1,41 +1,36 @@
 'use client';
 
 import { CircleX } from 'lucide-react';
+import { useAppContext } from '@/app/AppContext';
 import TarokkaDeck from '@/lib/TarokkaDeck';
 import getURL from '@/tools/getURL';
 
-import { Deck, Settings, TarokkaGameCard } from '@/types';
+import { Deck } from '@/types';
 
 const tarokkaDeck = new TarokkaDeck();
 
 type CardSelectProps = {
-	closeAction: () => void;
-	selectAction: (cardID: string) => void;
-	hand: TarokkaGameCard[];
-	settings: Settings;
-	show: Deck | null;
 	className?: string;
 };
 
-export default function CardSelect({
+export default function CardSelect({ className = '' }: CardSelectProps) {
-	closeAction,
+	const { gameData, emitSelect, selectCardIndex, setSelectCardIndex } = useAppContext();
-	selectAction,
+	const { cards: hand, settings } = gameData;
-	hand,
+
-	settings,
-	show,
-	className = '',
-}: CardSelectProps) {
 	const handIDs = hand.map(({ id }) => id);
+	const selectDeck: Deck | null = selectCardIndex >= 0 ? hand[selectCardIndex].deck : null;
+
+	const close = () => setSelectCardIndex(-1);
 
 	const handleClose = (event: React.MouseEvent<HTMLElement>) => {
 		if (event.target === event.currentTarget) {
-			closeAction();
+			close();
 		}
 	};
 
-	if (!show) return null;
+	if (!selectDeck) return null;
 
-	const cards = show === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
+	const cards = selectDeck === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
 
 	return (
 		<div
@@ -44,7 +39,7 @@ export default function CardSelect({
 		>
 			<button
 				className={`fixed top-4 right-4 p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
-				onClick={closeAction}
+				onClick={close}
 			>
 				<CircleX className="w-6 h-6" />
 			</button>
@@ -58,7 +53,7 @@ export default function CardSelect({
 						<div
 							key={card.id}
 							className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
-							onClick={() => selectAction(card.id)}
+							onClick={() => emitSelect(card.id)}
 						>
 							<img
 								src={getURL(card, settings)}

components/Notes.tsx

@@ -3,20 +3,18 @@
 import { useMemo, useState } from 'react';
 import { ScrollText } from 'lucide-react';
 
+import { useAppContext } from '@/app/AppContext';
 import CopyButton from '@/components/CopyButton';
 import Scrim from '@/components/Scrim';
 import getCardInfo from '@/tools/getCardInfo';
 import { cardMap, layout } from '@/constants/tarokka';
 
-import { GameUpdate } from '@/types';
+export default function Notes() {
+	const { gameData } = useAppContext();
+	const { dmID, cards, settings } = gameData;
 
-type NotesProps = {
-	gameData: GameUpdate;
-	show: boolean;
-};
-
-export default function Notes({ gameData: { dmID, cards, settings }, show }: NotesProps) {
 	const isDM = !!dmID;
+	const show = cards.every(({ flipped }) => flipped);
 
 	const [open, setOpen] = useState(false);
 

components/Settings.tsx

@@ -4,12 +4,15 @@ import { useState } from 'react';
 import { Settings as Gear } from 'lucide-react';
 import { Cinzel_Decorative } from 'next/font/google';
 
+import { useAppContext } from '@/app/AppContext';
 import BuyMeACoffee from '@/components/BuyMeACoffee';
 import CopyButton from '@/components/CopyButton';
 import GitHubButton from '@/components/GitHubButton';
 import Scrim from '@/components/Scrim';
 import Switch from '@/components/Switch';
-import { CardStyle, GameUpdate } from '@/types';
+
+import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
+import type { CardStyle, LocalSettings } from '@/types';
 
 const cinzel = Cinzel_Decorative({
 	variable: '--font-cinzel',
@@ -17,28 +20,28 @@ const cinzel = Cinzel_Decorative({
 	weight: '400',
 });
 
-type SettingsProps = {
-	gameData: GameUpdate;
-	changeAction: (updatedSettings: GameUpdate) => void;
-};
-
 const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
 
-export default function Settings({ gameData, changeAction }: SettingsProps) {
+export default function Settings() {
 	const [open, setOpen] = useState(false);
+	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
 
-	const togglePermission = (key: string) => {
+	const togglePermission = (key: keyof LocalSettings) => {
-		changeAction({
+		if (LOCAL_SETTINGS.includes(key)) {
-			...gameData,
+			setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
-			settings: {
+		} else if (isDM) {
-				...gameData.settings,
+			emitSettings({
-				[key]: !gameData.settings[key],
+				...gameData,
-			},
+				settings: {
-		});
+					...gameData.settings,
+					[key]: !gameData.settings[key],
+				},
+			});
+		}
 	};
 
 	const tuneRadio = (cardStyle: CardStyle) => {
-		changeAction({
+		emitSettings({
 			...gameData,
 			settings: {
 				...gameData.settings,
@@ -47,14 +50,25 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 		});
 	};
 
+	const Icon = () => (
+		<button
+			className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
+			onClick={() => setOpen((prev) => !prev)}
+		>
+			<Gear className="w-5 h-5" />
+		</button>
+	);
+
 	const Links = () => (
 		<>
-			<CopyButton
+			{isDM && (
-				title="Copy DM link"
+				<CopyButton
-				copy={`${location.origin}/${gameData.dmID}`}
+					title="Copy DM link"
-				tooltip={`${location.origin}/${gameData.dmID}`}
+					copy={`${location.origin}/${gameData.dmID}`}
-				className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
+					tooltip={`${location.origin}/${gameData.dmID}`}
-			/>
+					className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
+				/>
+			)}
 			<CopyButton
 				title="Copy Spectator link"
 				copy={`${location.origin}/${gameData.spectatorID}`}
@@ -66,43 +80,45 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 
 	const Permissions = () => (
 		<>
-			{Object.entries(gameData.settings)
+			{Object.entries(settings)
 				.filter(([_key, value]) => typeof value === 'boolean')
+				.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
 				.map(([key, value]) => (
 					<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
 				))}
 		</>
 	);
 
-	const CardStyle = () => (
+	const CardStyle = () =>
-		<fieldset className="flex flex-col w-full">
+		isDM ? (
-			<div className="text-xs my-1">Card style:</div>
+			<fieldset className="flex flex-col w-full">
-			<div className="inline-flex overflow-hidden rounded-md w-full">
+				<div className="text-xs my-1">Card style:</div>
-				{cardStyleOptions.map((option, index) => (
+				<div className="inline-flex overflow-hidden rounded-md w-full">
-					<label
+					{cardStyleOptions.map((option, index) => (
-						key={option}
+						<label
-						className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
+							key={option}
-                    ${gameData.settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
+							className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
+                    ${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
                     ${index === 0 ? 'rounded-l-md' : ''}
                     ${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
                     ${index !== 0 && 'border-l border-gray-600'}
                     border border-yellow-500 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
                   `}
-					>
+						>
-						<input
+							<input
-							type="radio"
+								type="radio"
-							name="cardStyle"
+								name="cardStyle"
-							value={option}
+								value={option}
-							checked={gameData.settings.cardStyle === option}
+								checked={settings.cardStyle === option}
-							onChange={() => tuneRadio(option)}
+								onChange={() => tuneRadio(option)}
-							className="sr-only"
+								className="sr-only"
-						/>
+							/>
-						{option}
+							{option}
-					</label>
+						</label>
-				))}
+					))}
-			</div>
+				</div>
-		</fieldset>
+			</fieldset>
-	);
+		) : null;
 
 	return (
 		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
@@ -122,12 +138,7 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 					</span>
 				</div>
 			</Scrim>
-			<button
+			<Icon />
-				className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
-				onClick={() => setOpen((prev) => !prev)}
-			>
-				<Gear className="w-5 h-5" />
-			</button>
 		</div>
 	);
 }

components/SpectatorLink.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { Eye } from 'lucide-react';
+import { useAppContext } from '@/app/AppContext';
+import CopyButton from '@/components/CopyButton';
+
+export function SpectatorLink() {
+	const { gameData } = useAppContext();
+
+	return (
+		<CopyButton
+			copy={`${location.origin}/${gameData.spectatorID}`}
+			tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
+			Icon={Eye}
+			className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
+			size={24}
+		/>
+	);
+}

components/TarokkaGrid.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import Card from '@/components/Card';
+import { cardMap } from '@/constants/tarokka';
+import type {} from '@/types';
+
+export default function TarokkaGrid() {
+	const { gameData } = useAppContext();
+	const { cards } = gameData;
+
+	// map our five Tarokka cards to their proper locations in a 3x3 grid
+	// common deck cards: left, top, and right
+	// high deck cards: bottom and center
+	const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
+
+	return (
+		<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
+			{Array.from({ length: 9 })
+				.map(arrangeCards)
+				.map((card, index) => (
+					<div key={index} className="aspect-[2/3]}">
+						{card && <Card card={card} cardIndex={cardMap[index]} />}
+					</div>
+				))}
+		</div>
+	);
+}

components/TiltCard.tsx

@@ -1,15 +1,54 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import { useAppContext } from '@/app/AppContext';
+import type { Tilt } from '@/types';
 
 export default function TiltCard({
 	children,
+	cardIndex,
 	className = '',
-	onClick = () => {},
 }: {
 	children: React.ReactNode;
+	cardIndex: number;
 	className?: string;
-	onClick: (event: React.MouseEvent) => void;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
+	const {
+		gameData,
+		settings: { tilt },
+		setTilt,
+	} = useAppContext();
+
+	useEffect(() => {
+		const card = cardRef.current;
+		if (!card) return;
+
+		if (tilt) {
+			const tilts = gameData.tilts[cardIndex];
+			if (!tilts.length) {
+				card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+				return;
+			}
+
+			const { totalX, totalY } = tilts.reduce(
+				({ totalX, totalY }, { rotateX, rotateY }) => ({
+					totalX: totalX + rotateX,
+					totalY: totalY + rotateY,
+				}),
+				{ totalX: 0, totalY: 0 },
+			);
+
+			const rotateX = totalX / tilts.length;
+			const rotateY = totalY / tilts.length;
+
+			if (rotateX || rotateY) {
+				card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+			} else {
+				card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+			}
+		} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
+			card.style.transform = 'rotateX(0deg) rotateY(0deg)';
+		}
+	}, [tilt, gameData]);
 
 	const handleMouseMove = (e: React.MouseEvent) => {
 		const card = cardRef.current;
@@ -24,21 +63,21 @@ export default function TiltCard({
 		const rotateX = ((y - centerY) / centerY) * -20;
 		const rotateY = ((x - centerX) / centerX) * 20;
 
-		card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+		const newTilt: Tilt[] = [];
+		newTilt[cardIndex] = { rotateX, rotateY };
+
+		setTilt(newTilt);
 	};
 
 	const handleMouseLeave = () => {
-		const card = cardRef.current;
+		setTilt([]);
-		if (!card) return;
-		card.style.transform = `rotateX(0deg) rotateY(0deg)`;
 	};
 
 	return (
 		<div
 			className={`${className}`}
-			onMouseMove={handleMouseMove}
+			onMouseMove={tilt ? handleMouseMove : undefined}
 			onMouseLeave={handleMouseLeave}
-			onClick={onClick}
 		>
 			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
 				{children}

constants/index.ts

@@ -0,0 +1,33 @@
+export * from '@/constants/standardCards';
+export * from '@/constants/tarokka';
+export * from '@/constants/tarokkaCards';
+export * from '@/constants/time';
+
+import type { GameUpdate, LocalSettings, Settings } from '@/types';
+
+export const SETTINGS: Settings = {
+	cardStyle: 'color',
+	notes: false,
+	positionBack: false,
+	positionFront: false,
+	prophecy: false,
+	tilt: true,
+	remoteTilt: false,
+};
+
+export const GAME_START: GameUpdate = {
+	dmID: '',
+	spectatorID: '',
+	cards: [],
+	settings: SETTINGS,
+	tilts: Array.from({ length: 5 }, () => []),
+};
+
+export const LOCAL_DEFAULTS: LocalSettings = {
+	tilt: true,
+	remoteTilt: true,
+};
+
+export const LOCAL_SETTINGS = ['tilt', 'remoteTilt'];
+
+export const SPECTATOR_SETTINGS = ['tilt', 'remoteTilt'];

constants/time.ts

@@ -2,3 +2,5 @@ export const SECOND = 1000;
 export const MINUTE = 60 * SECOND;
 export const HOUR = 60 * MINUTE;
 export const DAY = 24 * HOUR;
+
+export const thirtyFPS = SECOND / 30;

hooks/useSocket.ts

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
 import { socket } from '@/socket';
+import throttle from '@/tools/throttle';
 
-import type { GameUpdate } from '@/types';
+import { thirtyFPS } from '@/constants/time';
+import type { GameUpdate, Tilt } from '@/types';
 
 interface UseSocketProps {
 	gameID: string;
@@ -37,21 +39,28 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		};
 	}, [gameID]);
 
-	const flipCard = (cardIndex: number) => {
+	const emitFlip = (cardIndex: number) => {
 		socket.emit('flip-card', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const redraw = (cardIndex: number) => {
+	const emitSettings = (gameData: GameUpdate) => {
+		socket.emit('settings', {
+			gameID,
+			gameData,
+		});
+	};
+
+	const emitRedraw = (cardIndex: number) => {
 		socket.emit('redraw', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const select = (cardIndex: number, cardID: string) => {
+	const emitSelect = (cardIndex: number, cardID: string) => {
 		socket.emit('select', {
 			gameID,
 			cardIndex,
@@ -59,17 +68,18 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
-	const handleSettings = (gameData: GameUpdate) => {
+	const emitTilt = throttle((cardIndex: number, tilt: Tilt) => {
-		socket.emit('settings', {
+		socket.emit('tilt', {
-			gameID,
+			cardIndex,
-			gameData,
+			tilt,
 		});
-	};
+	}, thirtyFPS);
 
 	return {
-		flipCard,
+		emitFlip,
-		redraw,
+		emitSettings,
-		select,
+		emitRedraw,
-		handleSettings,
+		emitSelect,
+		emitTilt,
 	};
 }

lib/GameStore.ts

@@ -1,8 +1,9 @@
 import Deck from '@/lib/TarokkaDeck';
 import generateID from '@/tools/simpleID';
 import parseMilliseconds from '@/tools/parseMilliseconds';
-import { HOUR, DAY } from '@/constants/time';
+
-import { GameState, GameUpdate, Settings } from '@/types';
+import { HOUR, DAY, SETTINGS } from '@/constants';
+import { GameState, GameUpdate, Settings, Tilt } from '@/types';
 
 const deck = new Deck();
 
@@ -84,13 +85,8 @@ export default class GameStore {
 			players: new Set(),
 			cards: deck.getHand(),
 			lastUpdated: Date.now(),
-			settings: {
+			settings: SETTINGS,
-				positionBack: true,
+			tilts: Array.from({ length: 5 }, () => []),
-				positionFront: true,
-				prophecy: true,
-				notes: true,
-				cardStyle: 'color',
-			},
 		};
 
 		this.totalCreated++;
@@ -111,11 +107,15 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
-	leaveGame(game: GameState, playerID: string): GameState {
+	leaveGame(playerID: string): GameUpdate {
+		const game = this.getGameByPlayerID(playerID);
+
+		this.players.delete(playerID);
 		game.players.delete(playerID);
+		this._clearTilts(game, playerID);
 		game.lastUpdated = Date.now();
 
-		return game;
+		return this.gameUpdate(game);
 	}
 
 	flipCard(gameID: string, cardIndex: number): GameUpdate {
@@ -157,6 +157,27 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
+	tilt(playerID: string, cardIndex: number, { rotateX, rotateY }: Tilt) {
+		const game = this.getGameByPlayerID(playerID);
+		const cardTilts = game.tilts[cardIndex];
+
+		if (!cardTilts) throw new Error(`Card tilts ${cardIndex} not found`);
+
+		this._clearTilts(game, playerID);
+
+		if (rotateX && rotateY) {
+			game.tilts[cardIndex] = [...game.tilts[cardIndex], { playerID, rotateX, rotateY }];
+			game.lastUpdated = Date.now();
+		}
+
+		return this.gameUpdate(game);
+	}
+
+	_clearTilts(game: GameState, playerID: string) {
+		game.tilts = game.tilts.map((card) => card.filter((tilt) => tilt.playerID !== playerID));
+		game.lastUpdated = Date.now();
+	}
+
 	updateSettings(gameID: string, settings: Settings) {
 		const game = this.getGame(gameID);
 
@@ -173,24 +194,27 @@ export default class GameStore {
 		return game;
 	}
 
-	gameUpdate(game: GameState): GameUpdate {
+	getGameByPlayerID(playerID: string): GameState {
-		const { dmID, spectatorID, cards, settings } = game;
+		const game = this.players.get(playerID);
 
-		return { dmID, spectatorID, cards, settings };
+		if (!game) throw new Error(`Player ${playerID} not found`);
+
+		return game;
 	}
 
-	playerExit(playerID: string): GameState | null {
+	gameUpdate(game: GameState): GameUpdate {
+		const { dmID, spectatorID, cards, settings, tilts } = game;
+
+		return { dmID, spectatorID, cards, settings, tilts };
+	}
+
+	playerExit(playerID: string): GameUpdate | null {
 		if (this.startUps.has(playerID)) {
 			this.startUps.delete(playerID);
 
 			return null;
 		} else {
-			const game = this.players.get(playerID);
+			return this.leaveGame(playerID);
-
-			if (!game) throw new Error(`Player ${playerID} not found`);
-
-			this.players.delete(playerID);
-			return this.leaveGame(game, playerID);
 		}
 	}
 

server.ts

@@ -4,7 +4,9 @@ import { Server as SocketIOServer, type Socket } from 'socket.io';
 
 import GameStore from '@/lib/GameStore';
 import omit from '@/tools/omit';
-import type { ClientUpdate, GameUpdate } from '@/types';
+
+import { thirtyFPS } from '@/constants/time';
+import type { ClientUpdate, GameUpdate, Tilt } from '@/types';
 
 const dev = process.env.NODE_ENV !== 'production';
 const hostname = '0.0.0.0';
@@ -15,9 +17,10 @@ const handler = app.getRequestHandler();
 
 const gameStore = new GameStore();
 
+const timedReleases = {};
+
 app.prepare().then(() => {
 	const httpServer = createServer(handler);
-
 	const io = new SocketIOServer(httpServer);
 
 	const broadcast = (event: string, gameUpdate: GameUpdate) => {
@@ -25,6 +28,25 @@ app.prepare().then(() => {
 		io.to(gameUpdate.spectatorID).emit(event, omit(gameUpdate, 'dmID'));
 	};
 
+	const timedRelease = (event: string, gameUpdate: GameUpdate, threshold: number) => {
+		const now = Date.now();
+		const lastEvent = timedReleases[event];
+		clearTimeout(lastEvent?.to);
+
+		if (lastEvent?.embargo >= now) {
+			const embargo = lastEvent.embargo - now;
+
+			const to = setTimeout(() => {
+				broadcast(event, gameUpdate);
+			}, embargo);
+
+			timedReleases[event] = { embargo, to };
+		} else {
+			broadcast(event, gameUpdate);
+			timedReleases[event] = { embargo: now + threshold };
+		}
+	};
+
 	io.on('connection', (socket: Socket) => {
 		//console.log(Date.now(), `Client connected: ${socket.id}`);
 
@@ -119,6 +141,16 @@ app.prepare().then(() => {
 			}
 		});
 
+		socket.on('tilt', ({ cardIndex, tilt }: { cardIndex: number; tilt: Tilt }) => {
+			try {
+				const gameState = gameStore.tilt(socket.id, cardIndex, tilt);
+				timedRelease('game-update', gameState, thirtyFPS);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+				console.error(Date.now(), 'Error[tilt]', error);
+			}
+		});
+
 		socket.on('disconnect', () => {
 			try {
 				const game = gameStore.playerExit(socket.id);

tools/throttle.ts

@@ -0,0 +1,12 @@
+export default function throttle(func: Function, threshold: number) {
+	let lastCall = 0;
+
+	return (...args: any[]) => {
+		const now = Date.now();
+
+		if (now - lastCall >= threshold) {
+			lastCall = now;
+			func(...args);
+		}
+	};
+}

types/index.ts

@@ -4,11 +4,18 @@ export type CardStyle = 'standard' | 'color' | 'grayscale';
 export type Deck = 'high' | 'common' | 'both' | 'back' | 'all';
 
 export interface Settings {
+	cardStyle: CardStyle;
+	notes: boolean;
 	positionBack: boolean;
 	positionFront: boolean;
 	prophecy: boolean;
-	notes: boolean;
+	tilt: boolean;
-	cardStyle: CardStyle;
+	remoteTilt: boolean;
+}
+
+export interface LocalSettings {
+	tilt: boolean;
+	remoteTilt: boolean;
 }
 
 export interface StandardCard {
@@ -82,6 +89,7 @@ export interface GameState {
 	cards: TarokkaGameCard[];
 	lastUpdated: number;
 	settings: Settings;
+	tilts: Tilt[][];
 }
 
 export interface GameUpdate {
@@ -89,6 +97,7 @@ export interface GameUpdate {
 	spectatorID: string;
 	cards: TarokkaGameCard[];
 	settings: Settings;
+	tilts: Tilt[][];
 }
 
 export interface ClientUpdate {
@@ -103,3 +112,9 @@ export interface Layout {
 	name: string;
 	text: string;
 }
+
+export interface Tilt {
+	playerID?: string;
+	rotateX: number;
+	rotateY: number;
+}