Add back button

index.html

@@ -13,6 +13,10 @@
       <div id="automaton-collection"></div>
     </div>
     <div id="app" hidden="hidden">
+      <div class="actions">
+        <button id="back-button">Back</button>
+        <a id="controls-button" class="button open-modal" href="#controls">Controls</a>
+      </div>
       <div class="input">
         <input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
         <div id="light"></div>
@@ -20,7 +24,6 @@
       <div class="input">
         <div id="input-buttons"></div>
         <button id="clear-button">Clear</button>
-        <a id="controls-button" class="button open-modal" href="#controls">Controls</a>
       </div>
       <div id="state-graph"></div>
     </div>

src/fsm.js

@@ -9,6 +9,7 @@ const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-bu
 const controlsButton = /** @type {HTMLButtonElement} */ (document.getElementById('controls-button'));
 const clearButton = /** @type {HTMLButtonElement} */ (document.getElementById('clear-button'));
 const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
+const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph'));
 
 /**
  * @param {import('./examples.js').State[]} states
@@ -34,7 +35,9 @@ export function openAutomaton(states, editable = false) {
       console.error(e);
     }
   });
-  const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph'));
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
   container.appendChild(viewer);
   viewer.graph = graph;
 
@@ -83,21 +86,30 @@ export function openAutomaton(states, editable = false) {
     updateUIState();
   }
 
-  // Dynamically create buttons for each letter in the alphabet
   /**
-   * @type {string[]}
+   * Dynamically create buttons for each letter in the alphabet.
    */
-  const alphabet = Array.from(states.reduce((acc, current) => {
-    Object.keys(current.transitions).forEach(current => acc.add(current));
-    return acc;
-  }, new Set())).sort();
-  for (const letter of alphabet) {
-    const button = document.createElement('button');
-    button.innerText = letter;
-    button.addEventListener('click', () => step(letter));
-    buttons.appendChild(button);
+  function createLetters() {
+    /**
+     * @type {string[]}
+     */
+    const alphabet = Array.from(states.reduce((acc, current) => {
+      Object.keys(current.transitions).forEach(current => acc.add(current));
+      return acc;
+    }, new Set())).sort();
+    while (buttons.firstChild) {
+      buttons.removeChild(buttons.firstChild);
+    }
+    for (const letter of alphabet) {
+      const button = document.createElement('button');
+      button.innerText = letter;
+      button.addEventListener('click', () => step(letter));
+      buttons.appendChild(button);
+    }
   }
 
+  createLetters();
+
   // Reacts to input in the text box
   wordInput.addEventListener('input', () => type());
 

src/main.js

@@ -4,6 +4,7 @@ import './modal.ts';
 
 const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
 const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));
+const backButton = /** @type {HTMLButtonElement} */ (document.getElementById('back-button'));
 const app = /** @type {HTMLDivElement} */ (document.getElementById('app'));
 
 for (const [displayName, automaton] of Object.entries(AUTOMATONS)) {
@@ -44,3 +45,8 @@ create.addEventListener('click', () => {
   app.removeAttribute('hidden');
   openAutomaton([], true);
 });
+
+backButton.addEventListener('click', () => {
+  app.setAttribute('hidden', 'hidden');
+  automatonSelector.removeAttribute('hidden');
+});

src/style.css

@@ -199,6 +199,12 @@ th, td {
   display: none;
 }
 
+.actions {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+}
+
 .modal {
   position: fixed;
   display: flex;
@@ -226,7 +232,7 @@ th, td {
     color: #213547;
     background-color: #ffffff;
   }
-  button, .btn {
+  button, .button {
     background-color: #f9f9f9;
   }
   .context-menu {