From 04150167d93b1cf848bf56e5947b5de5de8605d4 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 7 Jan 2025 22:28:31 +0100
Subject: [PATCH] feat: display every focusable part

---
 index.html |  5 ++++-
 main.ts    | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d276074..df964a5 100644
--- a/index.html
+++ b/index.html
@@ -113,7 +113,7 @@
         </section>
         <section class="stability">
           <ul class="stability-list focusable">
-            <li class="s5s focusable">
+            <li class="5s focusable">
               <!-- <a href="/5s.html">5S</a> -->
               5S
             </li>
@@ -144,6 +144,9 @@
           <code>focus</code>: focus only
           <a href="?focus=pull-system">a part</a> of the TPS. Can be
           <a href="?focus=pull-system&focus=andon&focus=quality">multiple</a>.
+          (Here are all the possible values:
+          <span id="focus-list"></span>
+          )
         </li>
         <li>
           <code>text</code>: <a href="?text=hide">hide</a> text to only have the
diff --git a/main.ts b/main.ts
index 50709d0..c247224 100644
--- a/main.ts
+++ b/main.ts
@@ -2,6 +2,26 @@ const params = new URL(document.location.href).searchParams
 
 const display = params.get('display')
 
+const focusables = document.querySelectorAll('.focusable')
+const focusList = document.querySelector('#focus-list')
+
+if (focusList) {
+  focusables.forEach((focusable, index) => {
+    const a = document.createElement('a')
+    a.textContent = [...focusable.classList]
+      .filter((c) => c !== 'focusable')
+      .join(' ')
+    a.href = `?focus=${a.textContent}`
+    focusList.appendChild(a)
+
+    if (index === focusables.length - 1) {
+      return
+    }
+    const space = document.createTextNode(', ')
+    focusList.appendChild(space)
+  })
+}
+
 if (display === 'house-only') {
   document.querySelectorAll('.hud')?.forEach((hud) => hud.remove())
 }