adjustable settings

app/[gameID]/page.tsx

@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { socket } from '@/socket';
 
+import Settings from '@/components/Settings';
 import Card from '@/components/Card';
 import NotFound from '@/components/NotFound';
-import CopyButton from '@/components/CopyButton';
 import { cardMap, layout } from '@/constants/tarokka';
 
 import type { GameUpdate, ClientUpdate } from '@/types';
@@ -16,12 +16,19 @@ export default function GamePage() {
 
 	const [gameID, setGameID] = useState('');
 	const [noGame, setNoGame] = useState(false);
-	const [{ dmID, spectatorID, cards }, setGameData] = useState<GameUpdate>({
+	const [gameData, setGameData] = useState<GameUpdate>({
 		dmID: '',
 		spectatorID: '',
 		cards: [],
+		settings: {
+			positionBack: false,
+			positionFront: false,
+			prophecy: false,
+			notes: false,
+		},
 	});
 
+	const { dmID, cards, settings } = gameData;
 	const isDM = !!dmID;
 
 	useEffect(() => {
@@ -39,7 +46,7 @@ export default function GamePage() {
 				setGameData(data);
 			});
 
-			socket.on('card-flipped', (data: GameUpdate) => {
+			socket.on('game-update', (data: GameUpdate) => {
 				console.log('>>>', data);
 				setGameData(data);
 			});
@@ -68,6 +75,10 @@ export default function GamePage() {
 		socket.emit('flip-card', flip);
 	};
 
+	const handleSettings = (gameData: GameUpdate) => {
+		socket.emit('settings', { gameID, gameData });
+	};
+
 	// map our five Tarokka cards to their proper locations in a 3x3 grid
 	// common deck cards: left, top, and right
 	// high deck cards: bottom and center
@@ -77,12 +88,7 @@ export default function GamePage() {
 		<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">
-			<div className="absolute top-4 left-4 flex flex-col gap-2">
-				{dmID && <CopyButton title="DM link" copy={`${location.origin}/${dmID}`} />}
-				{spectatorID && (
-					<CopyButton title="Spectator link" copy={`${location.origin}/${spectatorID}`} />
-				)}
-			</div>
+			{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
 			<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
 				{Array.from({ length: 9 })
 					.map(arrangeCards)
@@ -93,6 +99,7 @@ export default function GamePage() {
 									dm={isDM}
 									card={card}
 									position={layout[cardMap[index]]}
+									settings={settings}
 									flipAction={() => flipCard(cardMap[index])}
 								/>
 							)}

components/Card.tsx

@@ -1,11 +1,10 @@
 'use client';
-import { useRef, useState } from 'react';
 
 import ToolTip from '@/components/ToolTip';
 import tarokkaCards from '@/constants/tarokkaCards';
 import getCardInfo from '@/tools/getCardInfo';
 
-import { Layout, TarokkaGameCard } from '@/types';
+import { Layout, Settings, TarokkaGameCard } from '@/types';
 
 const cardBack = tarokkaCards.find((card) => card.back)!;
 
@@ -13,11 +12,12 @@ type CardProps = {
 	dm: boolean;
 	card: TarokkaGameCard;
 	position: Layout;
+	settings: Settings;
 	flipAction: () => void;
 };
 
-export default function Card({ dm, card, position, flipAction }: CardProps) {
-	const { aria, card: cardName, description, flipped, url } = card;
+export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
+	const { aria, flipped, url } = card;
 
 	const handleClick = () => {
 		if (dm) {
@@ -26,9 +26,9 @@ export default function Card({ dm, card, position, flipAction }: CardProps) {
 	};
 
 	const getTooltip = () => {
-		const text = getCardInfo(card, position, dm);
+		const text = getCardInfo(card, position, dm, settings);
 
-		return (
+		return text.length ? (
 			<>
 				{text.map((t, i) => (
 					<div key={i}>
@@ -37,7 +37,7 @@ export default function Card({ dm, card, position, flipAction }: CardProps) {
 					</div>
 				))}
 			</>
-		);
+		) : null;
 	};
 
 	return (
@@ -50,11 +50,7 @@ export default function Card({ dm, card, position, flipAction }: CardProps) {
 					className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
 				>
 					<div className="absolute group inset-0 backface-hidden">
-						<img
-							src={cardBack.url}
-							alt="Card Back"
-							className="rounded-xl rounded border border-gray-500 "
-						/>
+						<img src={cardBack.url} alt="Card Back" className="rounded-lg border border-gray-500" />
 					</div>
 					<div className="absolute group inset-0 backface-hidden rotate-y-180">
 						<img src={url} alt={aria} className="rounded-xl rounded border border-gray-500 " />

components/CopyButton.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { Copy as CopyIcon } from 'lucide-react';
 
+import ToolTip from '@/components/ToolTip';
+
 type CopyButtonProps = {
 	title: string;
 	copy: string;
@@ -22,15 +24,16 @@ export default function CopyButton({ title, copy }: CopyButtonProps) {
 	};
 
 	return (
-		<button
-			onClick={handleCopy}
-			className="px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-xl flex flex-col items-start gap-1 shadow transition-all cursor-pointer"
-		>
-			<div className="flex items-center gap-2 w-full text-sm font-medium">
-				{`${copied ? 'Copied' : 'Copy'} ${title}`}
-				<CopyIcon className="ml-auto" size={16} />
-			</div>
-			<div className="text-xs font-mono opacity-80 break-all">{copy}</div>
-		</button>
+		<ToolTip content={copy}>
+			<button
+				onClick={handleCopy}
+				className="w-full py-1 px-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg flex flex-col items-start gap-1 shadow transition-all cursor-pointer"
+			>
+				<div className="flex items-center gap-2 w-full text-sm font-medium">
+					{`${copied ? 'Copied' : 'Copy'} ${title}`}
+					<CopyIcon className="ml-auto" size={16} />
+				</div>
+			</button>
+		</ToolTip>
 	);
 }

components/Settings.tsx

@@ -1,41 +1,56 @@
 'use client';
 
 import { useState } from 'react';
-import { Settings as Gear } from 'lucide-react';
+import { Settings as Gear, X } from 'lucide-react';
 
-import { Settings } from '@/types';
+import CopyButton from '@/components/CopyButton';
+import Switch from '@/components/Switch';
+import { GameUpdate } from '@/types';
 
 type PermissionTogglePanelProps = {
-	settings: Settings;
-	changeAction: (updatedSettings: Settings) => void;
+	gameData: GameUpdate;
+	changeAction: (updatedSettings: GameUpdate) => void;
 };
 
 export default function PermissionTogglePanel({
-	settings,
+	gameData,
 	changeAction,
 }: PermissionTogglePanelProps) {
 	const [open, setOpen] = useState(false);
 
 	const togglePermission = (key: string) => {
-		changeAction({ ...settings, [key]: !settings[key] });
+		changeAction({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				[key]: !gameData.settings[key],
+			},
+		});
 	};
 
 	return (
 		<div className="fixed top-4 right-4 z-50">
-			<button
-				className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 shadow"
-				onClick={() => setOpen((prev) => !prev)}
-			>
-				<Gear className="w-5 h-5" />
-			</button>
+			{!open && (
+				<button
+					className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer"
+					onClick={() => setOpen((prev) => !prev)}
+				>
+					<Gear className="w-5 h-5" />
+				</button>
+			)}
 
 			{open && (
-				<div className="mt-2 bg-white border border-gray-300 shadow-lg rounded p-4 space-y-2">
-					{Object.entries(settings).map(([key, value]) => (
-						<label key={key} className="flex items-center justify-between">
-							<span className="text-sm capitalize">{key}</span>
-							<input type="checkbox" checked={value} onChange={() => togglePermission(key)} />
-						</label>
+				<div className="relative text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2">
+					<button
+						className="absolute top-1 right-1 p-1 hover:text-gray-300 cursor-pointer"
+						onClick={() => setOpen((prev) => !prev)}
+					>
+						<X className="w-4 h-4" />
+					</button>
+					<CopyButton title="DM link" copy={`${location.origin}/${gameData.dmID}`} />
+					<CopyButton title="Spectator link" copy={`${location.origin}/${gameData.spectatorID}`} />
+					{Object.entries(gameData.settings).map(([key, value]) => (
+						<Switch label={key} value={value} toggleAction={() => togglePermission(key)} />
 					))}
 				</div>
 			)}

components/Switch.tsx

@@ -0,0 +1,27 @@
+export interface SwitchProps {
+	label: string;
+	value: boolean;
+	toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function Switch({ label, value, toggleAction }: SwitchProps) {
+	return (
+		<label className="flex items-center justify-between w-full gap-2 cursor-pointer">
+			<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 type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
+				<div
+					className={`block w-8 h-4 rounded-full transition ${
+						value ? 'bg-gray-500' : 'bg-gray-600'
+					}`}
+				/>
+				<div
+					className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition ${
+						value ? 'translate-x-4' : ''
+					} ${value ? 'bg-gray-100' : 'bg-gray-400'}`}
+				/>
+			</div>
+		</label>
+	);
+}

components/ToolTip.tsx

@@ -68,7 +68,7 @@ export default function Tooltip({
 			</div>
 			<div
 				ref={ttRef}
-				className={`fixed w-[25vh] pointer-events-none z-50 text-xs bg-black text-white rounded border border-gray-300 px-2 py-1 transition-opacity duration-250 ${show ? 'opacity-100' : 'opacity-0'}`}
+				className={`fixed max-w-[35vh] pointer-events-none z-50 text-xs bg-black text-white rounded-xl border border-gray-300 px-2 py-1 transition-opacity duration-250 ${content && show ? 'opacity-100' : 'opacity-0'}`}
 				style={{
 					top: `${pos.y + offsetY}px`,
 					left: `${pos.x + offsetX}px`,

lib/GameStore.ts

@@ -1,6 +1,6 @@
 import Deck from '@/lib/TarokkaDeck';
 import generateID from '@/tools/simpleID';
-import { GameState, GameUpdate } from '@/types';
+import { GameState, GameUpdate, Settings } from '@/types';
 
 const deck = new Deck();
 
@@ -41,6 +41,12 @@ export default class GameStore {
 			players: new Set(),
 			cards: deck.getHand(),
 			lastUpdated: Date.now(),
+			settings: {
+				positionBack: true,
+				positionFront: true,
+				prophecy: true,
+				notes: true,
+			},
 		};
 
 		this.dms.set(dmID, newGame);
@@ -79,6 +85,14 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
+	updateSettings(gameID: string, settings: Settings) {
+		const game = this.getGame(gameID);
+
+		Object.assign(game.settings, settings);
+
+		return this.gameUpdate(game);
+	}
+
 	getGame(gameID: string): GameState {
 		const game = this.dms.get(gameID) || this.spectators.get(gameID);
 
@@ -88,9 +102,9 @@ export default class GameStore {
 	}
 
 	gameUpdate(game: GameState): GameUpdate {
-		const { dmID, spectatorID, cards } = game;
+		const { dmID, spectatorID, cards, settings } = game;
 
-		return { dmID, spectatorID, cards };
+		return { dmID, spectatorID, cards, settings };
 	}
 
 	deleteGame(gameID: string): void {

server.ts

@@ -3,7 +3,8 @@ import { createServer } from 'http';
 import { Server as SocketIOServer, type Socket } from 'socket.io';
 
 import GameStore from '@/lib/GameStore';
-import type { ClientUpdate } from '@/types';
+import omit from '@/tools/omit';
+import type { ClientUpdate, GameUpdate, Settings } from '@/types';
 
 const dev = process.env.NODE_ENV !== 'production';
 const hostname = '0.0.0.0';
@@ -19,6 +20,11 @@ app.prepare().then(() => {
 
 	const io = new SocketIOServer(httpServer);
 
+	const broadcast = (event: string, gameUpdate: GameUpdate) => {
+		io.to(gameUpdate.dmID).emit(event, gameUpdate);
+		io.to(gameUpdate.spectatorID).emit(event, omit(gameUpdate, 'dmID'));
+	};
+
 	io.on('connection', (socket: Socket) => {
 		console.log(`Client connected: ${socket.id}`);
 
@@ -39,8 +45,7 @@ app.prepare().then(() => {
 				socket.join(gameID);
 
 				if (gameID === gameUpdate.spectatorID) {
-					const { spectatorID, cards } = gameUpdate;
-					socket.emit('init', { spectatorID, cards });
+					socket.emit('init', omit(gameUpdate, 'dmID'));
 				} else {
 					socket.emit('init', gameUpdate);
 				}
@@ -58,7 +63,7 @@ app.prepare().then(() => {
 
 				const gameUpdate = gameStore.flipCard(gameID, cardIndex);
 
-				io.to(gameID).emit('card-flipped', gameUpdate);
+				broadcast('game-update', gameUpdate);
 			} catch (e) {
 				const error = e instanceof Error ? e.message : e;
 
@@ -67,6 +72,16 @@ app.prepare().then(() => {
 			}
 		});
 
+		socket.on('settings', ({ gameID, gameData }: { gameID: string; gameData: GameUpdate }) => {
+			try {
+				const gameUpdate = gameStore.updateSettings(gameID, gameData.settings);
+				broadcast('game-update', gameUpdate);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+				console.error('Error', error);
+			}
+		});
+
 		socket.on('disconnect', () => {
 			console.log(`Client disconnected: ${socket.id}`);
 		});

tools/getCardInfo.ts

@@ -1,12 +1,19 @@
 import { isHighCard, isLowCard } from '@/tools/cardTypes';
-import { Layout, TarokkaGameCard } from '@/types';
+import { Layout, Settings, TarokkaGameCard } from '@/types';
 
-export default function getTooltip(card: TarokkaGameCard, position: Layout, dm: boolean) {
+export default function getTooltip(
+	card: TarokkaGameCard,
+	position: Layout,
+	dm: boolean,
+	settings: Settings,
+) {
 	const { card: cardName, description, flipped } = card;
 
-	let text: string[] = [position.text];
+	let text: string[] = [];
 
 	if (flipped) {
+		if (dm || settings.positionFront) text.push(position.text);
+
 		if (dm) text.push(`${cardName}: ${description}`);
 
 		if (isHighCard(card)) {
@@ -14,21 +21,23 @@ export default function getTooltip(card: TarokkaGameCard, position: Layout, dm:
 			if (position.id === 'ally') {
 				if (dm) text.push(`Ally: ${card.prophecy.allies[0].ally}`);
 				if (dm) text.push(card.prophecy.allies[0].dmText);
-				text.push(card.prophecy.allies[0].playerText);
+				if (dm || settings.prophecy) text.push(card.prophecy.allies[0].playerText);
 			}
 
 			// High deck Strahd
 			if (position.id === 'strahd') {
 				if (dm) text.push(card.prophecy.strahd.dmText);
-				text.push(card.prophecy.strahd.playerText);
+				if (dm || settings.prophecy) text.push(card.prophecy.strahd.playerText);
 			}
 		}
 
 		// Low deck: Tome, Ravenkind, or Sunsword
 		if (isLowCard(card)) {
 			if (dm) text.push(card.prophecy.dmText);
-			text.push(card.prophecy.playerText);
+			if (dm || settings.prophecy) text.push(card.prophecy.playerText);
 		}
+	} else {
+		if (dm || settings.positionBack) text.push(position.text);
 	}
 
 	return text;

types/index.ts

@@ -1,3 +1,10 @@
+export interface Settings {
+	positionBack: boolean;
+	positionFront: boolean;
+	prophecy: boolean;
+	notes: boolean;
+}
+
 export interface StandardCard {
 	id: string;
 	aria: string;
@@ -68,12 +75,14 @@ export interface GameState {
 	players: Set<string>;
 	cards: TarokkaGameCard[];
 	lastUpdated: number;
+	settings: Settings;
 }
 
 export interface GameUpdate {
 	dmID: string;
 	spectatorID: string;
 	cards: TarokkaGameCard[];
+	settings: Settings;
 }
 
 export interface ClientUpdate {