teletilting

app/AppContext.tsx

@@ -1,85 +1,78 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, ReactNode } 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';
+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;
-	isDM: boolean;
 	noGame: boolean;
+	tilt: Tilt[];
 	selectCardIndex: number;
-	settings: Settings;
-	tilts: Tilt[];
-	emitFlip: (cardIndex: number) => void;
-	emitSettings: (gameData: GameUpdate) => void;
-	emitRedraw: (cardIndex: number) => void;
-	emitSelect: (cardID: string) => void;
+	flipCard: (cardIndex: number) => void;
+	handleSettings: (gameData: GameUpdate) => void;
+	redraw: (cardIndex: number) => void;
+	select: (cardID: string) => void;
 	setGameID: (gameID: string) => void;
-	setLocalSettings: Dispatch<SetStateAction<LocalSettings>>;
 	setSelectCardIndex: (cardIndex: number) => void;
-	setLocalTilt: (tilt: Tilt[]) => void;
+	setTilt: (tilt: Tilt[]) => void;
 }
 
 export function AppProvider({ children }: { children: ReactNode }) {
-	const [gameData, setGameData] = useState<GameUpdate>({ ...GAME_START });
-	const [localSettings, setLocalSettings] = useState<LocalSettings>(() => ({ ...LOCAL_DEFAULTS }));
+	const [gameData, setGameData] = useState<GameUpdate>(gameStart);
 	const [gameID, setGameID] = useState('');
 	const [noGame, setNoGame] = useState(false);
 	const [selectCardIndex, setSelectCardIndex] = useState(-1);
-	const [localTilt, setLocalTilt] = useState<Tilt[]>([]);
+	const [tilt, setTilt] = useState<Tilt[]>([]);
 
-	const { emitFlip, emitRedraw, emitSelect, emitSettings, emitTilt } = useSocket({
+	const { flipCard, redraw, select, handleSettings, emitTilt } = useSocket({
 		gameID,
 		setGameData,
 		setNoGame,
 	});
 
 	useEffect(() => {
-		if (localSettings.remoteTilt) {
-			const cardIndex = localTilt.findIndex((tilt) => !!tilt);
+		const cardIndex = tilt.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 });
+		if (tilt[cardIndex]) {
+			emitTilt(cardIndex, tilt[cardIndex]);
 		}
-		}
-	}, [localTilt, localSettings]);
+	}, [tilt]);
 
 	const handleSelect = (cardID: string) => {
 		setSelectCardIndex(-1);
 
-		emitSelect(selectCardIndex, cardID);
+		select(selectCardIndex, cardID);
 	};
 
-	const { dmID } = gameData;
-	const isDM = !!dmID;
-	const settings = { ...gameData.settings, ...localSettings };
-
 	const appInterface = {
 		gameData,
-		isDM,
 		noGame,
+		tilt,
 		selectCardIndex,
-		settings,
-		tilts: reduceTilts(gameData, localTilt, settings),
-		emitFlip,
-		emitSettings,
-		emitRedraw,
-		emitSelect: handleSelect,
+		flipCard,
+		handleSettings,
+		redraw,
+		select: handleSelect,
 		setGameID,
-		setLocalSettings,
 		setSelectCardIndex,
-		setLocalTilt,
+		setTilt,
 	};
 
 	return <AppContext.Provider value={appInterface}>{children}</AppContext.Provider>;

app/[gameID]/page.tsx

@@ -7,7 +7,7 @@ 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/index';
+import Settings from '@/components/Settings';
 import { SpectatorLink } from '@/components/SpectatorLink';
 import TarokkaGrid from '@/components/TarokkaGrid';
 
@@ -24,7 +24,7 @@ export default function GamePage() {
 	return noGame ? (
 		<NotFound />
 	) : (
-		<main className="h-dvh flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
+		<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 />

app/layout.tsx

@@ -1,14 +1,26 @@
 import type { Metadata } from 'next';
-import { Eagle_Lake } from 'next/font/google';
+import { Pirata_One, Eagle_Lake, Cinzel_Decorative } from 'next/font/google';
 import { AppProvider } from '@/app/AppContext';
 import './globals.css';
 
+const pirataOne = Pirata_One({
+	variable: '--font-pirata',
+	subsets: ['latin'],
+	weight: '400',
+});
+
 const eagleLake = Eagle_Lake({
 	variable: '--font-eagle-lake',
 	subsets: ['latin'],
 	weight: '400',
 });
 
+const cinzel = Cinzel_Decorative({
+	variable: '--font-cinzel',
+	subsets: ['latin'],
+	weight: '400',
+});
+
 export const metadata: Metadata = {
 	title: 'Tarokka',
 	description: 'Fortune telling for D&D’s Curse of Strahd',
@@ -25,8 +37,11 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en" className={`${eagleLake.variable} antialiased overscroll-none`}>
-			<body className={`${eagleLake.className} antialiased h-dvh`}>
+		<html
+			lang="en"
+			className={`${pirataOne.variable} ${eagleLake.variable} ${cinzel.variable} antialiased`}
+		>
+			<body className={`${eagleLake.className} antialiased`}>
 				<AppProvider>{children}</AppProvider>
 			</body>
 		</html>

app/page.tsx

@@ -16,7 +16,7 @@ export default function Home() {
 	};
 
 	return (
-		<main className="flex justify-center items-center h-dvh text-yellow-400 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">

components/Card.tsx

@@ -5,8 +5,8 @@ import { useAppContext } from '@/app/AppContext';
 import TiltCard from '@/components/TiltCard';
 import ToolTip from '@/components/ToolTip';
 import StackTheDeck from '@/components/StackTheDeck';
-import Sheen from '@/components/Sheen';
-import { getCardInfo, getURL } from '@/tools';
+import getCardInfo from '@/tools/getCardInfo';
+import getURL from '@/tools/getURL';
 
 import tarokkaCards from '@/constants/tarokkaCards';
 import { layout } from '@/constants/tarokka';
@@ -22,7 +22,7 @@ type CardProps = {
 
 export default function Card({ card, cardIndex }: CardProps) {
 	const [tooltip, setTooltip] = useState<React.ReactNode>(null);
-	const { emitFlip, gameData, emitRedraw, setSelectCardIndex } = useAppContext();
+	const { flipCard, gameData, redraw, setSelectCardIndex } = useAppContext();
 
 	const { dmID, settings } = gameData;
 	const isDM = !!dmID;
@@ -32,7 +32,7 @@ export default function Card({ card, cardIndex }: CardProps) {
 
 	const handleClick = () => {
 		if (isDM) {
-			emitFlip(cardIndex);
+			flipCard(cardIndex);
 		}
 	};
 
@@ -54,7 +54,7 @@ export default function Card({ card, cardIndex }: CardProps) {
 	return (
 		<ToolTip content={tooltip || getTooltip()}>
 			<TiltCard
-				className={`h-[21vh] w-[15vh] max-w-[30vw] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
+				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
@@ -79,12 +79,11 @@ export default function Card({ card, cardIndex }: CardProps) {
 						/>
 						{isDM && !flipped && (
 							<StackTheDeck
-								onRedraw={() => emitRedraw(cardIndex)}
+								onRedraw={() => redraw(cardIndex)}
 								onSelect={() => setSelectCardIndex(cardIndex)}
 								onHover={setTooltip}
 							/>
 						)}
-						<Sheen cardIndex={cardIndex} />
 					</div>
 					<div className="absolute inset-0 backface-hidden rotate-y-180">
 						<img
@@ -92,7 +91,6 @@ export default function Card({ card, cardIndex }: CardProps) {
 							alt={aria}
 							className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
 						/>
-						<Sheen cardIndex={cardIndex} />
 					</div>
 				</div>
 			</TiltCard>

components/CardSelect.tsx

@@ -3,7 +3,7 @@
 import { CircleX } from 'lucide-react';
 import { useAppContext } from '@/app/AppContext';
 import TarokkaDeck from '@/lib/TarokkaDeck';
-import { getURL } from '@/tools';
+import getURL from '@/tools/getURL';
 
 import { Deck } from '@/types';
 
@@ -14,7 +14,7 @@ type CardSelectProps = {
 };
 
 export default function CardSelect({ className = '' }: CardSelectProps) {
-	const { gameData, emitSelect, selectCardIndex, setSelectCardIndex } = useAppContext();
+	const { gameData, select, selectCardIndex, setSelectCardIndex } = useAppContext();
 	const { cards: hand, settings } = gameData;
 
 	const handIDs = hand.map(({ id }) => id);
@@ -53,7 +53,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={() => select(card.id)}
 						>
 							<img
 								src={getURL(card, settings)}

components/Notes.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { CircleX, ScrollText } from 'lucide-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';
+import getCardInfo from '@/tools/getCardInfo';
 import { cardMap, layout } from '@/constants/tarokka';
 
 export default function Notes() {
@@ -51,24 +51,13 @@ export default function Notes() {
 				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
-						${showNotes ? 'sm:w-[50vw] 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 space-y-2 ${showNotes ? 'sm:w-[33vw] sm:h-[67vh] w-[80vw] h-[80vh]' : 'w-0 h-0'}`}
 				>
 					<CopyButton
 						copy={notes.map((note) => note!.join('\n')).join('\n\n')}
-						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]
-						`}
+						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"
 					/>
-					<div className="text-yellow-400 h-full overflow-scroll p-8 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
+					<div className="text-yellow-400 h-full overflow-scroll p-6 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">
@@ -81,17 +70,6 @@ export default function Notes() {
 						))}
 					</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/Settings.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+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';
+
+const cinzel = Cinzel_Decorative({
+	variable: '--font-cinzel',
+	subsets: ['latin'],
+	weight: '400',
+});
+
+const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
+
+export default function Settings() {
+	const [open, setOpen] = useState(false);
+	const { gameData, handleSettings } = useAppContext();
+
+	const { dmID } = gameData;
+	const isDM = !!dmID;
+
+	const togglePermission = (key: string) => {
+		handleSettings({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				[key]: !gameData.settings[key],
+			},
+		});
+	};
+
+	const tuneRadio = (cardStyle: CardStyle) => {
+		handleSettings({
+			...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 isDM ? (
+		<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>
+	) : null;
+}

components/Settings/CardStyle.tsx

@@ -1,55 +0,0 @@
-'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 capitalize
-							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

@@ -1,13 +0,0 @@
-'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

@@ -1,27 +0,0 @@
-'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

@@ -1,34 +0,0 @@
-'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

@@ -1,55 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { CircleX, Settings as Gear } from 'lucide-react';
-
-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';
-
-export default function Settings() {
-	const [open, setOpen] = useState(false);
-	const { isDM } = useAppContext();
-
-	return (
-		<div className={`fixed top-4 right-4 z-25`}>
-			<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

@@ -1,59 +0,0 @@
-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/Switch.tsx

@@ -1,44 +1,25 @@
-import type { ChangeEventHandler } from 'react';
-
 export interface SwitchProps {
 	label: string;
 	value: boolean;
-	toggleAction: ChangeEventHandler<HTMLInputElement>;
-	className?: string;
+	toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const nonInitialCaps = /(?!^)([A-Z])/g;
-
-export default function Switch({ label, value, toggleAction, className }: SwitchProps) {
+export default function Switch({ label, value, toggleAction }: SwitchProps) {
 	return (
-		<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>
+		<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>
 
 			<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
-				<input
-					id={`switch-${label}`}
-					type="checkbox"
-					checked={value}
-					onChange={toggleAction}
-					className="sr-only peer"
+				<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'
+					}`}
 				/>
 				<div
-					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
-					`}
+					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'}`}
 				/>
 			</div>
 		</label>

components/TarokkaGrid.tsx

@@ -15,7 +15,7 @@ export default function TarokkaGrid() {
 	const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
 
 	return (
-		<div className="grid grid-cols-3 grid-rows-3 gap-2 sm:gap-4 md:gap-8 w-fit mx-auto">
+		<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
 			{Array.from({ length: 9 })
 				.map(arrangeCards)
 				.map((card, index) => (

components/TiltCard.tsx

@@ -1,12 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } 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,
@@ -17,95 +12,64 @@ export default function TiltCard({
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
-	const [untilt, setUntilt] = useState(false);
-	const { settings, tilts, setLocalTilt } = useAppContext();
+	const { gameData, setTilt } = 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);
+		const tilt = gameData.tilts[cardIndex];
+		if (!tilt) {
+			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+			return;
 		}
-	}, [tilts]);
 
-	useEffect(() => {
-		const card = cardRef.current;
-		if (!card || !untilt) return;
+		const tilted = tilt.filter(({ rotateX, rotateY }) => rotateX || rotateY);
 
-		card.style.transform = ZERO_ROTATION;
-	}, [untilt]);
+		const { totalX, totalY } = tilted.reduce(
+			({ totalX, totalY }, { rotateX, rotateY }) => ({
+				totalX: totalX + rotateX,
+				totalY: totalY + rotateY,
+			}),
+			{ totalX: 0, totalY: 0 },
+		);
 
-	const handleTilt = (x: number, y: number) => {
+		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;
 		if (!card) return;
 
 		const rect = card.getBoundingClientRect();
-		x -= rect.left;
-		y -= rect.top;
-
+		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,
+		newTilt[cardIndex] = { rotateX, rotateY };
+
+		setTilt(newTilt);
 	};
 
-		setLocalTilt(newTilt);
-	};
-
-	const handleMouseMove = throttle((e: React.MouseEvent) => {
-		handleTilt(e.clientX, e.clientY);
-	}, thirtyFPS);
-
-	const handleTouchMove = throttle((e: React.TouchEvent) => {
-		const card = cardRef.current;
-		const touch = e.touches[0];
-
-		if (card && touch) {
-			const rect = card.getBoundingClientRect();
-			const x = touch.clientX;
-			const y = touch.clientY;
-
-			if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
-				handleTilt(x, y);
-			} else {
-				setLocalTilt([]);
-			}
-		}
-	}, thirtyFPS);
-
 	const handleMouseLeave = () => {
-		setLocalTilt([]);
+		setTilt([]);
 	};
 
 	return (
-		<div
-			className={`group ${className}`}
-			onMouseMove={settings.tilt ? handleMouseMove : undefined}
-			onTouchMove={settings.tilt ? handleTouchMove : undefined}
-			onTouchEnd={handleMouseLeave}
-			onMouseLeave={handleMouseLeave}
-		>
-			<div
-				ref={cardRef}
-				onAnimationEnd={() => setUntilt(false)}
-				className={`h-full w-full transition-transform ${untilt ? 'duration-500' : 'duration-0'}`}
-			>
+		<div className={`${className}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
 				{children}
 			</div>
 		</div>

constants/index.ts

@@ -1,33 +0,0 @@
-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/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/useSocket.ts

@@ -1,5 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { socket } from '@/socket';
+import throttle from '@/tools/throttle';
+
 import type { GameUpdate, Tilt } from '@/types';
 
 interface UseSocketProps {
@@ -9,21 +11,15 @@ interface UseSocketProps {
 }
 
 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);
 			});
 
@@ -35,47 +31,35 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 			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);
+	}, [gameID]);
 
+	const flipCard = (cardIndex: number) => {
 		socket.emit('flip-card', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const emitSettings = (gameData: GameUpdate) => {
-		if (disconnected) setConnect(connect + 1);
-
+	const handleSettings = (gameData: GameUpdate) => {
 		socket.emit('settings', {
 			gameID,
 			gameData,
 		});
 	};
 
-	const emitRedraw = (cardIndex: number) => {
-		if (disconnected) setConnect(connect + 1);
-
+	const redraw = (cardIndex: number) => {
 		socket.emit('redraw', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const emitSelect = (cardIndex: number, cardID: string) => {
-		if (disconnected) setConnect(connect + 1);
-
+	const select = (cardIndex: number, cardID: string) => {
 		socket.emit('select', {
 			gameID,
 			cardIndex,
@@ -83,20 +67,18 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
-	const emitTilt = (cardIndex: number, tilt: Tilt) => {
-		if (disconnected) setConnect(connect + 1);
-
+	const emitTilt = throttle((cardIndex: number, tilt: Tilt) => {
 		socket.emit('tilt', {
 			cardIndex,
 			tilt,
 		});
-	};
+	}, 33.3);
 
 	return {
-		emitFlip,
-		emitSettings,
-		emitRedraw,
-		emitSelect,
+		flipCard,
+		handleSettings,
+		redraw,
+		select,
 		emitTilt,
 	};
 }

lib/GameStore.ts

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

lib/StandardDeck.ts

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

lib/TarokkaDeck.ts

@@ -1,4 +1,4 @@
-import { getRandomItems } from '@/tools';
+import getRandomItems from '@/tools/getRandomItems';
 import cards from '@/constants/tarokkaCards';
 import type { TarokkaCard, TarokkaGameCard } from '@/types';
 

middleware.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
-export function proxy(request: NextRequest) {
+export function middleware(request: NextRequest) {
 	const url = request.nextUrl;
 	const slug = url.pathname.slice(1);
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tarokka",
-	"version": "1.1.2",
+	"version": "0.1.0",
 	"private": true,
 	"scripts": {
 		"dev": "nodemon",

server.ts

@@ -3,9 +3,7 @@ import { createServer } from 'http';
 import { Server as SocketIOServer, type Socket } from 'socket.io';
 
 import GameStore from '@/lib/GameStore';
-import { omit } from '@/tools';
-
-import { thirtyFPS } from '@/constants/time';
+import omit from '@/tools/omit';
 import type { ClientUpdate, GameUpdate, Tilt } from '@/types';
 
 const dev = process.env.NODE_ENV !== 'production';
@@ -17,10 +15,9 @@ 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) => {
@@ -28,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];
-		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}`);
 
@@ -144,7 +122,7 @@ 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);
+				broadcast('game-update', gameState);
 			} catch (e) {
 				const error = e instanceof Error ? e.message : e;
 				console.error(Date.now(), 'Error[tilt]', error);

tools/getCardInfo.ts

@@ -1,12 +1,12 @@
-import { isHighCard, isLowCard } from '@/tools';
+import { isHighCard, isLowCard } from '@/tools/cardTypes';
 import { Layout, Settings, TarokkaGameCard } from '@/types';
 
-export const getCardInfo = (
+export default function getTooltip(
 	card: TarokkaGameCard,
 	position: Layout,
 	dm: boolean,
 	settings: Settings,
-) => {
+) {
 	const { card: cardName, description, flipped } = card;
 
 	let text: string[] = [];
@@ -39,4 +39,4 @@ export const getCardInfo = (
 	}
 
 	return text;
-};
+}

tools/getRandomItems.ts

@@ -1,4 +1,4 @@
-export const getRandomItems = <T>(items: T[], count: number): T[] => {
+export default function getRandomItems<T>(items: T[], count: number): T[] {
 	const shuffled = [...items];
 
 	// Fisher-Yates shuffle
@@ -8,4 +8,4 @@ export const 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, TarokkaCard, TarokkaGameCard } from '@/types';
 
-export const getURL = (card: TarokkaCard | 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}${card.extension || styleConfig.extension}`;
-};
+}

tools/index.ts

@@ -1,11 +0,0 @@
-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.ts

@@ -1,19 +0,0 @@
-/**
- * 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 const omit = <T extends Record<string, any>>(
+export default function 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 const parseMilliseconds = (timestamp: number): ParsedMilliseconds => {
+export default function parseMilliseconds(timestamp: number): ParsedMilliseconds {
 	const days = Math.floor(timestamp / DAY);
 	timestamp %= DAY;
 
@@ -21,4 +21,4 @@ export const parseMilliseconds = (timestamp: number): ParsedMilliseconds => {
 	timestamp %= SECOND;
 
 	return { days, hours, minutes, seconds };
-};
+}

tools/reduceTilts.ts

@@ -1,36 +0,0 @@
-import { validTilt } from '@/tools';
-import { GameUpdate, Settings, 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, remoteTilt }: Settings,
-): Tilt[] {
-	const remoteTilts = gameData.tilts;
-
-	if (!tilt) return [];
-	if (!remoteTilt) return localTilt;
-
-	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,7 +1,9 @@
-import { getRandomItems } from '@/tools';
+import getRandomItems from '@/tools/getRandomItems';
 
 const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
 
-export const generateID = (length: number = 6) => {
+const generateID = (length: number = 6) => {
 	return getRandomItems(alphabet.split(''), length).join('');
 };
+
+export default generateID;

tools/throttle.ts

@@ -1,12 +0,0 @@
-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

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

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -16,7 +12,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -24,20 +20,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "strictNullChecks": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

types/index.ts

@@ -4,18 +4,11 @@ export type CardStyle = 'standard' | 'color' | 'grayscale';
 export type Deck = 'high' | 'common' | 'both' | 'back' | 'all';
 
 export interface Settings {
-	cardStyle: CardStyle;
-	notes: boolean;
 	positionBack: boolean;
 	positionFront: boolean;
 	prophecy: boolean;
-	tilt: boolean;
-	remoteTilt: boolean;
-}
-
-export interface LocalSettings {
-	tilt: boolean;
-	remoteTilt: boolean;
+	notes: boolean;
+	cardStyle: CardStyle;
 }
 
 export interface StandardCard {
@@ -115,8 +108,6 @@ export interface Layout {
 
 export interface Tilt {
 	playerID?: string;
-	percentX: number;
-	percentY: number;
 	rotateX: number;
 	rotateY: number;
 }