Update example

AlexandreKavalerski · Jul 7, 2020 · 525f6ad · 525f6ad
1 parent 2691bf7
commit 525f6ad
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 41 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -6,13 +6,13 @@
     <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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha512-xA6Hp6oezhjd6LiLZynuukm80f8BoZ3OpcEYaqKoCV3HKQDrYjDE1Gu8ocxgxoXmwmSzM4iqPvCsOkQNiu41GA==" 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>
@@ -32,6 +32,12 @@
                         </tr>
                     </table>
                 </div>
+                <div class="align-middle" id="operations">
+                    <i id="MOVE_UP_OPERATION" hidden class="operation-item fas fa-arrow-up"></i>
+                    <i id="MOVE_RIGHT_OPERATION" hidden class="operation-item fas fa-arrow-right"></i>
+                    <i id="MOVE_DOWN_OPERATION" hidden class="operation-item fas fa-arrow-down"></i>
+                    <i id="MOVE_LEFT_OPERATION" hidden class="operation-item fas fa-arrow-left"></i>
+                </div>
             </div>
             <div class="row">
                 <div class="container align-center">
@@ -44,14 +50,6 @@
                 <ul id="results">
                 </ul>
             </div>
-
-            <div class="row">
-                <div id="viewSolution">
-                    <table class="table table-bordered tb-solution">
-
-                    </table>
-                </div>
-            </div>
         </div>
     </div>
 
@@ -60,6 +58,8 @@
     <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js" integrity="sha512-M+hXwltZ3+0nFQJiVke7pqXY7VdtWW2jVG31zrml+eteTP7im25FdwtLhIBTWkaHRQyPrhO2uy8glLMHZzhFog==" crossorigin="anonymous"></script>
+
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/examples/index.js b/examples/index.js
@@ -1,5 +1,5 @@
 $(document).ready(function () {
-  const initialState = [4, 5, 8, 0, 1, 6, 7, 2, 3];
+  const initialState = [1, 8, 2, 0, 4, 3, 7, 6, 5];
 
   renderTDList(initialState);
   $("#btnRandomize").on("click", function () {
@@ -25,56 +25,44 @@ function renderTDList(stateList) {
 
 function getActualState() {
   const list = $("td.td-puzzle");
-  let state = [[], [], []];
   const stateList = [];
   for (let td of list) {
-    stateList.push($(td).text());
+    stateList.push(Number($(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;
+  return stateList;
 }
 
 function getSolution() {
-  const aStar = AStarPuzzleSolver;
   const state = getActualState();
-  console.log(state);
   try {
-    const solution = aStar.solvePuzzle(state);
-    showResults(solution);
-    viewSolution(solution);
+    const result = AStarPuzzleSolver.solvePuzzle(state);
+
+    showResults(result);
+    viewSolution(result);
   } catch (err) {
-    alert(
-      "O estado inicial é solucionável! Por favor, gere outro estado e tente novamente."
-    );
+    alert(err);
   }
 }
 
-function showResults(solution) {
+function showResults(result) {
   const markup = `
   <li>Problema resolvido!</li>
-  <li>Custo final: ${solution.evaluationFunctionValue.g}</li>
-  <li>Nós expandidos: ?</li>
-  <li>Início da fronteira: ?</li>
+  <li>Custo do caminho: ${result.pathCost}</li>
+  <li>Nós expandidos: ${result.expandedNodes}</li>
+  <li>Iterações: ${result.iterations}</li>
   `;
 
   $("#results").html(markup);
 }
 
-async function viewSolution(solution) {
+async function viewSolution(result) {
   // const markup = `
   // `;
 
-  let states = getListOfStates(solution, []);
-  awaitsToRender(states);
+  const states = result.solution.map((s) => s.state);
+  const operations = result.solution.map((s) => s.operation);
+  awaitsToRender(states, operations);
 
   // $("#solution").html(markup);
 }
@@ -83,14 +71,19 @@ function timer(ms) {
   return new Promise((res) => setTimeout(res, ms));
 }
 
-async function awaitsToRender(states) {
-  for (let s of states) {
-    console.log(s);
+async function awaitsToRender(states, operations) {
+  for (let i in states) {
     await timer(1200);
-    renderTDList(transformStateInArray(s));
+    renderTDList(states[i]);
+    showOperation(operations[i]);
   }
 }
 
+function showOperation(op) {
+  $(".operation-item").attr("hidden", "");
+  $(`#MOVE_${op}`).removeAttr("hidden");
+}
+
 function transformStateInArray(state) {
   let array = [];
   for (let l in state) {