Skip to content

SF6 Matchup Lab — Dev Log

Production data pipeline for a game I actually play. Match data scraped from Buckler's Bootcamp, analytics in PostgreSQL, interactive report in the browser.

← Lab Case Study ↗

No active sprint.

Matchup report search screen redesign — June 2026

The pre-load search state was a bare horizontal input row with no visual context. Redesigned as a centered landing panel with a clear title, subtitle, and contained card treatment. Added a teal monochrome pixel art of Ryu throwing a Hadoken beneath the buttons — generated via ChatGPT, styled to match the site accent color.

  • 2026-06-09 — Search screen restructured: title ("SF6 Matchup Lab"), subtitle, input + Load Report row, Demo Report button below
  • 2026-06-09 — "Try: karatesnacks" grey text removed; demo button relabeled "Demo Report"
  • 2026-06-09 — Ryu Hadoken pixel art added beneath buttons; teal monochrome, matches site accent
  • 2026-06-09 — Card panel added around search state: #161b22 bg + #30363d border dark, #f6f8fa + #d0d7de light mode
ECharts rebuild — June 2026

Plotly required too much scrolling and produced low-impact charts that weren't driving actionable insights. Full rebuild with ECharts — new insight patterns, expanded data scraping, augmented backend architecture.

  • 2026-06-05 — Plotly → ECharts: full chart rebuild, new insight patterns; diagram node, stack line, work card chip updated
  • 2026-06-05 — Gallery carousel: 3-up thumbnail strip, prev/next arrows, fullscreen lightbox, keyboard nav
  • 2026-06-05 — 10 real screenshots (5 desktop, 5 mobile) swapped in; desktop/mobile src swap on resize
  • 2026-06-05 — Demo player button added to matchup report; auto-loads karatesnacks
Case study polish — May 2026
  • 2026-05-22 — SF6 case study restructured to match template: TL;DR → Personal Statement → How It Works → Under the Hood
  • 2026-05-19 — SF6 work card rewritten; leads with "production data pipeline"