Transition Table

index.html

@@ -130,8 +130,28 @@ <h1 class="select-none">Automata Simulation</h1>
             <i class="fa-solid fa-play"></i>
             Run
           </button>
+
         </div>
 
+
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-24">
+  <table id="table" class="w-full text-sm text-left text-gray-500 dark:text-black-400">
+      <thead class="text-xs text-gray-700 dark:text-black-400">
+          <tr>
+              <th scope="col" class="px-6 py-3 bg-gray-300">
+                  States
+              </th>
+          </tr>
+      </thead>
+      <tbody id="body">
+          <tr>
+          </tr>
+      </tbody>
+  </table>
+</div>
+
+
+
         <div class="mt-4">
           <p><span id="out"></span></p>
           <p class="mt-2 text-xl" id="string-out"></p>
@@ -338,5 +358,6 @@ <h3 class="text-2xl font-bold mb-2">Collaborate</h3>
     </div>
 
     <script src="src/main.js" type="module"></script>
+    <script src="src/afd.js" type="module"></script>
   </body>
 </html>

src/afd.js

@@ -1,9 +1,17 @@
 import { animateNode, renderError, renderOut } from "./animateNode.js";
+const header = document.querySelector("#table thead tr");
 
 function verifyAFD(paper, graph, automata, string) {
   let i = 0;
   let state = automata.initialState;
   let symbol = string[i];
+  const tableResult = document.getElementById("table");
+  const principalRow = document.getElementById("body");
+  const statesSaved = new Set();
+  const statesIndex = new Array();
+  const row = document.querySelector("tbody");
+  row.innerHTML = "";
+  reload(tableResult);
 
   const interval = setInterval(() => {
     animateNode(
@@ -36,9 +44,69 @@ function verifyAFD(paper, graph, automata, string) {
       (el) => el.state === state && el.symbol.includes(symbol)
     );
 
+
+    if (symbol[0] && !statesSaved.has(isState.symbol[0])) {
+
+      statesIndex.push(isState.symbol[0]);
+      const column = document.createElement("th");
+      column.textContent = isState.symbol[0];
+      column.classList.add("px-6", "py-3", "bg-gray-300");
+
+
+      statesSaved.add(isState.symbol[0]);
+
+      header.appendChild(column);
+      tableResult.appendChild(header);
+    }
+
+    if (!statesSaved.has(isState.state)) {
+      statesSaved.add(isState.state);
+
+
+      const newRow = document.createElement("tr");
+      const newRowState = document.createElement("th");
+      newRowState.textContent = isState.state;
+      newRowState.classList.add(
+        "px-6",
+        "py-4",
+        "font-medium",
+        "text-gray-900",
+        "whitespace-nowrap"
+      );
+
+      newRow.appendChild(newRowState);
+
+      const nextState = document.createElement("th");
+      nextState.textContent = isState.nextState; 
+      nextState.classList.add(
+        "px-6",
+        "py-4",
+        "font-medium",
+        "text-gray-900",
+        "whitespace-nowrap"
+      );
+      let index = statesIndex.indexOf(isState.symbol[0]);
+      while (index > 0) {
+        const nextState = document.createElement("th");
+        nextState.textContent = "{}"; 
+        nextState.classList.add(
+          "px-6",
+          "py-4",
+          "font-medium",
+          "text-gray-900",
+          "whitespace-nowrap"
+        );
+        newRow.appendChild(nextState);
+        index--;
+      }
+
+      newRow.appendChild(nextState);
+      principalRow.appendChild(newRow);
+      tableResult.appendChild(principalRow);
+    }
+
     if (!isState) {
       clearInterval(interval);
-
       renderOut("INVALID");
       return;
     }
@@ -50,3 +118,14 @@ function verifyAFD(paper, graph, automata, string) {
 }
 
 export { verifyAFD };
+
+
+function reload(tableResult){
+  header.innerHTML = "";
+  const column = document.createElement("th");
+  column.textContent = "States";
+  column.classList.add("px-6", "py-3", "bg-gray-300");
+  header.appendChild(column);
+  tableResult.appendChild(header);
+};
+

src/main.js

@@ -16,7 +16,7 @@ const inputLabel = document.querySelector("#input-label-name");
 const inputState = document.querySelector("#input-state-name");
 const btnClearAll = document.querySelector("#btn-clear-all");
 const btnDownload = document.querySelector("#btn-download");
-
+const header = document.querySelector("#table thead tr");
 const automata = createAutomata();
 
 function run() {
@@ -28,6 +28,13 @@ function run() {
   const string = inputString.value;
   const statesArr = [];
   const transitions = {};
+  const tableResult = document.getElementById("table");
+
+  const principalRow = document.getElementById("body");
+  const row = document.querySelector("tbody");
+  const symbolIndex = new Array();
+
+
 
   // clear errors
   renderError(null);
@@ -84,7 +91,109 @@ function run() {
   automata.finalStates = finalStates;
   automata.transitions = transitions;
 
-  console.log(automata);
+
+
+
+
+  //Transition table
+  row.innerHTML = "";
+  reload(tableResult, header);
+
+  //console.log(automata.alphabet);
+  automata.alphabet.forEach((x) => {
+    if(symbolIndex.indexOf(x) == -1){
+    symbolIndex.push(x);
+    const column = document.createElement("th");
+    column.textContent = x;
+    column.classList.add("px-6", "py-3", "bg-gray-300");
+    header.appendChild(column);
+    tableResult.appendChild(header);
+    }
+  });
+
+  let index = 0;
+
+
+  //Add States in a Row
+  //automata.states.forEach((x) => {
+    for(let i = 0; i < automata.states.length; i++){
+    const newRow = document.createElement("tr");
+    const newRowState = document.createElement("th");
+    newRowState.textContent = automata.states[i];
+    newRowState.classList.add(
+      "px-6",
+      "py-4",
+      "font-medium",
+      "text-gray-900",
+      "whitespace-nowrap"
+    );
+
+    //State in column State
+    newRow.appendChild(newRowState);
+    const infoStates = []
+
+
+    //Get nextState
+    const states =  Object.values(automata.transitions);
+    console.log(states[index], index);
+    let stateNumber = states[index].length;
+
+    //Iterate States
+    let elements;
+
+
+    for(let i=0; i < stateNumber; i++){
+      let info = states[index][i][0];
+      console.log("Info", info);
+      let found = symbolIndex.indexOf(states[index][i][1]);
+      console.log("Simbolo", states[index][i][1]);
+      //console.log("Simbolo ", found);
+      if(infoStates[found]){
+        infoStates[found] += "," + info;
+        elements = infoStates[found];
+      }else{
+        infoStates[found] = info;
+      }
+      }
+
+      if(elements){automata.states.push(elements);}
+      //console.log("Elementos", elements)
+
+      index++;
+
+      let count = 0;
+      infoStates.forEach((x) => {
+      const newRowState1 = document.createElement("th");
+      newRowState1.textContent = x;
+      newRowState1.classList.add(
+        "px-6",
+        "py-4",
+        "font-medium",
+        "text-gray-900",
+        "whitespace-nowrap"
+      );
+
+      let size = infoStates.length;
+      let indexState = infoStates.indexOf(x);
+      console.log(x);
+      while (size--) {
+        const aux = document.createElement("th");
+        if(count == indexState){
+          newRow.appendChild(newRowState1);
+          count++;
+          break;
+        }else{
+          newRow.appendChild(aux);
+        }
+        count++;
+      }
+      principalRow.appendChild(newRow);
+      tableResult.appendChild(principalRow);
+    });
+   // });
+  }
+
+
 
   renderOut("Loading ...");
   renderOutString(string);
@@ -122,6 +231,15 @@ function changeStateName() {
   MicroModal.close("modal-state-name");
 }
 
+function reload(tableResult, header){
+  header.innerHTML = "";
+  const column = document.createElement("th");
+  column.textContent = "States";
+  column.classList.add("px-6", "py-3", "bg-gray-300");
+  header.appendChild(column);
+  tableResult.appendChild(header);
+};
+
 window.addEventListener("DOMContentLoaded", () => {
   MicroModal.init();
   Split(["#paper", "#split-1"], { sizes: [80, 20], minSize: 300 });