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

machine.js

const incrementTime = assign({
  time: (context, e) => context.time + 1
});

// Guard to check if the max count was reached
function maxCountReached(context, event) {
  return context.time >= 3;
}

const timerMachine = Machine(
  {
    id: "timer",
    initial: "paused",
    context: {
      time: 0
    },
    states: {
      paused: {
        on: {
          TOGGLE: [
            {
              target: "playing",
              actions: "resetTime",
              cond: "maxCountReached"
            },
            { target: "playing" }
          ]
        }
      },
      playing: {
        on: {
          "": {
            target: "paused",
            cond: "maxCountReached"
          },
          TOGGLE: "paused",
          INCREMENT: {
            target: "playing",
            actions: "incrementTime"
          }
        }
      }
    },
    on: {
      RESET: {
        target: ".paused",
        actions: "resetTime"
      }
    }
  },
  {
    actions: {
      incrementTime,
      resetTime: assign({
        time: 0
      })
    },
    guards: { maxCountReached }
  }
);