this is a pain in the ass

app/AppContext.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-import useSocket from '@/hooks/useSocket';
-import type { GameUpdate, Tilt } from '@/types';
-
-const AppContext = createContext<AppContext | undefined>(undefined);
-
-const gameStart: GameUpdate = {
-	dmID: '',
-	spectatorID: '',
-	cards: [],
-	settings: {
-		positionBack: false,
-		positionFront: false,
-		prophecy: false,
-		notes: false,
-		cardStyle: 'color',
-	},
-	tilts: Array.from({ length: 5 }, () => []),
-};
-
-export interface AppContext {
-	gameData: GameUpdate;
-	noGame: boolean;
-	tilt: Tilt[];
-	selectCardIndex: number;
-	emitFlip: (cardIndex: number) => void;
-	emitSettings: (gameData: GameUpdate) => void;
-	emitRedraw: (cardIndex: number) => void;
-	emitSelect: (cardID: string) => void;
-	setGameID: (gameID: string) => void;
-	setSelectCardIndex: (cardIndex: number) => void;
-	setTilt: (tilt: Tilt[]) => void;
-}
-
-export function AppProvider({ children }: { children: ReactNode }) {
-	const [gameData, setGameData] = useState<GameUpdate>(gameStart);
-	const [gameID, setGameID] = useState('');
-	const [noGame, setNoGame] = useState(false);
-	const [selectCardIndex, setSelectCardIndex] = useState(-1);
-	const [tilt, setTilt] = useState<Tilt[]>([]);
-
-	const { emitFlip, emitRedraw, emitSelect, emitSettings, emitTilt } = useSocket({
-		gameID,
-		setGameData,
-		setNoGame,
-	});
-
-	useEffect(() => {
-		const cardIndex = tilt.findIndex((tilt) => !!tilt);
-
-		if (tilt[cardIndex]) {
-			emitTilt(cardIndex, tilt[cardIndex]);
-		}
-	}, [tilt]);
-
-	const handleSelect = (cardID: string) => {
-		setSelectCardIndex(-1);
-
-		emitSelect(selectCardIndex, cardID);
-	};
-
-	const appInterface = {
-		gameData,
-		noGame,
-		tilt,
-		selectCardIndex,
-		emitFlip,
-		emitSettings,
-		emitRedraw,
-		emitSelect: handleSelect,
-		setGameID,
-		setSelectCardIndex,
-		setTilt,
-	};
-
-	return <AppContext.Provider value={appInterface}>{children}</AppContext.Provider>;
-}
-
-export function useAppContext(): AppContext {
-	const context = useContext(AppContext);
-	if (!context) throw new Error('useAppContext must be used within AppProvider');
-	return context;
-}

app/[gameID]/page.tsx

@@ -1,35 +1,108 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
+import useSocket from '@/hooks/useSocket';
+import useRTC from '@/hooks/useRTC';
+import { Eye } from 'lucide-react';
 
-import { useAppContext } from '@/app/AppContext';
-import CardSelect from '@/components/CardSelect';
+import Card from '@/components/Card';
+import CopyButton from '@/components/CopyButton';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
 import Settings from '@/components/Settings';
-import { SpectatorLink } from '@/components/SpectatorLink';
-import TarokkaGrid from '@/components/TarokkaGrid';
+import CardSelect from '@/components/CardSelect';
+
+import { cardMap, layout } from '@/constants/tarokka';
+
+import type { Deck, GameUpdate } from '@/types';
 
 export default function GamePage() {
-	const { noGame, setGameID } = useAppContext();
-	const { gameID } = useParams();
+	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: '',
+		cards: [],
+		settings: {
+			positionBack: false,
+			positionFront: false,
+			prophecy: false,
+			notes: false,
+			cardStyle: 'color',
+		},
+	});
+
+	const { dmID, cards, settings } = gameData;
+	const isDM = !!dmID;
+	const selectDeck: Deck | null = selectCard >= 0 ? cards[selectCard].deck : null;
+
+	const socket = useSocket({ gameID, setGameData, setNoGame });
+	const rtc = useRTC(socket);
+	console.log('useRTC:', rtc);
 
 	useEffect(() => {
-		if (gameID) {
-			setGameID(Array.isArray(gameID) ? gameID[0] : gameID);
+		if (gameIDParam) {
+			setGameID(Array.isArray(gameIDParam) ? gameIDParam[0] : gameIDParam);
 		}
-	}, [gameID]);
+	}, [gameIDParam]);
+
+	const select = (cardIndex: number, cardID: string) => {
+		setSelectCard(-1);
+
+		socket.select(cardIndex, cardID);
+	};
+
+	// map our five Tarokka cards to their proper locations in a 3x3 grid
+	// common deck cards: left, top, and right
+	// high deck cards: bottom and center
+	const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
 
 	return noGame ? (
 		<NotFound />
-	) : (
+	) : cards ? (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
-			<SpectatorLink />
-			<Settings />
-			<TarokkaGrid />
-			<Notes />
-			<CardSelect />
+			{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={socket.handleSettings} />}
+			<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
+				{Array.from({ length: 9 })
+					.map(arrangeCards)
+					.map((card, index) => (
+						<div key={index} className="aspect-[2/3]}">
+							{card && (
+								<Card
+									dm={isDM}
+									card={card}
+									position={layout[cardMap[index]]}
+									settings={settings}
+									flipAction={() => socket.flipCard(cardMap[index])}
+									redrawAction={() => socket.redraw(cardMap[index])}
+									selectAction={() => setSelectCard(cardMap[index])}
+								/>
+							)}
+						</div>
+					))}
+			</div>
+			<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
+			<CardSelect
+				show={selectDeck}
+				hand={cards}
+				settings={settings}
+				closeAction={() => setSelectCard(-1)}
+				selectAction={(cardID) => select(selectCard, cardID)}
+			/>
 		</main>
-	);
+	) : null;
 }

app/layout.tsx

@@ -1,6 +1,5 @@
 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({
@@ -41,9 +40,7 @@ export default function RootLayout({
 			lang="en"
 			className={`${pirataOne.variable} ${eagleLake.variable} ${cinzel.variable} antialiased`}
 		>
-			<body className={`${eagleLake.className} antialiased`}>
-				<AppProvider>{children}</AppProvider>
-			</body>
+			<body className={`${eagleLake.className} antialiased`}>{children}</body>
 		</html>
 	);
 }

components/Card.tsx

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

components/CardSelect.tsx

@@ -1,36 +1,41 @@
 'use client';
 
 import { CircleX } from 'lucide-react';
-import { useAppContext } from '@/app/AppContext';
 import TarokkaDeck from '@/lib/TarokkaDeck';
 import getURL from '@/tools/getURL';
 
-import { Deck } from '@/types';
+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({ className = '' }: CardSelectProps) {
-	const { gameData, emitSelect, selectCardIndex, setSelectCardIndex } = useAppContext();
-	const { cards: hand, settings } = gameData;
-
+export default function CardSelect({
+	closeAction,
+	selectAction,
+	hand,
+	settings,
+	show,
+	className = '',
+}: CardSelectProps) {
 	const handIDs = hand.map(({ id }) => id);
-	const selectDeck: Deck | null = selectCardIndex >= 0 ? hand[selectCardIndex].deck : null;
-
-	const close = () => setSelectCardIndex(-1);
 
 	const handleClose = (event: React.MouseEvent<HTMLElement>) => {
 		if (event.target === event.currentTarget) {
-			close();
+			closeAction();
 		}
 	};
 
-	if (!selectDeck) return null;
+	if (!show) return null;
 
-	const cards = selectDeck === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
+	const cards = show === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
 
 	return (
 		<div
@@ -39,7 +44,7 @@ export default function CardSelect({ className = '' }: CardSelectProps) {
 		>
 			<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}
+				onClick={closeAction}
 			>
 				<CircleX className="w-6 h-6" />
 			</button>
@@ -53,7 +58,7 @@ export default function CardSelect({ className = '' }: CardSelectProps) {
 						<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)}
+							onClick={() => selectAction(card.id)}
 						>
 							<img
 								src={getURL(card, settings)}

components/Notes.tsx

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

components/Settings.tsx

@@ -4,13 +4,12 @@ import { useState } from 'react';
 import { Settings as Gear } from 'lucide-react';
 import { Cinzel_Decorative } from 'next/font/google';
 
-import { useAppContext } from '@/app/AppContext';
 import BuyMeACoffee from '@/components/BuyMeACoffee';
 import CopyButton from '@/components/CopyButton';
 import GitHubButton from '@/components/GitHubButton';
 import Scrim from '@/components/Scrim';
 import Switch from '@/components/Switch';
-import { CardStyle } from '@/types';
+import { CardStyle, GameUpdate } from '@/types';
 
 const cinzel = Cinzel_Decorative({
 	variable: '--font-cinzel',
@@ -18,17 +17,18 @@ const cinzel = Cinzel_Decorative({
 	weight: '400',
 });
 
+type SettingsProps = {
+	gameData: GameUpdate;
+	changeAction: (updatedSettings: GameUpdate) => void;
+};
+
 const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
 
-export default function Settings() {
+export default function Settings({ gameData, changeAction }: SettingsProps) {
 	const [open, setOpen] = useState(false);
-	const { gameData, emitSettings } = useAppContext();
-
-	const { dmID } = gameData;
-	const isDM = !!dmID;
 
 	const togglePermission = (key: string) => {
-		emitSettings({
+		changeAction({
 			...gameData,
 			settings: {
 				...gameData.settings,
@@ -38,7 +38,7 @@ export default function Settings() {
 	};
 
 	const tuneRadio = (cardStyle: CardStyle) => {
-		emitSettings({
+		changeAction({
 			...gameData,
 			settings: {
 				...gameData.settings,
@@ -104,7 +104,7 @@ export default function Settings() {
 		</fieldset>
 	);
 
-	return isDM ? (
+	return (
 		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
 			<Scrim
 				clickAction={() => setOpen((prev) => !prev)}
@@ -129,5 +129,5 @@ export default function Settings() {
 				<Gear className="w-5 h-5" />
 			</button>
 		</div>
-	) : null;
+	);
 }

components/SpectatorLink.tsx

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

components/TarokkaGrid.tsx

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

components/TiltCard.tsx

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

constants/time.ts

@@ -2,5 +2,3 @@ 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/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

@@ -1,22 +1,37 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { socket } from '@/socket';
-import throttle from '@/tools/throttle';
 
-import { thirtyFPS } from '@/constants/time';
-import type { GameUpdate, Tilt } from '@/types';
+import type { GameUpdate } from '@/types';
 
-interface UseSocketProps {
+export interface UseSocketProps {
 	gameID: string;
 	setGameData: (gameUpdate: GameUpdate) => void;
 	setNoGame: (noGame: boolean) => void;
 }
 
-export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketProps) {
+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);
 			});
 
@@ -32,6 +47,16 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 			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 () => {
@@ -39,28 +64,42 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		};
 	}, [gameID]);
 
-	const emitFlip = (cardIndex: number) => {
+	const flipCard = (cardIndex: number) => {
+		console.log('flip-card', {
+			gameID,
+			cardIndex,
+		});
 		socket.emit('flip-card', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const emitSettings = (gameData: GameUpdate) => {
+	const handleSettings = (gameData: GameUpdate) => {
 		socket.emit('settings', {
 			gameID,
 			gameData,
 		});
 	};
 
-	const emitRedraw = (cardIndex: number) => {
+	const redraw = (cardIndex: number) => {
 		socket.emit('redraw', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const emitSelect = (cardIndex: number, cardID: string) => {
+	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,
@@ -68,18 +107,17 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
-	const emitTilt = throttle((cardIndex: number, tilt: Tilt) => {
-		socket.emit('tilt', {
-			cardIndex,
-			tilt,
-		});
-	}, thirtyFPS);
-
 	return {
-		emitFlip,
-		emitSettings,
-		emitRedraw,
-		emitSelect,
-		emitTilt,
+		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

@@ -2,7 +2,7 @@ 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, Tilt } from '@/types';
+import { GameState, GameUpdate, Settings } from '@/types';
 
 const deck = new Deck();
 
@@ -91,7 +91,6 @@ export default class GameStore {
 				notes: true,
 				cardStyle: 'color',
 			},
-			tilts: Array.from({ length: 5 }, () => []),
 		};
 
 		this.totalCreated++;
@@ -158,21 +157,6 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
-	tilt(playerID: string, cardIndex: number, { rotateX, rotateY }: Tilt) {
-		const game = this.getGameByPlayerID(playerID);
-		const cardTilts = game.tilts[cardIndex];
-
-		if (!cardTilts) throw new Error(`Card tilts ${cardIndex} not found`);
-
-		game.tilts[cardIndex] = [
-			...cardTilts.filter((tilt) => tilt.playerID !== playerID),
-			{ playerID, rotateX, rotateY },
-		];
-		game.lastUpdated = Date.now();
-
-		return this.gameUpdate(game);
-	}
-
 	updateSettings(gameID: string, settings: Settings) {
 		const game = this.getGame(gameID);
 
@@ -189,18 +173,10 @@ export default class GameStore {
 		return game;
 	}
 
-	getGameByPlayerID(playerID: string): GameState {
-		const game = this.players.get(playerID);
-
-		if (!game) throw new Error(`Player ${playerID} not found`);
-
-		return game;
-	}
-
 	gameUpdate(game: GameState): GameUpdate {
-		const { dmID, spectatorID, cards, settings, tilts } = game;
+		const { dmID, spectatorID, cards, settings } = game;
 
-		return { dmID, spectatorID, cards, settings, tilts };
+		return { dmID, spectatorID, cards, settings };
 	}
 
 	playerExit(playerID: string): GameState | null {
@@ -209,7 +185,9 @@ export default class GameStore {
 
 			return null;
 		} else {
-			const game = this.getGameByPlayerID(playerID);
+			const game = this.players.get(playerID);
+
+			if (!game) throw new Error(`Player ${playerID} not found`);
 
 			this.players.delete(playerID);
 			return this.leaveGame(game, playerID);

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);
+		}
+	};
+}

server.ts

@@ -4,9 +4,7 @@ import { Server as SocketIOServer, type Socket } from 'socket.io';
 
 import GameStore from '@/lib/GameStore';
 import omit from '@/tools/omit';
-
-import { thirtyFPS } from '@/constants/time';
-import type { ClientUpdate, GameUpdate, Tilt } from '@/types';
+import type { ClientUpdate, GameUpdate } from '@/types';
 
 const dev = process.env.NODE_ENV !== 'production';
 const hostname = '0.0.0.0';
@@ -17,8 +15,6 @@ const handler = app.getRequestHandler();
 
 const gameStore = new GameStore();
 
-const timedReleases = {};
-
 app.prepare().then(() => {
 	const httpServer = createServer(handler);
 
@@ -29,25 +25,6 @@ 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];
-
-		if (lastEvent?.embargo >= now) {
-			clearTimeout(lastEvent.to);
-			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}`);
 
@@ -142,13 +119,29 @@ app.prepare().then(() => {
 			}
 		});
 
-		socket.on('tilt', ({ cardIndex, tilt }: { cardIndex: number; tilt: Tilt }) => {
+		socket.on('rtc-answer', ({ gameID, answer }: { gameID: string; answer: any }) => {
 			try {
-				const gameState = gameStore.tilt(socket.id, cardIndex, tilt);
-				timedRelease('game-update', gameState, thirtyFPS);
+				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[tilt]', error);
+				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);
 			}
 		});
 

tools/throttle.ts

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

types/index.ts

@@ -82,7 +82,6 @@ export interface GameState {
 	cards: TarokkaGameCard[];
 	lastUpdated: number;
 	settings: Settings;
-	tilts: Tilt[][];
 }
 
 export interface GameUpdate {
@@ -90,7 +89,6 @@ export interface GameUpdate {
 	spectatorID: string;
 	cards: TarokkaGameCard[];
 	settings: Settings;
-	tilts: Tilt[][];
 }
 
 export interface ClientUpdate {
@@ -105,9 +103,3 @@ export interface Layout {
 	name: string;
 	text: string;
 }
-
-export interface Tilt {
-	playerID?: string;
-	rotateX: number;
-	rotateY: number;
-}