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

machine.js

const soundMachine = Machine({
  id: 'soundMachine',
  initial: 'choose',
  states: {
    choose: {
      on: {
        PLAY_RED: {
          actions: (context, event) => console.log(context, events)
        }
      }
    }
  }
}, {
  actions: {
    playRedSound: () => console.log('PLAYING RED SOUND')
  }
})

const gameMachine = Machine({
  id: 'gameMachine',
  initial: 'gameOff',
  context: {
    levelSequence: [1, 2, 3, 4],
    gameDispatchSequence: []
  },
  states: {
    gameOn: {
     id: 'gameOn',
     states: {
       watchMode: {
         entry: ['createWatchModePattern'],
         invoke: {
           id: 'soundMachine',
           src: 'soundMachine'
         },
         on: {
           PLAY_RED: { 
             actions: send('PLAY_RED', { to: 'soundMachine'
             })
           }
         }
       },
       playMode: {
         on: {
           incorrect: {target: '#gameMachine.gameOver'}
         }
       },
     }
    },
    gameOff: {
      on: {
        WATCH_MODE: '#gameOn.watchMode'
      }
    },
    gameOver: {
      on: {
        RESTART_GAME: '#gameOn.watchMode'
      }
    }
  }
}, {
  actions: {
    createWatchModePattern: assign({
      gameDispatchSequence: (context, event) => context.levelSequence
    }),
  }
})