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

machine.js

const ModeEvents = {
  showWelcome: 'SHOW_WELCOME',
  showClosedCaptioning: 'SHOW_CLOSED_CAPTIONING',
  showResources: 'SHOW_RESOURCES',
  showSchedule: 'SHOW_SCHEDULE',
  showInstaller: 'SHOW_INSTALLER',
  showCheatMode: 'SHOW_CHEAT_MODE',
  showTest: 'SHOW_TEST',
  showDemos: 'SHOW_DEMOS',
  exitCheatMode: 'EXIT_CHEAT_MODE',
  exit: 'EXIT',
  toggleInput: 'TOGGLE_INPUT',
  toggleSideBar: 'TOGGLE_SIDEBAR',
  finished: 'FINISHED',
};

const modeTransitions = {
  [ModeEvents.showWelcome]: '#mode.mainPane.welcome',
  [ModeEvents.showClosedCaptioning]: '#mode.mainPane.closedCaptioning',
  [ModeEvents.showResources]: '#mode.mainPane.resources',
  [ModeEvents.showSchedule]: '#mode.mainPane.schedule',
  [ModeEvents.showInstaller]: {
    target: ['#mode.mainPane.installer', '#mode.captureInput.off'],
  },
  [ModeEvents.showCheatMode]: {
    target: ['#mode.mainPane.cheatMode', '#mode.captureInput.off'],
  },
  [ModeEvents.showTest]: '#mode.mainPane.test',
  [ModeEvents.showDemos]: '#mode.mainPane.demos',
  [ModeEvents.exitCheatMode]: {
    target: ['#mode.mainPane.welcome', '#mode.captureInput.on'],
  },
  [ModeEvents.exit]: '#mode.mainPane.exit',
};

const modeMachine = Machine({
  id: 'mode',
  type: 'parallel',
  context: {
    selectedDemo: undefined,
  },
  on: modeTransitions,
  states: {
    captureInput: {
      initial: 'on',
      states: {
        on: {
          [ModeEvents.toggleInput]: 'off',
        },
        off: {
          [ModeEvents.toggleInput]: 'on',
        },
      },
    },
    sideBar: {
      initial: 'visible',
      states: {
        visible: {
          on: {
            [ModeEvents.toggleSideBar]: 'hidden',
          },
        },
        hidden: {
          on: {
            [ModeEvents.toggleSideBar]: 'visible',
          },
        },
      },
    },
    mainPane: {
      initial: 'welcome',
      states: {
        welcome: {},
        closedCaptioning: {},
        resources: {},
        exit: {
          type: 'final',
        },
        schedule: {},
        demos: {},
        installer: {
          entry: [
            assign({
              selectedDemo: (context, event) =>
                event.data || context.selectedDemo,
            }),
          ],
          on: {
            [ModeEvents.finished]: {
              target: [
                '#mode.mainPane.installer',
                '#mode.captureInput.on',
                '#mode.sideBar.visible',
              ],
            },
          },
        },
        cheatMode: {},
        test: {},
      },
    },
  },
});