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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)

const triggerMachine = Machine(
  {
    id: 'TicTacToe-game',
    initial: 'gameOver',
    context: {
      whoseTurn: undefined
    },
    states: {
      gameOver: {
        entry: ['enableStartButtons', 'disableReset'],
        exit: ['disableStartButtons', 'enableReset'],
        on: {
          USER_FIRST_PRESS: {
            target: 'gameStarted',
            actions: 'setUsersTurn'
          },
          COMPUTER_FIRST_PRESS: {
            target: 'gameStarted',
            actions: 'setComputersTurn'
          }
        }
      },
      gameStarted: {
        initial: 'getTurn',
        states: {
          getTurn: {
            on: {
              '': [
            { target: 'userTurn', cond: { type: 'isUsersTurn'} },
            { target: 'computerTurn', cond: {type: 'isComputersTurn'} }
                ]
            }
          },
          userTurn: {
            entry: ['promptUserToMove'],
            exit: [],
            on: {
              USER_PLAYED: 'processMove'
            }
          },
          computerTurn: {            
            on: {
              COMPUTER_PLAYED: 'processMove'
            }
          },
          processMove: {
            on: {
              '': [
            { target: 'win', cond: 'checkForAWin' },
            { target: 'tie', cond: 'checkForATie' }
          ],

            }
          },
          win: {},
          tie: {},
        },
        entry: ['disableStartButtons', 'enableReset', 'clearBoard'],
      }

    }
  },
  {
    actions: {
      enableStartButtons: (context, event) => {
        console.log('enableStartButtons...');
      },
      disableStartButtons: (context, event) => {},
      enableReset: (context, event) => {},      
      disableReset: (context, event) => {},
      clearBoard: (context, event) => {},
      setUsersTurn: (context, event) => {
        context.whoseTurn = "user"
         console.log('turn: user')
      },
      setComputersTurn: (c,e) => {
        c.whoseTurn='computer'
        console.info('turn: computer')
      },
      promptUserToMove: (c,e) => {
        console.info('users turn to go')
      },
    }
  }, {
    guards: {
      isUsersTurn: (context, event) => {
        console.log('in isUsers Turn')
        return context.whoseTurn === 'user';
      },
      isComputersTurn: (context, event) => {
        return context.whoseTurn === 'computer';
      },
      checkForAWin: (context, event) => {
        return context.whoseTurn === 'user';
      },
      checkForATie: (context, event) => {
        return context.whoseTurn === 'computer';
      },      
    }
  }
  
);