Add example

AlexandreKavalerski · Jul 7, 2020 · 799ec6d · 799ec6d
1 parent b8f6c68
commit 799ec6d
Show file tree

Hide file tree

Showing 2 changed files with 177 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A Star Puzzle Solver - Example 01</title>
+    <script src="../lib/a-star-puzzle-solver.umd.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+</head>
+<body>
+
+    <div class="container">
+        <div class="col">
+            <div class="row">
+
+                <div class="col-md-4 table-responsive">
+                    <table class="table table-bordered">
+                        <tr>
+                            <td class="text-center td-puzzle"></td>
+                            <td class="text-center td-puzzle"></td>
+                            <td class="text-center td-puzzle"></td>
+                        </tr>
+                        <tr>
+                            <td class="text-center td-puzzle"></td>
+                            <td class="text-center td-puzzle"></td>
+                            <td class="text-center td-puzzle"></td>
+                        </tr>
+                        <tr>
+                            <td class="text-center td-puzzle"></td>
+                            <td class="text-center td-puzzle"></td>
+                            <td class="text-center td-puzzle"></td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="row">
+                <div class="container align-center">
+                    <button type="button" name="btnRandomize" id="btnRandomize" class="btn btn-outline" btn-lg btn-block>Gerar aleatório</button>
+                    <button type="button" name="btnSolution" id="btnSolution" class="btn btn-primary">Solucionar</button>
+                </div>
+            </div>
+
+            <div class="row">
+                <ul id="results">
+                </ul>
+            </div>
+
+            <div class="row">
+                <div id="viewSolution">
+                    <table class="table table-bordered tb-solution">
+
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1,112 @@
+$(document).ready(function () {
+  const initialState = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+  initialState.sort((a, b) => Math.random() - Math.random());
+
+  renderTDList(initialState);
+  $("#btnRandomize").on("click", function () {
+    randomState();
+  });
+
+  $("#btnSolution").on("click", function () {
+    getSolution();
+  });
+});
+
+function renderTDList(stateList) {
+  console.log("rendering...");
+  console.log(stateList);
+
+  const list = $("td.td-puzzle");
+  let pos = 0;
+  for (let td of list) {
+    $(td).html(stateList.shift());
+    pos++;
+  }
+}
+
+function getActualState() {
+  const list = $("td.td-puzzle");
+  let state = [[], [], []];
+  const stateList = [];
+  for (let td of list) {
+    stateList.push($(td).text());
+  }
+
+  for (let i in stateList) {
+    if (i <= 2) {
+      state[0].push(Number(stateList[i]));
+    } else if (i <= 5) {
+      state[1].push(Number(stateList[i]));
+    } else {
+      state[2].push(Number(stateList[i]));
+    }
+  }
+  return state;
+}
+
+function getSolution() {
+  const aStar = AStarPuzzleSolver;
+  const state = getActualState();
+  console.log(state);
+  const solution = aStar.solvePuzzle(state);
+  showResults(solution);
+  viewSolution(solution);
+}
+
+function showResults(solution) {
+  const markup = `
+  <li>Problema resolvido!</li>
+  <li>Custo final: ${solution.evaluationFunctionValue.g}</li>
+  <li>Nós expandidos: ?</li>
+  <li>Início da fronteira: ?</li>
+  `;
+
+  $("#results").html(markup);
+}
+
+async function viewSolution(solution) {
+  // const markup = `
+  // `;
+
+  let states = getListOfStates(solution, []);
+  awaitsToRender(states);
+
+  // $("#solution").html(markup);
+}
+
+function timer(ms) {
+  return new Promise((res) => setTimeout(res, ms));
+}
+
+async function awaitsToRender(states) {
+  for (let s of states) {
+    console.log(s);
+    await timer(1200);
+    renderTDList(transformStateInArray(s));
+  }
+}
+
+function transformStateInArray(state) {
+  let array = [];
+  for (let l in state) {
+    for (let c in state[l]) {
+      array.push(state[l][c]);
+    }
+  }
+  return array;
+}
+
+function getListOfStates(node, list) {
+  if (node.previousNode) {
+    list.unshift(node.state);
+    return getListOfStates(node.previousNode, list);
+  } else {
+    return list;
+  }
+}
+
+function randomState() {
+  state = [1, 2, 3, 4, 5, 6, 7, 8, 0];
+  state.sort((a, b) => Math.random() - Math.random());
+  renderTDList(state);
+}