jamonholmgren

import { Maze } from "./maze";

const state = {
  x: 1,
  y: 1,
  destX: 1,
  destY: 1,
  path: []
};

jamonholmgren

import { Maze } from "./maze";

const state = {
  x: 1,
  y: 1,
  destX: 1,
  destY: 1,
  path: [[1, 2], [2, 2], [3, 2], [3, 1], [4, 1], [5, 1], [5, 2]]
};

jamonholmgren

import { Maze } from "./maze";

const state = {
  x: 1,
  y: 1,
  destX: 1,
  destY: 1,
  path: [[1, 2], [2, 2], [3, 2], [3, 1], [4, 1], [5, 1], [5, 2]]
};

jamonholmgren

  // did we find the destination?
  if (lowestCostNode.x === state.destX && lowestCostNode.y === state.destY) {
    // retrace our steps back to the beginning!
    function retrace(node, path) {
      // did we find the origin? if so, we're done!
      if (node.previous === undefined) return [node, ...path]
      // not yet ... let's keep retracing our steps
      return retrace(node.previous, [ node, ...path ])
    }
    // kick off the retracing!

jamonholmgren

function exploreNodes(nodes, exploredNodes) {
  if (nodes.length === 0) return

  // sort nodes by cost
  nodes.sort((a, b) => a.cost < b.cost ? -1 : 0)

  // remove the lowest cost node from the list
  const lowestCostNode = nodes.shift()

  // add it to the explored nodes

jamonholmgren

import { Maze } from "./maze";

const Main = document.createElement("main");
Object.assign(Main.style, {
  backgroundColor: "#602F6B",
  width: "600px",
  height: "600px",
  position: "relative"
});

jamonholmgren

function updateHamster() {
  Object.assign(hamster.style, {
    left: `${state.x * 30}px`,
    top: `${state.y * 30}px`,
    transitionDuration: "0.5s"
  });
}

jamonholmgren

const hamster = document.createElement("div");
Object.assign(hamster.style, {
  width: "30px",
  height: "30px",
  backgroundColor: "#b6102a",
  borderRadius: "15px",
  position: "absolute"
});
Main.appendChild(hamster);

jamonholmgren

/* eslint-disable no-sparse-arrays */
const W = "wall";

// prettier-ignore
export const Maze = [
  [ W, W, W, W, W, W, W, W, W, W, W, W, W, W, W, W, W, W, W, W ],
  [ W,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , W ],
  [ W,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , W ],
  [ W,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , W ],
  [ W,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  ,  , W ],

jamonholmgren

import { types, flow } from "mobx-state-tree"
import Api from '...'

export const UserStore = types.model({
  user: types.reference(User),
  fetchStatus: types.enumeration(["success", "pending", "error"])
})
.actions(store => ({
  fetchUser: flow(function* (id) {
    store.fetchStatus = "pending"