AngleGuesser

Test your geometric intuition! Guess angles in daily challenges. Compete with the community or practice your skills.

Comment

Angle Guesser: Building a Daily Geometric Challenge on Reddit

Inspiration

Angle Guesser was inspired by the success of daily puzzle games like Wordle, but with a unique geometric twist. We wanted to create something that tested a different kind of intuition—spatial and mathematical reasoning rather than vocabulary. The concept of guessing angles between 0° and 180° felt like the perfect balance: simple enough to understand instantly, yet challenging enough to keep players engaged.

The idea came from thinking about how we estimate angles in everyday life—when looking at a clock, judging the angle of a ramp, or visualizing geometric shapes. We realized that while most people can roughly estimate angles, very few can do so with precision. This gap between intuition and precision became the core challenge of our game.

What it does

Angle Guesser is a daily puzzle game that runs directly inside Reddit posts. Players are shown a visual representation of an angle between two lines and must guess its exact value in degrees (0-180°). The game features two modes:

  • Daily Challenge Mode: Everyone gets the same angle each day, creating a shared community experience. Players have exactly 4 guesses, and the challenge resets at midnight. This mode tracks statistics like win percentage, current streak, and maximum streak.

  • Practice Mode: Unlimited guesses with a random angle generated per user. Perfect for learning and improving your angle estimation skills without the pressure of daily competition.

The game provides instant feedback through a "temperature" system:

  • ✅ CORRECT - Exact match!
  • 🔥 BURNING - 1 degree off
  • 🌶️ HOT - 2-4 degrees off
  • ☀️ WARM - 5-9 degrees off
  • 🧊 COLD - 10+ degrees off

Players also get directional hints (too high ⬇️ or too low ⬆️) to help refine their guesses. The game tracks comprehensive statistics and displays a beautiful SVG visualization of the angle being guessed.

How we built it

Angle Guesser is built on Reddit's Devvit platform, which allows apps to run natively within Reddit posts. The architecture follows a client-server model:

Frontend (Client)

  • React 19 with TypeScript for type-safe, component-based UI
  • Tailwind CSS for responsive, mobile-first styling
  • Custom React hooks (useAngleGame) for game state management
  • SVG-based angle visualization using trigonometry:
    • Converting degrees to radians: $\theta_{rad} = \theta_{deg} \times \frac{\pi}{180}$
    • Calculating line endpoints: $x = x_0 + r \cos(\theta)$, $y = y_0 - r \sin(\theta)$
    • Arc path generation for visual angle representation

Backend (Server)

  • Express.js server with TypeScript
  • Redis for persistent data storage via Devvit's Redis integration
  • RESTful API endpoints:
    • /api/game/init - Initialize game state
    • /api/game/guess - Submit a guess and get feedback
    • /api/game/practice/new - Start a new practice game
    • /api/stats - Retrieve user statistics

Key Technical Implementation

The daily angle generation uses Redis with date-based keys:

const getTodayKey = (): string => {
  const today = new Date();
  return `angle:${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
};

This ensures everyone sees the same angle on the same day. The angle is generated once per day and cached in Redis, with values between 1° and 179° (avoiding edge cases of 0° and 180°).

Statistics tracking uses atomic Redis operations to maintain:

  • Win percentage: $\text{Win\%} = \frac{\text{Wins}}{\text{Games Played}} \times 100$
  • Streak tracking with daily reset logic
  • Per-user game state persistence

Build System

  • Vite for fast development and optimized production builds
  • Separate builds for client (browser bundle) and server (CommonJS)
  • TypeScript project references for modular compilation
  • ESLint and Prettier for code quality

Challenges we ran into

1. SVG Angle Visualization The most challenging part was creating an accurate, visually appealing angle representation. We had to:

  • Convert between degrees and radians correctly
  • Calculate SVG arc paths using the large-arc-flag parameter
  • Handle edge cases (angles near 0°, 90°, 180°)
  • Ensure the visualization was clear and intuitive

The arc path calculation was particularly tricky:

const largeArcFlag = angle >= 180 ? 1 : 0;
const arcPath = `M ${arcStartX} ${arcStartY} A ${arcRadius} ${arcRadius} 0 ${largeArcFlag} 0 ${arcEndX} ${arcEndY}`;

2. State Management Across Client and Server Managing game state that persists across page refreshes required careful coordination:

  • Client-side React state for UI responsiveness
  • Server-side Redis state for persistence
  • Synchronization on game initialization
  • Handling race conditions when multiple guesses are submitted quickly

3. Daily Reset Logic Implementing the daily challenge reset required:

  • Timezone handling (using UTC for consistency)
  • Ensuring the same angle for all users on the same day
  • Preventing users from playing the next day's challenge early
  • Clearing old game states without affecting statistics

4. Devvit Platform Learning Curve As a new platform, we had to learn:

  • How client-server communication works (no external fetch from client)
  • The webview constraints (no inline scrolling, specific viewport handling)
  • Redis key naming conventions and best practices
  • The deployment and publishing workflow

5. Mobile Responsiveness Ensuring the game worked perfectly on mobile devices required:

  • Touch-friendly input controls
  • Responsive SVG scaling
  • Preventing zoom on input focus
  • Testing across different screen sizes

Accomplishments that we're proud of

1. Clean, Intuitive UI We're particularly proud of the visual design—the gradient backgrounds, smooth animations, and clear feedback system make the game immediately understandable. The temperature-based feedback (🔥 BURNING, 🌶️ HOT, etc.) provides an engaging way to show proximity without revealing the exact answer.

2. Robust Statistics System The statistics tracking system accurately maintains win percentages, streaks, and game history. The streak system correctly handles daily resets and prevents double-counting when users play multiple times in one day.

3. Seamless Daily Challenge Experience The daily challenge mode works flawlessly—everyone sees the same angle, the reset happens automatically at midnight UTC, and game state persists correctly. This creates a true shared community experience.

4. Practice Mode Implementation The practice mode with unlimited guesses and per-user random angles provides a great learning environment. The ability to start new practice games anytime encourages experimentation and skill improvement.

5. Mobile-First Design The game works beautifully on mobile devices, which is crucial since many Reddit users browse on mobile. The responsive design ensures the game is playable and enjoyable on any screen size.

6. Type Safety Throughout Using TypeScript with shared types between client and server eliminated entire classes of bugs. The type system caught errors at compile time that would have been runtime issues in JavaScript.

What we learned

1. Trigonometry in Practice Building the angle visualization required a deep dive into trigonometry. We learned:

  • How to convert between degrees and radians
  • SVG arc path mathematics
  • Coordinate system transformations (SVG uses top-left origin, math uses bottom-left)
  • The importance of the large-arc-flag in SVG path commands

2. Redis Patterns for Game State We learned effective Redis patterns for game development:

  • Date-based key naming for daily challenges
  • Atomic operations for statistics updates
  • Efficient key structure for user data
  • TTL considerations for data cleanup

3. Devvit Platform Architecture Understanding how Devvit works taught us:

  • The client-server communication model (all client requests go to your server)
  • How webviews are constrained (no external APIs, no inline scrolling)
  • The importance of responsive design for mobile Reddit users
  • The deployment pipeline from development to production

4. React Hooks Best Practices Building custom hooks like useAngleGame taught us:

  • Proper dependency management in useEffect and useCallback
  • State synchronization patterns
  • Error handling in async operations
  • Loading state management

5. User Experience Design We learned that good game design requires:

  • Immediate, clear feedback
  • Progressive difficulty (temperature system guides players)
  • Visual clarity (the SVG visualization is crucial)
  • Statistics that motivate continued play

6. TypeScript Project References Using TypeScript project references for a monorepo structure taught us:

  • How to share types between client and server
  • Build order dependencies
  • Type checking across multiple projects

What's next for AngleGuesser

Short-term Improvements:

  1. Leaderboards: Add daily and all-time leaderboards showing fastest correct guesses
  2. Difficulty Levels: Introduce easy (0-90°), medium (0-180°), and hard (0-360°) modes
  3. Social Features: Allow players to share their results with custom messages
  4. Hint System: Optional hints that reveal the angle's quadrant or range

Medium-term Enhancements:

  1. Multiplayer Mode: Real-time competitions where players guess simultaneously
  2. Achievement System: Unlock badges for streaks, perfect guesses, and milestones
  3. Custom Challenges: Let moderators create custom angle challenges for their communities
  4. Analytics Dashboard: Show community-wide statistics and trends

Long-term Vision:

  1. Educational Mode: Teach geometry concepts through interactive angle lessons
  2. Tournament System: Weekly tournaments with brackets and prizes
  3. API Access: Allow other developers to integrate Angle Guesser mechanics
  4. Mobile App: Native mobile app with push notifications for daily challenges

Technical Improvements:

  1. Performance Optimization: Further optimize SVG rendering and state updates
  2. Accessibility: Add screen reader support and keyboard navigation
  3. Internationalization: Support multiple languages and number formats
  4. Progressive Web App: Make it installable as a PWA

The foundation is solid, and we're excited to see how the Reddit community engages with this unique daily challenge. The combination of simple rules, mathematical precision, and community competition creates a compelling experience that we believe will grow into something special.

Built With

Share this project:

Updates