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 fetchMachine = Machine({
    id: 'match',
    initial: 'idle',
    context: {
      serves: 0,
      winner: null,
      playerA: {
        score: 0
      },
      playerB: {
        score: 0
      }
    },
    states: {
     idle: {
      
       on: {
        START: 'start'
      }
     },
     start: {
       on: {
        '': 'play'
      }
     },
     play: {
      
  
    
         
         on: {
        'AWARD': [
          { target: 'awarding', cond: 'isStillPlaying' },
          { target: 'end', cond: 'isWinner' },
      
        ]
      
      
 
      }
     },
     awarding: {
        exit: ['awardPoint'],
       '': 'play'
     },
     end: {
        type: 'final'
     }
    }
  },
  {
    actions: {
      // action implementation
      alertGreen: (context, event) => {
        alert('Green!');
      },
      awardPoint: () => {},
      updateServers: (context) => {
        context.serves++
      }
    },
    activities: {
      /* ... */
    },
  
       guards: {
    isWinner:   (context) => {
      return context.playerA.score >=21
    },
    isStillPlaying: (context) => {
      return context.playerA.score < 21 || context.playerB.score < 21 
    },
       },
    services: {
      /* ... */
    }
  });