a more-obvious spectator link

app/[gameID]/page.tsx

@@ -3,11 +3,14 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { socket } from '@/socket';
+import { Eye } from 'lucide-react';
 
-import Settings from '@/components/Settings';
 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 { cardMap, layout } from '@/constants/tarokka';
 
 import type { GameUpdate, ClientUpdate } from '@/types';
@@ -88,6 +91,15 @@ 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">
+			{isDM && (
+				<CopyButton
+					copy={`${location.origin}/${gameData.spectatorID}`}
+					tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
+					Icon={Eye}
+					className={`fixed top-4 left-4 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 cursor-pointer`}
+				/>
+			)}
+
 			{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 })

components/CopyButton.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { useState } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, useState } from 'react';
-import { Copy as CopyIcon, Check as CheckIcon } from 'lucide-react';
+import { LucideProps, Copy as CopyIcon, Check as CheckIcon } from 'lucide-react';
 
 import ToolTip from '@/components/ToolTip';
 
 type CopyButtonProps = {
 	title?: string;
 	copy: string;
+	Icon?: ForwardRefExoticComponent<Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>>;
 	tooltip?: string | string[];
 	className?: string;
 };
@@ -15,6 +16,7 @@ type CopyButtonProps = {
 export default function CopyButton({
 	title,
 	copy,
+	Icon = CopyIcon,
 	tooltip = ['Copy', 'Copied'],
 	className,
 }: CopyButtonProps) {
@@ -44,7 +46,7 @@ export default function CopyButton({
 					{copied ? (
 						<CheckIcon className="ml-auto" size={16} />
 					) : (
-						<CopyIcon className="ml-auto" size={16} />
+						<Icon className="ml-auto" size={16} />
 					)}
 				</div>
 			</ToolTip>

lib/GameStore.ts

@@ -1,7 +1,7 @@
 import Deck from '@/lib/TarokkaDeck';
 import generateID from '@/tools/simpleID';
 import parseMilliseconds from '@/tools/parseMilliseconds';
-import { MINUTE, HOUR, DAY } from '@/constants/time';
+import { HOUR, DAY } from '@/constants/time';
 import { GameState, GameUpdate, Settings } from '@/types';
 
 const deck = new Deck();
@@ -34,10 +34,10 @@ export default class GameStore {
 	private totalExpired: number;
 	private totalUnused: number;
 
-	private startUps: Set<string>;
+	private startUps: Set<string>; // homepage socket IDs
-	private dms: Map<string, GameState>;
+	private dms: Map<string, GameState>; // DM socket ID -> game
-	private spectators: Map<string, GameState>;
+	private spectators: Map<string, GameState>; // spectator socket ID -> game
-	private players: Map<string, string>;
+	private players: Map<string, GameState>; // socket ID -> game
 
 	constructor() {
 		this.startTime = Date.now();
@@ -50,7 +50,7 @@ export default class GameStore {
 		this.spectators = new Map();
 		this.players = new Map();
 
-		setInterval(() => this.log(), 15 * MINUTE);
+		setInterval(() => this.log(), HOUR);
 		setInterval(() => this.cleanUp(), HOUR);
 
 		setTimeout(() => this.wrapUp(), tilMidnight());
@@ -106,14 +106,12 @@ export default class GameStore {
 
 		game.players.add(playerID);
 		game.lastUpdated = Date.now();
-		this.players.set(playerID, gameID);
+		this.players.set(playerID, game);
 
 		return this.gameUpdate(game);
 	}
 
-	leaveGame(gameID: string, playerID: string): GameState {
+	leaveGame(game: GameState, playerID: string): GameState {
-		const game = this.getGame(gameID);
-
 		game.players.delete(playerID);
 		game.lastUpdated = Date.now();
 
@@ -160,12 +158,12 @@ export default class GameStore {
 
 			return null;
 		} else {
-			const gameID = this.players.get(playerID);
+			const game = this.players.get(playerID);
 
-			if (!gameID) throw new Error(`Player ${playerID} not found`);
+			if (!game) throw new Error(`Player ${playerID} not found`);
 
 			this.players.delete(playerID);
-			return this.leaveGame(gameID, playerID);
+			return this.leaveGame(game, playerID);
 		}
 	}
 
@@ -176,7 +174,6 @@ export default class GameStore {
 		console.log(uptimeLog);
 		console.log(`Games: ${this.dms.size}`);
 		console.log(`Players: ${this.players.size}`);
-		console.log('-'.repeat(uptimeLog.length));
 	}
 
 	wrapUp() {
@@ -188,7 +185,6 @@ export default class GameStore {
 		console.log(`Created: ${this.totalCreated}`);
 		console.log(`Expired: ${this.totalExpired}`);
 		console.log(`Unused: ${this.totalUnused}`);
-		console.log('='.repeat(uptimeLog.length));
 
 		this.totalCreated = 0;
 		this.totalExpired = 0;
@@ -208,7 +204,11 @@ export default class GameStore {
 		this.totalExpired += expired.length;
 		this.totalUnused += unused.length;
 
-		expired.forEach((game) => this.deleteGame(game));
+		expired.forEach((game) => {
+			game.players.forEach((playerID) => this.players.delete(playerID));
+			this.deleteGame(game);
+		});
+
 		unused.forEach((game) => this.deleteGame(game));
 	}