Guess The Clock - Time Guessing Puzzle Game

Guess The Clock is an engaging time-telling puzzle game that challenges players to test your time-reading skills against rotating clock faces, identical hands, and increasing complexity!

Comment

Inspiration

The inspiration for Guess The Clock stemmed from a simple observation: in an age of digital time, many people—especially younger learners—are losing the ability to read analog clocks. We wanted to create a fun, accessible puzzle game that turns this essential life skill into an engaging challenge, while building a polished experience for Reddit’s community via the Devvit platform. Additionally, we aimed to showcase how modern front-end tools (React, Tailwind, Vite) can be leveraged to build lightweight, responsive games for social platforms without sacrificing performance or design.

What it does

Guess The Clock is a web-based analog clock time-guessing puzzle game deployed on Reddit’s Devvit platform, designed to test and improve players’ ability to read traditional clock faces. It features three progressively challenging levels that build in difficulty by adding complexity like a second hand, random clock rotation, and identical-length hour/minute hands—eliminating visual shortcuts and forcing true time-telling proficiency. The game tracks completion time for each level, includes intuitive keyboard shortcuts for seamless play, and boasts a fully responsive, modern UI that works across all device sizes. Players select their guess via simple dropdown menus, submit answers with a click or keypress, and unlock new levels as they master each challenge.

How we built it

We built Guess The Clock specifically for Reddit’s Devvit platform using a modern TypeScript/React tech stack optimized for speed and maintainability:

  1. Core Foundation: Started with the official Devvit React Starter template, which streamlines integration with Reddit’s developer ecosystem and handles platform deployment out of the box.
  2. Frontend & UI: Built the game’s interface with React (hooks for state management) and Tailwind CSS for a clean, responsive design—no custom CSS required. The analog clock is a custom SVG component (Clock.tsx) with dynamic rendering for hands, tick marks, and random rotation (Hard level).
  3. Game Logic: Implemented level progression, random time generation, and answer validation in App.tsx, with utility functions (utils.ts) handling time calculations and clock rotation math. TypeScript enforces type safety across all components and shared types.
  4. Build Tooling: Used Vite for fast development server reloads and optimized production builds—critical for iterating quickly on game mechanics.
  5. Platform Integration: Leveraged Devvit’s CLI for local development, live testing on Reddit, and one-click deployment/publishing. Backend and shared type logic are separated into dedicated server/ and shared/ directories for future scalability.
  6. Quality Assurance: Used Devvit’s built-in check command to run type checking, linting, and formatting, ensuring code consistency and reducing bugs.

Challenges we ran into

Analog Clock Math & Rotation: Calculating precise hand angles for hours, minutes, and seconds (including the hour hand’s gradual movement) required careful trigonometry—especially adding random clock rotation in the Hard level, which meant offsetting all hand angles and validating answers without a "top-aligned" 12 o’clock reference.

  1. Identical Hands Implementation: Removing the visual difference between hour and minute hand lengths forced us to eliminate edge-case shortcuts (e.g., "the longer hand is minutes"), which required refining our time generation logic to avoid overly ambiguous times while keeping the challenge fair.
  2. Devvit Platform Nuances: Adapting the React app to work within Reddit’s Devvit sandbox required minor adjustments to state management and component rendering—ensuring the game performed smoothly without conflicting with the platform’s native environment.
  3. Responsive SVG Clock: Making the custom SVG clock scale seamlessly across mobile, tablet, and desktop while keeping tick marks and hands aligned correctly was a design challenge, solved by using Tailwind’s responsive classes and SVG viewbox properties.
  4. Smooth Transitions & Keyboard Shortcuts: Implementing skipable auto-transitions and keyboard support (Enter/ Space) required syncing state updates with DOM events, ensuring no lag between user input and game feedback.

Accomplishments that we're proud of

  1. Polished, Accessible Gameplay: We created a visually clean, intuitive game that balances challenge and fun—the Hard level’s random rotation and identical hands provide a genuine test of analog clock skills, while the Easy/Medium levels are approachable for all skill levels.
  2. Seamless Devvit Integration: The game is fully optimized for Reddit’s platform, with one-click deployment via the Devvit CLI and a responsive design that fits Reddit’s UI ecosystem—no extra steps for users to play directly on the platform.
  3. Clean, Scalable Codebase: Using TypeScript and a modular project structure (separating game logic, UI components, and utilities) makes the code easy to maintain and extend—all core game features are isolated in dedicated components with clear type definitions.
  4. Performance & User Experience: Leveraging Vite and Tailwind resulted in a lightweight, fast-loading game with no unnecessary bloat; keyboard shortcuts and skipable transitions create a seamless, frustration-free play experience.
  5. Custom SVG Clock Component: Our hand-coded SVG clock is dynamic, customizable, and free of external libraries—it renders smooth hand movements, precise tick marks, and random rotation with minimal performance overhead.

What we learned

  1. Analog Clock Time Calculation: Mastered the mathematical logic behind analog clock hand positioning, including the often-overlooked gradual movement of the hour hand (e.g., moving 0.5° per minute) and angle offset for random rotation.
  2. Devvit Platform Development: Gained hands-on experience building and deploying applications for Reddit’s Devvit ecosystem, including leveraging its CLI tools, template system, and sandbox environment.
  3. Modular React Game Design: Learned how to structure a React game for scalability—separating state management, UI rendering, and utility logic makes it easy to add new features (e.g., new levels, score tracking) without rewriting core code.
  4. TypeScript for Game Development: Reinforced the value of TypeScript in preventing runtime bugs, especially for time-based logic and level configuration—type-safe interfaces eliminated common errors like invalid time values or level settings.
  5. Responsive SVG Design: Discovered best practices for building scalable SVG components that work across all devices, using viewbox and relative units to avoid distortion and misalignment.

What's next for Guess The Clock - Time Guessing Puzzle Game

We plan to expand Guess The Clock with new features and improvements to make it more engaging for Reddit’s community and accessible to a wider audience:

  1. New Difficulty Modes: Add a "Expert" level with even more complex challenges (e.g., reverse clock faces, 24-hour format) and a "Practice" mode with no time pressure for learners to build skills at their own pace.
  2. Score Tracking & Leaderboards: Integrate Devvit’s backend capabilities to add global/community leaderboards—tracking fastest completion times per level and allowing players to compete with Reddit users.
  3. Customization Options: Let players customize the clock’s appearance (e.g., different clock faces, colors, tick mark styles) and adjust game settings (e.g., disable rotation, hide second hand) for personalized play.
  4. Learning Mode: Add a tutorial/learning feature that teaches players how to read analog clocks—including step-by-step explanations for hour/minute/second hand positioning and tips for hard-to-read times.
  5. Mobile Optimization: Refine the mobile experience with touch-friendly dropdowns and larger UI elements, ensuring the game is just as playable on phones as it is on desktops.
  6. Achievements & Badges: Add Reddit-integrated achievements (e.g., "Clock Master" for beating Hard level in under 60 seconds) to boost player engagement and encourage repeated play. Localization: Add support for multiple languages to make the game accessible to Reddit’s global community, with localized time format options (12/24-hour).
  7. Bug Fixes & Quality of Life: Continuously refine the game with player feedback—fixing any minor bugs and adding small QoL features (e.g., answer hints, time reset button, progress saving).

Built With

  • devvit
  • reddit's
  • tailwind
  • vite
Share this project:

Updates