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 initial = {
  "x": 0,
  "y": 0,
  "maxX": 5,
  "maxY": 5,
  "moves": 20,
  "cells": {
    "0": {
      "0": {
        "type": "start"
      },
      "1": {
        "type": "floor"
      },
      "2": {
        "type": "floor"
      },
      "3": {
        "type": "floor"
      },
      "4": {
        "type": "floor"
      }
    },
    "1": {
      "0": {
        "type": "wall"
      },
      "1": {
        "type": "wall"
      },
      "2": {
        "type": "wall"
      },
      "3": {
        "type": "floor"
      },
      "4": {
        "type": "floor"
      }
    },
    "2": {
      "0": {
        "type": "floor"
      },
      "1": {
        "type": "floor"
      },
      "2": {
        "type": "floor"
      },
      "3": {
        "type": "floor"
      },
      "4": {
        "type": "wall"
      }
    },
    "3": {
      "0": {
        "type": "floor"
      },
      "1": {
        "type": "wall"
      },
      "2": {
        "type": "wall"
      },
      "3": {
        "type": "wall"
      },
      "4": {
        "type": "finish"
      }
    },
    "4": {
      "0": {
        "type": "floor"
      },
      "1": {
        "type": "floor"
      },
      "2": {
        "type": "floor"
      },
      "3": {
        "type": "floor"
      },
      "4": {
        "type": "floor"
      }
    }
  }
}
  
const decreaseMoves = assign({
  movesLeft: ({ movesLeft }) => movesLeft - 1
});
const assignUp = assign({
  y: ({y}) => y - 1,
});
const assignDown = assign({
  y: ({y}) => y + 1
});
const assignLeft = assign({
  x: ({x}) => x - 1
});
const assignRight = assign({
  x: ({x}) => x + 1
});

const won = ({x, y, cells}) => (cells[y][x]?.type === 'finish');
const loose = ({ movesLeft }) => movesLeft === 0;

const isWalkable = ({ cells }) => (x, y) => (cells[y][x]?.type !== 'wall');

const canMoveUp = (context) => context.y > 0 && isWalkable(context)(context.x, context.y - 1);
const canMoveDown = (context) => context.y < context.maxY - 1 && isWalkable(context)(context.x, context.y + 1);
const canMoveLeft = (context) => context.x > 0 && isWalkable(context)(context.x - 1, context.y);
const canMoveRight = (context) => context.x < context.maxX - 1 && isWalkable(context)(context.x + 1, context.y);

const reset = assign({
  x: () => initial.x,
  y: () => initial.y,
  movesLeft: () => initial.moves,
});

Machine({
  initial: "playing",
  context: {
    movesLeft: initial.moves,
    x: initial.x,
    y: initial.y,
    maxX: initial.maxX,
    maxY: initial.maxY,
    cells: initial.cells
  }, 
  states: {
    playing: {
      on: {
        MOVE_UP: { cond: canMoveUp, actions: assignUp, target: "moving" },
        MOVE_DOWN: { cond: canMoveDown, actions: assignDown, target: "moving" },
        MOVE_LEFT: { cond: canMoveLeft, actions: assignLeft, target: "moving" },
        MOVE_RIGHT: { cond: canMoveRight, actions: assignRight, target: "moving" },
        RESET: { actions: reset, target: "playing" },
      }
    },
    moving: {
      entry: decreaseMoves,
      on: {
        '': [
          { target: 'win', cond: won },
          { target: 'loss', cond: loose },
          { target: 'playing' }
        ] 
      }
    },
    win: {
      on: {
        RESET: {
          actions: reset,
          target: "playing",
        }
      }
    },
    loss: {
      on: {
        RESET: {
          actions: reset,
          target: "playing",
        }
      }
    }
  }
})