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

machine.js

const walk = assign({
  distance: (context, event) => context.distance - 1
});

const ride = assign({
  distance: (context, event) => context.distance - 5
})

const hasArrived = (context, event) => context.distance <= 0;

const tahoeTravelMachine = Machine({
  id: 'tahoe-travel',
  initial: 'walking',
  context: {
    distance: 17
  },
  states: {
    walking: {
      on: {
        WALK: {
          target: 'walking',
          action: 'walk'
        },
        THUMBS_UP: 'hitchhiking',
        ARRIVE: 'arrived'
      }
    },
    hitchhiking: {
      on: {
        PICKED_UP: 'riding',
        PASSED_BY: 'disappointed'
      }
    },
    disappointed: {
      on: {
        WALK: 'walking',
        THUMBS_UP: 'hitchhiking'
      }
    },
    riding: {
      on: {
        RIDE: {
          target: 'riding',
          actions: 'ride'
        },
        CREEPED_OUT: 'disappointed',
        ARRIVED: 'arrived'
      }
    },
    arrived: {
      type: 'final'
    }
  }
}, {
  actions: { walk, ride },
  guards: { hasArrived }
})