← Back to all projects

Darts

Darts project screenshot

A modern, responsive web-based dart game scorekeeper featuring an interactive SVG dartboard, professional announcer audio (Russ Bray), advanced scoring logic, checkout suggestions, and real-time statistics. Built as a lightweight browser-based SPA with Python-powered utilities for audio processing and future vision-based automated scoring.

Visit SiteView Source

Technology

frontendhtml5css3javascriptsvg
backendpython
devopsapachessl
toolsopencvnumpyffmpegpydub

🎯 Dart Game Scorekeeper

Long-Form Project Summary for KNWS Showcase (Updated)

Live version: https://darts.knws.co.uk

The Dart Game Scorekeeper is a modern, responsive, web-based scoring application for steel-tip darts featuring interactive gameplay, authentic announcer audio, advanced scoring logic, and a clean user experience. It is built as a lightweight browser-based SPA with no external dependencies, but is backed by Python utilities handling audio preprocessing and upcoming advanced features such as Vision Mode and real-time statistics.

This updated version integrates a professional announcer pack, improved UI, expanded scoring logic, and a roadmap of advanced modes powered by Python scripts and machine-vision tooling.

🚀 Project Goals

  1. Deliver a fast, polished, zero-dependency darts scorekeeper accessible from any device.
  2. Provide a professional match experience with real announcer audio (Russ Bray) and AI voice alternatives.
  3. Support advanced scoring features including checkouts, stats, player history, and game flow automation.
  4. Add computer-vision automated scoring (Vision Mode) as a future enhancement.
  5. Maintain a clean, responsive UX suitable for competitive or casual play.
  6. Serve the app as a static single-page site on Apache with optional SSL and Python utilities running server-side.

🧱 Current Features (Live)

🎯 1. Manual Scoring Mode

The live version includes full manual scoring support via:

Interactive SVG Dartboard

  • Click any dartboard segment to instantly register a score
  • Supports Singles, Doubles, Triples
  • Fully accurate hit-mapping using SVG coordinate regions
  • Tap-friendly mobile UX

Manual Input Mode

  • Number-pad score entry
  • Syncs perfectly with turn and leg logic
  • Suitable for rapid pub play or keyboard entry

🔊 2. Professional Audio Announcer

Russ Bray Sound Pack (Pre-Recorded)

A full high-quality announcer sound pack is included, featuring:

  • Numbers 0–180
  • Calling for big scores (140+, 180)
  • Match-style emphasis and pacing

Pre-processing and timing alignment of clips were handled using Python utilities.

AI Voice Announcers

Fallback or alternative options:

  • Browser TTS
  • Kokoro AI voices (natural and expressive)

Players can switch between announcers instantly.

🧮 3. Advanced Scoring Logic

  • Game modes: 301 / 501
  • Straight In / Straight Out
  • Double In / Double Out
  • Bust logic
  • Turn history and undo/redo
  • Real-time scoreboard
  • Averages and per-turn scoring breakdown

🎯 4. Checkout / Finish Suggestions

Automatically calculates finish routes for any score between 2 and 170:

  • Multi-dart recommended finishes
  • Required doubles shown clearly
  • Improved UI for readable suggestions
  • Supports edge cases and complex outs

🎨 5. Modern, Responsive UI

  • Full dark mode
  • CSS Grid + Flexbox layout
  • Responsive from mobile to widescreen
  • Touch-friendly controls
  • Minimalistic, uncluttered design
  • Custom SVG graphics for clean board rendering

🧪 Python-Based System Extensions (Implemented but Not Yet Live)

Although the site runs as a static SPA, several Python modules power offline or future features. These include:

1. Audio Processing Tools

  • Batch trimming, normalising, and aligning Russ Bray announcer clips
  • Silence detection
  • Automatic phoneme grouping for smoother playback
  • Format conversion for browser-friendly playback

These were used to generate the professional voice pack.

2. Statistics Engine

Python scripts exist for:

  • Player averages
  • Checkout percentages
  • Three-dart averages
  • Momentum charts
  • Form consistency
  • Best leg / worst leg markers

These are functional backend modules awaiting front-end integration.

3. Vision Mode (WIP but functional in Python)

A future mode inspired by DartsMind:

  • Dartboard detection via OpenCV
  • Segment recognition using geometric transforms
  • Background subtraction
  • Dart tip detection / clustering
  • Debug overlays

The Python prototype already detects board segments and calculates score zones. The frontend UI is prepared for future integration.

4. Match Playback / Replay Engine (WIP)

Python module for:

  • Turn-by-turn reconstruction
  • Animated overlay of past throws
  • Export to JSON for web playback

🌐 Hosting & Infrastructure

  • Hosted on Apache 2.4
  • Static SPA (HTML, JS, CSS)
  • SSL enabled via automated script (setup-ssl.sh)
  • Python utilities stored on server for preprocessing and future backend features
  • Lightweight, zero-maintenance deployment

🛠 Technology Stack

Frontend

  • HTML5
  • CSS3 (Grid, Flexbox)
  • Vanilla JavaScript ES6
  • SVG graphics
  • Web Speech API
  • Audio sprite management for prerecorded announcer clips

Backend / Utilities (Python)

  • Python 3.x
  • OpenCV (for Vision Mode prototype)
  • NumPy
  • Pydub / FFmpeg (audio processing)
  • Custom scoring and stats modules

Infrastructure

  • Apache
  • SSL via Certbot
  • Static file optimisation

📈 Outcome & Impact

The Dart Game Scorekeeper demonstrates:

  • Strong frontend engineering and SVG interactivity
  • Professional-grade audio integration
  • Hybrid architecture combining SPA simplicity with Python-powered advanced features
  • Deep understanding of darts scoring, checkout logic, and game rules
  • Vision-system prototyping skills (OpenCV)
  • High-quality UX for real-world use
  • Fully deployed, public project with ongoing feature expansion

Future updates will bring automated computer-vision scoring, player stats, and replay features powered by the Python modules already written.