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

machine.js

const machine = Machine({
    id: "Workout",
    type: "parallel",
    context: {
      timerSeconds: 60,
    },

    states: {
      timer: {
        id: "timer",
        initial: "idle",
        states: {
          idle: {
            on: {
              "START TIMER": "counting down",
            },
          },
          "counting down": {
            on: {
              PAUSE: "paused",
              "STOP TIMER": "done timer",
            },
            after: {
              "TIMER DELAY": "done timer",
            },
          },
          paused: {
            on: {
              RESUME: "counting down",
              "STOP TIMER": "done timer",
            },
          },
          "done timer": {
            on: { CLOSE: "idle" },
          },
        },
      },

      activity: {
        initial: "pre-workout",
        states: {
          "pre-workout": {
            on: {
              "START WORKOUT": "warmup",
            },
          },

          warmup: {
            onDone: "workout",
            initial: "intro",
            states: {
              intro: {
                after: {
                  1000: "exercise 1",
                },
              },
              "exercise 1": {
                on: {
                  "NEXT EXERCISE": "exercise N",
                },
              },
              "exercise N": {
                on: {
                  "NEXT EXERCISE": "done warmup",
                },
              },
              "done warmup": {
                type: "final",
              },
            },
          },

          workout: {
            initial: "intro",
            states: {
              intro: {
                after: {
                  1000: "Back Squat",
                },
              },
              "Back Squat": {
                on: {
                  "NEXT EXERCISE": "Jump Rope",
                },
              },
              "Jump Rope": {
                states: {},
                on: {
                  "START TIMER": {
                    actions: assign({
                      timerSeconds: 5,
                    }),
                  },
                  "NEXT EXERCISE": "done workout",
                },
              },
              "done workout": {
                type: "final",
              },
            },
          },
        },
      },
    },
  },
  {
    delays: {
      "TIMER DELAY": (context) => context.timerSeconds * 1000,
    },
  });