game-implementation

name	Game Implementation
description	Make sure to use this skill whenever the user mentions the trivia game, 'Guess the Project', gallery image randomization, or the GameView.tsx component!

Game Implementation Skill

This app features "Guess the Project," located in src/components/views/GameView.tsx. This interactive game challenges visitors to select the correct film title from a random frame pulled from Airtable gallery records, offering a playful method to engage the user's attention.

Architecture & Implementation Requirements

Route Loading

• Component renders on the /game route.
• Filters global App.tsx project state (already loaded) to exclude records missing a valid gallery array.

Presentation Logic

• Retrieve and randomize 1 primary gallery image frame per round.
• Generate 3 total multiple-choice title buttons: 1 identical correct film array matches the frame's ID, and 2 distinct randomized incorrect titles.

Win State & Rendering

• On correct interactions, toggle the "Trading Card" animation UI state (GameView logic).
• Flip the image frame to reveal project metadata text (e.g., Genre, Year, short Snippet).
• Append a subtle holographic CSS shimmer (holographic styles defined globally in THEME.ts).

Data Persistence

• Maintain simple progress using the browser's localStorage (game_highScore key), bypassing any backend database needs.

Style Enforcement

• You must always apply classes via THEME.ts context when building the card elements, matching the minimal deep-dark portfolio aesthetic.
• You must wrap random images inside the OptimizedImage.tsx component, preventing unoptimized blob payloads from killing the client's frame rate.