riddle-roulette

💡 Inspiration The core inspiration for Riddle Roulette came from the collision of two worlds: the daily ritual of games like Wordle and the chaotic, expressive energy of Reddit's comment sections. I wanted to move away from static "scrolling" and create a tactile way to interact with community content.

The idea was simple: What if comments weren't just text, but physical objects you could toss around? By adding a daily riddle—sourced dynamically from the top posts of subreddits like r/AskReddit or r/Showerthoughts—the project transformed from a physics sandbox into a high-stakes, social brain-teaser.

🛠 How I Built It The project is built on the Reddit Developer Platform (Devvit), leveraging a hybrid architecture to balance performance and deep platform integration.

Backend (Devvit API): Handles the "Daily Seeding" logic. It fetches top posts every 24 hours and uses Reddit's Redis storage to track user streaks and high scores. Webview (React + Vite): A high-performance frontend layer that hosts the game world. Physics Engine (Matter.js): Manages the "Anti-Gravity" environment. Every comment is converted into a 2D body with custom friction and restitution properties. Aesthetics: A "Glassmorphism" UI built with Tailwind CSS, designed to feel like a premium extension of Reddit’s own dark mode. To ensure every user plays the same riddle, the daily puzzle is determined by a deterministic seed based on the current date: $$ Seed = \lfloor \frac{Timestamp_{current}}{86400} \rfloor $$ This ensures that whether you’re in Tokyo or New York, the "Daily Challenge" remains consistent.

🧠 What I Learned Building for a social platform like Reddit required a shift in how I think about user state. I learned to navigate the nuances of asynchronous message passing between the Reddit host and the game Webview.

Technically, I delved deep into Matter.js optimization. I learned that simulating $N$ bodies with complex collision masks requires careful management of the engine's "sleep" states to maintain 60FPS on mobile devices. I also explored the physics of "weighted randomness" to ensure distractor comments (wrong answers) are physically distinct enough to not clutter the "Winning" comment.

🚧 Challenges Faced The biggest hurdle was Syncing the Bridge. Communicating between the Devvit server-side and the client-side browser environment is like shouting across a canyon. I had to implement a robust @devvit/public-api message handler to ensure that game ready-states, win conditions, and streak updates were never lost in transit.

Another challenge was Scaling Physics for Tiny Screens. On a mobile device, the collision boundaries for a comment box need to be generous for touch, but tight enough that the physics doesn't feel "floaty." I solved this by calculating dynamic density based on text length: $$ \rho_{comment} = \frac{Mass}{Area \cdot \text{CharacterCount}} $$ This allowed longer comments to feel "heavier" and more stable, while short "witty" distractors zip around the screen with higher velocity.

Built With

• css3
• devvit
• html5
• javascript
• react
• typescript
• vite