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

machine.js

const soundMachine = Machine({
  id: 'sound',
  initial: 'playRed',
  states: {
    playRed: {
        entry: ['playRedSound']
    },
  }
}, {
  actions: {
    playRedSound: () => console.log('PLAYING RED SOUND')
  }
})

const gameContainerMachine = Machine({
  id: 'gameMachine',
  initial: 'gameOff',
  context: {
    levelSequence: [1, 2, 3, 4],
    gameDispatchSequence: []
  },
  states: {
    gameOn: {
     id: 'gameOn',
     states: {
       watchMode: {
         entry: ['createWatchModePattern'],
         invoke: {
           id: 'sound',
           src: soundMachine,
         },
         on: {
          PLAY_RED: { 
            actions: send('PLAY_RED', { to: 'sound'
            })
          }
        }
       },
       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
    }),
  }
})