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: 'game',
    initial: 'idle',
    context: {
      selectedMarble: {},
      currentPlayer: { id: 1},
      stagedMarbles: [{ id: 1, playerId: 1}],
      rollResult: 2,
    },
    states: {
      idle: {
        on: {
          SELECT: [
        { cond: 'canMoveOutOfStaging', actions: 'selectMarble', target: 'awaitingSelection.inStaging'}
          ]
        }
      },
      awaitingSelection: {
        states: {
          inStaging: {
            on: {
              MOVE: ''
            }
          }
        }
      }
    }
  }, {
    guards: {
      canMoveOutOfStaging: (ctx, evt) => {
        console.log('here', ctx, evt)
        const isCorrectRoll = ctx.rollResult === 1 || ctx.rollResult === 6
        
        const isStagedMarble = evt.selectedMarble && ctx.stagedMarbles.find(marble => marble.id === evt.selectedMarble.id)
        
        return isCorrectRoll
      }
      
    },
    actions: {
      selectMarble: assign({
        selectedMarble: (ctx, evt) => evt.selectedMarble
      })
    }
  });