At a glance
BrokerSIM puts you in the role of a luxury goods middleman. You don't manufacture anything — you find deals, negotiate margins, and physically move product to the right buyer before the day's deadline. The vertical slice is fully connected: supplier browsing, live negotiation, warehouse fulfillment, and dispatch scoring all flow together as one coherent broker workday.
Architecture
BrokerSIM is a client-side React app with no backend — all game state lives in React context and component state, advancing via user actions rather than a server tick. The Three.js warehouse scene is isolated as a self-contained module that receives item data as props and fires dispatch callbacks back into the React game state. Every phase is a route in the same Vite SPA.
SupplyNet — sourcing
The supplier browser generates a fresh set of listings each in-game day. Each supplier card exposes five variables that directly affect your margin and risk: list price, condition score (how worn or pristine the item is), inbound shipping cost, inbound delay/damage risk, and the supplier's overall trust rating built from past dealings. No two days look the same — you're always making a triage call under uncertainty.
| Supplier Factor | What it drives | Range |
|---|---|---|
| List Price | Your cost basis — directly sets maximum achievable margin before shipping | Varies by item category |
| Condition Score | Client acceptance threshold — low condition triggers automatic disputes or walk-aways | 0–100 |
| Inbound Shipping | Reduces realized margin; affected by the daily delay-boost event modifier | Fixed cost per listing |
| Inbound Risk | Probability of damage or delay in transit — hits satisfaction and may trigger dispute flags | % chance per listing |
| Supplier Trust | Accumulated from past deals — higher trust unlocks better inventory and lower hidden risk | 0–100 running score |
Per-day supplier pool
Listings are generated fresh each broker day. Category, brand model, condition, and risk are randomised within calibrated ranges so every sourcing decision feels distinct.
Live profit projection
Before you lock a purchase, the UI shows your projected gross profit based on the item's expected sell price relative to list price plus inbound shipping. The projection updates as you apply filters.
Supplier reliability tracking
Each supplier has a persistent trust score that compounds across days. High-trust suppliers surface premium inventory and carry lower hidden risk multipliers — building long-term supplier relationships is a core meta-game lever.
Sort by landed cost · condition · risk · trust
The SupplyNet UI surfaces the most actionable comparison axis per deal context. When the daily event boosts dispute risk, experienced brokers sort by condition first, not price.
Negotiation system
The BrokerRoom is a deal desk where a queued client opens negotiations on the item you sourced. You have a finite number of rounds before the client exits — every message you send is parsed by an intent classifier, which maps your text to one of eight intent categories and updates the client's mood, leverage score, and response posture accordingly. Three distinct client personalities — Friendly, Analytical, and Aggressive — process the same intents in meaningfully different ways.
Finite negotiation window
Each client enters with a fixed round budget. When rounds expire, they exit — you lose the deal even if terms were close. Pressure management and pacing matter as much as price strategy.
Per-client mood state
Client mood shifts with each intent received. A Friendly client pushed with a threat drops mood sharply; an Aggressive client pushed the same way holds position. Mood gates what responses are available to the client each round.
Dynamic leverage score
Your leverage score rises when you signal credible alternatives (walk-away, competing offer) and falls when you over-discount or plead. Higher leverage shifts the probability distribution on client concessions.
Event-driven difficulty
The BrokerSIM Daily newsletter publishes a demand boost that raises client budgets, or a dispute boost that tightens their tolerance for condition or shipping risk. Negotiation difficulty is never fixed.
Warehouse & fulfillment
Once a deal closes, the game switches to a Three.js WebGL scene — a first-person warehouse where you physically carry the item from its inbound shelf to the dispatch station. WASD movement, a pickup interaction, a shipping method selection panel on the right, and a real-time dispatch checklist turn the fulfillment step into a tactile layer on top of the abstract deal mechanics. Warehouse complexity is where physical skill replaces negotiation skill.
Three.js WebGL renderer
The warehouse is a Three.js scene embedded inside the React app. Scene setup, lighting, camera rig, and the render loop are fully isolated from React state — dispatch events bubble back up via a callback prop.
WASD + directional controls
Standard first-person WASD controls with on-screen directional buttons for touchscreen fallback. The player character navigates a grid-based warehouse floor to reach the inbound package location.
3D warehouse assets
Shelving units, package props, and the dispatch station are loaded as GLTF models. The item carried represents the specific category (watch, jewelry, etc.) from the deal terms passed in from BrokerRoom.
Economy · Insured Priority · White Glove
Three shipping tiers selectable before dispatch. Economy is cheapest but raises delay risk. Insured Priority covers damage disputes. White Glove Courier minimises all risk at a margin cost — pairs with high-trust client deals.
Step-by-step fulfillment gating
The checklist — package picked, on dispatch pad, handling time — gates the dispatch button. This prevents dispatch before the player has physically completed the fulfillment sequence, making the 3D phase consequential rather than cosmetic.
Live deal context panel
A sidebar displays the item name, category, agreed price, and approved shipping method from the BrokerRoom phase. The warehouse knows what it's shipping and why — the data flows unbroken from sourcing through fulfillment.
Day events & market conditions
At the start of each broker day, the BrokerSIM Daily newsletter publishes three market condition modifiers that shape the entire session. These aren't cosmetic — they directly alter client budget tolerance, shipping risk curves, and deal difficulty across every negotiation that day. Reading the daily briefing and adjusting your sourcing and negotiation strategy accordingly is the primary skill loop between sessions.
| Modifier | Effect | Strategic response |
|---|---|---|
| Delay Boost | Increases inbound shipping transit time probability — raises the chance a supplier delivery is late, hitting satisfaction scores | Prefer higher-trust suppliers; choose Insured Priority or White Glove shipping |
| Dispute Boost | Tightens client tolerance for condition defects and shipping delays — more deals risk triggering formal disputes that burn reputation | Source only high-condition items; Analytical clients are even more sensitive than usual |
| Demand Boost | Raises client budgets and softens walk-away thresholds — the market is hot, clients are willing to pay above their stated cap | Push harder on price; walk-away threats are weaker today because clients really want the item |
BrokerSIM Daily newsletter
Displayed as a styled in-game newspaper overlay at the start of the warehouse phase. "Opening Day Spotlight" surfaces the current modifier trio with flavour text framing the day's market conditions narratively.
Multiple modifiers stack
A day with both +Dispute and +Demand active creates a tense high-value environment: clients will pay more but won't tolerate any defects. The most profitable sessions also carry the highest downside risk.
Deal log carries context
The deal log records which session conditions were active when each deal was closed. Future analysis of deal outcomes against event history is the foundation for the planned longitudinal reputation consequence system.
Broker progression
The Broker Profile screen tracks your career stats — cash on hand, reputation score (0–100), current day, and deal streak. The office upgrade shop lets you spend profit on permanent improvements that reduce friction across all three game phases: better inspection equipment, a CRM suite that buffs negotiation, and packing tools that speed up warehouse dispatch.
| Office Upgrade | Phase affected | Mechanical effect |
|---|---|---|
| Inspection Lab Lamp | SupplyNet sourcing | Reveals hidden condition defects on supplier listings before purchase — reduces surprise dispute risk |
| CRM Negotiation Suite | BrokerRoom negotiation | Surfaces client mood history and previous deal terms — improves intent classifier accuracy and gives leverage advantage on repeat clients |
| Pro Packing Bench | Warehouse dispatch | Reduces handling time requirement in the dispatch checklist and lowers packaging damage risk on Economy Freight shipments |
Profit-driven progression
Your broker cash accumulates from closed deal margins minus shipping costs. Disputes deduct a penalty. Cash is the primary resource for purchasing office upgrades — every deal has a direct upgrade economy consequence.
0–100 career score
Reputation rises with clean dispatch outcomes and satisfied clients, falls with disputes and walk-aways. Higher reputation unlocks premium supplier access, better client types, and higher-value daily events.
Consecutive clean deals
A running streak of dispute-free, on-time dispatches. Streak bonuses are flagged in the deal log and feed into reputation multipliers — breaking a streak on a bad day has real career cost.
Buy · sell · shipping → ROI
The deal log includes an inline calculator for any deal: enter buy price, sell price, and shipping cost to see gross profit, margin percentage, and ROI. Useful for post-mortem analysis of individual negotiations.
Full tech stack
A fully client-side TypeScript app — no backend, no auth, no deployment complexity. The React 19 + Vite setup gives instant HMR during development; Three.js handles the 3D warehouse scene as an isolated module; all game logic is plain TypeScript functions operating on typed state objects.
React 19 + Vite
React 19's concurrent features handle the negotiation chat feed and live deal state updates. Vite provides sub-second HMR and a zero-config TypeScript pipeline. All routes are client-side.
Three.js + WebGL
The warehouse scene is a Three.js PerspectiveCamera + WebGLRenderer embedded in a React ref. Scene lifecycle (init, animate, dispose) is fully managed by a custom hook so the 3D engine is invisible to the rest of the app.
GLTF / GLB models
Warehouse props (shelving, packages, dispatch station) are loaded via Three.js GLTFLoader. Models are versioned with the repo — no external CDN dependency. Category-appropriate item props match the sourced item type.
React Context game state
A single top-level context holds the full game state object — selected supplier, deal terms, broker profile, deal log, active events. Components subscribe to only the slices they need. No external state library required at this scale.
Full TypeScript coverage
Supplier listings, client profiles, deal terms, intent categories, and outcome records are all strongly typed. The type system makes the data flow between phases explicit — SupplyNet outputs exactly what BrokerRoom expects as input.
Pure client-side simulation
Supplier generation, intent classification, event rolls, and outcome calculation are all deterministic TypeScript functions. This keeps the project zero-dependency on infrastructure — run it anywhere with npm run dev.
Status & roadmap
BrokerSIM is a playable vertical slice today: one full broker day — source, negotiate, dispatch, score — can be completed end-to-end. Core mechanics are coherent and testable. The primary gaps are persistence (no save between sessions), content depth (limited item categories and client pool), and longitudinal consequence (reputation doesn't yet carry meaningful cross-session effects).
Full vertical slice
SupplyNet → BrokerRoom → Warehouse → Deal Log connected end-to-end. One complete broker day is playable from cold start. All three client personalities and the intent classifier are implemented and functional.
3D warehouse scene
Three.js renderer with GLTF assets, WASD movement, pickup and dispatch interaction, shipping method selection, and real-time dispatch checklist — all wired into the React game state loop.
Daily events system
BrokerSIM Daily with demand, dispute, and delay modifiers. Event values propagate through negotiation difficulty and shipping risk for the full session.
Persistent broker career
localStorage (or IndexedDB) save for cash, reputation, supplier trust, client history, deal streak, and office upgrades. Session persistence turns the demo into a career game.
Content expansion
More item categories, more client personas, richer event types, and a balancing pass on margin curves and shipping risk probability distributions. More content depth extends replayability.
Longitudinal reputation
Negotiation history and deal outcomes carrying real consequences across multiple sessions — repeat clients remember past deals, supplier trust degrades after bad outcomes, reputation gates unlock at defined thresholds.
Try BrokerSIM
Clone the repo and run locally — it starts with a single npm run dev. No backend, no accounts, no setup beyond Node.js. One full broker day playable immediately.