Batyard Slugger

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Batyard Slugger

Inspiration

Every summer, printed kids' activity books are handed out to families entering Louisville Slugger Field in downtown Louisville, Kentucky. However, printed booklets have steadily declined in usage: physical print runs are difficult to size, paper books get left behind in stadium cup holders, and static worksheets struggle to engage kids raised on interactive screens.

When Carter Davis and the Louisville Bats challenged HackKentucky participants to "Bring the ballpark to the browser," we set out to build Batyard Slugger. We drew inspiration from the 90s PC classic Backyard Baseball '97—its low-angle perspective behind home plate, vibrant sandlot kid personas like Pablo Sanchez, and ballpark organ music. We wanted an in-stadium, zero-install browser video game accessible via QR codes that connects Kentucky Academic Standards directly to baseball statistics.

What it does

Batyard Slugger turns baseball statistics into core gameplay mechanics across three playable tiers:

Pre-K Coloring Dugout & Action Puzzles: Digital activity sheets with clean, non-overlapping vector outlines of Buddy Bat, ballpark diamonds, and mascot caps, featuring both brush and tap-to-fill bucket tools, alongside tactile ball-counting (1–5) and home plate pentagon matching.
3rd–5th Grade Batyard Derby & JCPS Adaptive Engine: A playable sandlot batting derby with pitch types (Fastball, Changeup, Curveball), sweet-spot contact timing, and an interactive chalkboard timeout. It uses a 5-tier Jefferson County Public Schools (JCPS) computer-adaptive testing model:
- Calculating batting averages as division to thousandths: $$\text{BA} = \frac{\text{Hits}}{\text{At-Bats}} = \frac{3}{10} = .300$$
- Computing weighted total bases: $$\text{TB} = (1\text{B} \times 1) + (2\text{B} \times 2) + (3\text{B} \times 3) + (\text{HR} \times 4)$$
- Correct streaks increase difficulty and ignite a 3X Aluminum Power Bat, launching 400+ foot moonshots splashing into the Ohio River.
Post-Secondary Sabermetrics War Room: Interactive calculators for Bill James' Pythagorean win expectancy ($\text{Win\%} = \frac{\text{RS}^{1.83}}{\text{RS}^{1.83} + \text{RA}^{1.83}}$), linear-weight wOBA run values, and a 24-state discrete Markov chain run expectancy matrix (RE24).
Live Audio & Sensory Atmosphere: An ElevenLabs AI sports announcer that calls hits and home runs in real time, accompanied by a Web Audio API synthesized 6-note ballpark organ fanfare ($G_4 \rightarrow C_5 \rightarrow E_5 \rightarrow G_5 \rightarrow E_5 \rightarrow G_5$), bat crack impulses, and crowd audio.

How we built it

Game Engine & State Machine: Built using the HTML5 Canvas 2D API structured as an arcade cabinet state machine (Title Screen $\rightarrow$ Dugout Draft $\rightarrow$ Ballpark Arena $\rightarrow$ Chalkboard Timeout $\rightarrow$ Coloring Dugout $\rightarrow$ Sabermetrics Lab).
Live Roster Data: Sourced directly from the MLB Stats API (sportId=11), translating active Triple-A Louisville Bats players (such as Noelvi Marte and Carlos Jorge) into 1–10 sandlot attributes.
Voice & Sound Synthesis:
- Powered by an ElevenLabs server-side proxy (/api/voice/announcer) utilizing the low-latency eleven_flash_v2_5 model, with a graceful client-side Web Speech API fallback.
- Ballpark organ fanfare synthesized entirely with native Web Audio API oscillators and gain nodes.
Adaptive AI Backend: A Node.js backend using Google Gemini 1.5 Flash to dynamically generate curriculum questions and humorous kid persona cards.
Cloud Infrastructure: Containerized with Docker and hosted on Vultr Cloud Compute (155.138.222.107 on ports 80 and 3000) for low-latency in-stadium connectivity.

Challenges we ran into

Overcoming the "Quiz" Trap: Initial user testing indicated the game felt too much like a text test ("tested facts without doing anything"). We redesigned the experience into an action-first arcade loop, replacing text forms with tactile gauge dials, launch angle physics sliders, and immediate home run rewards.
Canvas Template Line Overlap: Early coloring templates suffered from path overlap. We redrew the vectors with strict boundary isolation and added a tap-to-color flood-fill mode for younger children.
Stadium Wi-Fi Audio Latency: High-latency public networks make large audio downloads unreliable. We eliminated external MP3 dependencies by synthesizing the organ fanfare in code and caching ElevenLabs announcer audio buffers server-side.
State Persistence Across Tiers: Users initially lost their score when switching modes. We implemented a unified localStorage persistence layer synchronized across all screens, paired with a 5-tier badge reward progression.

Accomplishments that we're proud of

Deployed a responsive, fully playable retro arcade game integrated with live Minor League Baseball statistics within the hackathon timeframe.
Built a functional computer-adaptive testing system modeled after JCPS standard test difficulty scaling.
Developed a completely client-side Web Audio API organ synthesizer that recreates stadium organ harmonics with zero external bandwidth.
Successfully deployed and bound standard HTTP ports (80 and 3000) on Vultr so fans can scan and play without typing port numbers or installing apps.

What we learned

Gamified Educational Feedback: Tying math concepts directly to game power-ups (e.g., locking in $.300$ batting average to activate the power bat) makes educational drills feel rewarding rather than punitive.
Real-World Sports Data Normalization: Transforming raw statistical feeds from the MLB Stats API into balanced 1–10 ratings provided insight into sports data modeling.
Hybrid Voice Architectures: Combining high-fidelity cloud voice generation with browser-native speech synthesis fallbacks creates reliable experiences on variable network connections.

What's next for Batyard Slugger

Multiplayer Bleacher Battles: Enabling section-versus-section trivia and derby challenges during mid-inning breaks at Louisville Slugger Field.
Concourse Bluetooth / Beacon Integration: Triggering location-based trivia when walking past historic stadium landmarks and the Louisville Slugger Museum.
Expanded Player Customization: Letting kids build their own sandlot avatars and track season-long reading and math progress tied to ticket reward incentives.