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

machine.js

const timeLimit = 10;

const timerMachine = Machine(
  {
    id: "timer",
    initial: "reset",
    context: {
      t: 0
    },
    states: {
      playing: {
        invoke: {
          id: "incInterval",
          src: (context, event) => (callback, onReceive) => {
            // This will send the 'INC' event to the parent every second
            const id = setInterval(() => callback("INC"), 1000);
            // Perform cleanup
            return () => clearInterval(id);
          }
        },
        on: {
          PAUSE: "paused",
          RESET: {
            target: "reset",
            actions: "reset"
          },
          INC: {
            actions: assign({ t: (context) => context.t + 1 })
          }
        }
      },
      paused: {
        on: {
          PLAY: {
            target: "playing",
            actions: assign({
              t: (context) => (context.t === timeLimit ? 0 : context.t)
            })
          },
          RESET: {
            target: "reset",
            actions: "reset"
          }
        }
      },
      reset: {
        on: {
          PLAY: {
            target: "playing"
          }
        }
      }
    }
  },
  {
    actions: {
      reset: assign({
        t: () => 0
      })
    }
  }
);