this is a pain in the ass

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

app/[gameID]/page.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
-import { socket } from '@/socket';
+import useSocket from '@/hooks/useSocket';
+import useRTC from '@/hooks/useRTC';
 import { Eye } from 'lucide-react';
 
 import Card from '@/components/Card';
@@ -10,16 +11,18 @@ import CopyButton from '@/components/CopyButton';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
 import Settings from '@/components/Settings';
+import CardSelect from '@/components/CardSelect';
 
 import { cardMap, layout } from '@/constants/tarokka';
 
-import type { GameUpdate, ClientUpdate } from '@/types';
+import type { Deck, GameUpdate } from '@/types';
 
 export default function GamePage() {
 	const { gameID: gameIDParam } = useParams();
 
 	const [gameID, setGameID] = useState('');
 	const [noGame, setNoGame] = useState(false);
+	const [selectCard, setSelectCard] = useState(-1);
 	const [gameData, setGameData] = useState<GameUpdate>({
 		dmID: '',
 		spectatorID: '',
@@ -35,6 +38,11 @@ export default function GamePage() {
 
 	const { dmID, cards, settings } = gameData;
 	const isDM = !!dmID;
+	const selectDeck: Deck | null = selectCard >= 0 ? cards[selectCard].deck : null;
+
+	const socket = useSocket({ gameID, setGameData, setNoGame });
+	const rtc = useRTC(socket);
+	console.log('useRTC:', rtc);
 
 	useEffect(() => {
 		if (gameIDParam) {
@@ -42,44 +50,10 @@ export default function GamePage() {
 		}
 	}, [gameIDParam]);
 
-	useEffect(() => {
-		if (gameID) {
-			socket.emit('join', gameID);
+	const select = (cardIndex: number, cardID: string) => {
+		setSelectCard(-1);
 
-			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);
-			});
-		}
-
-		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 });
+		socket.select(cardIndex, cardID);
 	};
 
 	// map our five Tarokka cards to their proper locations in a 3x3 grid
@@ -101,7 +75,7 @@ export default function GamePage() {
 				/>
 			)}
 
-			{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
+			{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)
@@ -113,13 +87,22 @@ export default function GamePage() {
 									card={card}
 									position={layout[cardMap[index]]}
 									settings={settings}
-									flipAction={() => flipCard(cardMap[index])}
+									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/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

@@ -23,6 +23,11 @@ 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',
+	},
 };
 
 export default function RootLayout({

app/manifest.json

@@ -0,0 +1,22 @@
+{
+	"name": "Tarokka",
+	"short_name": "Tarokka",
+	"icons": [
+		{
+			"src": "/web-app-manifest-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "maskable"
+		},
+		{
+			"src": "/web-app-manifest-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	],
+	"theme_color": "#000000",
+	"background_color": "#000000",
+	"display": "standalone"
+}
+

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">
-			<button
-				onClick={handleCreateGame}
-				className="bg-slate-800 hover:bg-slate-700 text-yellow-400 hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
-			>
-				Create New Game
-			</button>
+		<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 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,6 +1,9 @@
 'use client';
 
+import { useState } from 'react';
+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';
@@ -15,9 +18,21 @@ type CardProps = {
 	position: Layout;
 	settings: Settings;
 	flipAction: () => void;
+	redrawAction: () => void;
+	selectAction: () => void;
 };
 
-export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
+export default function Card({
+	dm,
+	card,
+	position,
+	settings,
+	flipAction,
+	redrawAction,
+	selectAction,
+}: CardProps) {
+	const [tooltip, setTooltip] = useState<React.ReactNode>(null);
+
 	const { aria, flipped } = card;
 
 	const handleClick = () => {
@@ -42,30 +57,47 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 	};
 
 	return (
-		<ToolTip content={getTooltip()}>
-			<div
-				className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `}
+		<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' : ''} `}
 				onClick={handleClick}
 			>
 				<div
-					className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
+					className={`absolute inset-0 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">
+						{dm && (
+							<>
+								<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 border border-yellow-500 hover:drop-shadow-[0_0_2px_#ffd700]"
+							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]' : ''}`}
 						/>
+						{dm && !flipped && (
+							<StackTheDeck
+								onRedraw={redrawAction}
+								onSelect={() => selectAction()}
+								onHover={setTooltip}
+							/>
+						)}
 					</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 hover:drop-shadow-[0_0_2px_#ffd700]"
+							className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
 						/>
 					</div>
 				</div>
-			</div>
+			</TiltCard>
 		</ToolTip>
 	);
 }

components/CardSelect.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { CircleX } from 'lucide-react';
+import TarokkaDeck from '@/lib/TarokkaDeck';
+import getURL from '@/tools/getURL';
+
+import { Deck, Settings, TarokkaGameCard } 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({
+	closeAction,
+	selectAction,
+	hand,
+	settings,
+	show,
+	className = '',
+}: CardSelectProps) {
+	const handIDs = hand.map(({ id }) => id);
+
+	const handleClose = (event: React.MouseEvent<HTMLElement>) => {
+		if (event.target === event.currentTarget) {
+			closeAction();
+		}
+	};
+
+	if (!show) return null;
+
+	const cards = show === '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={closeAction}
+			>
+				<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={() => selectAction(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/Scrim.tsx

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

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

@@ -0,0 +1,48 @@
+import { useRef } from 'react';
+
+export default function TiltCard({
+	children,
+	className = '',
+	onClick = () => {},
+}: {
+	children: React.ReactNode;
+	className?: string;
+	onClick: (event: React.MouseEvent) => void;
+}) {
+	const cardRef = useRef<HTMLDivElement>(null);
+
+	const handleMouseMove = (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;
+
+		card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+	};
+
+	const handleMouseLeave = () => {
+		const card = cardRef.current;
+		if (!card) return;
+		card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+	};
+
+	return (
+		<div
+			className={`${className}`}
+			onMouseMove={handleMouseMove}
+			onMouseLeave={handleMouseLeave}
+			onClick={onClick}
+		>
+			<div ref={cardRef} className={`h-full w-full transition-transform 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/tarokkaCards.ts

@@ -5,15 +5,18 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'back',
 		name: 'Card Back',
 		card: 'Back of card',
+		deck: 'back',
 		suit: null,
 		aria: 'Back of card',
 		description: 'Back of card',
 		back: true,
+		extension: '.png',
 	},
 	{
 		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',
@@ -30,6 +33,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'philanthropist',
 		name: 'Philanthropist',
 		card: 'Two of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 02 Philanthropist',
 		description:
@@ -47,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',
@@ -63,6 +68,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'merchant',
 		name: 'Merchant',
 		card: 'Four of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 04 Merchant',
 		description:
@@ -79,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",
@@ -94,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',
@@ -110,6 +118,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'thief',
 		name: 'Thief',
 		card: 'Seven of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 07 Thief',
 		description:
@@ -127,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',
@@ -144,6 +154,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'miser',
 		name: 'Miser',
 		card: 'Nine of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 09 Miser',
 		description:
@@ -160,6 +171,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'rogue',
 		name: 'Rogue',
 		card: 'Master of Coins',
+		deck: 'common',
 		suit: 'Coins',
 		aria: 'Coins 10 Rogue',
 		description:
@@ -176,6 +188,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'monk',
 		name: 'Monk',
 		card: 'One of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 01 Monk',
 		description:
@@ -193,6 +206,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'missionary',
 		name: 'Missionary',
 		card: 'Two of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 02 Missionary',
 		description:
@@ -211,6 +225,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'healer',
 		name: 'Healer',
 		card: 'Three of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 03 Healer',
 		description:
@@ -228,6 +243,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'shepherd',
 		name: 'Shepherd',
 		card: 'Four of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 04 Shepherd',
 		description:
@@ -245,6 +261,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'druid',
 		name: 'Druid',
 		card: 'Five of Glyphs',
+		deck: 'common',
 		suit: 'Glyphs',
 		aria: 'Glyphs 05 Druid',
 		description:
@@ -263,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',
@@ -279,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',
@@ -294,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',
@@ -310,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',
@@ -327,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',
@@ -343,6 +365,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'transmuter',
 		name: 'Transmuter',
 		card: 'One of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 01 Transmuter',
 		description:
@@ -359,6 +382,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'diviner',
 		name: 'Diviner',
 		card: 'Two of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 02 Diviner',
 		description:
@@ -376,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',
@@ -393,6 +418,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'abjurer',
 		name: 'Abjurer',
 		card: 'Four of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 04 Abjurer',
 		description:
@@ -410,6 +436,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'elementalist',
 		name: 'Elementalist',
 		card: 'Five of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 05 Elementalist',
 		description:
@@ -428,6 +455,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'evoker',
 		name: 'Evoker',
 		card: 'Six of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 06 Evoker',
 		description:
@@ -445,6 +473,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'illusionist',
 		name: 'Illusionist',
 		card: 'Seven of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 07 Illusionist',
 		description:
@@ -462,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',
@@ -477,6 +507,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'conjurer',
 		name: 'Conjurer',
 		card: 'Nine of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 09 Conjurer',
 		description:
@@ -494,6 +525,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'wizard',
 		name: 'Wizard',
 		card: 'Master of Stars',
+		deck: 'common',
 		suit: 'Stars',
 		aria: 'Stars 10 Wizard',
 		description:
@@ -511,6 +543,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'avenger',
 		name: 'Avenger',
 		card: 'One of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 01 Avenger',
 		description:
@@ -528,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',
@@ -544,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',
@@ -560,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',
@@ -575,6 +611,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'myrmidon',
 		name: 'Myrmidon',
 		card: 'Five of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 05 Myrmidon',
 		description:
@@ -593,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',
@@ -610,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',
@@ -627,6 +666,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'dictator',
 		name: 'Dictator',
 		card: 'Eight of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 08 Dictator',
 		description:
@@ -643,6 +683,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'torturer',
 		name: 'Torturer',
 		card: 'Nine of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 09 Torturer',
 		description:
@@ -661,6 +702,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'warrior',
 		name: 'Warrior',
 		card: 'Master of Swords',
+		deck: 'common',
 		suit: 'Swords',
 		aria: 'Swords 10 Warrior',
 		description:
@@ -678,6 +720,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'artifact',
 		name: 'Artifact',
 		card: 'The Artifact',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Artifact',
 		description:
@@ -702,6 +745,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'beast',
 		name: 'Beast',
 		card: 'The Beast',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Beast',
 		description:
@@ -727,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:
@@ -758,6 +803,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'darklord',
 		name: 'Darklord',
 		card: 'The Darklord',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Darklord',
 		description:
@@ -781,6 +827,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'donjon',
 		name: 'Donjon',
 		card: 'The Donjon',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Donjon',
 		description:
@@ -813,6 +860,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'executioner',
 		name: 'Executioner',
 		card: 'The Executioner',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Executioner',
 		description:
@@ -839,6 +887,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'ghost',
 		name: 'Ghost',
 		card: 'The Ghost',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Ghost',
 		description:
@@ -872,6 +921,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'horseman',
 		name: 'Horseman',
 		card: 'The Horseman',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Horseman',
 		description:
@@ -904,6 +954,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'innocent',
 		name: 'Innocent',
 		card: 'The Innocent',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Innocent',
 		description:
@@ -936,6 +987,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'marionette',
 		name: 'Marionette',
 		card: 'The Marionette',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Marionette',
 		description:
@@ -967,6 +1019,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'mists',
 		name: 'Mists',
 		card: 'The Mists',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Mists',
 		description:
@@ -993,6 +1046,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'raven',
 		name: 'Raven',
 		card: 'The Raven',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Raven',
 		description:
@@ -1019,6 +1073,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'seer',
 		name: 'Seer',
 		card: 'The Seer',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Seer',
 		description:
@@ -1045,6 +1100,7 @@ const tarokkaCards: TarokkaCard[] = [
 		id: 'tempter',
 		name: 'Tempter',
 		card: 'The Tempter',
+		deck: 'high',
 		suit: 'High Deck',
 		aria: 'High Deck Tempter',
 		description:

hooks/useChatGPT.ts

@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState } from 'react';
+import { io, Socket } from 'socket.io-client';
+
+interface CursorPosition {
+	x: number;
+	y: number;
+}
+
+interface PeerMouseHook {
+	cursors: Record<string, CursorPosition>;
+}
+
+export function usePeerMouse(roomId: string): PeerMouseHook {
+	const [cursors, setCursors] = useState<Record<string, CursorPosition>>({});
+	const socketRef = useRef<Socket | null>(null);
+	const peers = useRef<Record<string, RTCPeerConnection>>({});
+	const channels = useRef<Record<string, RTCDataChannel>>({});
+
+	useEffect(() => {
+		const socket = io();
+		socketRef.current = socket;
+
+		socket.emit('join-room', roomId);
+
+		socket.on('new-peer', async (peerId: string) => {
+			const pc = createPeer(peerId, true);
+			const offer = await pc.createOffer();
+			await pc.setLocalDescription(offer);
+			socket.emit('signal', { to: peerId, data: { description: pc.localDescription } });
+		});
+
+		socket.on('signal', async ({ from, data }) => {
+			const pc = peers.current[from] || createPeer(from, false);
+
+			if (data.description) {
+				await pc.setRemoteDescription(data.description);
+
+				if (data.description.type === 'offer') {
+					const answer = await pc.createAnswer();
+					await pc.setLocalDescription(answer);
+					socket.emit('signal', { to: from, data: { description: pc.localDescription } });
+				}
+			}
+
+			if (data.candidate) {
+				await pc.addIceCandidate(data.candidate);
+			}
+		});
+
+		function createPeer(peerId: string, isInitiator: boolean): RTCPeerConnection {
+			const pc = new RTCPeerConnection();
+
+			if (isInitiator) {
+				const channel = pc.createDataChannel('mouse');
+				setupChannel(peerId, channel);
+			} else {
+				pc.ondatachannel = (e) => setupChannel(peerId, e.channel);
+			}
+
+			pc.onicecandidate = (e) => {
+				if (e.candidate) {
+					socket.emit('signal', { to: peerId, data: { candidate: e.candidate } });
+				}
+			};
+
+			peers.current[peerId] = pc;
+			return pc;
+		}
+
+		function setupChannel(peerId: string, channel: RTCDataChannel) {
+			channels.current[peerId] = channel;
+			channel.onmessage = (e) => {
+				const pos = JSON.parse(e.data);
+				setCursors((prev) => ({ ...prev, [peerId]: pos }));
+			};
+		}
+
+		function handleMouseMove(e: MouseEvent) {
+			const pos = JSON.stringify({ x: e.clientX, y: e.clientY });
+			Object.values(channels.current).forEach((ch) => {
+				if (ch.readyState === 'open') ch.send(pos);
+			});
+		}
+
+		window.addEventListener('mousemove', handleMouseMove);
+
+		return () => {
+			window.removeEventListener('mousemove', handleMouseMove);
+			socket.disconnect();
+			Object.values(peers.current).forEach((pc) => pc.close());
+		};
+	}, [roomId]);
+
+	return { cursors };
+}

hooks/useRTC.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import RTCPeer from '@/lib/RTCPeer';
+
+import type { UseSocket } from '@/hooks/useSocket';
+
+import type {} from '@/types';
+
+// interface UseSocketProps {
+// 	gameID: string;
+// 	setGameData: (gameUpdate: GameUpdate) => void;
+// 	setNoGame: (noGame: boolean) => void;
+// }
+
+const channelName = 'tilt';
+
+export default function useRTC({
+	ready,
+	registerAnsweredReceiver,
+	registerOfferredReceiver,
+	rtcAnswer: sendAnswer,
+	rtcOffer: sendOffer,
+}: UseSocket) {
+	const [peers, setPeers] = useState<RTCPeer[]>([]);
+
+	const answerHandler = (answer: RTCSessionDescriptionInit) => {
+		console.log('[useRTC] answer received', answer);
+		console.log('[useRTC] peers:', peers.length);
+		const peer = peers[0];
+		console.log('peer:', peer);
+		peer.onAnswer(answer);
+	};
+
+	const offerHandler = (offer: RTCSessionDescriptionInit) => {
+		console.log('[useRTC] offer received', offer);
+		setPeers((peers) => {
+			peers.push(new RTCPeer({ channelName, offer, sendAnswer, sendOffer }));
+			return peers;
+		});
+	};
+
+	useEffect(() => {
+		if (ready) {
+			console.log('-=-= SETTING THINGS UP =-=-');
+			registerAnsweredReceiver(answerHandler);
+			registerOfferredReceiver(offerHandler);
+
+			setPeers([new RTCPeer({ channelName, sendAnswer, sendOffer })]);
+		}
+	}, [ready]);
+
+	return {
+		count: peers.length,
+	};
+}

hooks/useSocket.ts

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react';
+import { socket } from '@/socket';
+
+import type { GameUpdate } from '@/types';
+
+export interface UseSocketProps {
+	gameID: string;
+	setGameData: (gameUpdate: GameUpdate) => void;
+	setNoGame: (noGame: boolean) => void;
+}
+
+export interface UseSocket {
+	ready: boolean;
+	flipCard: (cardIndex: number) => void;
+	handleSettings: (cardData: GameUpdate) => void;
+	redraw: (cardIndex: number) => void;
+	rtcAnswer: (answer: RTCSessionDescriptionInit) => void;
+	registerAnsweredReceiver: (receiver: (answer: RTCSessionDescriptionInit) => void) => void;
+	rtcOffer: (offer: RTCSessionDescriptionInit) => void;
+	registerOfferredReceiver: (receiver: (offer: RTCSessionDescriptionInit) => void) => void;
+	select: (cardIndex: number, cardID: string) => void;
+}
+
+export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketProps): UseSocket {
+	const [ready, setReady] = useState(false);
+	const answerRef = useRef<(answer: RTCSessionDescriptionInit) => void>(null);
+	const offerRef = useRef<(offer: RTCSessionDescriptionInit) => void>(null);
+
+	useEffect(() => {
+		if (gameID) {
+			socket.emit('join', gameID);
+
+			socket.on('init', (data: GameUpdate) => {
+				setReady(true);
+				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);
+			});
+
+			socket.on('rtc-answered', (answered: RTCSessionDescriptionInit) => {
+				if (answerRef.current) answerRef.current(answered);
+			});
+
+			socket.on('rtc-offered', (offered: RTCSessionDescriptionInit) => {
+				if (offerRef.current) {
+					offerRef.current(offered);
+				}
+			});
+		}
+
+		return () => {
+			socket.removeAllListeners();
+		};
+	}, [gameID]);
+
+	const flipCard = (cardIndex: number) => {
+		console.log('flip-card', {
+			gameID,
+			cardIndex,
+		});
+		socket.emit('flip-card', {
+			gameID,
+			cardIndex,
+		});
+	};
+
+	const handleSettings = (gameData: GameUpdate) => {
+		socket.emit('settings', {
+			gameID,
+			gameData,
+		});
+	};
+
+	const redraw = (cardIndex: number) => {
+		socket.emit('redraw', {
+			gameID,
+			cardIndex,
+		});
+	};
+
+	const rtcAnswer = (answer: RTCSessionDescriptionInit) => {
+		console.log('rtc-answer', { gameID, answer });
+		socket.emit('rtc-answer', { gameID, answer });
+	};
+
+	const rtcOffer = (offer: RTCSessionDescriptionInit) => {
+		console.log('rtc-offer', { gameID, offer });
+		socket.emit('rtc-offer', { gameID, offer });
+	};
+
+	const select = (cardIndex: number, cardID: string) => {
+		socket.emit('select', {
+			gameID,
+			cardIndex,
+			cardID,
+		});
+	};
+
+	return {
+		ready,
+		flipCard,
+		handleSettings,
+		redraw,
+		rtcAnswer,
+		registerAnsweredReceiver: (receiver: (obj: RTCSessionDescriptionInit) => void[]) =>
+			(answerRef.current = receiver),
+		rtcOffer,
+		registerOfferredReceiver: (receiver: (obj: RTCSessionDescriptionInit) => void[]) =>
+			(offerRef.current = receiver),
+		select,
+	};
+}

lib/GameStore.ts

@@ -130,6 +130,33 @@ 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);
+	}
+
 	updateSettings(gameID: string, settings: Settings) {
 		const game = this.getGame(gameID);
 
@@ -213,7 +240,7 @@ export default class GameStore {
 	}
 
 	deleteGame(game: GameState): void {
-		console.log(Date.now(), 'DELETE', game);
+		console.log(Date.now(), 'DELETE', game.dmID, game.spectatorID);
 
 		this.dms.delete(game.dmID);
 		this.spectators.delete(game.spectatorID);

lib/RTCPeer.ts

@@ -0,0 +1,131 @@
+const servers = {
+	iceServers: [
+		{ url: 'stun:stun01.sipphone.com' },
+		{ url: 'stun:stun.ekiga.net' },
+		{ url: 'stun:stun.fwdnet.net' },
+		{ url: 'stun:stun.ideasip.com' },
+		{ url: 'stun:stun.iptel.org' },
+		{ url: 'stun:stun.rixtelecom.se' },
+		{ url: 'stun:stun.schlund.de' },
+		{ url: 'stun:stun.l.google.com:19302' },
+		{ url: 'stun:stun1.l.google.com:19302' },
+		{ url: 'stun:stun2.l.google.com:19302' },
+		{ url: 'stun:stun3.l.google.com:19302' },
+		{ url: 'stun:stun4.l.google.com:19302' },
+		{ url: 'stun:stunserver.org' },
+		{ url: 'stun:stun.softjoys.com' },
+		{ url: 'stun:stun.voiparound.com' },
+		{ url: 'stun:stun.voipbuster.com' },
+		{ url: 'stun:stun.voipstunt.com' },
+		{ url: 'stun:stun.voxgratia.org' },
+		{ url: 'stun:stun.xten.com' },
+
+		// {
+		//     url: 'turn:numb.viagenie.ca',
+		//     credential: 'muazkh',
+		//     username: 'webrtc@live.com',
+		// },
+		// {
+		//     url: 'turn:192.158.29.39:3478?transport=udp',
+		//     credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+		//     username: '28224511:1379330808',
+		// },
+		// {
+		//     url: 'turn:192.158.29.39:3478?transport=tcp',
+		//     credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+		//     username: '28224511:1379330808',
+		// },
+	],
+};
+
+const pcConstraints = {
+	optional: [{ DtlsSrtpKeyAgreement: true }],
+};
+
+export interface RTCPeerProps {
+	channelName: string;
+	offer?: RTCSessionDescriptionInit;
+	sendAnswer: (offer: RTCSessionDescriptionInit) => void;
+	sendOffer: (offer: RTCSessionDescriptionInit) => void;
+}
+
+export default class RTCPeer {
+	channelName: string;
+	peerConnection: RTCPeerConnection;
+	channel: RTCDataChannel;
+
+	sendAnswer: (offer: RTCSessionDescriptionInit) => void;
+	sendOffer: (offer: RTCSessionDescriptionInit) => void;
+
+	constructor({ channelName, offer, sendAnswer, sendOffer }: RTCPeerProps) {
+		this.sendOffer = sendOffer;
+		this.sendAnswer = sendAnswer;
+		this.channelName = channelName;
+
+		this.peerConnection = new RTCPeerConnection(); //(servers, pcConstraints);
+		this.peerConnection.onicecandidate = offer
+			? this.#handleIceCandidateAnswer
+			: this.#handleIceCandidateOffer;
+
+		this.#createDataChannel();
+
+		if (offer) {
+			console.log('answer');
+			this.peerConnection.setRemoteDescription(offer);
+			this.peerConnection.createAnswer().then((answer) => {
+				this.peerConnection.setLocalDescription(answer);
+			});
+		} else {
+			console.log('call');
+			this.peerConnection.createOffer().then((offer) => {
+				this.peerConnection.setLocalDescription(offer);
+			});
+		}
+	}
+
+	onAnswer = (answer: RTCSessionDescriptionInit) => {
+		this.peerConnection.setRemoteDescription(answer);
+	};
+
+	#handleIceCandidateAnswer = (event: RTCPeerConnectionIceEvent) => {
+		if (!event.candidate) {
+			const answer = this.peerConnection.localDescription;
+
+			console.log('send-answer', { answer });
+			if (answer) {
+				this.sendAnswer(answer);
+			}
+		}
+	};
+
+	#handleIceCandidateOffer = (event: RTCPeerConnectionIceEvent) => {
+		if (!event.candidate) {
+			const offer = this.peerConnection.localDescription;
+
+			if (offer) {
+				console.log('send-offer', { offer });
+				this.sendOffer(offer);
+			}
+		}
+	};
+
+	#createDataChannel = () => {
+		try {
+			this.channel = this.peerConnection.createDataChannel(this.channelName);
+
+			this.channel.onopen = () => {
+				console.log('Receive Channel[onopen]:', this.channel.readyState);
+			};
+
+			this.channel.onmessage = (event: MessageEvent) => {
+				console.log('Receive Channel[onmessage]:', event.data);
+			};
+
+			this.channel.onclose = () => {
+				console.log('Receive Channel[onclose]:', this.channel.readyState);
+			};
+		} catch (error) {
+			console.error('[RTCPeer|#createDataChannel] ERROR', error);
+		}
+	};
+}

lib/TarokkaDeck.ts

@@ -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];
 	}

middleware.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+	const url = request.nextUrl;
+	const slug = url.pathname.slice(1);
+
+	const blocked = [
+		'apple-icon.png',
+		'favicon.ico',
+		'icon0.svg',
+		'icon1.png',
+		'manifest.json',
+		'opengraph-image.png',
+		'twitter-image.png',
+		'web-app-manifest-192x192.png',
+		'web-app-manifest-512x512.png',
+	];
+
+	if (blocked.includes(slug)) {
+		return NextResponse.rewrite(request.url);
+	}
+
+	return NextResponse.next();
+}

package.json

@@ -6,7 +6,7 @@
 		"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

@@ -79,6 +79,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 +119,32 @@ app.prepare().then(() => {
 			}
 		});
 
+		socket.on('rtc-answer', ({ gameID, answer }: { gameID: string; answer: any }) => {
+			try {
+				const gameState = gameStore.getGame(gameID);
+				console.log('[rtc-answer]', gameID);
+
+				io.to(gameState.dmID).emit('rtc-answered', answer);
+				io.to(gameState.spectatorID).emit('rtc-answered', answer);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+				console.error(Date.now(), 'Error[rtc-answer]', error);
+			}
+		});
+
+		socket.on('rtc-offer', ({ gameID, offer }: { gameID: string; offer: any }) => {
+			try {
+				const gameState = gameStore.getGame(gameID);
+				console.log('[rtc-offer]', gameID);
+
+				io.to(gameState.dmID).emit('rtc-offered', offer);
+				io.to(gameState.spectatorID).emit('rtc-offered', offer);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+				console.error(Date.now(), 'Error[rtc-offer]', error);
+			}
+		});
+
 		socket.on('disconnect', () => {
 			try {
 				const game = gameStore.playerExit(socket.id);

tools/getCardInfo.ts

@@ -11,7 +11,7 @@ export default function getTooltip(
 
 	let text: string[] = [];
 
-	if (flipped) {
+	if (dm || flipped) {
 		if (dm || settings.positionFront) text.push(position.text);
 
 		if (dm) text.push(`${cardName}: ${description}`);
@@ -33,11 +33,9 @@ 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/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 default function 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}${styleConfig.extension}`;
+	return `${styleConfig.baseURL}${fileBase}${card.extension || styleConfig.extension}`;
 }

types/index.ts

@@ -1,5 +1,8 @@
 export type CardStyle = 'standard' | 'color' | 'grayscale';
 
+// all = both + back
+export type Deck = 'high' | 'common' | 'both' | 'back' | 'all';
+
 export interface Settings {
 	positionBack: boolean;
 	positionFront: boolean;
@@ -28,7 +31,9 @@ export interface TarokkaBase {
 	description: string;
 	aria: string;
 	back: boolean;
+	deck: Deck;
 	suit: 'Coins' | 'Glyphs' | 'High Deck' | 'Stars' | 'Swords' | null;
+	extension?: string;
 }
 
 export interface TarokkaGameBase extends TarokkaBase {
@@ -89,6 +94,7 @@ export interface GameUpdate {
 export interface ClientUpdate {
 	gameID: string;
 	cardIndex: number;
+	cardID?: string;
 }
 
 export interface Layout {