Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
      id: 'snake',
      context: {},
      initial: 'idle',
      states: {
        idle: {
          on: {
            UP: { target: 'moving.up' },
            RIGHT: { target: 'moving.right' },
            DOWN: { target: 'moving.down' },
            LEFT: { target: 'moving.left' },
          },
        },
        moving: {
          on: {
            SPACE: { target: '#snake.paused' },
            UP: { actions: ['queueUp'] },
            RIGHT: { actions: ['queueRight'] },
            DOWN: { actions: ['queueDown'] },
            LEFT: { actions: ['queueLeft'] },
          },
          states: {
            up: {
              entry: ['resetQueue'],
              on: {
                TICK: [
                  { target: '#snake.dead', cond: 'boundUp' },
                  { target: '#snake.dead', cond: 'snakeUp' },
                  {
                    cond: 'appleUp',
                    target: '.unlocked',
                    actions: ['growUp', 'updateApples', 'notifyUpdate'],
                  },
                  { target: '.unlocked', actions: ['moveUp', 'notifyUpdate'] },
                ],
              },
              initial: 'locked',
              states: {
                locked: {},
                unlocked: {
                  on: {
                    '': [
                      { cond: 'rightQueued', target: '#snake.moving.right' },
                      { cond: 'leftQueued', target: '#snake.moving.left' },
                    ],
                  },
                },
              },
            },
            right: {
              entry: ['resetQueue'],
              on: {
                TICK: [
                  { target: '#snake.dead', cond: 'boundRight' },
                  { target: '#snake.dead', cond: 'snakeRight' },
                  {
                    cond: 'appleRight',
                    target: '.unlocked',
                    actions: ['growRight', 'updateApples', 'notifyUpdate'],
                  },
                  {
                    target: '.unlocked',
                    actions: ['moveRight', 'notifyUpdate'],
                  },
                ],
              },
              initial: 'locked',
              states: {
                locked: {},
                unlocked: {
                  on: {
                    '': [
                      { cond: 'upQueued', target: '#snake.moving.up' },
                      { cond: 'downQueued', target: '#snake.moving.down' },
                    ],
                  },
                },
              },
            },
            down: {
              entry: ['resetQueue'],
              on: {
                TICK: [
                  { target: '#snake.dead', cond: 'boundDown' },
                  { target: '#snake.dead', cond: 'snakeDown' },
                  {
                    cond: 'appleDown',
                    target: '.unlocked',
                    actions: ['growDown', 'updateApples', 'notifyUpdate'],
                  },
                  {
                    target: '.unlocked',
                    actions: ['moveDown', 'notifyUpdate'],
                  },
                ],
              },
              initial: 'locked',
              states: {
                locked: {},
                unlocked: {
                  on: {
                    '': [
                      { cond: 'rightQueued', target: '#snake.moving.right' },
                      { cond: 'leftQueued', target: '#snake.moving.left' },
                    ],
                  },
                },
              },
            },
            left: {
              entry: ['resetQueue'],
              on: {
                TICK: [
                  { target: '#snake.dead', cond: 'boundLeft' },
                  { target: '#snake.dead', cond: 'snakeLeft' },
                  {
                    cond: 'appleLeft',
                    target: '.unlocked',
                    actions: ['growLeft', 'updateApples', 'notifyUpdate'],
                  },
                  {
                    target: '.unlocked',
                    actions: ['moveLeft', 'notifyUpdate'],
                  },
                ],
              },
              initial: 'locked',
              states: {
                locked: {},
                unlocked: {
                  on: {
                    '': [
                      { cond: 'upQueued', target: '#snake.moving.up' },
                      { cond: 'downQueued', target: '#snake.moving.down' },
                    ],
                  },
                },
              },
            },
          },
        },
        dead: {
          entry: ['notifyUpdate'],
          on: {
            SPACE: { target: 'idle', actions: ['reset', 'notifyUpdate'] },
          },
        },
        paused: {
          entry: ['notifyUpdate'],
          on: {
            SPACE: { target: 'idle', actions: ['notifyUpdate'] },
            ESCAPE: { target: 'idle', actions: ['reset', 'notifyUpdate'] },
          },
        },
      },
    });