From ead7f09aad6e5814ce5439d1ac1373ac35c5aa43 Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Tue, 6 Feb 2024 22:24:56 +0100
Subject: [PATCH] Add back button

---
 index.html    |  5 ++++-
 src/fsm.js    | 36 ++++++++++++++++++++++++------------
 src/main.js   |  6 ++++++
 src/style.css |  8 +++++++-
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 6baa8c6..175eea5 100644
--- a/index.html
+++ b/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>
diff --git a/src/fsm.js b/src/fsm.js
index 568b712..0d382eb 100644
--- a/src/fsm.js
+++ b/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());
 
diff --git a/src/main.js b/src/main.js
index e5ae8bd..1a1bafb 100644
--- a/src/main.js
+++ b/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');
+});
diff --git a/src/style.css b/src/style.css
index aec9a20..d44e4e3 100644
--- a/src/style.css
+++ b/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 {