Transition ArraysFirst Match WinsTargetless Fallback

Coin Turnstile

This demo shows the XState-style branching model: on every coin, the machine tries the unlock branch first, then falls back to a targetless transition that keeps counting coins while staying locked.

Current State

locked

Interactive Machine

Insert coins until the first guarded transition becomes true.

Gate Status

Locked

3 coins to go

Unlock progress0/3 coins

Coins In State

Total Inserted

Last Branch

Waiting for coin

Recent History

Machine booted in locked state

Why This Matters

The same event can produce different results without becoming ambiguous.

While the machine is locked, everyINSERT_COINevent checks the array top to bottom.

If the first branch's guard passes, the machine unlocks. Otherwise the fallback branch runs and the state stays locked while context still updates.

Machine Snippet

This is the transition-array shape that powers the demo.

INSERT_COIN: [
  {
    guard: ({ context }) => context.coins + 1 >= 3,
    target: 'unlocked',
    actions: [
      assign(({ context }) => ({
        coins: context.coins + 1,
      })),
    ],
  },
  {
    actions: [
      assign(({ context }) => ({
        coins: context.coins + 1,
      })),
    ],
  },
]