Img0: Splash Screen (Post)
Img1: Game Features/Modes
Img2: Random Daily Level
Img3: Level Browser
Img4: Depiction of Correct Answer

Cham-san 🦎

Inspiration

We wanted to bring a classic, nostalgic experience, the "Where's Waldo" hidden object puzzle, into the modern social media era, specifically tailored for the Reddit community. We imagined a game that was fast, engaging, and beautifully integrated into the Reddit feed, allowing users to take a quick break from scrolling to hunt for a master of camouflage: Cham-san the chameleon.

What it does

Cham-san is an interactive hidden-object game built directly into Reddit. Players are presented with stunning, complex 1:1 scenes and have a limited amount of time to spot the camouflaged avatar hidden somewhere in the environment.

Levels Mode: Players progress through unlocking stages (Levels 1-5), where they must clear a sequence of 5 distinct scenes per level to secure a high score and unlock the next stage.
Daily Hunt Mode: An endless, randomized mode where players can tackle unlimited daily challenges.
Anti-Cheat & Penalties: Blindly spam-clicking is punished! Wrong clicks deduct points, and if your potential score drops below zero, you instantly fail the scene.

How we built it

Cham-san was built leveraging Reddit's Devvit platform to create a seamless, native-feeling application.

Frontend: A highly responsive, compact UI designed to mimic Reddit's native dark mode. Built with React 19, Tailwind CSS 4, and Vite, it runs securely inside a sandboxed iframe. The chameleon's camouflage is achieved dynamically using CSS masks (mask-image and mask-position) overlaid on the scene images with multiply blend modes.
Backend: Powered by a Node.js v22 serverless environment utilizing Hono and tRPC for end-to-end type safety. All game logic, session tracking, and hit-detection validation occurs server-side, with state reliably persisted in Redis.

Challenges we ran into

One of the most complex challenges was accurately syncing the frontend visual rendering of the chameleon with the backend hit-detection logic. Because we dynamically place the chameleon using CSS mask-position (which anchors the mask based on remaining container space, rather than absolute pixels), standard Euclidean distance math on the backend was failing. We had to rewrite the hit detection to mathematically recreate the CSS mask's exact bounding box on the server.

Additionally, we faced a tricky desynchronization issue with our Pseudo-Random Number Generator (PRNG). If the client and server consumed the random numbers in a slightly different sequence, the server would grade the player based on a completely different coordinate than where the chameleon was actually drawn! Aligning the PRNG consumption sequence fixed this completely.

Accomplishments that we're proud of

Flawless Auto-Scaling UI: Developing a UI that dynamically bounds the 1:1 square canvas to min(100vw, 100vh) so it perfectly fills the screen on both desktop and the Reddit mobile app without annoying scrollbars.
Server-Side Security: The frontend only knows what it needs to know. The exact coordinates of the chameleon are validated strictly on the backend, meaning players can't cheat by inspecting network payloads before they tap.
Dynamic CSS Camouflage: Achieving a realistic "camouflage" effect entirely through frontend CSS masks and blend modes, without needing to pre-bake hundreds of different image assets.

What we learned

Deep insights into the quirks of CSS percentage-based positioning (especially mask-position) and how to translate those browser rendering rules into strict backend mathematical logic.
Best practices for optimizing React apps within a constrained webview/iframe environment, particularly concerning Vite HMR configurations.
The importance of robust PRNG seeding and strict execution order when building deterministic games that span a client-server architecture.

What's next for Cham-san

More Levels: We plan to unlock Levels 6 through 10 with increasingly difficult environments and smaller target scales.
Global Leaderboards: Letting players compete daily for the highest scores and fewest mistakes.
Community Sourced Scenes: Allowing the Reddit community to submit their own photography or art to be used as hunting grounds for Cham-san!