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

machine.js

const officeMachine = Machine(
  {
    id: 'top',
    initial: 'office',
    context: {
      stage: 1,
    },
    states: {
      office: {
        on: {
          DRESSER: "dresserGroup",
          CABINET: "cabinetGroup",
          DESK: "deskGroup",
          SAFE: "safeGroup",
          SKULL: "skullGroup",
          COMBINE_PAPERS_AND_CLIP: { target: "combinePapersAndClip", cond: (context, event) => context.stage==6  },
          GIVE_PAPERS_TO_VOX: { target: "givePapersToVox", cond: (context, event) => context.stage==7  },
          VOX: "voxGroup",
          WALLS: "walls",
          PAINTING: "painting",
          CRYSTAL_BALL: "crystalBall",
          DOOR: "door",
          FLOOR: "floor",
        },
        meta: {
          locationText: "office"
        }
      },
      dresserGroup: {
        initial: "dresser",
        states: {
          dresser: {
            on: {
              LOCKED: { target: "puzzle_1", cond: (context, event) => context.stage === 1 },
              OPEN: { target: "#top.office", cond: (context, event) => context.stage === 2 }
            }
          },
          puzzle_1: {
            on: {
              SUCCESS: { target: "#top.office", actions: assign({ stage: 2 }) },
              FAILURE: "#top.office",
            }
          }
        },
      },
      cabinetGroup: {
        initial: "cabinet",
        states: {
          cabinet: {
            on: {
              OK: {target: "#top.office", cond: (context, event) => context.stage <=1 },
              USE_KEY: { target: "useKey", cond: (context, event) => context.stage ==2 }
            }
          },
          useKey: {
            on: {
              OK: { target: "#top.office", actions: assign({ stage: 3 }) }
            }
          }
        }
      },
      deskGroup: {
        initial: "desk",
        meta: {
          locationText: "Desk"
        },
        states: {
          desk: {
            on: {
              FINGER: { target: "finger", cond: (context, event) => context.stage <= 2 },
              USE_OIL: { target: "useOil", cond: (context, event) => context.stage == 3 },
            },
          },
          finger: {
            on: {
              OK: "#top.office"
            },
          },
          useOil: {
            on: {
              PUZZLE: "puzzle_1b",
            },
          },
          puzzle_1b: {
            on: {
              SUCCESS: "unlock",
              FAILURE: "finger"
            }
          },
          unlock: {
            on: {
              OK: { target: "#top.office", actions: assign({ stage:4 }) }
            },
          }
        }
      },
      safeGroup: {
        initial: "safe",
        states: {
          safe: {
            on: {
              LOCKED: { target: "#top.office", cond: (context, event)=> context.stage != 4 },
              USE_HANDLE: { target: "unlock", cond: (context, event) => context.stage == 4 }
            }
          },
          unlock: {
            on: {
              OK: { target: "#top.office", actions: assign({ stage:5 }) }
            }
          }
        }
      },
      skullGroup: {
        initial: "skull",
        states: {
          skull: {
            on: {
              OK: { target: "#top.office", cond: (context, event)=> context.stage != 5  },
              COMBINE: { target: "#top.office", cond: (context, event)=> context.stage == 5, actions: assign({ stage:6 }) },
            }
          },
        }
      },
      combinePapersAndClip: {
        on: {
          OK: { target: "office", actions: assign( {stage: 7} ) }
        }
      },
      givePapersToVox: {
        on: {
          OK: { target: "leavingGroup" }
        }
      },
      leavingGroup: {
        initial: "leaving",
        states: {
          leaving: {
            on: {
              YES: { target: "endVideo"},
              NO:  { target: "#top.office"},
            }
          },
          endVideo: {
            on: {
              OK: { target: "leave"}
            }
          },
          leave: {
            type: "final"
          }
        }
      },
      voxGroup: {
        initial: "vox",
        states: {
          vox: {
            on: {
              PUZZLE: "puzzle_1a",
            }
          },
          puzzle_1a: {
            on: {
              OK: "#top.office"
            },
          },
        }
      },
      walls: {
        on: {
          OK: "office"
        },
      },
      painting: {
        on: {
          OK: "office"
        },
      },
      crystalBall: {
        on: {
          OK: "office"
        },
      },
      door: {
        on: {
          OK: "office"
        },
      },
      floor: {
        on: {
          OK: "office"
        },
      },

    },
  },
)