← Projects
Personal project planners-os.vercel.app Live

PlannerOS

A browser-based supply chain planning simulation for consulting workshops — four quarters of decisions, real pressure, a live leaderboard, and a post-game debrief that maps your choices to one of six planning archetypes.

The problem

Supply chain professionals know the classic trade-offs in theory — keep customers happy, hold less stock, spend less — and that you can't fully have all three at once. What they rarely get is the feeling of making those calls for real: under time pressure, with incomplete information, and consequences they can't take back. Slides don't create that tension. I wanted something that did — a safe place to feel the trade-offs rather than just nod at them.

What I built

PlannerOS is a browser game that drops you into the role of Head of Supply Chain Planning at a fictional electronics company for four quarters. The board hands you a priority — defend service, protect cash, control costs, or balance all three — and each quarter you read the demand signals (some real, some noise), commit to a plan, and live with what the market throws back. When the year ends, it tells you what kind of planner you are: a debrief sorts your decisions into one of six recognisable styles, each tied to a real planning concept. In a workshop, everyone's scores climb a shared leaderboard in real time.

It's built as a small, dependency-light single-page app in plain JavaScript, with the game logic kept in pure functions — the same inputs always produce the same outcome, which made it quick to tune and easy to trust. Scores, the decision log and the live leaderboard run on Supabase, with results streaming to the leaderboard over a websocket so a room full of players updates instantly. One demand signal each quarter is randomised when a session starts rather than mid-game, so every playthrough differs but nobody gets blindsided halfway through.

Tech stack

Vanilla JS (ES modules) HTML / CSS Supabase (PostgreSQL) Supabase Realtime Vercel

Architecture

How a playthrough flows, left to right — from name entry, through the game engine, out to a live shared leaderboard.

Entry
index.html player name entry
Game Engine
game.js phase orchestrator, 7 phases onboarding → mandate → Q1–Q4 → debrief
state.js pure state functions
content.js 4Q × 3 events, 4 mandates, 4 postures, 6 archetypes
ui.js HUD rendering, delta readouts
archetypes.js 6 behavioural profiles
Persistence
Supabase PostgreSQL scores + decision log
Realtime WebSocket real-time updates
Leaderboard
leaderboard.html live top-10 re-render

The hard part

The hard part was deciding what to hide. Show players every number and the game becomes a spreadsheet; hide too much and it feels arbitrary and unfair. So information is deliberately layered: some figures are always on screen, some appear only as a vague status with no number, and some stay hidden until the end-of-game review. That gap is what creates the tension — players feel a constraint they can't quite see — and it's what makes the debrief land: "that's why you ran out of cash." Getting that balance right, so the pressure feels fair rather than random, was most of the design work.

A related detail: how well you read each quarter's demand signal quietly follows you, and your accuracy across the year multiplies your final score — so a lucky guess and a well-judged read don't end up looking the same.

Screenshots

PlannerOS — in-game HUD with KPI meters PlannerOS — supply posture selection PlannerOS — live leaderboard

Outcomes

  • Live at planners-os.vercel.app ↗ — used at Deloitte practitioner events for groups of 15–20
  • V1 and V2 both shipped in a single day; V2 built directly on feedback from first players
  • 5,184 possible playthroughs from the different combinations of mandate, signals and events
  • Six planning styles (Rapid Responder, Buffer Builder, Lean Forecaster, Efficiency Guardian, Customer Champion, Orchestrator), each mapped to a real supply chain framework in the debrief
  • Being considered for the practice's learning-and-development programme