DEV Community

AlexDesign420
AlexDesign420

Posted on

I built a live FIFA World Cup 2026 desktop widget for macOS

I just open-sourced a macOS desktop widget for the FIFA World Cup 2026. Here's what it does and how it's built.

What it does

  • 🔴 Live scores — updated every 3 seconds via the ESPN public API (no API key needed)
  • 📅 Full schedule — all 104 games grouped by day, with venues and round labels
  • 📻 20+ radio streams — ARD, ZDF, BBC, NPR and more, played via mpv
  • 🗣 German TTS commentary — macOS say announces goals, kick-offs and final whistles
  • 📊 Play-by-play — ESPN event feed with goal / card / substitution highlights
  • 📺 Live ticker panel — slide-out side panel with real-time scores for all live games
  • Countdown — days · hours · minutes until the tournament kicks off (June 11, 2026)
  • 🖥 Responsive — adapts width for 1440p · 1080p · 2560p · 4K displays

Architecture

The widget has three parts:

1. wm2026.jsx — An Übersicht widget (JSX/React-like syntax). Runs a shell command every 3 seconds to fetch ESPN data and writes it to ~/.wm2026/.

2. wm2026_server.py — A Flask backend on 127.0.0.1:9876. Manages mpv audio playback via Unix socket, caches ESPN API responses, and scrapes live commentary from kicker.de.

3. engine.py — Runs every 3 seconds via the widget shell command. Detects goal events by diffing the score state, triggers macOS TTS (say -v Anna) and afplay sound effects.

wm2026.jsx  (shell every 3s)
  └─ curl ESPN API  →  today.json / schedule.json
  └─ python3 engine.py  →  feed.json, state.json
  └─ fetch()  →  Flask server (port 9876)
       ├─ /api/status      mpv state
       ├─ /api/play        start stream
       ├─ /api/ticker      live scoreboard
       └─ /api/commentary  play-by-play events
Enter fullscreen mode Exit fullscreen mode

Tech stack

  • Übersicht — macOS widget host
  • Python 3 + Flask — local backend
  • ESPN public API — scores & schedule (no key required)
  • mpv — HLS audio playback via Unix socket
  • macOS say — text-to-speech for goal announcements
  • BeautifulSoup — kicker.de live ticker scraping

Quick start

git clone https://github.com/AlexDesign420/wm2026-widget.git
cd wm2026-widget
./install.sh
Enter fullscreen mode Exit fullscreen mode

Requires: macOS 12+, Übersicht, Python 3.9+, brew install mpv

GitHub

👉 AlexDesign420/wm2026-widget

Would love feedback — especially on the HLS stream resolution workaround for ARD/ZDF backup renditions.

Top comments (0)