Display error when game not found

app/[gameID]/page.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'next/navigation';
 import { socket } from '@/socket';
 
 import Card from '@/components/Card';
+import NotFound from '@/components/NotFound';
 import CopyButton from '@/components/CopyButton';
 import { cardMap, layout } from '@/constants/tarokka';
 
@@ -14,6 +15,7 @@ export default function GamePage() {
 	const { gameID: gameIDParam } = useParams();
 
 	const [gameID, setGameID] = useState('');
+	const [noGame, setNoGame] = useState(false);
 	const [{ dmID, spectatorID, cards }, setGameData] = useState<GameUpdate>({
 		dmID: '',
 		spectatorID: '',
@@ -39,14 +41,20 @@ export default function GamePage() {
 				console.log('>>>', data);
 				setGameData(data);
 			});
+
+			socket.on('join-error', (error) => {
+				console.error('Error:', error);
+				setNoGame(true);
+			});
+
+			socket.on('flip-error', (error) => {
+				console.error('Error:', error);
+			});
 		}
 
-		return gameID
-			? () => {
-					socket.off('init');
-					socket.off('card-flipped');
-				}
-			: undefined;
+		return () => {
+			socket.removeAllListeners();
+		};
 	}, [gameID]);
 
 	const flipCard = (cardIndex: number) => {
@@ -63,7 +71,9 @@ export default function GamePage() {
 	// high deck cards: bottom and center
 	const arrangeCards = (_cell: any, index: number) => cards[cardMap[index]];
 
-	return cards ? (
+	return noGame ? (
+		<NotFound />
+	) : cards ? (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
 			<div className="absolute top-4 left-4 flex flex-col gap-2">
 				{dmID && <CopyButton title="DM link" copy={`${location.origin}/${dmID}`} />}

app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
-import { useRouter } from 'next/navigation';
 import { socket } from '@/socket';
+import { useRouter } from 'next/navigation';
+
 import { GameUpdate } from '@/types';
 
 export default function Home() {

components/NotFound.tsx

@@ -0,0 +1,10 @@
+export default function Custom404() {
+	return (
+		<main className="min-h-screen flex flex-col items-center justify-center text-center p-8 bg-[url('/img/table3.png')] bg-cover bg-center">
+			<h1 className="text-4xl font-bold text-gray-400 mb-4">404 - Game Not Found</h1>
+			<p className="text-lg text-gray-400">
+				The game you're looking for doesn't exist or has expired.
+			</p>
+		</main>
+	);
+}

lib/GameStore.ts

@@ -50,7 +50,7 @@ export default class GameStore {
 	}
 
 	joinGame(gameID: string, playerID: string): GameUpdate {
-		const game = this.getGame(gameID) || this.createGame();
+		const game = this.getGame(gameID);
 
 		game.players.add(playerID);
 		game.lastUpdated = Date.now();

server.ts

@@ -31,20 +31,40 @@ app.prepare().then(() => {
 		});
 
 		socket.on('join', (gameID) => {
-			socket.join(gameID);
+			try {
 				const gameUpdate = gameStore.joinGame(gameID, socket.id);
 
 				console.log(`Socket ${socket.id} joined game ${gameID}`);
 
+				socket.join(gameID);
+
+				if (gameID === gameUpdate.spectatorID) {
+					const { spectatorID, cards } = gameUpdate;
+					socket.emit('init', { spectatorID, cards });
+				} else {
 					socket.emit('init', gameUpdate);
+				}
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+
+				console.error('Error', error);
+				socket.emit('join-error', error);
+			}
 		});
 
 		socket.on('flip-card', ({ gameID, cardIndex }: ClientUpdate) => {
+			try {
 				console.log('Card flipped:', { gameID, cardIndex });
 
 				const gameUpdate = gameStore.flipCard(gameID, cardIndex);
 
 				io.to(gameID).emit('card-flipped', gameUpdate);
+			} catch (e) {
+				const error = e instanceof Error ? e.message : e;
+
+				console.error('Error', error);
+				socket.emit('flip-error', error);
+			}
 		});
 
 		socket.on('disconnect', () => {