From cc1da439b231013f7187ddf868941bed99c89616 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Fri, 20 Feb 2026 19:39:38 -0500
Subject: [PATCH] fix detection diagram syntax and switch to manual mermaid
 rendering

Replace diamond {nodes} with rectangles to avoid Mermaid v10 parse
errors, and switch from startOnLoad to explicit mermaid.render() calls
with error display for easier debugging.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 91 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index bd1c257..e8a12bd 100644
--- a/index.html
+++ b/index.html
@@ -435,7 +435,7 @@ flowchart LR
 
       <div class="diagram-wrap">
         <div class="mermaid" id="detection-diagram">
-%%{init: {'theme':'dark','themeVariables':{'background':'#161210','primaryColor':'#211a13','primaryTextColor':'#e8d5b0','primaryBorderColor':'#7a5c18','lineColor':'#9a7e56','secondaryColor':'#2e2318','tertiaryColor':'#1a2840','edgeLabelBackground':'#211a13'}}}%%
+%%{init: {'theme':'dark','themeVariables':{'background':'#161210','primaryColor':'#193a14','primaryTextColor':'#e8d5b0','primaryBorderColor':'#8b6914','lineColor':'#a08060','secondaryColor':'#3e2e06','tertiaryColor':'#1a2840','edgeLabelBackground':'#211a13','clusterBkg':'#211a13'}}}%%
 flowchart TD
 
   classDef obs fill:#193a14,stroke:#3a7c32,color:#b8e8b0
@@ -443,59 +443,50 @@ flowchart TD
   classDef und fill:#3e1a06,stroke:#a04010,color:#f0a868
   classDef unn fill:#300c0c,stroke:#8a1010,color:#f07070
   classDef act fill:#1a2840,stroke:#4080b0,color:#90c0e8
-  classDef dec fill:#201828,stroke:#6040a0,color:#d0c0f0
-  classDef start fill:#2a1f14,stroke:#7a5c18,color:#e8d5b0
+  classDef dec fill:#2a2010,stroke:#806040,color:#d0c0a0
 
-  START(["Start: What can you perceive?"]):::start
-
-  Q1{"Can your precise sense\ndetect the creature?"}:::dec
-  Q2{"Do you know it\nis nearby?"}:::dec
-  Q3{"Do you know\nwhich space?"}:::dec
+  START(["What can you perceive?"]):::dec
+  Q1["Can your precise sense detect it?"]:::dec
+  Q2["Do you know it is nearby?"]:::dec
+  Q3["Do you know which space?"]:::dec
 
   OBS(["OBSERVED
-  — target normally —
-  off-guard? No
-  (if also concealed: DC 5 flat check)"]):::obs
+  Target normally
+  If concealed: DC 5 flat check"]):::obs
 
   HID(["HIDDEN
-  — you know the space —
-  off-guard to you
-  DC 11 flat check before roll
-  Fail = actions wasted, still off-guard"]):::hid
+  You know the space
+  You are off-guard to it
+  DC 11 flat check to target"]):::hid
 
   UND(["UNDETECTED
-  — don't know the space —
-  off-guard to you
-  Pick a square to attack
-  GM secretly rolls flat check + attack
-  Won't reveal why you missed"]):::und
+  You do not know the space
+  You are off-guard to it
+  Guess a square - GM rolls secretly"]):::und
 
   UNN(["UNNOTICED
-  — no idea it exists —
+  No idea it exists
   Cannot target at all"]):::unn
 
-  SEEK["SEEK action
-  Secret Perception roll
-  vs creature's Stealth DC"]:::act
+  SEEK["SEEK
+  Perception vs Stealth DC
+  rolled secretly by GM"]:::act
 
   START --> Q1
-  Q1 -->|"YES — precise sense works"| OBS
-  Q1 -->|"NO"| Q2
-  Q2 -->|"NO"| UNN
-  Q2 -->|"YES"| Q3
-  Q3 -->|"YES — know the space"| HID
-  Q3 -->|"NO — don't know the space"| UND
-
-  HID -->|"Use SEEK"| SEEK
-  UND -->|"Use SEEK"| SEEK
-
-  SEEK -->|"Critical Success"| OBS
-  SEEK -->|"Success
-  (precise sense + creature visible)"| OBS
-  SEEK -->|"Success
-  (imprecise sense or creature invisible)"| HID
-  SEEK -->|"Failure — creature
-  stays at current state"| HID
+  Q1 -->|YES| OBS
+  Q1 -->|NO| Q2
+  Q2 -->|NO| UNN
+  Q2 -->|YES| Q3
+  Q3 -->|YES| HID
+  Q3 -->|NO| UND
+
+  HID -->|Use SEEK| SEEK
+  UND -->|Use SEEK| SEEK
+
+  SEEK -->|Critical Success| OBS
+  SEEK -->|Success precise sense| OBS
+  SEEK -->|Success imprecise or invisible| HID
+  SEEK -->|Failure| HID
         </div>
       </div>
 
@@ -516,12 +507,28 @@ flowchart TD
 
 <script>
   mermaid.initialize({
-    startOnLoad: true,
+    startOnLoad: false,
     theme: 'dark',
     flowchart: { curve: 'basis', padding: 20, useMaxWidth: false },
     securityLevel: 'loose',
   });
 
+  document.addEventListener('DOMContentLoaded', async function() {
+    const diagrams = document.querySelectorAll('.mermaid');
+    for (let i = 0; i < diagrams.length; i++) {
+      const el = diagrams[i];
+      const id = el.id || ('mermaid-' + i);
+      try {
+        const { svg } = await mermaid.render(id + '-svg', el.textContent.trim());
+        el.innerHTML = svg;
+      } catch (e) {
+        console.error('Mermaid error in #' + id + ':', e);
+        el.innerHTML = '<pre style="color:#f07070;font-size:0.75rem;white-space:pre-wrap;padding:12px">' +
+          'Diagram error in #' + id + ':\n' + (e.message || e) + '</pre>';
+      }
+    }
+  });
+
   function showTab(name, btn) {
     document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
     document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));