keep tilts synced

app/AppContext.tsx

@@ -1,41 +1,34 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import useSocket from '@/hooks/useSocket';
-import type { GameUpdate, Tilt } from '@/types';
+
+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);
 
-const gameStart: GameUpdate = {
-	dmID: '',
-	spectatorID: '',
-	cards: [],
-	settings: {
-		positionBack: false,
-		positionFront: false,
-		prophecy: false,
-		notes: false,
-		cardStyle: 'color',
-	},
-	tilts: Array.from({ length: 5 }, () => []),
-};
-
 export interface AppContext {
 	gameData: GameUpdate;
+	isDM: boolean;
 	noGame: boolean;
-	tilt: Tilt[];
 	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>(gameStart);
+	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);
@@ -52,6 +45,10 @@ export function AppProvider({ children }: { children: ReactNode }) {
 
 		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]);
 
@@ -61,16 +58,22 @@ export function AppProvider({ children }: { children: ReactNode }) {
 		emitSelect(selectCardIndex, cardID);
 	};
 
+	const { dmID } = gameData;
+	const isDM = !!dmID;
+
 	const appInterface = {
 		gameData,
+		isDM,
 		noGame,
-		tilt,
 		selectCardIndex,
+		settings: { ...gameData.settings, ...localSettings },
+		tilt,
 		emitFlip,
 		emitSettings,
 		emitRedraw,
 		emitSelect: handleSelect,
 		setGameID,
+		setLocalSettings,
 		setSelectCardIndex,
 		setTilt,
 	};

components/Settings.tsx

@@ -10,7 +10,9 @@ import CopyButton from '@/components/CopyButton';
 import GitHubButton from '@/components/GitHubButton';
 import Scrim from '@/components/Scrim';
 import Switch from '@/components/Switch';
-import { CardStyle } from '@/types';
+
+import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
+import type { CardStyle, LocalSettings } from '@/types';
 
 const cinzel = Cinzel_Decorative({
 	variable: '--font-cinzel',
@@ -22,19 +24,20 @@ const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
 
 export default function Settings() {
 	const [open, setOpen] = useState(false);
-	const { gameData, emitSettings } = useAppContext();
+	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
 
-	const { dmID } = gameData;
-	const isDM = !!dmID;
-
-	const togglePermission = (key: string) => {
-		emitSettings({
-			...gameData,
-			settings: {
-				...gameData.settings,
-				[key]: !gameData.settings[key],
-			},
-		});
+	const togglePermission = (key: keyof LocalSettings) => {
+		if (LOCAL_SETTINGS.includes(key)) {
+			setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+		} else if (isDM) {
+			emitSettings({
+				...gameData,
+				settings: {
+					...gameData.settings,
+					[key]: !gameData.settings[key],
+				},
+			});
+		}
 	};
 
 	const tuneRadio = (cardStyle: CardStyle) => {
@@ -47,14 +50,25 @@ export default function Settings() {
 		});
 	};
 
+	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
-				title="Copy DM link"
-				copy={`${location.origin}/${gameData.dmID}`}
-				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"
-			/>
+			{isDM && (
+				<CopyButton
+					title="Copy DM link"
+					copy={`${location.origin}/${gameData.dmID}`}
+					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,45 +80,47 @@ export default function Settings() {
 
 	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 = () => (
-		<fieldset className="flex flex-col w-full">
-			<div className="text-xs my-1">Card style:</div>
-			<div className="inline-flex overflow-hidden rounded-md w-full">
-				{cardStyleOptions.map((option, index) => (
-					<label
-						key={option}
-						className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
-                    ${gameData.settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
+	const CardStyle = () =>
+		isDM ? (
+			<fieldset className="flex flex-col w-full">
+				<div className="text-xs my-1">Card style:</div>
+				<div className="inline-flex overflow-hidden rounded-md w-full">
+					{cardStyleOptions.map((option, index) => (
+						<label
+							key={option}
+							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
-							type="radio"
-							name="cardStyle"
-							value={option}
-							checked={gameData.settings.cardStyle === option}
-							onChange={() => tuneRadio(option)}
-							className="sr-only"
-						/>
-						{option}
-					</label>
-				))}
-			</div>
-		</fieldset>
-	);
+						>
+							<input
+								type="radio"
+								name="cardStyle"
+								value={option}
+								checked={settings.cardStyle === option}
+								onChange={() => tuneRadio(option)}
+								className="sr-only"
+							/>
+							{option}
+						</label>
+					))}
+				</div>
+			</fieldset>
+		) : null;
 
-	return isDM ? (
+	return (
 		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
 			<Scrim
 				clickAction={() => setOpen((prev) => !prev)}
@@ -122,12 +138,7 @@ export default function Settings() {
 					</span>
 				</div>
 			</Scrim>
-			<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>
+			<Icon />
 		</div>
-	) : null;
+	);
 }

components/TiltCard.tsx

@@ -12,37 +12,43 @@ export default function TiltCard({
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
-	const { gameData, setTilt } = useAppContext();
+	const {
+		gameData,
+		settings: { tilt },
+		setTilt,
+	} = useAppContext();
 
 	useEffect(() => {
 		const card = cardRef.current;
 		if (!card) return;
 
-		const tilt = gameData.tilts[cardIndex];
-		if (!tilt) {
-			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-			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)';
 		}
-
-		const tilted = tilt.filter(({ rotateX, rotateY }) => rotateX || rotateY);
-
-		const { totalX, totalY } = tilted.reduce(
-			({ totalX, totalY }, { rotateX, rotateY }) => ({
-				totalX: totalX + rotateX,
-				totalY: totalY + rotateY,
-			}),
-			{ totalX: 0, totalY: 0 },
-		);
-
-		const rotateX = totalX / tilted.length;
-		const rotateY = totalY / tilted.length;
-
-		if (rotateX || rotateY) {
-			card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-		} else {
-			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-		}
-	}, [gameData]);
+	}, [tilt, gameData]);
 
 	const handleMouseMove = (e: React.MouseEvent) => {
 		const card = cardRef.current;
@@ -68,7 +74,11 @@ export default function TiltCard({
 	};
 
 	return (
-		<div className={`${className}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+		<div
+			className={`${className}`}
+			onMouseMove={tilt ? handleMouseMove : undefined}
+			onMouseLeave={handleMouseLeave}
+		>
 			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
 				{children}
 			</div>

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'];

lib/GameStore.ts

@@ -1,7 +1,8 @@
 import Deck from '@/lib/TarokkaDeck';
 import generateID from '@/tools/simpleID';
 import parseMilliseconds from '@/tools/parseMilliseconds';
-import { HOUR, DAY } from '@/constants/time';
+
+import { HOUR, DAY, SETTINGS } from '@/constants';
 import { GameState, GameUpdate, Settings, Tilt } from '@/types';
 
 const deck = new Deck();
@@ -84,13 +85,7 @@ export default class GameStore {
 			players: new Set(),
 			cards: deck.getHand(),
 			lastUpdated: Date.now(),
-			settings: {
-				positionBack: true,
-				positionFront: true,
-				prophecy: true,
-				notes: true,
-				cardStyle: 'color',
-			},
+			settings: SETTINGS,
 			tilts: Array.from({ length: 5 }, () => []),
 		};
 
@@ -112,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 {
@@ -164,15 +163,21 @@ export default class GameStore {
 
 		if (!cardTilts) throw new Error(`Card tilts ${cardIndex} not found`);
 
-		game.tilts[cardIndex] = [
-			...cardTilts.filter((tilt) => tilt.playerID !== playerID),
-			{ playerID, rotateX, rotateY },
-		];
-		game.lastUpdated = Date.now();
+		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);
 
@@ -203,16 +208,13 @@ export default class GameStore {
 		return { dmID, spectatorID, cards, settings, tilts };
 	}
 
-	playerExit(playerID: string): GameState | null {
+	playerExit(playerID: string): GameUpdate | null {
 		if (this.startUps.has(playerID)) {
 			this.startUps.delete(playerID);
 
 			return null;
 		} else {
-			const game = this.getGameByPlayerID(playerID);
-
-			this.players.delete(playerID);
-			return this.leaveGame(game, playerID);
+			return this.leaveGame(playerID);
 		}
 	}
 

server.ts

@@ -21,7 +21,6 @@ const timedReleases = {};
 
 app.prepare().then(() => {
 	const httpServer = createServer(handler);
-
 	const io = new SocketIOServer(httpServer);
 
 	const broadcast = (event: string, gameUpdate: GameUpdate) => {
@@ -32,9 +31,9 @@ app.prepare().then(() => {
 	const timedRelease = (event: string, gameUpdate: GameUpdate, threshold: number) => {
 		const now = Date.now();
 		const lastEvent = timedReleases[event];
+		clearTimeout(lastEvent?.to);
 
 		if (lastEvent?.embargo >= now) {
-			clearTimeout(lastEvent.to);
 			const embargo = lastEvent.embargo - now;
 
 			const to = setTimeout(() => {

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;
-	cardStyle: CardStyle;
+	tilt: boolean;
+	remoteTilt: boolean;
+}
+
+export interface LocalSettings {
+	tilt: boolean;
+	remoteTilt: boolean;
 }
 
 export interface StandardCard {