Move the graph visualization behind a button

src/fsm.js

@@ -4,18 +4,21 @@ import { createGraph, createStateList } from './editor/mapper.ts';
 const IS_VALID = 'is-valid';
 const IS_INVALID = 'is-invalid';
 
+const currentWord = /** @type {HTMLInputElement} */ (document.getElementById('current-word'));
 const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
 const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons'));
 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'));
+const displayGraphButton = /** @type {HTMLButtonElement} */ (document.getElementById('display-graph'));
 
 /**
+ * @param {string} name
  * @param {import('./examples.js').State[]} states
  * @param {boolean} [editable]
  */
-export function openAutomaton(states, editable = false) {
+export function openAutomaton(name, states, editable = false) {
   let state = findStart(states);
   let builder = '';
 
@@ -23,8 +26,12 @@ export function openAutomaton(states, editable = false) {
   viewer.readonly = !editable;
   if (editable) {
     controlsButton.removeAttribute('hidden');
+    container.classList.remove('blurred');
+    displayGraphButton.setAttribute('hidden', 'hidden');
   } else {
     controlsButton.setAttribute('hidden', 'hidden');
+    container.classList.add('blurred');
+    displayGraphButton.removeAttribute('hidden');
   }
   const graph = createGraph(states);
   viewer.addEventListener('change', () => {
@@ -41,6 +48,7 @@ export function openAutomaton(states, editable = false) {
   }
   container.appendChild(viewer);
   viewer.graph = graph;
+  currentWord.innerText = name;
 
   /**
    * Updates the UI to reflect the current state.
@@ -131,6 +139,11 @@ export function openAutomaton(states, editable = false) {
   updateUIState();
 }
 
+displayGraphButton.addEventListener('click', () => {
+  container.classList.remove('blurred');
+  displayGraphButton.setAttribute('hidden', 'hidden');
+});
+
 /**
  * @param {import('./examples.js').State[]} states
  * @returns {number[]}