JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://nervgh.github.io/sandbox/state-space/heuristic/dist/bundle.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<div class="container" id="demo">
<div class="row">
<div class="col-12">
<ul class="list-group">
<li v-repeat="node : way" class="list-group-item">
<h4 v-text="$index + 1"></h4>
<table class="table table-bordered" style="width:100px;">
<tr v-repeat="row : node.__matrix.__private">
<td v-repeat="cell : row" v-class="{active: !cell}">
<span v-text="cell"></span>
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
JavaScript
// src https://github.com/nervgh/nervgh.github.io/tree/master/sandbox/state-space
var namespace = window.TEST; // from bundle.js
var RecursiveBestFirstSearchIterator = namespace.RecursiveBestFirstSearchIterator;
var Matrix = namespace.Matrix;
var Node = namespace.Node;
var root = new Node('root', 0, new Matrix([
// [1, 2, 3],
// [4, 5, 6],
// [7, undefined, 8]
[7, 2, 4],
[5, undefined, 6],
[8, 3, 1]
]));
function searchFirstBestRecursive(root) {
var counter = 0;
var goal;
for(var item of new RecursiveBestFirstSearchIterator(root)) {
var node = item.node;
if (node.getCostToGoal() === 0) {
goal = node;
break;
}
if (counter === 1e4) {
break;
}
counter++;
//console.log(node, node.evaluate(), counter);
}
return goal;
}
function getWay(node) {
var stack = [];
while(node) {
stack.push(node);
node = node.parentNode;
}
return stack.reverse();
}
var target = searchFirstBestRecursive(root);
var way = getWay(target);
new Vue({
el: '#demo',
data: {
way: way
}
})