From 4502e2406d4dbb4c6d354673c789679c65e19bd0 Mon Sep 17 00:00:00 2001
From: Ein Anderssono <einand@3gdev.com>
Date: Wed, 14 Oct 2026 22:49:18 +0200
Subject: [PATCH] Add multisensory accessible place details

---
 README.md                 |  2 ++
 index.html                | 26 +++++++++++++++++++++++++-
 scripts/check-frontend.sh |  5 +++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bad475e..24fbb16 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ This repository contains the static Swedish web client for the AI-driven life si
 
 Players provide a character biography, not a world description. The client asks the backend to create a biography-based starting place. It does not preview a person the player may meet; encounters belong to later world exploration.
 
+Place descriptions are available as text with separate visual, sound, smell, air/temperature, touch/surface, and spatial-orientation cues so important scene information does not depend on sight. The current product has no image input or image interpretation flow; these cues are generated as part of the place proposal.
+
 The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`. The ingress routes `/` to this frontend service and routes `/api`, `/version`, and `/health` to the Rust service. That keeps the current server-side session cookie same-origin and avoids browser CORS configuration.
 
 ## Release flow
diff --git a/index.html b/index.html
index 0bcf42f..9a90ceb 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,9 @@
     button { justify-self: start; cursor: pointer; }
     #status { min-height: 1.5em; }
     .card { border: 1px solid; border-radius: .5rem; padding: 1rem; margin-block: 1rem; }
+    dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .35rem 1rem; }
+    dt { font-weight: 700; }
+    dd { margin: 0; }
     .row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
     .row button { margin-block: .4rem; }
     #transcript { min-height: 5rem; max-height: 28rem; overflow: auto; }
@@ -52,9 +55,18 @@
       <button id="start-world-button" type="button">Börja spela</button>
     </section>
     <section id="game" hidden>
-      <div class="row"><h2 id="world-heading"></h2><button id="logout" type="button">Logga ut</button></div>
+      <div class="row"><h2 id="world-heading" tabindex="-1"></h2><button id="logout" type="button">Logga ut</button></div>
       <section class="card" aria-labelledby="place-heading">
         <h3 id="place-heading"></h3><p id="place-description"></p>
+        <h4>Platsens sinnesintryck</h4>
+        <dl>
+          <dt>Synintryck</dt><dd id="sense-visual"></dd>
+          <dt>Ljud</dt><dd id="sense-sound"></dd>
+          <dt>Dofter</dt><dd id="sense-smell"></dd>
+          <dt>Luft och temperatur</dt><dd id="sense-air"></dd>
+          <dt>Beröring och ytor</dt><dd id="sense-touch"></dd>
+          <dt>Orientering i rummet</dt><dd id="sense-orientation"></dd>
+        </dl>
         <p id="place-status" role="status"></p>
         <h3 id="npc-heading"></h3><p id="npc-description"></p>
         <h3 id="player-heading"></h3><p id="player-biography"></p>
@@ -126,8 +138,20 @@
       auth.hidden = true; characterSection.hidden = true; game.hidden = false;
       worldSetup.hidden = true;
       document.querySelector('#world-heading').textContent = world.name;
+      document.querySelector('#world-heading').focus();
       document.querySelector('#place-heading').textContent = world.location.name;
       document.querySelector('#place-description').textContent = world.location.description;
+      const senses = world.location.senses ?? {};
+      for (const [id, key] of [
+        ['sense-visual', 'visual'],
+        ['sense-sound', 'sound'],
+        ['sense-smell', 'smell'],
+        ['sense-air', 'air_and_temperature'],
+        ['sense-touch', 'touch_and_surfaces'],
+        ['sense-orientation', 'spatial_orientation'],
+      ]) {
+        document.querySelector(`#${id}`).textContent = senses[key] || 'Inget särskilt intryck beskrivet.';
+      }
       const conversation = document.querySelector('#conversation-card');
       if (world.npc) {
         document.querySelector('#npc-heading').textContent = world.npc.name;
diff --git a/scripts/check-frontend.sh b/scripts/check-frontend.sh
index f812e85..71a3622 100755
--- a/scripts/check-frontend.sh
+++ b/scripts/check-frontend.sh
@@ -9,6 +9,11 @@ grep -q "request('/version')" index.html
 grep -q 'id="api-version"' index.html
 grep -Fq "credentials: 'same-origin'" index.html
 grep -q 'Köp på platsen' index.html
+grep -q 'Platsens sinnesintryck' index.html
+grep -q 'Orientering i rummet' index.html
+grep -q "'sense-sound', 'sound'" index.html
+grep -q 'id="world-heading" tabindex="-1"' index.html
+grep -q "document.querySelector('#world-heading').focus()" index.html
 grep -q "request('/api/purchases'" index.html
 grep -q "request('/api/world/start'" index.html
 if grep -Eq 'world/draft|npc_name|Person du kan möta|Beskriv vad du vill börja med' index.html; then