Kim's Game Meets the Solstice

This is a submission for the June Solstice Game Jam

What I Built

I was recently watching a reality show on Netflix and saw them playing Kim's Game. The concept instantly hooked me, and as I was brainstorming ideas for this challenge, it hit me: why not build a digital version of this classic memory test?

I decided to tie it into the seasonal shifts, creating distinct Summer Solstice and Winter Solstice themes. In this game, players are presented with a box containing 20 random objects. The objects are pulled from a pool of 63 items uniquely tailored to the chosen season—think seasonal blooms, specific spices, holiday activities, and festive fruits.

Players have a limited window to study and memorise the box before the lid snaps shut. Once time is up, they have 60 seconds to recall and type out as many objects as they can. Each correct match earns +1 point, and getting one wrong doesn't cost you anything — so it's always worth a guess. Once the round is over, players can also review exactly what they remembered and what slipped their mind.

To keep things competitive, I added two difficulty levels which dictate your memorization time:

• Easy: 60 seconds to memorize
• Hard: 30 seconds to memorize

Whether you are challenging yourself solo or gathering friends and family around the screen during the solstice, it's a fun, aesthetic way to put your memory to the test 😄

Video Demo

Code

Github Repo - Kim's Game

Try it yourself

Play Kim's Game

Project Gallery

How I Built It

To keep the interface clean, responsive, and highly visual, I relied on a modern frontend stack and some creative AI integrations.

The Tech Stack:

• Frontend Framework: React, Next.js (App Router), TypeScript
• State & Storage: Local Storage for persisting high scores
• Visuals: Pure CSS Art (no image files used)
• AI Models: Gemini 3.5 Flash & Gemini 3.1 Pro

The Game Mechanics:

Dynamic Theming: The entire UI, color palette, and object pool shift dramatically depending on whether you select the Summer or Winter Solstice theme.

Fuzzy Matching & Scoring: Memory can be tricky, so the game is forgiving with typos. I built a normalizer that handles lowercasing, removes special characters and spaces, and converts plurals to singulars. I also added synonym support, so guessing "sunglasses," "glasses," or "shades" all award a point for the same object.

Round Review: After the scoring phase, players can open a themed side drawer by tapping "Review Round". This feature breaks down the round's results by listing every correct match, wrong guess, and missed item by name.

Pure CSS Art Generation: All 63 objects are rendered entirely in HTML and CSS. To achieve this, I used the Gemini LLM to write the CSS code. To ensure the art style remained consistent and realistic across all objects, I leveraged Agentic Skills.

Prize Category: Best Google AI Usage

Using Google's Gemini models was fundamental to bringing the visual layer of this game to life, particularly for generating the CSS art and the animated box logic.

I initially used the Gemini 3.1 Pro model to establish a baseline. By providing detailed instructions, I successfully generated the code for a sunflower and a coffee mug. Once I had those looking exactly how I wanted, I used them as reference assets for the rest of the generation pipeline.

The real magic happened when I transitioned to generating the bulk of the elements using Gemini 3.5 Flash via the GoogleGenAI SDK. As reference context, I provided the model with my SKILL.md, the TypeScript and CSS files from already-completed assets, and base64-encoded images of those same references. Here's what that reference folder looked like:

skills/css-art/
├── assets/
│ ├── CoffeeMug.jpeg
│ ├── CoffeeMug.module.css
│ ├── CoffeeMug.tsx
│ ├── Sunflower.jpeg
│ ├── Sunflower.module.css
│ └── Sunflower.tsx
└── SKILL.md

I quickly learned that stripping out verbose sections and keeping the system instructions highly simplified prevented the model from being over-constrained. This concise approach allowed the model to rapidly generate uniform, high-quality art for the remaining elements without needing prolonged, heavily detailed prompts every single time.

To ensure the script's output was immediately usable in my React components, I enforced a strict JSON response schema:

responseSchema: {
  type: Type.OBJECT,
  properties: {
    plan: {
      type: Type.STRING,
      description: 'Your step-by-step architectural plan detailing base shapes and CSS properties before writing the code.',
    },
    tsxCode: {
      type: Type.STRING,
      description: 'The raw typescript react component code (TSX). Do not wrap in markdown.',
    },
    cssCode: {
      type: Type.STRING,
      description: 'The raw standard CSS module code. Do not wrap in markdown.',
    },
  },
  required: ['plan', 'tsxCode', 'cssCode'],
}

For instances where my vision differed slightly from the AI's output, I added a description override parameter to the script, allowing me to nudge the prompt closer to my specific perspective. Additionally, Gemini Pro proved incredibly helpful in architecting the CSS animation logic for the closing box where the objects are hidden!

Upcoming

• Mobile Responsiveness: Adapt the UI for mobile and tablet screens — right now the experience is built and tested for laptop/desktop displays only. Expand the Object Pool: Grow the per-theme object pool beyond the current set of items, so repeat playthroughs feel fresh and surprising.
• Backend Integration: Move score persistence from local storage to a real database, so high scores can sync across device. This is also enable features like having a global leaderboard, etc.
• New Game Modes: Adding more mechanical twists and power-ups to make the memorisation phase even more engaging.