Add tuto for query strings

2024-05-14 18:45:18 +02:00
parent 1dde2f94ab
commit 0964951354
3 changed files with 37 additions and 10 deletions
--- a/index.css
+++ b/index.css
@@ -131,14 +131,23 @@ li {
  }
 }

-a {
+main a {
  color: var(--color);
  text-decoration: none;
 }

-a:visited,
-a:focus,
-a:focus-visible {
+main a:visited,
+main a:focus,
+main a:focus-visible {
  color: var(--color);
  text-decoration: none;
 }
+
+details.hud {
+  font-size: 16px;
+  margin: 1rem;
+}
+
+details.hud li {
+  text-align: left;
+}
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
    <link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />
  </head>
  <body>
-    <header>
+    <header class="hud">
      <h1 class="thinking-people-system">Thinking People System</h1>
    </header>
    <main>
@@ -118,6 +118,28 @@
        </section>
      </section>
    </main>
+    <details class="hud">
+      <summary>Enablers</summary>
+      <p>
+        You can use the following options to interact with the TPS. It works
+        with the query string. Like so:
+        <a href="https://thinking-people-system.house?size=small"
+          >https://thinking-people-system.house?size=small</a
+        >.
+      </p>
+      <ul>
+        <li>
+          <code>display</code>: display without any HUD with the option
+          <code>house-only</code>
+        </li>
+        <li><code>size</code>: can be <code>small</code></li>
+        <li>
+          <code>focus</code>: focus only a part of the TPS. Can be multiple.
+        </li>
+        <li><code>text</code>: hide text to only have the house</li>
+        <li><code>scroll</code>: scroll to the <code>end</code></li>
+      </ul>
+    </details>
    <script type="module" src="main.ts"></script>
  </body>
 </html>
--- a/main.ts
+++ b/main.ts
@@ -1,13 +1,9 @@
-type TPSSearchParams = {
-  display?: 'house-only' | 'full'
-}
-
 const params = new URL(document.location.href).searchParams

 const display = params.get('display')

 if (display === 'house-only') {
-  document.querySelector('header')?.remove()
+  document.querySelectorAll('.hud')?.forEach((hud) => hud.remove())
 }

 const size = params.get('size')