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

machine.js

const gameMachine = Machine(
  {
    id: "game",
    initial: "nogame",
    context: {
      players: [],
      roles: [
        {
          name: "1",
          isActive: true
        }
      ]
    },
    states: {
      nogame: {
        on: {
          CREATE: "notReadyToDeal"
        }
      },
      notReadyToDeal: {
        states: {
          tooFewPlayers: {},
          tooFewCards: {},
          tooManyCards: {},
          tooManyPlayers: {}
        },
        "": [{ target: "readyToDeal", cond: "playersAndRolesMatch" }]
      },
      readyToDeal: {},
      notReadyToStart: {},
      readyToStart: {}
    }
  },
  {
    guards: {
      playersAndRolesMatch: (context, event) => {
        const { players, roles } = context;
        const numAactiveRoles = roles.filter(role => role.isActive).length;
        const target = players.length + 3;
        return target === numAactiveRoles;

        // if (target === numAactiveRoles) {
        //   game.state = GameStates.ready;
        //   game.validationError = "";
        //   return;
        // }

        // const numRolesOff = target - numAactiveRoles;
        // const moreOrFewer = numRolesOff > 0 ? "more" : "fewer";
        // game.state = GameStates.invalid;
        // game.validationError = `Please select ${Math.abs(
        //   numRolesOff
        // )} ${moreOrFewer} roles.`;
      }
    }
  }
);