Add Excluded Images Logic

Author: TeenBiscuits

server.ts

@@ -212,10 +212,13 @@ app.prepare().then(() => {
 
         switch (message.type) {
           case "room:create": {
-            const { hostId } = message.payload as { hostId: string };
+            const { hostId, excludeImageIds } = message.payload as {
+              hostId: string;
+              excludeImageIds?: string[];
+            };
             console.log(`[WebSocket] room:create - hostId: ${hostId}`);
 
-            const room = createRoom(hostId);
+            const room = createRoom(hostId, excludeImageIds || []);
             console.log(`[WebSocket] Room created - roomId: ${room.roomId}`);
 
             ws.roomId = room.roomId;
@@ -228,7 +231,11 @@ app.prepare().then(() => {
 
             sendTo(ws, {
               type: "room:created",
-              payload: { roomId: room.roomId, hostId: room.hostId },
+              payload: {
+                roomId: room.roomId,
+                hostId: room.hostId,
+                imageIds: room.images.map((img) => img.id),
+              },
             });
             break;
           }

src/app/[locale]/host/page.tsx

@@ -11,6 +11,7 @@ import { Leaderboard } from "@/components/Leaderboard";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { Footer } from "@/components/Footer";
 import Link from "next/link";
+import { getSeenImageIds, markImagesAsSeen } from "@/lib/seenImages";
 import type {
   WSMessage,
   Player,
@@ -36,6 +37,7 @@ interface HostState {
   timeLeft: number;
   voteCount: number;
   correctAnswer: ImageType | null;
+  imageIds: string[];
 }
 
 export default function HostPage() {
@@ -53,17 +55,23 @@ export default function HostPage() {
     timeLeft: 30,
     voteCount: 0,
     correctAnswer: null,
+    imageIds: [],
   });
 
   const handleMessage = useCallback((message: WSMessage) => {
     switch (message.type) {
       case "room:created": {
-        const payload = message.payload as { roomId: string; hostId: string };
+        const payload = message.payload as {
+          roomId: string;
+          hostId: string;
+          imageIds: string[];
+        };
         setState((prev) => ({
           ...prev,
           status: "lobby",
           roomId: payload.roomId,
           hostId: payload.hostId,
+          imageIds: payload.imageIds || [],
         }));
         break;
       }
@@ -128,11 +136,18 @@ export default function HostPage() {
 
       case "game:end": {
         const payload = message.payload as { players: Player[] };
-        setState((prev) => ({
-          ...prev,
-          status: "finished",
-          players: payload.players,
-        }));
+        setState((prev) => {
+          // Mark all game images as seen
+          if (prev.imageIds.length > 0) {
+            markImagesAsSeen(prev.imageIds);
+          }
+
+          return {
+            ...prev,
+            status: "finished",
+            players: payload.players,
+          };
+        });
         break;
       }
     }
@@ -147,11 +162,13 @@ export default function HostPage() {
   useEffect(() => {
     if (isConnected && !state.roomId) {
       const hostId = crypto.randomUUID();
+      const excludeImageIds = getSeenImageIds();
       console.log("[Host] Creating room via WebSocket, hostId:", hostId);
+      console.log("[Host] Excluding seen images:", excludeImageIds.length);
 
       send({
         type: "room:create",
-        payload: { hostId },
+        payload: { hostId, excludeImageIds },
       });
     }
   }, [isConnected, state.roomId, send]);

src/app/api/images/route.ts

@@ -5,8 +5,14 @@ export async function GET(request: NextRequest) {
   try {
     const { searchParams } = new URL(request.url);
     const includeTypes = searchParams.get("includeTypes") === "true";
+    const excludeIdsParam = searchParams.get("excludeIds");
 
-    const images = selectGameImages(12);
+    // Parse excluded image IDs from query parameter
+    const excludeIds: string[] = excludeIdsParam
+      ? JSON.parse(decodeURIComponent(excludeIdsParam))
+      : [];
+
+    const images = selectGameImages(12, excludeIds);
 
     if (includeTypes) {
       // For solo mode - include types (secure since it's all client-side)

src/hooks/useSoloGame.ts

@@ -1,6 +1,11 @@
 import { useState, useCallback, useEffect } from "react";
 import { useTimer } from "./useTimer";
 import type { GameImage, ImageType } from "@/lib/types";
+import {
+  getSeenImageIds,
+  markImagesAsSeen,
+  resetSeenImages,
+} from "@/lib/seenImages";
 
 interface SoloGameState {
   status: "loading" | "ready" | "playing" | "showing-result" | "finished";
@@ -50,12 +55,19 @@ export function useSoloGame() {
 
   const loadImages = async () => {
     try {
-      const response = await fetch("/api/images");
-      const data = await response.json();
+      // Get list of already seen image IDs
+      const seenIds = getSeenImageIds();
 
-      // We need to fetch the full images with types from server
-      // For solo mode, we'll fetch them with a special flag
-      const fullResponse = await fetch("/api/images?includeTypes=true");
+      // Build URL with exclude parameter
+      const params = new URLSearchParams({
+        includeTypes: "true",
+      });
+
+      if (seenIds.length > 0) {
+        params.set("excludeIds", encodeURIComponent(JSON.stringify(seenIds)));
+      }
+
+      const fullResponse = await fetch(`/api/images?${params.toString()}`);
       const fullData = await fullResponse.json();
 
       setImages(fullData);
@@ -115,6 +127,10 @@ export function useSoloGame() {
     const nextRoundNum = gameState.currentRound + 1;
 
     if (nextRoundNum > TOTAL_ROUNDS) {
+      // Mark all played images as seen
+      const playedImageIds = images.map((img) => img.id);
+      markImagesAsSeen(playedImageIds);
+
       setGameState((prev) => ({
         ...prev,
         status: "finished",

src/lib/game-store.ts

@@ -8,9 +8,12 @@ const rooms = new Map<string, RoomState>();
 const TOTAL_ROUNDS = 12;
 const TIME_PER_ROUND = 30;
 
-export function createRoom(hostId: string): RoomState {
+export function createRoom(
+  hostId: string,
+  excludeImageIds: string[] = [],
+): RoomState {
   const roomId = generateRoomCode();
-  const images = selectGameImages(TOTAL_ROUNDS);
+  const images = selectGameImages(TOTAL_ROUNDS, excludeImageIds);
 
   const room: RoomState = {
     roomId,

src/lib/images.ts

@@ -53,16 +53,42 @@ export function shuffleArray<T>(array: T[]): T[] {
 }
 
 // Select images for a game (50/50 split, 12 total by default)
-export function selectGameImages(totalRounds: number = 12): GameImage[] {
+// excludeIds: optional array of image IDs to exclude (for no-repeat functionality)
+export function selectGameImages(
+  totalRounds: number = 12,
+  excludeIds: string[] = [],
+): GameImage[] {
   const allImages = getAvailableImages();
-  const realImages = shuffleArray(
-    allImages.filter((img) => img.type === "real"),
+
+  // Filter out excluded images
+  const availableImages = allImages.filter(
+    (img) => !excludeIds.includes(img.id),
   );
-  const aiImages = shuffleArray(allImages.filter((img) => img.type === "ai"));
+
+  // Separate by type
+  let realImages = availableImages.filter((img) => img.type === "real");
+  let aiImages = availableImages.filter((img) => img.type === "ai");
 
   const halfRounds = Math.floor(totalRounds / 2);
-  const selectedReal = realImages.slice(0, halfRounds);
-  const selectedAI = aiImages.slice(0, totalRounds - halfRounds);
+
+  // If we don't have enough unseen images, reset and use all images
+  if (
+    realImages.length < halfRounds ||
+    aiImages.length < totalRounds - halfRounds
+  ) {
+    console.log(
+      "Not enough unseen images, resetting to use all available images",
+    );
+    realImages = allImages.filter((img) => img.type === "real");
+    aiImages = allImages.filter((img) => img.type === "ai");
+  }
+
+  // Shuffle and select
+  const shuffledReal = shuffleArray(realImages);
+  const shuffledAI = shuffleArray(aiImages);
+
+  const selectedReal = shuffledReal.slice(0, halfRounds);
+  const selectedAI = shuffledAI.slice(0, totalRounds - halfRounds);
 
   // Combine and shuffle for random order
   return shuffleArray([...selectedReal, ...selectedAI]);

src/lib/seenImages.ts

@@ -0,0 +1,75 @@
+/**
+ * Client-side utility for tracking which images a user has seen
+ * Uses localStorage to persist across sessions
+ */
+
+const SEEN_IMAGES_KEY = "realoria_seen_images";
+
+export interface SeenImagesData {
+  seenIds: string[];
+  lastUpdated: number;
+}
+
+/**
+ * Get the list of image IDs that the user has already seen
+ */
+export function getSeenImageIds(): string[] {
+  if (typeof window === "undefined") return [];
+
+  try {
+    const data = localStorage.getItem(SEEN_IMAGES_KEY);
+    if (!data) return [];
+
+    const parsed: SeenImagesData = JSON.parse(data);
+    return parsed.seenIds || [];
+  } catch (error) {
+    console.error("Error reading seen images:", error);
+    return [];
+  }
+}
+
+/**
+ * Mark a list of image IDs as seen
+ */
+export function markImagesAsSeen(imageIds: string[]): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    const currentSeen = getSeenImageIds();
+    const updatedSeen = [...new Set([...currentSeen, ...imageIds])];
+
+    const data: SeenImagesData = {
+      seenIds: updatedSeen,
+      lastUpdated: Date.now(),
+    };
+
+    localStorage.setItem(SEEN_IMAGES_KEY, JSON.stringify(data));
+  } catch (error) {
+    console.error("Error saving seen images:", error);
+  }
+}
+
+/**
+ * Reset the list of seen images (start fresh)
+ */
+export function resetSeenImages(): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    localStorage.removeItem(SEEN_IMAGES_KEY);
+  } catch (error) {
+    console.error("Error resetting seen images:", error);
+  }
+}
+
+/**
+ * Check if we need to reset (when user has seen all or most images)
+ * Returns true if we should reset the seen list
+ */
+export function shouldResetSeenImages(
+  totalAvailableImages: number,
+  seenCount: number,
+): boolean {
+  // If user has seen 90% or more of available images, reset
+  return seenCount >= totalAvailableImages * 0.9;
+}