Move the graph visualization behind a button

index.html

@@ -17,7 +17,8 @@
         <button id="back-button" data-i18n>Back</button>
         <a id="controls-button" class="button open-modal" href="#controls" data-i18n>Controls</a>
       </div>
-      <div class="input current-word">
+      <h2 id="current-word"></h2>
+      <div class="input">
         <input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
         <div id="light"></div>
       </div>
@@ -25,7 +26,10 @@
         <div id="input-buttons"></div>
         <button id="clear-button" data-i18n>Clear</button>
       </div>
-      <div id="state-graph"></div>
+      <div class="player">
+        <div id="state-graph" class="blurred"></div>
+        <button id="display-graph" data-i18n>Display representation</button>
+      </div>
     </div>
     <div id="controls" class="modal" hidden="hidden">
       <div class="modal-content">

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[]}

src/i18n.ts

@@ -29,6 +29,7 @@ const fr = {
   'Create a new automaton from scratch.': 'Créer un nouvel automate à partir de zéro.',
   'Start': 'Début',
   'Accepting': 'Acceptant',
+  'Display representation': 'Afficher la représentation',
 };
 type TranslationKey = keyof typeof fr;
 

src/main.js

@@ -22,7 +22,7 @@ for (const [displayName, automaton] of Object.entries(AUTOMATONS)) {
   const handleEvent = () => {
     automatonSelector.setAttribute('hidden', 'hidden');
     app.removeAttribute('hidden');
-    openAutomaton(automaton);
+    openAutomaton(trUserContent(displayName), automaton);
   };
   card.addEventListener('click', handleEvent);
   card.addEventListener('keydown', (event) => {
@@ -44,7 +44,7 @@ automatonCollection.appendChild(create);
 create.addEventListener('click', () => {
   automatonSelector.setAttribute('hidden', 'hidden');
   app.removeAttribute('hidden');
-  openAutomaton([], true);
+  openAutomaton('', [], true);
 });
 
 backButton.addEventListener('click', () => {

src/style.css

@@ -39,8 +39,9 @@ h1 {
   justify-content: center;
   margin-bottom: 0.5em;
 }
-.current-word {
+#current-word {
   padding-top: 2rem;
+  text-align: center;
 }
 input {
   padding: 0.3em 0.5em;
@@ -114,9 +115,23 @@ button:focus-visible {
   background-color: #3a3a3a;
 }
 
+.blurred {
+  filter: blur(32px);
+}
+.player {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 #state-graph {
   flex-grow: 1;
 }
+#display-graph {
+  position: absolute;
+  align-self: center;
+}
 
 .link {
   stroke: orange;