Kroket - Darts Game

Cricket Darts, Perfectly Scored — Mobile-First, Multiplayer, Powered by Next.js.

Comment

🧠 Inspiration

We love the social, competitive spirit of Cricket Darts, but realized that scoring the game manually (especially with many players) is slow, error-prone, and hard to manage. Most digital scoring apps are either outdated, clunky, or not optimized for mobile.

So we asked: What if there was a clean, modern, touch-friendly Cricket Darts app that worked flawlessly on mobile and supported unlimited players?

That’s how Kroket was born.

🎯 What it does

Kroket is a beautifully designed, mobile-first Cricket Darts scoring application built with Next.js. It lets you:

  • Add unlimited players with unique names
  • Track scoring using standard darts hit symbols (/, X, ○)
  • Automatically handle scoring, closing, and point calculations
  • Get instant visual feedback for hits, rounds, and leaders
  • Save your game and resume later (thanks to localStorage)
  • Celebrate wins with a confetti-powered victory screen
  • All within a clean 390x844 responsive UI — no scrolling needed!

🛠 How we built it

  • Framework: Next.js + TypeScript
  • Styling: Tailwind CSS with mobile-first grid layout
  • State: React state hooks + localStorage for persistence
  • Game Logic: Pure functions to handle darts rules, mark tracking, and score validation
  • Responsive Design: Tailored for 390x844 portrait view using grid, col-span, and layout tuning
  • Components: Modular components (SetupScreen, GameScreen, ScoreGrid, ScoreEntry, VictoryScreen) for maintainability
  • Animations: Smooth transitions and a confetti win screen for great UX

🧱 Challenges we ran into

  • Fitting everything in 390px: Designing a game board with 9 columns (including player column) that’s readable and usable on mobile was tricky.
  • Rotating the grid layout: Standard implementations use targets vertically and players horizontally — we flipped it!
  • Scoring logic edge cases: Ensuring that players get points immediately when closing a number and hitting it extra in the same turn took careful debugging.
  • Visual clarity: Using single-symbol indicators (/, X, ○) rather than multiple marks made everything cleaner but needed thoughtful color-coding and UI design.

🏆 Accomplishments that we're proud of

  • A pixel-perfect, mobile-friendly layout for real-time multiplayer dart scoring
  • Fully functioning Cricket rules engine including points from extra hits in the same round
  • Seamless undo and skip functionality
  • Supporting any number of players without breaking the layout
  • No header, no scroll, all touch-friendly — optimized for gameplay on mobile

📚 What we learned

  • Deep dive into CSS grid techniques and col-span mechanics for layout control
  • How to manage dynamic state updates and visual UI feedback in a turn-based game
  • Best practices for data persistence using localStorage and React
  • Game loop design and UX patterns for real-time feedback on constrained screens

🚀 What's next for Kroket – Darts Game

  • 🎮 Multiplayer over WebSockets – Real-time remote play
  • 🌐 PWA support – Installable, offline-ready web app
  • 🧩 Custom game modes – 301, 501, or other darts variants
  • 📊 Stats & Leaderboards – Player history and performance analytics
  • 🌈 Theme options – Light/dark modes, colorblind-friendly visuals
  • 🔄 Replays – Step through previous turns or games
  • 🧪 Playtesting & polish – Improve animations, transitions, and sound FX

Built With

Share this project:

Updates