Inspiration

Wanted a fast, visual “game of life” to explain mortgage timing and personal finance tradeoffs; needed something playful enough for a hackathon demo but grounded in real numbers and events. What it does

Simulates branching life paths with monthly events (jobs, layoffs, rate shocks, gifts, kids), showing parallel timelines on a stickman canvas while streaming alerts/popups and an audio-backed UI. Runs a back-end Monte Carlo-ish life/mortgage model, exports per-layer JSON, and feeds interesting events to the front end with popups, TTS, and enrichment hooks. Lets users tweak initial profile/loan parameters, then watch how cash, wages, and loans evolve; end screen ranks top “players” by money. How we built it

Python core (main.py, simulation.py, events.py) for configs, branching simulation, and output. TypeScript/HTML/CSS front end (simulation_ui/project/src/*) rendering isometric timelines, popups, stats, and end-screen scoreboard; Express server bridges settings/events. Event ingestion via /api/event, enrichment/tts hooks, and polling in the UI; canvas rendering for lines, markers, stickmen, and reactions. Challenges we ran into

Coordinating deterministic randomness (seeded runs) while keeping UI feeling alive. Managing popup timing/placement so alerts are readable at high scroll speeds. Balancing visual clarity (stats, scoreboard text contrast) against a dark, funky aesthetic. Keeping branch identities consistent when splitting and applying API-updated data. Accomplishments that we're proud of

A cohesive back-to-front loop: backend simulation → event extraction → UI popups with names and data. A lively stickman timeline with dynamic splits, markers, and an auto-stop end screen with rankings. Readable, deterministic runs (seed in settings/CLI) and configurable months/loan parameters. What we learned

Small UX details (popup timing, text contrast, labels vs. IDs) make or break readability at speed. Seeding and reproducibility are critical when demoing stochastic systems. Keeping UI layers constrained (popups inside canvas, sized appropriately) matters for polish. What’s next for Team 飲み放題

Add richer financial outcomes (net worth, risk scores) to rankings and mid-run overlays. Improve event diversity and narrative, plus better audio/enrichment feedback. Expose live controls (speed, seed, scenario presets) and persist user sessions.

Built With

Share this project:

Updates