simplify tools imports

- 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,91 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import useSocket from '@/hooks/useSocket';
+import { reduceTilts } from '@/tools';
+
+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;
+	tilts: 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;
+	setLocalTilt: (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 [localTilt, setLocalTilt] = useState<Tilt[]>([]);
+
+	const { emitFlip, emitRedraw, emitSelect, emitSettings, emitTilt } = useSocket({
+		gameID,
+		setGameData,
+		setNoGame,
+	});
+
+	useEffect(() => {
+		if (localSettings.remoteTilt) {
+			const cardIndex = localTilt.findIndex((tilt) => !!tilt);
+
+			if (localTilt[cardIndex]) {
+				emitTilt(cardIndex, localTilt[cardIndex]);
+			} else {
+				// cardIndex does not matter
+				// all tilts for this user will be cleared
+				emitTilt(0, { percentX: -1, percentY: -1, rotateX: 0, rotateY: 0 });
+			}
+		}
+	}, [localTilt, 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 },
+		tilts: reduceTilts(gameData, localTilt),
+		emitFlip,
+		emitSettings,
+		emitRedraw,
+		emitSelect: handleSelect,
+		setGameID,
+		setLocalSettings,
+		setSelectCardIndex,
+		setLocalTilt,
+	};
+
+	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,125 +1,35 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'next/navigation';
-import { socket } from '@/socket';
-import { Eye } from 'lucide-react';
 
-import Card from '@/components/Card';
-import CopyButton from '@/components/CopyButton';
+import { useAppContext } from '@/app/AppContext';
+import CardSelect from '@/components/CardSelect';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
-import Settings from '@/components/Settings';
-
-import { cardMap, layout } from '@/constants/tarokka';
-
-import type { GameUpdate, ClientUpdate } from '@/types';
+import Settings from '@/components/Settings/index';
+import { SpectatorLink } from '@/components/SpectatorLink';
+import TarokkaGrid from '@/components/TarokkaGrid';
 
 export default function GamePage() {
-	const { gameID: gameIDParam } = useParams();
-
-	const [gameID, setGameID] = useState('');
-	const [noGame, setNoGame] = useState(false);
-	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;
-
-	useEffect(() => {
-		if (gameIDParam) {
-			setGameID(Array.isArray(gameIDParam) ? gameIDParam[0] : gameIDParam);
-		}
-	}, [gameIDParam]);
+	const { noGame, setGameID } = useAppContext();
+	const { gameID } = useParams();
 
 	useEffect(() => {
 		if (gameID) {
-			socket.emit('join', gameID);
-
-			socket.on('init', (data: GameUpdate) => {
-				setGameData(data);
-			});
-
-			socket.on('game-update', (data: GameUpdate) => {
-				setGameData(data);
-			});
-
-			socket.on('join-error', (error) => {
-				console.error('Error:', error);
-				setNoGame(true);
-			});
-
-			socket.on('flip-error', (error) => {
-				console.error('Error:', error);
-			});
+			setGameID(Array.isArray(gameID) ? gameID[0] : gameID);
 		}
-
-		return () => {
-			socket.removeAllListeners();
-		};
 	}, [gameID]);
 
-	const flipCard = (cardIndex: number) => {
-		const flip: ClientUpdate = {
-			gameID,
-			cardIndex,
-		};
-
-		socket.emit('flip-card', flip);
-	};
-
-	const handleSettings = (gameData: GameUpdate) => {
-		socket.emit('settings', { gameID, 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 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 && (
-				<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}
-				/>
-			)}
-
-			{isDM && <Settings gameData={gameData} changeAction={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={() => flipCard(cardMap[index])}
-								/>
-							)}
-						</div>
-					))}
-			</div>
-			<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
+			<SpectatorLink />
+			<Settings />
+			<TarokkaGrid />
+			<Notes />
+			<CardSelect />
 		</main>
-	) : null;
+	);
 }

app/globals.css

@@ -40,3 +40,21 @@ body {
 .rotate-y-180 {
 	transform: rotateY(180deg);
 }
+
+.see-through {
+	mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 75%);
+	mask-size: cover;
+	mask-repeat: no-repeat;
+	-webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 75%);
+	-webkit-mask-size: cover;
+	-webkit-mask-repeat: no-repeat;
+}
+
+.scrollbar-hide {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+	display: none;
+}

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({
@@ -23,6 +24,7 @@ const cinzel = Cinzel_Decorative({
 export const metadata: Metadata = {
 	title: 'Tarokka',
 	description: 'Fortune telling for D&D’s Curse of Strahd',
+	metadataBase: new URL('https://tarokka.app'),
 	appleWebApp: {
 		title: 'Tarokka',
 		statusBarStyle: 'black-translucent',
@@ -39,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>
 	);
 }

app/page.tsx

@@ -16,13 +16,19 @@ export default function Home() {
 	};
 
 	return (
-		<main className="min-h-screen flex items-center justify-center bg-[url('/img/table3.png')] bg-cover bg-center">
+		<main className="min-h-screen flex justify-center items-center text-yellow-400 bg-[url('/img/table3.png')] bg-cover bg-center">
+			<div className="flex flex-col items-center gap-8 text-center">
+				<h1 className="text-5xl font-bold text-center text-primary">Tarokka</h1>
+				<p className="text-l text-center w-[350px] m-auto">
+					Online Tarokka readings for <em>Dungeons & Dragons: Curse of Strahd</em>.
+				</p>
 				<button
 					onClick={handleCreateGame}
-				className="bg-slate-800 hover:bg-slate-700 text-yellow-400 border border-yellow-500/25 hover:drop-shadow-[0_0_3px_rgba(255,215,0,0.5)] hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
+					className="bg-slate-800 hover:bg-slate-700 border border-yellow-500/25 hover:drop-shadow-[0_0_3px_rgba(255,215,0,0.5)] hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
 				>
 					Create New Game
 				</button>
+			</div>
 		</main>
 	);
 }

components/Card.tsx

@@ -1,33 +1,43 @@
 'use client';
 
+import { useState } from 'react';
+import { useAppContext } from '@/app/AppContext';
+import TiltCard from '@/components/TiltCard';
 import ToolTip from '@/components/ToolTip';
-import tarokkaCards from '@/constants/tarokkaCards';
-import getCardInfo from '@/tools/getCardInfo';
-import getURL from '@/tools/getURL';
+import StackTheDeck from '@/components/StackTheDeck';
+import Sheen from '@/components/Sheen';
+import { getCardInfo, getURL } from '@/tools';
 
-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;
-	settings: Settings;
-	flipAction: () => void;
+	cardIndex: number;
 };
 
-export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
+export default function Card({ card, cardIndex }: 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) {
-			flipAction();
+		if (isDM) {
+			emitFlip(cardIndex);
 		}
 	};
 
 	const getTooltip = () => {
-		const text = getCardInfo(card, position, dm, settings);
+		const text = getCardInfo(card, position, isDM, settings);
 
 		return text.length ? (
 			<>
@@ -42,30 +52,50 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 	};
 
 	return (
-		<ToolTip content={getTooltip()}>
+		<ToolTip content={tooltip || getTooltip()}>
+			<TiltCard
+				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
+				cardIndex={cardIndex}
+			>
 				<div
-				className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `}
+					className={`absolute inset-0 transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
 					onClick={handleClick}
 				>
-				<div
-					className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
-				>
-					<div className="absolute group inset-0 backface-hidden">
+					<div className="absolute inset-0 group backface-hidden">
+						{isDM && (
+							<>
+								<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
+								<img
+									src={getURL(cardBack as TarokkaGameCard, settings)}
+									alt=""
+									className={`absolute rounded-lg see-through`}
+								/>
+							</>
+						)}
 						<img
 							src={getURL(cardBack as TarokkaGameCard, settings)}
 							alt="Card Back"
-							className={`rounded-lg ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 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]' : ''}`}
 						/>
+						{isDM && !flipped && (
+							<StackTheDeck
+								onRedraw={() => emitRedraw(cardIndex)}
+								onSelect={() => setSelectCardIndex(cardIndex)}
+								onHover={setTooltip}
+							/>
+						)}
+						<Sheen cardIndex={cardIndex} />
 					</div>
-					<div className="absolute group inset-0 backface-hidden rotate-y-180">
+					<div className="absolute inset-0 backface-hidden rotate-y-180">
 						<img
 							src={getURL(card, settings)}
 							alt={aria}
 							className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
 						/>
+						<Sheen cardIndex={cardIndex} />
 					</div>
 				</div>
-			</div>
+			</TiltCard>
 		</ToolTip>
 	);
 }

components/CardSelect.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { CircleX } from 'lucide-react';
+import { useAppContext } from '@/app/AppContext';
+import TarokkaDeck from '@/lib/TarokkaDeck';
+import { getURL } from '@/tools';
+
+import { Deck } from '@/types';
+
+const tarokkaDeck = new TarokkaDeck();
+
+type CardSelectProps = {
+	className?: string;
+};
+
+export default function CardSelect({ className = '' }: CardSelectProps) {
+	const { gameData, emitSelect, selectCardIndex, setSelectCardIndex } = useAppContext();
+	const { cards: hand, settings } = gameData;
+
+	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) {
+			close();
+		}
+	};
+
+	if (!selectDeck) return null;
+
+	const cards = selectDeck === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
+
+	return (
+		<div
+			onClick={handleClose}
+			className={`fixed inset-0 flex justify-center items-center p-4 bg-black/20 backdrop-blur-sm z-40 ${className}`}
+		>
+			<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={close}
+			>
+				<CircleX className="w-6 h-6" />
+			</button>
+			<div
+				onClick={handleClose}
+				className={`flex flex-wrap justify-center items-center gap-3 h-dvh w-2/3 overflow-scroll scrollbar-hide p-4`}
+			>
+				{cards
+					.filter(({ id }) => !handIDs.includes(id))
+					.map((card) => (
+						<div
+							key={card.id}
+							className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
+							onClick={() => emitSelect(card.id)}
+						>
+							<img
+								src={getURL(card, settings)}
+								alt={card.aria}
+								className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
+							/>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}

components/Notes.tsx

@@ -1,22 +1,20 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { ScrollText } from 'lucide-react';
+import { CircleX, 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 { getCardInfo } from '@/tools';
 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);
 
@@ -53,13 +51,24 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
 				className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
 			>
 				<div
-					className={`fixed bottom-4 right-4 transition-all duration-250 bg-slate-800 border border-yellow-400 rounded-lg space-y-2 ${showNotes ? 'sm:w-[33vw] sm:h-[67vh] w-[80vw] h-[80vh]' : 'w-0 h-0'}`}
+					className={`
+						fixed bottom-4 right-4
+						transition-all duration-250
+						bg-slate-800
+						border border-yellow-400 rounded-lg
+						${showNotes ? 'sm:w-[50vw] sm:h-[67vh] w-[80vw] h-[80vh]' : 'w-0 h-0'}
+					`}
 				>
 					<CopyButton
 						copy={notes.map((note) => note!.join('\n')).join('\n\n')}
-						className="text-yellow-400 hover:drop-shadow-[0_0_1px_#ffd700] absolute top-2 right-2 p-2 transition-all duration-250 bg-black/20 hover:bg-black/40 rounded-full cursor-pointer"
+						className={`
+							absolute top-2 right-2
+							cursor-pointer p-2
+							transition-all duration-250
+							text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
+						`}
 					/>
-					<div className="text-yellow-400 h-full overflow-scroll p-6 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
+					<div className="text-yellow-400 h-full overflow-scroll p-8 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
 						{notes.map((note, index) => (
 							<div key={index}>
 								<div className="flex flex-col gap-2">
@@ -72,6 +81,17 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
 						))}
 					</div>
 				</div>
+				<button
+					className={`
+						fixed bottom-4 right-4
+						cursor-pointer p-2
+						transition-all duration-250
+						text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
+					`}
+					onClick={() => setOpen((prev) => !prev)}
+				>
+					<CircleX className="w-5 h-5" />
+				</button>
 			</Scrim>
 		</div>
 	);

components/Scrim.tsx

@@ -13,6 +13,7 @@ export default function Scrim({ children, clickAction, show = true, className =
 			clickAction(event);
 		}
 	};
+
 	if (!show) return null;
 
 	return (

components/Settings.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Settings as Gear } from 'lucide-react';
-import { Cinzel_Decorative } from 'next/font/google';
-
-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';
-
-const cinzel = Cinzel_Decorative({
-	variable: '--font-cinzel',
-	subsets: ['latin'],
-	weight: '400',
-});
-
-type SettingsProps = {
-	gameData: GameUpdate;
-	changeAction: (updatedSettings: GameUpdate) => void;
-};
-
-const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
-
-export default function Settings({ gameData, changeAction }: SettingsProps) {
-	const [open, setOpen] = useState(false);
-
-	const togglePermission = (key: string) => {
-		changeAction({
-			...gameData,
-			settings: {
-				...gameData.settings,
-				[key]: !gameData.settings[key],
-			},
-		});
-	};
-
-	const tuneRadio = (cardStyle: CardStyle) => {
-		changeAction({
-			...gameData,
-			settings: {
-				...gameData.settings,
-				cardStyle,
-			},
-		});
-	};
-
-	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"
-			/>
-			<CopyButton
-				title="Copy Spectator link"
-				copy={`${location.origin}/${gameData.spectatorID}`}
-				tooltip={`${location.origin}/${gameData.spectatorID}`}
-				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"
-			/>
-		</>
-	);
-
-	const Permissions = () => (
-		<>
-			{Object.entries(gameData.settings)
-				.filter(([_key, value]) => typeof value === 'boolean')
-				.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'}
-                    ${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>
-	);
-
-	return (
-		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
-			<Scrim
-				clickAction={() => setOpen((prev) => !prev)}
-				className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
-			>
-				<div
-					className={`fixed top-4 right-4 flex flex-col items-center justify-evenly bg-slate-800 text-yellow-400 rounded-lg border border-yellow-400 py-3 px-4 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[350px]' : 'opacity-0 w-0 h-0'}`}
-				>
-					<Links />
-					<Permissions />
-					<CardStyle />
-					<span className="w-full flex flex-row justify-evenly">
-						<GitHubButton className="h-[35px] w-[125px]" />
-						<BuyMeACoffee className="h-[35px] w-[125px]" />
-					</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>
-		</div>
-	);
-}

components/Settings/CardStyle.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import type { CardStyle } from '@/types';
+
+const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
+
+export default function CardStyle({ className }: { className?: string }) {
+	const { gameData, isDM, settings, emitSettings } = useAppContext();
+
+	const tuneRadio = (cardStyle: CardStyle) => {
+		emitSettings({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				cardStyle,
+			},
+		});
+	};
+
+	return isDM ? (
+		<fieldset className={`flex flex-col w-full ${className}`}>
+			<div className="text-xs ml-1 mb-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
+							cursor-pointer
+							w-full px-3 py-2
+							text-xs font-medium
+							border border-yellow-500
+							transition hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
+							${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'}
+						`}
+					>
+						<input
+							type="radio"
+							name="cardStyle"
+							value={option}
+							checked={settings.cardStyle === option}
+							onChange={() => tuneRadio(option)}
+							className="sr-only"
+						/>
+						{option}
+					</label>
+				))}
+			</div>
+		</fieldset>
+	) : null;
+}

components/Settings/ExternalLinks.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import BuyMeACoffee from '@/components/BuyMeACoffee';
+import GitHubButton from '@/components/GitHubButton';
+
+export default function CardStyle({ className }: { className?: string }) {
+	return (
+		<span className={`w-full flex flex-row justify-between ${className}`}>
+			<GitHubButton className="h-[35px] w-[125px]" />
+			<BuyMeACoffee className="h-[35px] w-[125px]" />
+		</span>
+	);
+}

components/Settings/GameLinks.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import CopyButton from '@/components/CopyButton';
+
+export default function Links({ className }: { className?: string }) {
+	const { gameData, isDM } = useAppContext();
+
+	return (
+		<div className={`w-full flex flex-col justify-between gap-2 ${className}`}>
+			{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}`}
+				tooltip={`${location.origin}/${gameData.spectatorID}`}
+				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"
+			/>
+		</div>
+	);
+}

components/Settings/Permissions.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useAppContext } from '@/app/AppContext';
+import Switch from '@/components/Switch';
+import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
+
+export default function Permissions() {
+	const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
+
+	const togglePermission = (key: string) => {
+		if (LOCAL_SETTINGS.includes(key)) {
+			setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+		} else if (isDM) {
+			emitSettings({
+				...gameData,
+				settings: {
+					...gameData.settings,
+					[key]: !gameData.settings[key],
+				},
+			});
+		}
+	};
+
+	return (
+		<>
+			{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)} />
+				))}
+		</>
+	);
+}

components/Settings/index.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { CircleX, Settings as Gear } from 'lucide-react';
+import { Cinzel_Decorative } from 'next/font/google';
+
+import { useAppContext } from '@/app/AppContext';
+import Scrim from '@/components/Scrim';
+
+import CardStyle from './CardStyle';
+import ExternalLinks from './ExternalLinks';
+import GameLinks from './GameLinks';
+import Permissions from './Permissions';
+
+const cinzel = Cinzel_Decorative({
+	variable: '--font-cinzel',
+	subsets: ['latin'],
+	weight: '400',
+});
+
+export default function Settings() {
+	const [open, setOpen] = useState(false);
+	const { isDM } = useAppContext();
+
+	return (
+		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
+			<Scrim
+				clickAction={() => setOpen((prev) => !prev)}
+				className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
+			>
+				<div
+					className={`
+						fixed top-4 right-4
+						flex flex-col items-center justify-between
+						bg-slate-800 text-yellow-400
+						rounded-lg border border-yellow-400
+						h-full p-8
+						transition-all duration-250
+						${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[425px]' : 'w-[325px] max-h-[200px]'}` : 'opacity-0 w-0 max-h-0'}
+					`}
+				>
+					<GameLinks />
+					<Permissions />
+					<CardStyle />
+					<ExternalLinks />
+				</div>
+				<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={() => setOpen((prev) => !prev)}
+				>
+					<CircleX className="w-5 h-5" />
+				</button>
+			</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`}
+				onClick={() => setOpen((prev) => !prev)}
+			>
+				<Gear className="w-5 h-5" />
+			</button>
+		</div>
+	);
+}

components/Sheen.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAppContext } from '@/app/AppContext';
+import { validTilt } from '@/tools';
+
+const tiltSheen = (sheen: HTMLDivElement, x: number, y: number) => {
+	const rect = sheen.getBoundingClientRect();
+	const sheenX = rect.width - x * rect.width;
+	const sheenY = rect.height - y * rect.height;
+
+	sheen.style.opacity = '1';
+	sheen.style.backgroundImage = `
+			radial-gradient(
+				circle at
+				${sheenX}px ${sheenY}px,
+				#ffffff44,
+				#0000000f
+			)
+		`;
+};
+
+export default function Sheen({ cardIndex, className }: { cardIndex: number; className?: string }) {
+	const sheenRef = useRef<HTMLDivElement>(null);
+	const [untilt, setUntilt] = useState(false);
+	const { tilts } = useAppContext();
+
+	useEffect(() => {
+		const sheen = sheenRef.current;
+		if (!sheen) return;
+
+		const tilt = tilts[cardIndex];
+
+		if (validTilt(tilt)) {
+			setUntilt(false);
+			tiltSheen(sheen, tilt.percentX, tilt.percentY);
+		} else {
+			setUntilt(true);
+		}
+	}, [tilts]);
+
+	useEffect(() => {
+		const sheen = sheenRef.current;
+		if (!sheen || !untilt) return;
+
+		sheen.style.opacity = '0';
+	}, [untilt]);
+
+	return (
+		<div
+			ref={sheenRef}
+			className={`
+				absolute inset-0
+				rounded-lg pointer-events-none
+				transition-opacity duration-500
+				bg-gradient-to-tr from-transparent via-white/20 to-transparent mix-blend-screen opacity-0
+				${className}
+			`}
+		/>
+	);
+}

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/StackTheDeck.tsx

@@ -0,0 +1,48 @@
+import { GalleryHorizontalEnd, RefreshCw } from 'lucide-react';
+
+interface StackTheDeckProps {
+	onRedraw: () => void;
+	onSelect: () => void;
+	onHover: (state: React.ReactNode) => void;
+	className?: string;
+}
+
+export default function StackTheDeck({
+	onRedraw,
+	onSelect,
+	onHover,
+	className = '',
+}: StackTheDeckProps) {
+	const curryHandleClick = (action: () => void) => (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.stopPropagation();
+		action();
+	};
+
+	return (
+		<div
+			className={`absolute top-0 right-0 flex flex-col items-center justify-center bg-black/50 rounded-tr-lg rounded-bl-lg ${className}`}
+		>
+			<button
+				onMouseEnter={() => onHover(<p className="text-yellow-400">Redraw</p>)}
+				onMouseLeave={() => onHover(null)}
+				onTouchStart={() => onHover(<p className="text-yellow-400">Redraw</p>)}
+				onTouchEnd={() => onHover(null)}
+				className={`p-1 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
+				onClick={curryHandleClick(onRedraw)}
+			>
+				<RefreshCw className="w-3 h-3" />
+			</button>
+
+			<button
+				onMouseEnter={() => onHover(<p className="text-yellow-400">Select</p>)}
+				onMouseLeave={() => onHover(null)}
+				onTouchStart={() => onHover(<p className="text-yellow-400">Select</p>)}
+				onTouchEnd={() => onHover(null)}
+				className={`p-1 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
+				onClick={curryHandleClick(onSelect)}
+			>
+				<GalleryHorizontalEnd className="w-3 h-3" />
+			</button>
+		</div>
+	);
+}

components/Switch.tsx

@@ -1,25 +1,44 @@
+import type { ChangeEventHandler } from 'react';
+
 export interface SwitchProps {
 	label: string;
 	value: boolean;
-	toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	toggleAction: ChangeEventHandler<HTMLInputElement>;
+	className?: string;
 }
 
-export default function Switch({ label, value, toggleAction }: SwitchProps) {
+const nonInitialCaps = /(?!^)([A-Z])/g;
+
+export default function Switch({ label, value, toggleAction, className }: SwitchProps) {
 	return (
-		<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
-			<span className="text-sm capitalize">{label}</span>
+		<label
+			className={`flex items-center justify-between gap-2 w-full cursor-pointer text-yellow-400 hover:text-yellow-300 ${className}`}
+		>
+			<span className="text-sm capitalize">{label.replace(nonInitialCaps, ' $1')}</span>
 
 			<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
-				<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
-				<div
-					className={`block w-8 h-4 rounded-full transition ${
-						value ? 'bg-slate-500' : 'bg-slate-600'
-					}`}
+				<input
+					id={`switch-${label}`}
+					type="checkbox"
+					checked={value}
+					onChange={toggleAction}
+					className="sr-only peer"
 				/>
 				<div
-					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
-            ${value ? 'translate-x-4 scale-110' : 'scale-95'}
-            ${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
+					className={`
+						block w-8 h-4 rounded-full
+						transition-colors duration-200 ease-in
+						bg-slate-600 peer-checked:bg-slate-500
+					`}
+				/>
+				<div
+					className={`
+						absolute top-[2px] left-[2px]
+						w-3 h-3 rounded-full
+						transition-all duration-250 ease-out
+						translate-x-0 scale-95 bg-yellow-500
+						peer-checked:translate-x-4 peer-checked:scale-110 peer-checked:bg-yellow-400
+					`}
 				/>
 			</div>
 		</label>

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

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAppContext } from '@/app/AppContext';
+import { throttle, validTilt } from '@/tools';
+
+import { thirtyFPS } from '@/constants/time';
+import type { Tilt } from '@/types';
+
+const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
+
+export default function TiltCard({
+	children,
+	cardIndex,
+	className = '',
+}: {
+	children: React.ReactNode;
+	cardIndex: number;
+	className?: string;
+}) {
+	const cardRef = useRef<HTMLDivElement>(null);
+	const [untilt, setUntilt] = useState(false);
+	const { settings, tilts, setLocalTilt } = useAppContext();
+
+	useEffect(() => {
+		const card = cardRef.current;
+		if (!card) return;
+
+		const tilt = tilts[cardIndex];
+
+		if (validTilt(tilt)) {
+			setUntilt(false);
+			card.style.transform = `rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg)`;
+		} else {
+			setUntilt(true);
+		}
+	}, [tilts]);
+
+	useEffect(() => {
+		const card = cardRef.current;
+		if (!card || !untilt) return;
+
+		card.style.transform = ZERO_ROTATION;
+	}, [untilt]);
+
+	const handleMouseMove = throttle((e: React.MouseEvent) => {
+		const card = cardRef.current;
+		if (!card) return;
+
+		const rect = card.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const y = e.clientY - rect.top;
+		const centerX = rect.width / 2;
+		const centerY = rect.height / 2;
+
+		const rotateX = ((y - centerY) / centerY) * -20;
+		const rotateY = ((x - centerX) / centerX) * 20;
+		const percentX = x / rect.width;
+		const percentY = y / rect.height;
+
+		const newTilt: Tilt[] = [];
+		newTilt[cardIndex] = {
+			percentX,
+			percentY,
+			rotateX,
+			rotateY,
+		};
+
+		setLocalTilt(newTilt);
+	}, thirtyFPS);
+
+	const handleMouseLeave = () => {
+		setLocalTilt([]);
+	};
+
+	return (
+		<div
+			className={`group ${className}`}
+			onMouseMove={settings.tilt ? handleMouseMove : undefined}
+			onMouseLeave={handleMouseLeave}
+		>
+			<div
+				ref={cardRef}
+				onAnimationEnd={() => setUntilt(false)}
+				className={`h-full w-full transition-transform ${untilt ? 'duration-500' : 'duration-0'}`}
+			>
+				{children}
+			</div>
+		</div>
+	);
+}

components/ToolTip.tsx

@@ -15,8 +15,8 @@ type TooltipProps = {
 export default function Tooltip({
 	children,
 	content,
-	delay = 500,
-	mobileDelay = 500,
+	delay = 250,
+	mobileDelay = 250,
 	offsetX = 20,
 	offsetY = 20,
 	edgeBuffer = 10,

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: true,
+	positionBack: true,
+	positionFront: true,
+	prophecy: true,
+	tilt: true,
+	remoteTilt: true,
+};
+
+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/tarokkaCards.ts

@@ -5,6 +5,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'back',
 		name: 'Card Back',
 		card: 'Back of card',
+		deck: 'back',
 		suit: null,
 		aria: 'Back of card',
 		description: 'Back of card',
@@ -15,6 +16,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'swashbuckler',
 		name: 'Swashbuckler',
 		card: 'One of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 01 Swashbuckler',
 		description: 'Those who like money yet give it up freely; likable rogues and rapscallions',
@@ -31,6 +33,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'philanthropist',
 		name: 'Philanthropist',
 		card: 'Two of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 02 Philanthropist',
 		description:
@@ -48,6 +51,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'trader',
 		name: 'Trader',
 		card: 'Three of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 03 Trader',
 		description: 'Commerce; smuggling and black markets; fair and equitable trades',
@@ -64,6 +68,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'merchant',
 		name: 'Merchant',
 		card: 'Four of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 04 Merchant',
 		description:
@@ -80,6 +85,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'guild-member',
 		name: 'Guild Member',
 		card: 'Five of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 05 Guild Member',
 		description: "Like-minded individuals joined together in a common goal; pride in one's work",
@@ -95,6 +101,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'beggar',
 		name: 'Beggar',
 		card: 'Six of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 06 Beggar',
 		description: 'Sudden change in economic status or fortune',
@@ -111,6 +118,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'thief',
 		name: 'Thief',
 		card: 'Seven of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 07 Thief',
 		description:
@@ -128,6 +136,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'tax-collector',
 		name: 'Tax Collector',
 		card: 'Eight of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 08 Tax Collector',
 		description: 'Corruption; honesty in an otherwise corrupt government or organization',
@@ -145,6 +154,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'miser',
 		name: 'Miser',
 		card: 'Nine of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 09 Miser',
 		description:
@@ -161,6 +171,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'rogue',
 		name: 'Rogue',
 		card: 'Master of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 10 Rogue',
 		description:
@@ -177,6 +188,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'monk',
 		name: 'Monk',
 		card: 'One of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 01 Monk',
 		description:
@@ -194,6 +206,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'missionary',
 		name: 'Missionary',
 		card: 'Two of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 02 Missionary',
 		description:
@@ -212,6 +225,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'healer',
 		name: 'Healer',
 		card: 'Three of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 03 Healer',
 		description:
@@ -229,6 +243,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'shepherd',
 		name: 'Shepherd',
 		card: 'Four of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 04 Shepherd',
 		description:
@@ -246,6 +261,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'druid',
 		name: 'Druid',
 		card: 'Five of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 05 Druid',
 		description:
@@ -264,6 +280,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'anarchist',
 		name: 'Anarchist',
 		card: 'Six of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 06 Anarchist',
 		description: 'A fundamental change brought on by one whose beliefs are being put to the test',
@@ -280,6 +297,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'charlatan',
 		name: 'Charlatan',
 		card: 'Seven of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 07 Charlatan',
 		description: 'Liars; those who profess to believe one thing but actually believe another',
@@ -295,6 +313,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'bishop',
 		name: 'Bishop',
 		card: 'Eight of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 08 Bishop',
 		description: 'Strict adherence to a code or a belief; those who plot, plan, and scheme',
@@ -311,6 +330,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'traitor',
 		name: 'Traitor',
 		card: 'Nine of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 09 Traitor',
 		description: 'Betrayal by someone close and trusted; a weakening or loss of faith',
@@ -328,6 +348,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'priest',
 		name: 'Priest',
 		card: 'Master of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 10 Priest',
 		description: 'Enlightenment; those who follow a deity, a system of values, or a higher purpose',
@@ -344,6 +365,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'transmuter',
 		name: 'Transmuter',
 		card: 'One of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 01 Transmuter',
 		description:
@@ -360,6 +382,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'diviner',
 		name: 'Diviner',
 		card: 'Two of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 02 Diviner',
 		description:
@@ -377,6 +400,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'enchanter',
 		name: 'Enchanter',
 		card: 'Three of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 03 Enchanter',
 		description: 'Inner turmoil that comes from confusion, fear of failure, or false information',
@@ -394,6 +418,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'abjurer',
 		name: 'Abjurer',
 		card: 'Four of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 04 Abjurer',
 		description:
@@ -411,6 +436,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'elementalist',
 		name: 'Elementalist',
 		card: 'Five of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 05 Elementalist',
 		description:
@@ -429,6 +455,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'evoker',
 		name: 'Evoker',
 		card: 'Six of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 06 Evoker',
 		description:
@@ -446,6 +473,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'illusionist',
 		name: 'Illusionist',
 		card: 'Seven of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 07 Illusionist',
 		description:
@@ -463,6 +491,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'necromancer',
 		name: 'Necromancer',
 		card: 'Eight of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 08 Necromancer',
 		description: 'Unnatural events and unhealthy obsessions; those who follow a destructive path',
@@ -478,6 +507,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'conjurer',
 		name: 'Conjurer',
 		card: 'Nine of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 09 Conjurer',
 		description:
@@ -495,6 +525,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'wizard',
 		name: 'Wizard',
 		card: 'Master of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 10 Wizard',
 		description:
@@ -512,6 +543,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'avenger',
 		name: 'Avenger',
 		card: 'One of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 01 Avenger',
 		description:
@@ -529,6 +561,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'paladin',
 		name: 'Paladin',
 		card: 'Two of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 02 Paladin',
 		description: 'Just and noble warriors; those who live by a code of honor and integrity',
@@ -545,6 +578,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'soldier',
 		name: 'Soldier',
 		card: 'Three of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 03 Soldier',
 		description: 'War and sacrifice; the stamina to endure great hardship',
@@ -561,6 +595,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'mercenary',
 		name: 'Mercenary',
 		card: 'Four of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 04 Mercenary',
 		description: 'Inner strength and fortitude; those who fight for power or wealth',
@@ -576,6 +611,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'myrmidon',
 		name: 'Myrmidon',
 		card: 'Five of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 05 Myrmidon',
 		description:
@@ -594,6 +630,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'berserker',
 		name: 'Berserker',
 		card: 'Six of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 06 Berserker',
 		description: 'The brutal and barbaric side of warfare; bloodlust; those with a bestial nature',
@@ -611,6 +648,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'hooded-one',
 		name: 'Hooded One',
 		card: 'Seven of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 07 Hooded One',
 		description: 'Bigotry, intolerance, and xenophobia; a mysterious presence or newcomer',
@@ -628,6 +666,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'dictator',
 		name: 'Dictator',
 		card: 'Eight of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 08 Dictator',
 		description:
@@ -644,6 +683,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'torturer',
 		name: 'Torturer',
 		card: 'Nine of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 09 Torturer',
 		description:
@@ -662,6 +702,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'warrior',
 		name: 'Warrior',
 		card: 'Master of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 10 Warrior',
 		description:
@@ -679,6 +720,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'artifact',
 		name: 'Artifact',
 		card: 'The Artifact',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Artifact',
 		description:
@@ -703,6 +745,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'beast',
 		name: 'Beast',
 		card: 'The Beast',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Beast',
 		description:
@@ -728,6 +771,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'broken-one',
 		name: 'Broken One',
 		card: 'The Broken One',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Broken One',
 		description:
@@ -759,6 +803,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'darklord',
 		name: 'Darklord',
 		card: 'The Darklord',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Darklord',
 		description:
@@ -782,6 +827,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'donjon',
 		name: 'Donjon',
 		card: 'The Donjon',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Donjon',
 		description:
@@ -814,6 +860,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'executioner',
 		name: 'Executioner',
 		card: 'The Executioner',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Executioner',
 		description:
@@ -840,6 +887,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'ghost',
 		name: 'Ghost',
 		card: 'The Ghost',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Ghost',
 		description:
@@ -873,6 +921,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'horseman',
 		name: 'Horseman',
 		card: 'The Horseman',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Horseman',
 		description:
@@ -905,6 +954,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'innocent',
 		name: 'Innocent',
 		card: 'The Innocent',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Innocent',
 		description:
@@ -937,6 +987,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'marionette',
 		name: 'Marionette',
 		card: 'The Marionette',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Marionette',
 		description:
@@ -968,6 +1019,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'mists',
 		name: 'Mists',
 		card: 'The Mists',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Mists',
 		description:
@@ -994,6 +1046,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'raven',
 		name: 'Raven',
 		card: 'The Raven',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Raven',
 		description:
@@ -1020,6 +1073,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'seer',
 		name: 'Seer',
 		card: 'The Seer',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Seer',
 		description:
@@ -1046,6 +1100,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'tempter',
 		name: 'Tempter',
 		card: 'The Tempter',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Tempter',
 		description:

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

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { socket } from '@/socket';
+import type { GameUpdate, Tilt } from '@/types';
+
+interface UseSocketProps {
+	gameID: string;
+	setGameData: (gameUpdate: GameUpdate) => void;
+	setNoGame: (noGame: boolean) => void;
+}
+
+export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketProps) {
+	const [connect, setConnect] = useState(1);
+	const [disconnected, setDisconnected] = useState(true);
+
+	useEffect(() => {
+		if (gameID) {
+			socket.emit('join', gameID);
+
+			socket.on('init', (data: GameUpdate) => {
+				setDisconnected(false);
+				setGameData(data);
+			});
+
+			socket.on('game-update', (data: GameUpdate) => {
+				// remove user's own tilts in favor of local values
+				data.tilts = data.tilts.map((card) => card.filter((tilt) => tilt.playerID !== socket.id));
+				setGameData(data);
+			});
+
+			socket.on('join-error', (error) => {
+				console.error('Error:', error);
+				setNoGame(true);
+			});
+
+			socket.on('flip-error', (error) => {
+				console.error('Error:', error);
+			});
+
+			socket.on('disconnect', () => {
+				setDisconnected(true);
+			});
+		}
+
+		return () => {
+			socket.removeAllListeners();
+		};
+	}, [gameID, connect]);
+
+	const emitFlip = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('flip-card', {
+			gameID,
+			cardIndex,
+		});
+	};
+
+	const emitSettings = (gameData: GameUpdate) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('settings', {
+			gameID,
+			gameData,
+		});
+	};
+
+	const emitRedraw = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('redraw', {
+			gameID,
+			cardIndex,
+		});
+	};
+
+	const emitSelect = (cardIndex: number, cardID: string) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('select', {
+			gameID,
+			cardIndex,
+			cardID,
+		});
+	};
+
+	const emitTilt = (cardIndex: number, tilt: Tilt) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('tilt', {
+			cardIndex,
+			tilt,
+		});
+	};
+
+	return {
+		emitFlip,
+		emitSettings,
+		emitRedraw,
+		emitSelect,
+		emitTilt,
+	};
+}

lib/GameStore.ts

@@ -1,8 +1,8 @@
 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 { generateID, parseMilliseconds } from '@/tools';
+
+import { HOUR, DAY, SETTINGS } from '@/constants';
+import { GameState, GameUpdate, Settings, Tilt } from '@/types';
 
 const deck = new Deck();
 
@@ -84,13 +84,8 @@ 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 }, () => []),
 		};
 
 		this.totalCreated++;
@@ -111,11 +106,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 {
@@ -130,6 +129,54 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
+	redraw(gameID: string, cardIndex: number): GameUpdate {
+		const game = this.getGame(gameID);
+		const card = game.cards[cardIndex];
+
+		if (!card) throw new Error(`Card ${cardIndex} not found`);
+
+		game.cards[cardIndex] =
+			card.suit === 'High Deck' ? deck.drawHigh(game.cards) : deck.drawLow(game.cards);
+		game.lastUpdated = Date.now();
+
+		return this.gameUpdate(game);
+	}
+
+	select(gameID: string, cardIndex: number, cardID: string): GameUpdate {
+		const game = this.getGame(gameID);
+		const card = game.cards[cardIndex];
+		const replacement = deck.select(cardID);
+
+		if (!card) throw new Error(`Card ${cardIndex} not found`);
+		if (!replacement) throw new Error(`Card ${cardID} not found`);
+
+		game.cards[cardIndex] = replacement;
+		game.lastUpdated = Date.now();
+
+		return this.gameUpdate(game);
+	}
+
+	tilt(playerID: string, cardIndex: number, tilt: 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 (tilt.rotateX && tilt.rotateY) {
+			game.tilts[cardIndex] = [...game.tilts[cardIndex], { ...tilt, playerID }];
+			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);
 
@@ -146,24 +193,27 @@ export default class GameStore {
 		return game;
 	}
 
-	gameUpdate(game: GameState): GameUpdate {
-		const { dmID, spectatorID, cards, settings } = game;
+	getGameByPlayerID(playerID: string): GameState {
+		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);
-
-			if (!game) throw new Error(`Player ${playerID} not found`);
-
-			this.players.delete(playerID);
-			return this.leaveGame(game, playerID);
+			return this.leaveGame(playerID);
 		}
 	}
 

lib/StandardDeck.ts

@@ -1,4 +1,4 @@
-import getRandomItems from '@/tools/getRandomItems';
+import { getRandomItems } from '@/tools';
 import cards from '@/constants/standardCards';
 import type { StandardCard } from '@/types';
 

lib/TarokkaDeck.ts

@@ -1,4 +1,4 @@
-import getRandomItems from '@/tools/getRandomItems';
+import { getRandomItems } from '@/tools';
 import cards from '@/constants/tarokkaCards';
 import type { TarokkaCard, TarokkaGameCard } from '@/types';
 
@@ -8,8 +8,8 @@ export default class TarokkaDeck {
 	private backs: TarokkaCard[] = [];
 
 	constructor() {
-		this.highDeck = cards.filter((card) => !card.back && card.suit === 'High Deck');
-		this.commonDeck = cards.filter((card) => !card.back && card.suit !== 'High Deck');
+		this.highDeck = cards.filter((card) => card.deck === 'high');
+		this.commonDeck = cards.filter((card) => card.deck === 'common');
 		this.backs = cards.filter((card) => card.back);
 	}
 
@@ -19,6 +19,49 @@ export default class TarokkaDeck {
 		);
 	}
 
+	getLow(): TarokkaGameCard[] {
+		return this.commonDeck.map((card) => ({ ...card, flipped: false }));
+	}
+
+	getHigh(): TarokkaGameCard[] {
+		return this.highDeck.map((card) => ({ ...card, flipped: false }));
+	}
+
+	drawLow(exclude: TarokkaGameCard[] = []): TarokkaGameCard {
+		const excludeIDs = exclude.map(({ id }) => id);
+
+		return {
+			...getRandomItems(
+				this.commonDeck.filter(({ id }) => !excludeIDs.includes(id)),
+				1,
+			)[0],
+			flipped: false,
+		};
+	}
+
+	drawHigh(exclude: TarokkaGameCard[] = []): TarokkaGameCard {
+		const excludeIDs = exclude.map(({ id }) => id);
+
+		return {
+			...getRandomItems(
+				this.highDeck.filter(({ id }) => !excludeIDs.includes(id)),
+				1,
+			)[0],
+			flipped: false,
+		};
+	}
+
+	select(id: string): TarokkaGameCard | null {
+		const card = cards.find((card) => card.id === id);
+
+		if (!card) return null;
+
+		return {
+			...card,
+			flipped: false,
+		};
+	}
+
 	getBack(): TarokkaCard {
 		return this.backs[0];
 	}

package.json

@@ -1,12 +1,12 @@
 {
 	"name": "tarokka",
-	"version": "0.1.0",
+	"version": "1.1.1",
 	"private": true,
 	"scripts": {
 		"dev": "nodemon",
 		"build": "next build && tsc --project tsconfig.server.json",
 		"start": "cross-env NODE_ENV=production TS_NODE_BASEURL=./build node -r tsconfig-paths/register build/server.js",
-		"deploy": "docker buildx build --platform linux/amd64 -t 192.168.0.2:5000/tarokka --push ."
+		"release": "docker buildx build --platform linux/amd64 -t 192.168.0.2:5000/tarokka --push ."
 	},
 	"dependencies": {
 		"cross-env": "^7.0.3",

server.ts

@@ -3,8 +3,10 @@ import { createServer } from 'http';
 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 { omit } from '@/tools';
+
+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}`);
 
@@ -79,6 +101,36 @@ app.prepare().then(() => {
 			}
 		});
 
+		socket.on('redraw', ({ gameID, cardIndex }: ClientUpdate) => {
+			try {
+				//console.log(Date.now(), 'Redraw', { gameID, cardIndex });
+
+				const gameUpdate = gameStore.redraw(gameID, cardIndex);
+
+				broadcast('game-update', gameUpdate);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+
+				console.error(Date.now(), 'Error[redraw]', error);
+				socket.emit('redraw-error', error);
+			}
+		});
+
+		socket.on('select', ({ gameID, cardIndex, cardID = '' }: ClientUpdate) => {
+			try {
+				//console.log(Date.now(), 'select', { gameID, cardIndex });
+
+				const gameUpdate = gameStore.select(gameID, cardIndex, cardID);
+
+				broadcast('game-update', gameUpdate);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+
+				console.error(Date.now(), 'Error[select]', error);
+				socket.emit('select-error', error);
+			}
+		});
+
 		socket.on('settings', ({ gameID, gameData }: { gameID: string; gameData: GameUpdate }) => {
 			try {
 				const gameUpdate = gameStore.updateSettings(gameID, gameData.settings);
@@ -89,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/getCardInfo.ts

@@ -1,17 +1,17 @@
-import { isHighCard, isLowCard } from '@/tools/cardTypes';
+import { isHighCard, isLowCard } from '@/tools';
 import { Layout, Settings, TarokkaGameCard } from '@/types';
 
-export default function getTooltip(
+export const getCardInfo = (
 	card: TarokkaGameCard,
 	position: Layout,
 	dm: boolean,
 	settings: Settings,
-) {
+) => {
 	const { card: cardName, description, flipped } = card;
 
 	let text: string[] = [];
 
-	if (flipped) {
+	if (dm || flipped) {
 		if (dm || settings.positionFront) text.push(position.text);
 
 		if (dm) text.push(`${cardName}: ${description}`);
@@ -33,12 +33,10 @@ export default function getTooltip(
 
 		// Low deck: Tome, Ravenkind, or Sunsword
 		if (isLowCard(card)) {
-			if (dm) text.push(card.prophecy.dmText);
 			if (dm || settings.prophecy) text.push(card.prophecy.playerText);
+			if (dm) text.push(card.prophecy.dmText);
 		}
-	} else {
-		if (dm || settings.positionBack) text.push(position.text);
 	}
 
 	return text;
-}
+};

tools/getRandomItems.ts

@@ -1,4 +1,4 @@
-export default function getRandomItems<T>(items: T[], count: number): T[] {
+export const getRandomItems = <T>(items: T[], count: number): T[] => {
 	const shuffled = [...items];
 
 	// Fisher-Yates shuffle
@@ -8,4 +8,4 @@ export default function getRandomItems<T>(items: T[], count: number): T[] {
 	}
 
 	return count > shuffled.length ? shuffled : shuffled.slice(0, count);
-}
+};

tools/getURL.ts

@@ -1,8 +1,8 @@
 import { cardStyles, standardMap } from '@/constants/tarokka';
-import { Settings, TarokkaGameCard } from '@/types';
+import { Settings, TarokkaCard, TarokkaGameCard } from '@/types';
 
-export default function getURL(card: TarokkaGameCard, settings: Settings) {
+export const getURL = (card: TarokkaCard | TarokkaGameCard, settings: Settings) => {
 	const styleConfig = cardStyles[settings.cardStyle];
 	const fileBase = settings.cardStyle === 'standard' ? standardMap[card.id] : card.id;
 	return `${styleConfig.baseURL}${fileBase}${card.extension || styleConfig.extension}`;
-}
+};

tools/index.ts

@@ -0,0 +1,11 @@
+export * from '@/tools/cardTypes';
+export * from '@/tools/getCardInfo';
+export * from '@/tools/getRandomItems';
+export * from '@/tools/getURL';
+export * from '@/tools/log';
+export * from '@/tools/omit';
+export * from '@/tools/parseMilliseconds';
+export * from '@/tools/reduceTilts';
+export * from '@/tools/simpleID';
+export * from '@/tools/throttle';
+export * from '@/tools/validTilt';

tools/log.tsx

@@ -0,0 +1,19 @@
+/**
+ * A logging utility designed to be inserted into functional chains.
+ * Logs all parameters with an optional prefix, then returns the first argument unchanged.
+ *
+ * @param {string} [prefix=''] - A label or message to prepend to the logged output.
+ * @returns {(value: any, ...rest: any[]) => any} - A function that logs its arguments and returns the first one.
+ *
+ * @example
+ * const result = [1, 2, 3]
+ *   .map((n) => n * 2)
+ *   .map(log('doubled:'))
+ *   .filter((n) => n > 2);
+ */
+export const log =
+	(prefix: string = ''): ((value: any, ...rest: any[]) => any) =>
+	(...args: any[]) => {
+		console.log(prefix, ...args);
+		return args[0];
+	};

tools/omit.ts

@@ -1,7 +1,7 @@
-export default function omit<T extends Record<string, any>>(
+export const omit = <T extends Record<string, any>>(
 	obj: T,
 	propToRemove: keyof T,
-): Omit<T, typeof propToRemove> {
+): Omit<T, typeof propToRemove> => {
 	const { [propToRemove]: _, ...rest } = obj;
 	return rest;
-}
+};

tools/parseMilliseconds.ts

@@ -7,7 +7,7 @@ export interface ParsedMilliseconds {
 	seconds: number;
 }
 
-export default function parseMilliseconds(timestamp: number): ParsedMilliseconds {
+export const parseMilliseconds = (timestamp: number): ParsedMilliseconds => {
 	const days = Math.floor(timestamp / DAY);
 	timestamp %= DAY;
 
@@ -21,4 +21,4 @@ export default function parseMilliseconds(timestamp: number): ParsedMilliseconds
 	timestamp %= SECOND;
 
 	return { days, hours, minutes, seconds };
-}
+};

tools/reduceTilts.ts

@@ -0,0 +1,34 @@
+import { log, validTilt } from '@/tools';
+import { GameUpdate, Tilt } from '@/types';
+
+const combineTilts = (tilts: Tilt[]) =>
+	tilts.reduce(
+		({ pX, pY, rX, rY, count }, { percentX, percentY, rotateX, rotateY }) => ({
+			pX: pX + percentX,
+			pY: pY + percentY,
+			rX: rX + rotateX,
+			rY: rY + rotateY,
+			count: count + 1,
+		}),
+		{ pX: 0, pY: 0, rX: 0, rY: 0, count: 0 },
+	);
+
+export function reduceTilts(gameData: GameUpdate, localTilt: Tilt[]): Tilt[] {
+	const remoteTilts = gameData.tilts;
+	const tiltEnabled = gameData.settings.tilt;
+	const remoteTiltEnabled = gameData.settings.remoteTilt;
+
+	if (!tiltEnabled) return [];
+	if (!remoteTiltEnabled) return Array.from({ length: 5 }, (_, i) => localTilt[i]);
+
+	return Array.from({ length: 5 }, (_, i) => (localTilt[i] ? [localTilt[i]] : []))
+		.map((cardTilts, cardIndex) => [...remoteTilts[cardIndex], ...cardTilts])
+		.map((cardTilts) => cardTilts.filter(validTilt))
+		.map(combineTilts)
+		.map(({ pX, pY, rX, rY, count }) => ({
+			percentX: count ? pX / count : -1,
+			percentY: count ? pY / count : -1,
+			rotateX: count ? rX / count : 0,
+			rotateY: count ? rY / count : 0,
+		}));
+}

tools/simpleID.ts

@@ -1,9 +1,7 @@
-import getRandomItems from '@/tools/getRandomItems';
+import { getRandomItems } from '@/tools';
 
 const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
 
-const generateID = (length: number = 6) => {
+export const generateID = (length: number = 6) => {
 	return getRandomItems(alphabet.split(''), length).join('');
 };
-
-export default generateID;

tools/throttle.ts

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

tools/validTilt.ts

@@ -0,0 +1,4 @@
+import { Tilt } from '@/types';
+
+export const validTilt = ({ percentX, percentY, rotateX, rotateY }: Tilt) =>
+	percentX >= 0 && percentY >= 0 && !!rotateX && !!rotateY;

types/index.ts

@@ -1,11 +1,21 @@
 export type CardStyle = 'standard' | 'color' | 'grayscale';
 
+// all = both + back
+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 {
@@ -28,6 +38,7 @@ export interface TarokkaBase {
 	description: string;
 	aria: string;
 	back: boolean;
+	deck: Deck;
 	suit: 'Coins' | 'Glyphs' | 'High Deck' | 'Stars' | 'Swords' | null;
 	extension?: string;
 }
@@ -78,6 +89,7 @@ export interface GameState {
 	cards: TarokkaGameCard[];
 	lastUpdated: number;
 	settings: Settings;
+	tilts: Tilt[][];
 }
 
 export interface GameUpdate {
@@ -85,11 +97,13 @@ export interface GameUpdate {
 	spectatorID: string;
 	cards: TarokkaGameCard[];
 	settings: Settings;
+	tilts: Tilt[][];
 }
 
 export interface ClientUpdate {
 	gameID: string;
 	cardIndex: number;
+	cardID?: string;
 }
 
 export interface Layout {
@@ -98,3 +112,11 @@ export interface Layout {
 	name: string;
 	text: string;
 }
+
+export interface Tilt {
+	playerID?: string;
+	percentX: number;
+	percentY: number;
+	rotateX: number;
+	rotateY: number;
+}