middleware -> proxy

144 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

app/AppContext.tsx

@@ -2,6 +2,7 @@
 
 import { createContext, useContext, useEffect, useState } from 'react';
 import useSocket from '@/hooks/useSocket';
+import { reduceTilts } from '@/tools';
 
 import { GAME_START, LOCAL_DEFAULTS } from '@/constants';
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
@@ -15,7 +16,7 @@ export interface AppContext {
 	noGame: boolean;
 	selectCardIndex: number;
 	settings: Settings;
-	tilt: Tilt[];
+	tilts: Tilt[];
 	emitFlip: (cardIndex: number) => void;
 	emitSettings: (gameData: GameUpdate) => void;
 	emitRedraw: (cardIndex: number) => void;
@@ -23,7 +24,7 @@ export interface AppContext {
 	setGameID: (gameID: string) => void;
 	setLocalSettings: Dispatch<SetStateAction<LocalSettings>>;
 	setSelectCardIndex: (cardIndex: number) => void;
-	setTilt: (tilt: Tilt[]) => void;
+	setLocalTilt: (tilt: Tilt[]) => void;
 }
 
 export function AppProvider({ children }: { children: ReactNode }) {
@@ -32,7 +33,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
 	const [gameID, setGameID] = useState('');
 	const [noGame, setNoGame] = useState(false);
 	const [selectCardIndex, setSelectCardIndex] = useState(-1);
-	const [tilt, setTilt] = useState<Tilt[]>([]);
+	const [localTilt, setLocalTilt] = useState<Tilt[]>([]);
 
 	const { emitFlip, emitRedraw, emitSelect, emitSettings, emitTilt } = useSocket({
 		gameID,
@@ -42,17 +43,17 @@ export function AppProvider({ children }: { children: ReactNode }) {
 
 	useEffect(() => {
 		if (localSettings.remoteTilt) {
-			const cardIndex = tilt.findIndex((tilt) => !!tilt);
+			const cardIndex = localTilt.findIndex((tilt) => !!tilt);
 
-			if (tilt[cardIndex]) {
-				emitTilt(cardIndex, tilt[cardIndex]);
+			if (localTilt[cardIndex]) {
+				emitTilt(cardIndex, localTilt[cardIndex]);
 			} else {
 				// cardIndex does not matter
 				// all tilts for this user will be cleared
-				emitTilt(0, { rotateX: 0, rotateY: 0 });
+				emitTilt(0, { percentX: -1, percentY: -1, rotateX: 0, rotateY: 0 });
 			}
 		}
-	}, [tilt, localSettings]);
+	}, [localTilt, localSettings]);
 
 	const handleSelect = (cardID: string) => {
 		setSelectCardIndex(-1);
@@ -62,14 +63,15 @@ export function AppProvider({ children }: { children: ReactNode }) {
 
 	const { dmID } = gameData;
 	const isDM = !!dmID;
+	const settings = { ...gameData.settings, ...localSettings };
 
 	const appInterface = {
 		gameData,
 		isDM,
 		noGame,
 		selectCardIndex,
-		settings: { ...gameData.settings, ...localSettings },
-		tilt,
+		settings,
+		tilts: reduceTilts(gameData, localTilt, settings),
 		emitFlip,
 		emitSettings,
 		emitRedraw,
@@ -77,7 +79,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
 		setGameID,
 		setLocalSettings,
 		setSelectCardIndex,
-		setTilt,
+		setLocalTilt,
 	};
 
 	return <AppContext.Provider value={appInterface}>{children}</AppContext.Provider>;

app/[gameID]/page.tsx

@@ -24,7 +24,7 @@ export default function GamePage() {
 	return noGame ? (
 		<NotFound />
 	) : (
-		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
+		<main className="h-dvh 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,26 +1,14 @@
 import type { Metadata } from 'next';
-import { Pirata_One, Eagle_Lake, Cinzel_Decorative } from 'next/font/google';
+import { Eagle_Lake } 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',
@@ -37,11 +25,8 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html
-			lang="en"
-			className={`${pirataOne.variable} ${eagleLake.variable} ${cinzel.variable} antialiased`}
-		>
-			<body className={`${eagleLake.className} antialiased`}>
+		<html lang="en" className={`${eagleLake.variable} antialiased overscroll-none`}>
+			<body className={`${eagleLake.className} antialiased h-dvh`}>
 				<AppProvider>{children}</AppProvider>
 			</body>
 		</html>

app/page.tsx

@@ -16,7 +16,7 @@ export default function Home() {
 	};
 
 	return (
-		<main className="min-h-screen flex justify-center items-center text-yellow-400 bg-[url('/img/table3.png')] bg-cover bg-center">
+		<main className="flex justify-center items-center h-dvh 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 getCardInfo from '@/tools/getCardInfo';
-import getURL from '@/tools/getURL';
+import Sheen from '@/components/Sheen';
+import { getCardInfo, getURL } from '@/tools';
 
 import tarokkaCards from '@/constants/tarokkaCards';
 import { layout } from '@/constants/tarokka';
@@ -54,7 +54,7 @@ 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' : ''} `}
+				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' : ''} `}
 				cardIndex={cardIndex}
 			>
 				<div
@@ -84,6 +84,7 @@ export default function Card({ card, cardIndex }: CardProps) {
 								onHover={setTooltip}
 							/>
 						)}
+						<Sheen cardIndex={cardIndex} />
 					</div>
 					<div className="absolute inset-0 backface-hidden rotate-y-180">
 						<img
@@ -91,6 +92,7 @@ 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/getURL';
+import { getURL } from '@/tools';
 
 import { Deck } from '@/types';
 

components/Notes.tsx

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

@@ -29,7 +29,7 @@ export default function CardStyle({ className }: { className?: string }) {
 							flex justify-center
 							cursor-pointer
 							w-full px-3 py-2
-							text-xs font-medium
+							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'}

components/Settings/index.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { CircleX, Settings as Gear } from 'lucide-react';
-import { Cinzel_Decorative } from 'next/font/google';
 
 import { useAppContext } from '@/app/AppContext';
 import Scrim from '@/components/Scrim';
@@ -12,18 +11,12 @@ import ExternalLinks from './ExternalLinks';
 import GameLinks from './GameLinks';
 import Permissions from './Permissions';
 
-const cinzel = Cinzel_Decorative({
-	variable: '--font-cinzel',
-	subsets: ['latin'],
-	weight: '400',
-});
-
 export default function Settings() {
 	const [open, setOpen] = useState(false);
 	const { isDM } = useAppContext();
 
 	return (
-		<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
+		<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'}`}

components/Sheen.tsx

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

components/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-8 w-fit mx-auto">
+		<div className="grid grid-cols-3 grid-rows-3 gap-2 sm:gap-4 md:gap-8 w-fit mx-auto">
 			{Array.from({ length: 9 })
 				.map(arrangeCards)
 				.map((card, index) => (

components/TiltCard.tsx

@@ -1,30 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
-import throttle from '@/tools/throttle';
+import { throttle, validTilt } from '@/tools';
 
 import { thirtyFPS } from '@/constants/time';
 import type { Tilt } from '@/types';
 
 const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
 
-const tiltSheen = (sheen: HTMLDivElement, tiltX: number, tiltY: number) => {
-	const rect = sheen.getBoundingClientRect();
-	const centerX = rect.width / 2;
-	const centerY = rect.height / 2;
-	const sheenX = centerX + (tiltY / -20) * centerX;
-	const sheenY = centerY + (tiltX / 20) * centerY;
-
-	sheen.style.opacity = '1';
-	sheen.style.backgroundImage = `
-			radial-gradient(
-				circle at
-				${sheenX}px ${sheenY}px,
-				#ffffff44,
-				#0000000f
-			)
-		`;
-};
-
 export default function TiltCard({
 	children,
 	cardIndex,
@@ -35,91 +17,88 @@ export default function TiltCard({
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
-	const sheenRef = useRef<HTMLDivElement>(null);
 	const [untilt, setUntilt] = useState(false);
-	const {
-		gameData,
-		settings: { tilt, remoteTilt },
-		setTilt,
-		tilt: localTilts,
-	} = useAppContext();
+	const { settings, tilts, setLocalTilt } = useAppContext();
 
 	useEffect(() => {
 		const card = cardRef.current;
-		const sheen = sheenRef.current;
-		if (!card || !sheen) return;
+		if (!card) return;
 
-		if (tilt) {
-			const rotateX = localTilts[cardIndex]?.rotateX || 0;
-			const rotateY = localTilts[cardIndex]?.rotateY || 0;
+		const tilt = tilts[cardIndex];
 
-			const tilts = remoteTilt
-				? [...gameData.tilts[cardIndex], { rotateX, rotateY }]
-				: [{ rotateX, rotateY }];
-
-			const { totalX, totalY, count } = tilts
-				.filter(({ rotateX, rotateY }) => !!rotateX && !!rotateY)
-				.reduce(
-					({ totalX, totalY, count }, { rotateX, rotateY }) => ({
-						totalX: totalX + rotateX,
-						totalY: totalY + rotateY,
-						count: ++count,
-					}),
-					{ totalX: 0, totalY: 0, count: 0 },
-				);
-
-			if (count && (totalX || totalY)) {
+		if (validTilt(tilt)) {
 			setUntilt(false);
-
-				const x = totalX / count;
-				const y = totalY / count;
-
-				card.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;
-				tiltSheen(sheen, x, y);
+			card.style.transform = `rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg)`;
 		} else {
 			setUntilt(true);
 		}
-		} else if (card.style.transform !== ZERO_ROTATION) {
-			setUntilt(true);
-		}
-	}, [tilt, localTilts, gameData]);
+	}, [tilts]);
 
 	useEffect(() => {
 		const card = cardRef.current;
-		const sheen = sheenRef.current;
-		if (!card || !sheen || !untilt) return;
+		if (!card || !untilt) return;
 
 		card.style.transform = ZERO_ROTATION;
-		sheen.style.opacity = '0';
 	}, [untilt]);
 
-	const handleMouseMove = throttle((e: React.MouseEvent) => {
+	const handleTilt = (x: number, y: number) => {
 		const card = cardRef.current;
 		if (!card) return;
 
 		const rect = card.getBoundingClientRect();
-		const x = e.clientX - rect.left;
-		const y = e.clientY - rect.top;
+		x -= rect.left;
+		y -= 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] = { rotateX, rotateY };
+		newTilt[cardIndex] = {
+			percentX,
+			percentY,
+			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 = () => {
-		setTilt([]);
+		setLocalTilt([]);
 	};
 
 	return (
 		<div
 			className={`group ${className}`}
-			onMouseMove={tilt ? handleMouseMove : undefined}
+			onMouseMove={settings.tilt ? handleMouseMove : undefined}
+			onTouchMove={settings.tilt ? handleTouchMove : undefined}
+			onTouchEnd={handleMouseLeave}
 			onMouseLeave={handleMouseLeave}
 		>
 			<div
@@ -128,10 +107,6 @@ export default function TiltCard({
 				className={`h-full w-full transition-transform ${untilt ? 'duration-500' : 'duration-0'}`}
 			>
 				{children}
-				<div
-					ref={sheenRef}
-					className="pointer-events-none absolute inset-0 rounded-lg bg-gradient-to-tr from-transparent via-white/20 to-transparent mix-blend-screen opacity-0 transition-opacity duration-500"
-				/>
 			</div>
 		</div>
 	);

constants/index.ts

@@ -7,12 +7,12 @@ import type { GameUpdate, LocalSettings, Settings } from '@/types';
 
 export const SETTINGS: Settings = {
 	cardStyle: 'color',
-	notes: false,
-	positionBack: false,
-	positionFront: false,
-	prophecy: false,
+	notes: true,
+	positionBack: true,
+	positionFront: true,
+	prophecy: true,
 	tilt: true,
-	remoteTilt: false,
+	remoteTilt: true,
 };
 
 export const GAME_START: GameUpdate = {

lib/GameStore.ts

@@ -1,6 +1,5 @@
 import Deck from '@/lib/TarokkaDeck';
-import generateID from '@/tools/simpleID';
-import parseMilliseconds from '@/tools/parseMilliseconds';
+import { generateID, parseMilliseconds } from '@/tools';
 
 import { HOUR, DAY, SETTINGS } from '@/constants';
 import { GameState, GameUpdate, Settings, Tilt } from '@/types';
@@ -157,7 +156,7 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
-	tilt(playerID: string, cardIndex: number, { rotateX, rotateY }: Tilt) {
+	tilt(playerID: string, cardIndex: number, tilt: Tilt) {
 		const game = this.getGameByPlayerID(playerID);
 		const cardTilts = game.tilts[cardIndex];
 
@@ -165,8 +164,8 @@ export default class GameStore {
 
 		this._clearTilts(game, playerID);
 
-		if (rotateX && rotateY) {
-			game.tilts[cardIndex] = [...game.tilts[cardIndex], { playerID, rotateX, rotateY }];
+		if (tilt.rotateX && tilt.rotateY) {
+			game.tilts[cardIndex] = [...game.tilts[cardIndex], { ...tilt, playerID }];
 			game.lastUpdated = Date.now();
 		}
 

lib/StandardDeck.ts

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

lib/TarokkaDeck.ts

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

package.json

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

proxy.ts

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

server.ts

@@ -3,7 +3,7 @@ import { createServer } from 'http';
 import { Server as SocketIOServer, type Socket } from 'socket.io';
 
 import GameStore from '@/lib/GameStore';
-import omit from '@/tools/omit';
+import { omit } from '@/tools';
 
 import { thirtyFPS } from '@/constants/time';
 import type { ClientUpdate, GameUpdate, Tilt } from '@/types';

tools/getCardInfo.ts

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

tools/getRandomItems.ts

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

tools/getURL.ts

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

tools/index.ts

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

tools/log.ts

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

tools/omit.ts

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

tools/parseMilliseconds.ts

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

tools/reduceTilts.ts

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

tools/throttle.ts

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

tools/validTilt.ts

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

types/index.ts

@@ -115,6 +115,8 @@ export interface Layout {
 
 export interface Tilt {
 	playerID?: string;
+	percentX: number;
+	percentY: number;
 	rotateX: number;
 	rotateY: number;
 }