This was a late-night forey into trying to improve on MobX-State-Tree's ergonomics and implementation.
MST is pretty good.
type MSTActions = {
[key: string]: Function
}
type MSTViews = {
This was a late-night forey into trying to improve on MobX-State-Tree's ergonomics and implementation.
MST is pretty good.
type MSTActions = {
[key: string]: Function
}
type MSTViews = {
On-stream, February 28, 2022 (https://youtube.infinite.red)
• Network
import { Maze } from "./maze"; | |
const state = { | |
x: 1, | |
y: 1, | |
destX: 1, | |
destY: 1, | |
path: [] | |
}; |
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]] | |
}; |
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]] | |
}; |
// 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! |
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 |
import { Maze } from "./maze"; | |
const Main = document.createElement("main"); | |
Object.assign(Main.style, { | |
backgroundColor: "#602F6B", | |
width: "600px", | |
height: "600px", | |
position: "relative" | |
}); |
function updateHamster() { | |
Object.assign(hamster.style, { | |
left: `${state.x * 30}px`, | |
top: `${state.y * 30}px`, | |
transitionDuration: "0.5s" | |
}); | |
} |
const hamster = document.createElement("div"); | |
Object.assign(hamster.style, { | |
width: "30px", | |
height: "30px", | |
backgroundColor: "#b6102a", | |
borderRadius: "15px", | |
position: "absolute" | |
}); | |
Main.appendChild(hamster); |