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

machine.js

const stroke = function score(player) {
  return assign({
    [player]: (context) => context[player] + 1,
  });
}

const machine = Machine({
  id: "Playoff: 3-hole aggregate",
  context: {
    P1: 0,
    P2: 0,
  },
  initial: "playing",
  states: {
    playing: {
      type: "parallel",
      onDone: "checking",
      states: {
        P1: {
          initial: "Hole A",
          states: {
            "Hole A": {
              on: { "sink.P1": "Hole B" },
            },
            "Hole B": {
              on: { "sink.P1": "Hole C" },
            },
            "Hole C": {
              on: { "sink.P1": "done" },
            },
            done: {
              type: "final",
            },
          },

          on: {
            "stroke.P1": {
              actions: "+P1",
            },
          },
        },

        P2: {
          initial: "Hole A",
          states: {
            "Hole A": {
              on: { "sink.P2": "Hole B" },
            },
            "Hole B": {
              on: { "sink.P2": "Hole C" },
            },
            "Hole C": {
              on: { "sink.P2": "done" },
            },
            done: {
              type: "final",
            },
          },

          on: {
            "stroke.P2": {
              actions: "+P2",
            },
          },
        },
      },
    },

    checking: {
      on: {
        '': [
          { cond: "P1 lowest", target: "winner.P1" },
          { cond: "P2 lowest", target: "winner.P2" },
          { cond: "tied", target: "tied" },
        ],        
      }
    },

    winner: {
      states: {
        P1: {},
        P2: {},
      },
    },
    
    tied: {},
  },
},
{
  actions: {
    "+P1": stroke("P1"), 
    "+P2": stroke("P2"), 
  },
  guards: {
    "P1 lowest": ({ P1, P2 }) => P1 < P2,
    "P2 lowest": ({ P1, P2 }) => P2 < P1,
    "tied": ({ P1, P2 }) => P1 === P2,
  },
});