working for, now writing

00_aMeta/toolz/CYOA/Dockerfile.echobox

@@ -9,9 +9,9 @@ RUN groupadd --gid 1000 flammenderberg && \
     useradd --uid 1000 --gid flammenderberg --shell /bin/bash --create-home hexenmeister
 
 WORKDIR /weltraum
-RUN mkdir stories && mkdir export
+RUN mkdir stories && mkdir export && mkdir frontend
 COPY ./cyoa-engine ./
-ADD ./templates/template.html ./
+COPY ./frontend ./frontend/
 
 RUN chown -R hexenmeister:flammenderberg /weltraum
 

00_aMeta/toolz/CYOA/frontend/engine_logic.js

@@ -0,0 +1,69 @@
+// engine_logic.js - Reine State- und Datenverarbeitung (Kein UI, Kein Fetch)
+const EngineLogic = {
+    storyData: { nodes: {} },
+    state: { reboots: 1, node: "" },
+
+    init: function(dataObj) {
+        if (!dataObj || !dataObj.nodes || Object.keys(dataObj.nodes).length === 0) {
+            console.warn("[System] Ungültige Graph-Daten. Fallback geladen.");
+            this.storyData = {
+                startNodeId: "err",
+                nodes: {
+                    "err": {
+                        id: "err", title: "SYSTEM OFFLINE", 
+                        content: "<p>Konnte <code>graph.json</code> nicht laden.</p>",
+                        choices: [],
+                        metadata: { status: "offline" }
+                    }
+                }
+            };
+        } else {
+            this.storyData = dataObj;
+        }
+        
+        this.state.node = this.storyData.startNodeId || Object.keys(this.storyData.nodes)[0] || "";
+    },
+
+    getNode: function(id) { return this.storyData.nodes[id]; },
+
+    processNodeEntry: function(id) {
+        const node = this.getNode(id);
+        if (!node) return null;
+
+        this.state.node = id;
+
+        if (node.metadata) {
+            Object.keys(node.metadata).forEach(key => {
+                this.state[key] = node.metadata[key];
+            });
+        }
+
+        if (node.isReboot) this.state.reboots++;
+        return node;
+    },
+
+    parseRequirement: function(choiceText) {
+        let conditionMatch = choiceText.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
+        let displayText = choiceText;
+        let meetsCondition = true;
+        let missingReq = "";
+
+        if (conditionMatch) {
+            let reqKey = conditionMatch[1].toLowerCase();
+            let reqVal = conditionMatch[2];
+            if (String(this.state[reqKey]) !== String(reqVal)) {
+                meetsCondition = false;
+                missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
+            }
+            displayText = displayText.replace(conditionMatch[0], "").trim();
+        }
+
+        return { displayText, meetsCondition, missingReq };
+    },
+
+    triggerReboot: function() {
+        const currentReboots = this.state.reboots + 1;
+        this.state = { reboots: currentReboots }; 
+        return this.storyData.startNodeId;
+    }
+};

00_aMeta/toolz/CYOA/frontend/engine_ui.js

@@ -0,0 +1,185 @@
+// engine_ui.js - Statisches Rendering & asynchrones Nachladen der graph.json
+const EngineUI = {
+    audioCtx: null,
+
+    init: async function() {
+        const AudioContext = window.AudioContext || window.webkitAudioContext;
+        if(AudioContext) this.audioCtx = new AudioContext();
+        
+        // 1. Asynchroner Fetch der graph.json
+        // (Im Dev-Modus liefert Go dies on-the-fly, im Export-Modus ist es eine Datei)
+        try {
+            const response = await fetch('graph.json', { cache: "no-store" });
+            if (!response.ok) throw new Error("HTTP Fehler " + response.status);
+            const graphData = await response.json();
+            
+            // 2. Initialisiere die gekapselte Logik mit den frisch geladenen Daten
+            EngineLogic.init(graphData);
+        } catch (err) {
+            console.error("Fehler beim Abrufen der graph.json:", err);
+            EngineLogic.init(null);
+        }
+
+        this.attachEvents();
+        this.renderNode(EngineLogic.state.node);
+    },
+
+    playBeep: function(freq = 440, type = "square", duration = 0.05) {
+        try {
+            if(!this.audioCtx) return;
+            const osc = this.audioCtx.createOscillator();
+            const gain = this.audioCtx.createGain();
+            osc.type = type;
+            osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
+            gain.gain.setValueAtTime(0.05, this.audioCtx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + duration);
+            osc.connect(gain); gain.connect(this.audioCtx.destination);
+            osc.start(); osc.stop(this.audioCtx.currentTime + duration);
+        } catch(e) {}
+    },
+
+    renderHUD: function() {
+        const hud = document.getElementById("hud-dynamic");
+        hud.innerHTML = "";
+        
+        hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(EngineLogic.state.reboots).padStart(3, "0")}</span></div>`;
+        hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${EngineLogic.state.node}</span></div>`;
+
+        Object.keys(EngineLogic.state).forEach(key => {
+            if(key !== "reboots" && key !== "node") {
+                hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${EngineLogic.state[key]}</span></div>`;
+            }
+        });
+    },
+
+    renderNode: function(id) {
+        const node = EngineLogic.processNodeEntry(id);
+        if (!node) return;
+
+        this.playBeep(600, "sine", 0.04);
+        if (node.isReboot) this.playBeep(200, "sawtooth", 0.3);
+        
+        this.renderHUD();
+
+        document.getElementById("node-title").innerText = "=== " + node.title + " ===";
+        document.getElementById("node-body").innerHTML = node.content;
+
+        const choicesBox = document.getElementById("choices-box");
+        choicesBox.innerHTML = "";
+
+        if (node.choices && node.choices.length > 0) {
+            let visibleIndex = 1;
+            node.choices.forEach((choice) => {
+                const parsed = EngineLogic.parseRequirement(choice.text);
+                const btn = document.createElement("button");
+                btn.className = "choice-btn";
+                
+                if (parsed.meetsCondition) {
+                    btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${parsed.displayText}`;
+                    btn.dataset.target = choice.targetId;
+                    btn.dataset.index = visibleIndex;
+                    btn.onclick = () => this.renderNode(choice.targetId);
+                    visibleIndex++;
+                } else {
+                    btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${parsed.displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${parsed.missingReq}</span>`;
+                    btn.disabled = true;
+                }
+                choicesBox.appendChild(btn);
+            });
+        } else {
+            const btn = document.createElement("button");
+            btn.className = "choice-btn";
+            btn.style.borderColor = "var(--term-amber)";
+            btn.style.color = "var(--term-amber)";
+            btn.innerHTML = "<span class=\"choice-key\">[R]</span> Speicherabbild sichern und rebooten...";
+            btn.onclick = () => this.triggerReboot();
+            choicesBox.appendChild(btn);
+        }
+        document.getElementById("terminal-viewport").scrollTop = 0;
+    },
+
+    triggerReboot: function() {
+        const startId = EngineLogic.triggerReboot();
+        if (startId) this.renderNode(startId);
+    },
+
+    toggleGraph: function() {
+        const modal = document.getElementById("graph-modal");
+        if (modal.style.display === "flex") {
+            modal.style.display = "none";
+        } else {
+            modal.style.display = "flex";
+            this.drawGraphCanvas();
+        }
+    },
+
+    drawGraphCanvas: function() {
+        const canvas = document.getElementById("graph-canvas");
+        canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#000"; ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        const keys = Object.keys(EngineLogic.storyData.nodes || {});
+        if (keys.length === 0) return;
+
+        const total = keys.length; const radius = Math.min(canvas.width, canvas.height) * 0.38;
+        const centerX = canvas.width / 2; const centerY = canvas.height / 2;
+        const nodeRadius = 8; const positions = {};
+
+        keys.forEach((key, idx) => {
+            const angle = (idx / total) * 2 * Math.PI;
+            positions[key] = { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) };
+        });
+
+        ctx.lineWidth = 1;
+        keys.forEach(key => {
+            const node = EngineLogic.storyData.nodes[key];
+            if (node && node.choices) {
+                node.choices.forEach(c => {
+                    if (positions[c.targetId]) {
+                        const start = positions[key], end = positions[c.targetId];
+                        ctx.beginPath(); ctx.strokeStyle = "rgba(51, 255, 102, 0.4)";
+                        ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke();
+                        const dx = end.x - start.x, dy = end.y - start.y, angle = Math.atan2(dy, dx), headlen = 12;
+                        const tipX = end.x - Math.cos(angle) * (nodeRadius + 2), tipY = end.y - Math.sin(angle) * (nodeRadius + 2);
+                        ctx.beginPath(); ctx.moveTo(tipX, tipY);
+                        ctx.lineTo(tipX - headlen * Math.cos(angle - Math.PI / 7), tipY - headlen * Math.sin(angle - Math.PI / 7));
+                        ctx.lineTo(tipX - headlen * Math.cos(angle + Math.PI / 7), tipY - headlen * Math.sin(angle + Math.PI / 7));
+                        ctx.closePath(); ctx.fillStyle = "rgba(51, 255, 102, 0.9)"; ctx.fill();
+                    }
+                });
+            }
+        });
+
+        keys.forEach(key => {
+            const pos = positions[key];
+            ctx.beginPath(); ctx.arc(pos.x, pos.y, nodeRadius, 0, 2 * Math.PI);
+            if (key === EngineLogic.state.node) ctx.fillStyle = "#00ffff"; 
+            else if (key === EngineLogic.storyData.startNodeId) ctx.fillStyle = "#ffb000";
+            else ctx.fillStyle = "#116633";
+            ctx.fill(); ctx.strokeStyle = "#33ff66"; ctx.stroke();
+            ctx.fillStyle = "#fff"; ctx.font = "11px monospace";
+            const textAngle = Math.atan2(pos.y - centerY, pos.x - centerX);
+            ctx.fillText(key, pos.x + Math.cos(textAngle) * 15 - 10, pos.y + Math.sin(textAngle) * 15 + 4);
+        });
+    },
+
+    attachEvents: function() {
+        window.addEventListener("keydown", (e) => {
+            if (document.getElementById("graph-modal").style.display === "flex") {
+                if (e.key.toLowerCase() === "g" || e.key === "Escape") this.toggleGraph();
+                return;
+            }
+            if (e.key >= "1" && e.key <= "9") {
+                const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
+                if (btn && !btn.disabled) this.renderNode(btn.dataset.target);
+            } else if (e.key.toLowerCase() === "r") {
+                this.triggerReboot();
+            } else if (e.key.toLowerCase() === "g") {
+                this.toggleGraph();
+            }
+        });
+    }
+};
+
+window.onload = () => EngineUI.init();

00_aMeta/toolz/CYOA/frontend/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Computer Historyz :: Interactive Terminal Engine</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <div class="sys-title">[COMPUTER HISTORYZ :: INSTANZ_TERMINAL]</div>
+        <div class="hud-stats" id="hud-dynamic"></div>
+    </header>
+
+    <main id="terminal-viewport">
+        <div class="node-card">
+            <div id="node-title" class="node-title">System Initialisierung...</div>
+            <div id="node-body" class="node-body">Verbinde mit Datenstrom...</div>
+            <div id="choices-box" class="choices-container"></div>
+        </div>
+    </main>
+
+    <footer>
+        <div>[HOTKEYS: 1-9 Auswahl | R Reboot | G Graph]</div>
+        <div>
+            <button class="btn-small" onclick="EngineUI.toggleGraph()">[G] KNOTEN-GRAPH</button>
+            <button class="btn-small" onclick="EngineUI.triggerReboot()">[R] REBOOT / RESET</button>
+        </div>
+    </footer>
+
+    <div id="graph-modal">
+        <div style="display:flex; justify-content:space-between; margin-bottom:15px;">
+            <span style="color:var(--term-cyan)">=== INTERAKTIVER VORHERSAGE-GRAPH ===</span>
+            <button class="btn-small" onclick="EngineUI.toggleGraph()">[X] SCHLIESSEN</button>
+        </div>
+        <canvas id="graph-canvas"></canvas>
+    </div>
+
+    <!-- Vollständige Trennung: Eigene Dateien statt Injektion -->
+    <script src="engine_logic.js"></script>
+    <script src="engine_ui.js"></script>
+</body>
+</html>

00_aMeta/toolz/CYOA/frontend/style.css

@@ -0,0 +1,69 @@
+:root {
+    --bg-color: #050b08;
+    --term-green: #33ff66;
+    --term-dim: #116633;
+    --term-cyan: #00ffff;
+    --term-warn: #ff3333;
+    --term-amber: #ffb000;
+    --font-stack: 'Courier New', Courier, monospace;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    background-color: var(--bg-color); color: var(--term-green);
+    font-family: var(--font-stack); height: 100vh; display: flex;
+    flex-direction: column; overflow: hidden; text-shadow: 0 0 4px rgba(51, 255, 102, 0.6);
+}
+
+body::before {
+    content: " "; display: block; position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+    z-index: 10; background-size: 100% 3px, 3px 100%; pointer-events: none;
+}
+
+header { background: #111; border-bottom: 2px solid var(--term-green); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
+.sys-title { color: var(--term-cyan); font-weight: bold; letter-spacing: 1px; }
+
+.hud-stats { display: flex; gap: 15px; font-size: 0.85rem; flex-wrap: wrap; }
+.stat-item { border: 1px solid var(--term-dim); padding: 2px 8px; background: rgba(0, 20, 10, 0.5); }
+
+main { flex: 1; display: flex; flex-direction: column; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; overflow-y: auto; position: relative; z-index: 1; }
+.node-card { border: 1px solid var(--term-dim); background: rgba(5, 15, 10, 0.85); padding: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.1); }
+.node-title { font-size: 1.3rem; color: var(--term-cyan); border-bottom: 1px dashed var(--term-dim); padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; }
+
+/* ASCIIDOCTOR HTML STYLING */
+.node-body { line-height: 1.6; font-size: 1rem; margin-bottom: 20px; }
+.node-body p { margin-bottom: 15px; }
+.node-body strong, .node-body b { color: var(--term-cyan); font-weight: normal; text-shadow: 0 0 5px rgba(0, 255, 255, 0.4); }
+.node-body em, .node-body i { color: var(--term-amber); font-style: italic; }
+.node-body ul, .node-body ol { margin-left: 25px; margin-bottom: 15px; list-style-type: square; }
+.node-body li { margin-bottom: 5px; }
+.node-body h1, .node-body h2, .node-body h3, .node-body h4 { color: var(--term-cyan); margin: 20px 0 10px 0; border-bottom: 1px solid var(--term-dim); padding-bottom: 5px; }
+.node-body code { background: rgba(0, 255, 102, 0.1); padding: 2px 5px; border-radius: 3px; font-family: var(--font-stack); }
+.node-body pre { background: rgba(0, 20, 10, 0.8); border-left: 3px solid var(--term-dim); padding: 10px; overflow-x: auto; margin-bottom: 15px; }
+.node-body table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
+.node-body th, .node-body td { border: 1px solid var(--term-dim); padding: 8px; text-align: left; }
+.node-body th { background: rgba(0, 255, 102, 0.1); color: var(--term-cyan); }
+
+.choices-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
+.choice-btn {
+    background: rgba(0, 30, 15, 0.6); border: 1px solid var(--term-green);
+    color: var(--term-green); padding: 12px 16px; font-family: var(--font-stack);
+    font-size: 0.95rem; text-align: left; cursor: pointer;
+    transition: all 0.15s ease; display: flex; align-items: center; gap: 10px;
+}
+.choice-btn:hover:not(:disabled) { background: var(--term-green); color: var(--bg-color); box-shadow: 0 0 10px var(--term-green); outline: none; }
+.choice-btn:disabled { border-color: var(--term-warn); color: var(--term-warn); cursor: not-allowed; opacity: 0.6; }
+
+.choice-key { background: var(--term-dim); color: var(--term-green); padding: 2px 6px; font-size: 0.8rem; border-radius: 2px; }
+.choice-btn:hover:not(:disabled) .choice-key { background: var(--bg-color); color: var(--term-green); }
+.choice-btn:disabled .choice-key { background: rgba(255, 51, 51, 0.2); color: var(--term-warn); }
+
+footer { border-top: 1px solid var(--term-dim); padding: 10px 20px; display: flex; justify-content: space-between; background: #080f0c; font-size: 0.8rem; z-index: 2; }
+.btn-small { background: transparent; border: 1px solid var(--term-dim); color: var(--term-green); padding: 4px 10px; cursor: pointer; font-family: var(--font-stack); }
+.btn-small:hover { border-color: var(--term-cyan); color: var(--term-cyan); }
+
+#graph-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 11, 8, 0.95); z-index: 20; padding: 20px; flex-direction: column; }
+#graph-canvas { flex: 1; border: 1px solid var(--term-green); background: #000; }

00_aMeta/toolz/CYOA/main.go

@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"flag"
 	"fmt"
-	"html/template"
 	"io"
 	"net/http"
 	"os"
@@ -22,7 +21,7 @@ type Choice struct {
 type StoryNode struct {
 	ID         string            `json:"id"`
 	Title      string            `json:"title"`
-	Content    template.HTML     `json:"content"` // HTML für das Asciidoctor Rendering
+	Content    string            `json:"content"`
 	Choices    []Choice          `json:"choices"`
 	IsReboot   bool              `json:"isReboot"`
 	IsEnd      bool              `json:"isEnd"`
@@ -47,51 +46,98 @@ var (
 )
 
 func main() {
-	dirPtr := flag.String("dir", ".", "Verzeichnis mit AsciiDoc/Markdown Dateien")
+	dirPtr := flag.String("dir", "./stories", "Verzeichnis mit AsciiDoc/Markdown Dateien")
-	outPtr := flag.String("out", "export/story.html", "Zielpfad für den Dateiexport")
+	frontendPtr := flag.String("frontend", "./frontend", "Pfad zum Verzeichnis der statischen Frontend-Dateien")
-	tmplPtr := flag.String("tmpl", "template.html", "Pfad zur ausgelagerten HTML/JS Template-Datei")
+	outPtr := flag.String("out", "export", "Ziel-Ordner für den Dateiexport (SSG Modus)")
-	servePtr := flag.Bool("serve", false, "Startet den API- & Preview-Server")
+	servePtr := flag.Bool("serve", false, "Startet den Live-Preview-Server (API Modus)")
-	portPtr := flag.Int("port", 8080, "Port für den Server")
+	portPtr := flag.Int("port", 3344, "Port für den Server")
 	flag.Parse()
 
-	fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine (Asciidoctor Bindings) ===\033[0m")
+	fmt.Println("\033[1;36m=== Computer Historyz :: CYOA SSG & API ===\033[0m")
+
+	if info, err := os.Stat(*frontendPtr); os.IsNotExist(err) || !info.IsDir() {
+		fmt.Printf("\033[1;33m[WARNUNG]\033[0m Frontend-Verzeichnis '%s' nicht gefunden!\n", *frontendPtr)
+	}
 
 	if *servePtr {
-		startServer(*portPtr, *dirPtr, *outPtr, *tmplPtr)
+		startServer(*portPtr, *dirPtr, *frontendPtr)
 		return
 	}
 
+	// --- EXPORT MODUS (Static Site Generation) ---
+	fmt.Printf("\033[1;34m[EXPORT]\033[0m Kompiliere Story-Graph via Asciidoctor...\n")
 	graph := loadStoryGraphFromDir(*dirPtr)
 	validateGraph(graph)
 
-	outDir := filepath.Dir(*outPtr)
+	// Export Ordner anlegen
-	os.MkdirAll(outDir, 0755)
+	os.MkdirAll(*outPtr, 0755)
 
-	if err := generateHTMLFile(graph, *outPtr, *tmplPtr); err != nil {
+	// 1. Statische Daten als JSON schreiben
-		fmt.Printf("\033[1;31m[FEHLER]\033[0m %v\n", err)
+	graphPath := filepath.Join(*outPtr, "graph.json")
-		os.Exit(1)
+	graphJson, _ := json.MarshalIndent(graph, "", "  ")
+	os.WriteFile(graphPath, graphJson, 0644)
+
+	// 2. Frontend-Dateien 1:1 kopieren
+	copyFile(filepath.Join(*frontendPtr, "index.html"), filepath.Join(*outPtr, "index.html"))
+	copyFile(filepath.Join(*frontendPtr, "style.css"), filepath.Join(*outPtr, "style.css"))
+	copyFile(filepath.Join(*frontendPtr, "engine_logic.js"), filepath.Join(*outPtr, "engine_logic.js"))
+	copyFile(filepath.Join(*frontendPtr, "engine_ui.js"), filepath.Join(*outPtr, "engine_ui.js"))
+
+	fmt.Printf("\033[1;32m[ERFOLG]\033[0m Web-App erfolgreich exportiert nach -> \033[1;33m%s/\033[0m\n", *outPtr)
+}
+
+func copyFile(src, dst string) {
+	input, err := os.ReadFile(src)
+	if err != nil {
+		fmt.Printf("\033[1;33m[WARNUNG]\033[0m Frontend-Datei %s fehlt.\n", src)
+		return
+	}
+	os.WriteFile(dst, input, 0644)
+}
+
+func startServer(port int, watchDir string, frontendDir string) {
+	addr := fmt.Sprintf(":%d", port)
+	fmt.Printf("\n\033[1;32m[SERVER LÄUFT]\033[0m http://localhost:%d\n", port)
+
+	// Dynamischer API-Endpunkt für graph.json
+	http.HandleFunc("/graph.json", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Access-Control-Allow-Origin", "*")
+		w.Header().Set("Content-Type", "application/json")
+
+		var graph *StoryGraph
+		if r.Method == http.MethodPost {
+			bodyBytes, _ := io.ReadAll(r.Body)
+			graph = &StoryGraph{Nodes: make(map[string]*StoryNode)}
+			parseContent(string(bodyBytes), "API_POST_Stream", graph)
+		} else {
+			graph = loadStoryGraphFromDir(watchDir)
+		}
+		validateGraph(graph)
+		json.NewEncoder(w).Encode(graph)
+	})
+
+	// Liefert alles andere aus dem /frontend Ordner
+	fs := http.FileServer(http.Dir(frontendDir))
+	http.Handle("/", fs)
+
+	if err := http.ListenAndServe(addr, nil); err != nil {
+		fmt.Printf("\033[1;31m[FEHLER]\033[0m %v\n", err)
 	}
-	fmt.Printf("\033[1;32m[ERFOLG]\033[0m Story generiert -> \033[1;33m%s\033[0m\n", *outPtr)
 }
 
 // renderAsciidoctor piped rohen AsciiDoc Text in den lokalen Container-Prozess
-func renderAsciidoctor(text string) template.HTML {
+func renderAsciidoctor(text string) string {
 	if strings.TrimSpace(text) == "" {
 		return ""
 	}
-	
 	cmd := exec.Command("asciidoctor", "--embedded", "-")
 	cmd.Stdin = strings.NewReader(text)
-	
 	out, err := cmd.Output()
 	if err != nil {
 		fmt.Printf("\033[1;33m[WARNUNG]\033[0m Asciidoctor Rendering fehlgeschlagen: %v\n", err)
-		// Fallback auf rohen Text (mit rudimentären Linebreaks), falls asciidoctor fehlschlägt
+		return strings.ReplaceAll(text, "\n", "<br>")
-		fallback := strings.ReplaceAll(text, "\n", "<br>")
-		return template.HTML(fallback)
 	}
-	
+	return string(out)
-	return template.HTML(string(out))
 }
 
 func cleanBodyText(raw string) string {
@@ -106,82 +152,47 @@ func parseContent(rawContent string, sourceName string, graph *StoryGraph) {
 	var currentBody strings.Builder
 
 	for _, line := range lines {
-		// Knotenpunkte identifizieren
 		if matches := adocNodeRegex.FindStringSubmatch(line); len(matches) > 1 {
 			if currentNode != nil {
-				// Inhalt über Asciidoctor-Container-Binary exportieren
 				currentNode.Content = renderAsciidoctor(cleanBodyText(currentBody.String()))
 				graph.Nodes[currentNode.ID] = currentNode
 				currentBody.Reset()
 			}
 			nodeID := matches[1]
-			currentNode = &StoryNode{
+			currentNode = &StoryNode{ ID: nodeID, Title: nodeID, Choices: make([]Choice, 0), FileSource: sourceName, Metadata: make(map[string]string) }
-				ID:         nodeID,
+			if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" { graph.StartNodeID = nodeID }
-				Title:      nodeID,
-				Choices:    make([]Choice, 0),
-				FileSource: sourceName,
-				Metadata:   make(map[string]string),
-			}
-			if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" {
-				graph.StartNodeID = nodeID
-			}
 			continue
 		}
 
 		if currentNode == nil {
 			if strings.TrimSpace(line) != "" {
 				baseID := "start"
-				if sourceName != "API_POST_Stream" {
+				if sourceName != "API_POST_Stream" { baseID = strings.TrimSuffix(filepath.Base(sourceName), filepath.Ext(sourceName)) }
-					baseID = strings.TrimSuffix(filepath.Base(sourceName), filepath.Ext(sourceName))
+				currentNode = &StoryNode{ ID: baseID, Title: baseID, Choices: make([]Choice, 0), FileSource: sourceName, Metadata: make(map[string]string) }
-				}
+				if graph.StartNodeID == "" { graph.StartNodeID = baseID }
-				currentNode = &StoryNode{
+			} else { continue }
-					ID:         baseID,
-					Title:      baseID,
-					Choices:    make([]Choice, 0),
-					FileSource: sourceName,
-					Metadata:   make(map[string]string),
-				}
-				if graph.StartNodeID == "" {
-					graph.StartNodeID = baseID
-				}
-			} else {
-				continue
-			}
 		}
 
-		// Metadaten für das State-System extrahieren
 		if mMatches := metaRegex.FindStringSubmatch(line); len(mMatches) > 2 {
 			currentNode.Metadata[strings.ToLower(mMatches[1])] = strings.TrimSpace(mMatches[2])
 			continue
 		}
 
-		// Titel extrahieren
 		if hMatches := headingRegex.FindStringSubmatch(line); len(hMatches) > 1 && currentNode.Title == currentNode.ID {
 			currentNode.Title = strings.TrimSpace(hMatches[1])
 		}
 
-		// Entscheidungen (AsciiDoc)
 		if cMatches := adocChoiceRegex.FindAllStringSubmatch(line, -1); len(cMatches) > 0 {
-			for _, match := range cMatches {
+			for _, match := range cMatches { currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[1], Text: strings.TrimSpace(match[2])}) }
-				currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[1], Text: strings.TrimSpace(match[2])})
-			}
 		}
 
-		// Entscheidungen (Markdown)
 		if mMatches := mdChoiceRegex.FindAllStringSubmatch(line, -1); len(mMatches) > 0 {
-			for _, match := range mMatches {
+			for _, match := range mMatches { currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[2], Text: strings.TrimSpace(match[1])}) }
-				currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[2], Text: strings.TrimSpace(match[1])})
-			}
 		}
 
-		// Spezielle System-Tags prüfen
 		lowerLine := strings.ToLower(line)
-		if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") {
+		if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") { currentNode.IsReboot = true }
-			currentNode.IsReboot = true
+		if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") { currentNode.IsEnd = true }
-		}
-		if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") {
-			currentNode.IsEnd = true
-		}
 
 		currentBody.WriteString(line + "\n")
 	}
@@ -225,64 +236,4 @@ func validateGraph(g *StoryGraph) {
 	for id := range g.Nodes {
 		if !referenced[id] { g.OrphanNodes = append(g.OrphanNodes, id) }
 	}
-}
+}
-
-// JSON Helper für das Template
-func getTemplateFuncMap() template.FuncMap {
-	return template.FuncMap{
-		"json": func(v interface{}) template.JS {
-			a, _ := json.Marshal(v)
-			return template.JS(a)
-		},
-	}
-}
-
-func generateHTMLFile(g *StoryGraph, outPath string, tmplPath string) error {
-	fmt.Println("tmp path "+tmplPath)
-	tmpl, err := template.New(filepath.Base(tmplPath)).Funcs(getTemplateFuncMap()).ParseFiles(tmplPath)
-	if err != nil { return fmt.Errorf("Template-Fehler: %v", err) }
-	f, err := os.Create(outPath)
-	if err != nil { return err }
-	defer f.Close()
-	return tmpl.Execute(f, g)
-}
-
-func startServer(port int, watchDir string, htmlPath string, tmplPath string) {
-	addr := fmt.Sprintf(":%d", port)
-	fmt.Printf("\n\033[1;32m[CONTAINER-API LÄUFT]\033[0m Port: %d | Nutzt Template: %s\n", port, tmplPath)
-
-	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		w.Header().Set("Access-Control-Allow-Origin", "*")
-
-		if r.Method == http.MethodPost {
-			bodyBytes, err := io.ReadAll(r.Body)
-			if err != nil {
-				http.Error(w, "Daten defekt", http.StatusBadRequest)
-				return
-			}
-			
-			graph := &StoryGraph{Nodes: make(map[string]*StoryNode)}
-			// Rohdaten durch den Parser und den Asciidoctor-Container schleusen
-			parseContent(string(bodyBytes), "API_POST_Stream", graph)
-			validateGraph(graph)
-
-			w.Header().Set("Content-Type", "text/html; charset=utf-8")
-			tmpl, err := template.New(filepath.Base(tmplPath)).Funcs(getTemplateFuncMap()).ParseFiles(tmplPath)
-			if err != nil {
-				http.Error(w, "Template-Fehler: "+err.Error(), http.StatusInternalServerError)
-				return
-			}
-			tmpl.Execute(w, graph)
-			fmt.Println("\033[1;34m[POST-API]\033[0m Story inkl. Asciidoctor-HTML gerendert.")
-			return
-		}
-
-		if r.Method == http.MethodGet {
-			freshGraph := loadStoryGraphFromDir(watchDir)
-			_ = generateHTMLFile(freshGraph, htmlPath, tmplPath)
-			http.ServeFile(w, r, htmlPath)
-		}
-	})
-
-	http.ListenAndServe(addr, nil)
-}

00_aMeta/toolz/CYOA/stories/cyoa_juniorMiner/node_sensoren.adoc

@@ -5,7 +5,7 @@
 ```
 : sensor daten angeschlossen
 ```
-
+[meta: sensor=online]
 
 ## Kontext
 

00_aMeta/toolz/CYOA/stories/cyoa_juniorMiner/node_steuerungUnten.adoc

@@ -9,7 +9,7 @@
 
 ## Kontext
 
-Mitte
+Unten
 
 ### Was werden wir ausführen?
 

00_aMeta/toolz/CYOA/templates/template.html

@@ -1,336 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Computer Historyz :: Interactive Terminal Engine</title>
-    <style>
-        :root {
-            --bg-color: #050b08;
-            --term-green: #33ff66;
-            --term-dim: #116633;
-            --term-cyan: #00ffff;
-            --term-warn: #ff3333;
-            --term-amber: #ffb000;
-            --font-stack: 'Courier New', Courier, monospace;
-        }
-
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-
-        body {
-            background-color: var(--bg-color); color: var(--term-green);
-            font-family: var(--font-stack); height: 100vh; display: flex;
-            flex-direction: column; overflow: hidden; text-shadow: 0 0 4px rgba(51, 255, 102, 0.6);
-        }
-
-        body::before {
-            content: " "; display: block; position: absolute;
-            top: 0; left: 0; bottom: 0; right: 0;
-            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
-            z-index: 10; background-size: 100% 3px, 3px 100%; pointer-events: none;
-        }
-
-        header { background: #111; border-bottom: 2px solid var(--term-green); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
-        .sys-title { color: var(--term-cyan); font-weight: bold; letter-spacing: 1px; }
-        
-        .hud-stats { display: flex; gap: 15px; font-size: 0.85rem; flex-wrap: wrap; }
-        .stat-item { border: 1px solid var(--term-dim); padding: 2px 8px; background: rgba(0, 20, 10, 0.5); }
-
-        main { flex: 1; display: flex; flex-direction: column; padding: 20px; max-width: 900px; margin: 0 auto; width: 100%; overflow-y: auto; position: relative; z-index: 1; }
-        .node-card { border: 1px solid var(--term-dim); background: rgba(5, 15, 10, 0.85); padding: 20px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.1); }
-        .node-title { font-size: 1.3rem; color: var(--term-cyan); border-bottom: 1px dashed var(--term-dim); padding-bottom: 8px; margin-bottom: 15px; text-transform: uppercase; }
-        
-        /* * ASCIIDOCTOR HTML STYLING 
-         * Da das Go-Backend nun volles HTML liefert, muss das CSS dieses abfangen. 
-         */
-        .node-body { line-height: 1.6; font-size: 1rem; margin-bottom: 20px; }
-        .node-body p { margin-bottom: 15px; }
-        .node-body strong, .node-body b { color: var(--term-cyan); font-weight: normal; text-shadow: 0 0 5px rgba(0, 255, 255, 0.4); }
-        .node-body em, .node-body i { color: var(--term-amber); font-style: italic; }
-        .node-body ul, .node-body ol { margin-left: 25px; margin-bottom: 15px; list-style-type: square; }
-        .node-body li { margin-bottom: 5px; }
-        .node-body h1, .node-body h2, .node-body h3, .node-body h4 { color: var(--term-cyan); margin: 20px 0 10px 0; border-bottom: 1px solid var(--term-dim); padding-bottom: 5px; }
-        .node-body code { background: rgba(0, 255, 102, 0.1); padding: 2px 5px; border-radius: 3px; font-family: var(--font-stack); }
-        .node-body pre { background: rgba(0, 20, 10, 0.8); border-left: 3px solid var(--term-dim); padding: 10px; overflow-x: auto; margin-bottom: 15px; }
-        .node-body table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
-        .node-body th, .node-body td { border: 1px solid var(--term-dim); padding: 8px; text-align: left; }
-        .node-body th { background: rgba(0, 255, 102, 0.1); color: var(--term-cyan); }
-
-        .choices-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
-
-        .choice-btn {
-            background: rgba(0, 30, 15, 0.6); border: 1px solid var(--term-green);
-            color: var(--term-green); padding: 12px 16px; font-family: var(--font-stack);
-            font-size: 0.95rem; text-align: left; cursor: pointer;
-            transition: all 0.15s ease; display: flex; align-items: center; gap: 10px;
-        }
-        .choice-btn:hover:not(:disabled) { background: var(--term-green); color: var(--bg-color); box-shadow: 0 0 10px var(--term-green); outline: none; }
-        .choice-btn:disabled { border-color: var(--term-warn); color: var(--term-warn); cursor: not-allowed; opacity: 0.6; }
-        
-        .choice-key { background: var(--term-dim); color: var(--term-green); padding: 2px 6px; font-size: 0.8rem; border-radius: 2px; }
-        .choice-btn:hover:not(:disabled) .choice-key { background: var(--bg-color); color: var(--term-green); }
-        .choice-btn:disabled .choice-key { background: rgba(255, 51, 51, 0.2); color: var(--term-warn); }
-
-        footer { border-top: 1px solid var(--term-dim); padding: 10px 20px; display: flex; justify-content: space-between; background: #080f0c; font-size: 0.8rem; z-index: 2; }
-        .btn-small { background: transparent; border: 1px solid var(--term-dim); color: var(--term-green); padding: 4px 10px; cursor: pointer; font-family: var(--font-stack); }
-        .btn-small:hover { border-color: var(--term-cyan); color: var(--term-cyan); }
-
-        #graph-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 11, 8, 0.95); z-index: 20; padding: 20px; flex-direction: column; }
-        #graph-canvas { flex: 1; border: 1px solid var(--term-green); background: #000; }
-    </style>
-</head>
-<body>
-
-    <header>
-        <div class="sys-title">[COMPUTER HISTORYZ :: INSTANZ_TERMINAL]</div>
-        <div class="hud-stats" id="hud-dynamic">
-            <!-- Wird per JS gefüllt -->
-        </div>
-    </header>
-
-    <main id="terminal-viewport">
-        <div class="node-card">
-            <div id="node-title" class="node-title">System Initialisierung...</div>
-            <div id="node-body" class="node-body">Verbinde mit Datenstrom...</div>
-            <div id="choices-box" class="choices-container"></div>
-        </div>
-    </main>
-
-    <footer>
-        <div>[HOTKEYS: 1-9 Auswahl | R Reboot | G Graph]</div>
-        <div>
-            <button class="btn-small" onclick="toggleGraphView()">[G] KNOTEN-GRAPH</button>
-            <button class="btn-small" onclick="restartStory()">[R] REBOOT / RESET</button>
-        </div>
-    </footer>
-
-    <div id="graph-modal">
-        <div style="display:flex; justify-content:space-between; margin-bottom:15px;">
-            <span style="color:var(--term-cyan)">=== INTERAKTIVER VORHERSAGE-GRAPH ===</span>
-            <button class="btn-small" onclick="toggleGraphView()">[X] SCHLIESSEN</button>
-        </div>
-        <canvas id="graph-canvas"></canvas>
-    </div>
-
-    <!-- JSON Injection -->
-    <script id="story-data" type="application/json">
-        {{ . | json }}
-    </script>
-
-    <script>
-        let storyData = { nodes: {} };
-        
-        try {
-            const rawData = document.getElementById('story-data').textContent.trim();
-            if (!rawData.startsWith("\{\{")) {
-                storyData = JSON.parse(rawData);
-            } else {
-                console.warn("[WARNUNG] Go-Engine nicht verbunden. Lade Offline-Preview.");
-                storyData = {
-                    startNodeId: "preview_start",
-                    nodes: {
-                        "preview_start": {
-                            id: "preview_start",
-                            title: "OFFLINE PREVIEW",
-                            content: "<p>Verbindung zur Go-Engine unterbrochen.</p><p><strong>Dies ist der Testmodus.</strong> Die Node-Inhalte unterstützen nun <em>echtes HTML</em>, das durch Asciidoctor generiert wird.</p><ul><li>Listen funktionieren</li><li>Tabellen ebenso</li></ul>",
-                            choices: [{ targetId: "preview_start", text: "Endlosschleife starten" }],
-                            metadata: { schild: "100%", status: "offline" }
-                        }
-                    }
-                };
-            }
-        } catch(e) {
-            console.error("Fehler beim Parsen der Injektion:", e);
-        }
-
-        let currentNodeID = storyData.startNodeId || (Object.keys(storyData.nodes).length > 0 ? Object.keys(storyData.nodes)[0] : '');
-        let history = [];
-        
-        let gameState = {
-            reboots: 1, 
-            node: currentNodeID
-        };
-
-        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-        function playBeep(freq = 440, type = 'square', duration = 0.05) {
-            try {
-                const osc = audioCtx.createOscillator();
-                const gain = audioCtx.createGain();
-                osc.type = type;
-                osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
-                gain.gain.setValueAtTime(0.05, audioCtx.currentTime);
-                gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
-                osc.connect(gain); gain.connect(audioCtx.destination);
-                osc.start(); osc.stop(audioCtx.currentTime + duration);
-            } catch(e) {}
-        }
-
-        function renderHUD() {
-            const hud = document.getElementById('hud-dynamic');
-            hud.innerHTML = '';
-            
-            hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(gameState.reboots).padStart(3, '0')}</span></div>`;
-            hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${gameState.node}</span></div>`;
-
-            Object.keys(gameState).forEach(key => {
-                if(key !== 'reboots' && key !== 'node') {
-                    hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${gameState[key]}</span></div>`;
-                }
-            });
-        }
-
-        function renderNode(id) {
-            const node = storyData.nodes[id];
-            if (!node) return;
-
-            currentNodeID = id;
-            gameState.node = id;
-            history.push(id);
-            playBeep(600, 'sine', 0.04);
-
-            if (node.metadata) {
-                Object.keys(node.metadata).forEach(key => {
-                    gameState[key] = node.metadata[key];
-                });
-            }
-
-            if (node.isReboot) {
-                gameState.reboots++;
-                playBeep(200, 'sawtooth', 0.3);
-            }
-            
-            renderHUD();
-
-            document.getElementById('node-title').innerText = "=== " + node.title + " ===";
-            
-            // WICHTIG: Das Go-Backend liefert nun echtes HTML von Asciidoctor!
-            document.getElementById('node-body').innerHTML = node.content;
-
-            const choicesBox = document.getElementById('choices-box');
-            choicesBox.innerHTML = '';
-
-            if (node.choices && node.choices.length > 0) {
-                let visibleIndex = 1;
-                node.choices.forEach((choice) => {
-                    
-                    let conditionMatch = choice.text.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
-                    let displayText = choice.text;
-                    let meetsCondition = true;
-                    let missingReq = "";
-
-                    if (conditionMatch) {
-                        let reqKey = conditionMatch[1].toLowerCase();
-                        let reqVal = conditionMatch[2];
-                        if (String(gameState[reqKey]) !== String(reqVal)) {
-                            meetsCondition = false;
-                            missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
-                        }
-                        displayText = displayText.replace(conditionMatch[0], '').trim();
-                    }
-
-                    const btn = document.createElement('button');
-                    btn.className = 'choice-btn';
-                    
-                    if (meetsCondition) {
-                        btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${displayText}`;
-                        btn.dataset.target = choice.targetId;
-                        btn.dataset.index = visibleIndex;
-                        btn.onclick = () => renderNode(choice.targetId);
-                        visibleIndex++;
-                    } else {
-                        btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${missingReq}</span>`;
-                        btn.disabled = true;
-                    }
-                    
-                    choicesBox.appendChild(btn);
-                });
-            } else {
-                const btn = document.createElement('button');
-                btn.className = 'choice-btn';
-                btn.style.borderColor = 'var(--term-amber)';
-                btn.style.color = 'var(--term-amber)';
-                btn.innerHTML = '<span class="choice-key">[R]</span> Speicherabbild sichern und rebooten...';
-                btn.onclick = () => restartStory();
-                choicesBox.appendChild(btn);
-            }
-            document.getElementById('terminal-viewport').scrollTop = 0;
-        }
-
-        function restartStory() {
-            const currentReboots = gameState.reboots + 1;
-            gameState = { reboots: currentReboots };
-            if(storyData.startNodeId) renderNode(storyData.startNodeId);
-        }
-
-        window.addEventListener('keydown', (e) => {
-            if (document.getElementById('graph-modal').style.display === 'flex') {
-                if (e.key.toLowerCase() === 'g' || e.key === 'Escape') toggleGraphView();
-                return;
-            }
-            if (e.key >= '1' && e.key <= '9') {
-                const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
-                if (btn && !btn.disabled) renderNode(btn.dataset.target);
-            } else if (e.key.toLowerCase() === 'r') restartStory();
-            else if (e.key.toLowerCase() === 'g') toggleGraphView();
-        });
-
-        function toggleGraphView() {
-            const modal = document.getElementById('graph-modal');
-            if (modal.style.display === 'flex') modal.style.display = 'none';
-            else { modal.style.display = 'flex'; drawGraphCanvas(); }
-        }
-
-        function drawGraphCanvas() {
-            const canvas = document.getElementById('graph-canvas');
-            canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-            const ctx = canvas.getContext('2d');
-            ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);
-            const keys = Object.keys(storyData.nodes);
-            if (keys.length === 0) return;
-
-            const total = keys.length; const radius = Math.min(canvas.width, canvas.height) * 0.38;
-            const centerX = canvas.width / 2; const centerY = canvas.height / 2;
-            const nodeRadius = 8; const positions = {};
-
-            keys.forEach((key, idx) => {
-                const angle = (idx / total) * 2 * Math.PI;
-                positions[key] = { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) };
-            });
-
-            ctx.lineWidth = 1;
-            keys.forEach(key => {
-                const node = storyData.nodes[key];
-                if (node.choices) {
-                    node.choices.forEach(c => {
-                        if (positions[c.targetId]) {
-                            const start = positions[key], end = positions[c.targetId];
-                            ctx.beginPath(); ctx.strokeStyle = 'rgba(51, 255, 102, 0.4)';
-                            ctx.moveTo(start.x, start.y); ctx.lineTo(end.x, end.y); ctx.stroke();
-                            const dx = end.x - start.x, dy = end.y - start.y, angle = Math.atan2(dy, dx), headlen = 12;
-                            const tipX = end.x - Math.cos(angle) * (nodeRadius + 2), tipY = end.y - Math.sin(angle) * (nodeRadius + 2);
-                            ctx.beginPath(); ctx.moveTo(tipX, tipY);
-                            ctx.lineTo(tipX - headlen * Math.cos(angle - Math.PI / 7), tipY - headlen * Math.sin(angle - Math.PI / 7));
-                            ctx.lineTo(tipX - headlen * Math.cos(angle + Math.PI / 7), tipY - headlen * Math.sin(angle + Math.PI / 7));
-                            ctx.closePath(); ctx.fillStyle = 'rgba(51, 255, 102, 0.9)'; ctx.fill();
-                        }
-                    });
-                }
-            });
-
-            keys.forEach(key => {
-                const pos = positions[key];
-                ctx.beginPath(); ctx.arc(pos.x, pos.y, nodeRadius, 0, 2 * Math.PI);
-                if (key === currentNodeID) ctx.fillStyle = '#00ffff'; 
-                else if (key === storyData.startNodeId) ctx.fillStyle = '#ffb000';
-                else ctx.fillStyle = '#116633';
-                ctx.fill(); ctx.strokeStyle = '#33ff66'; ctx.stroke();
-                ctx.fillStyle = '#fff'; ctx.font = '11px monospace';
-                const textAngle = Math.atan2(pos.y - centerY, pos.x - centerX);
-                ctx.fillText(key, pos.x + Math.cos(textAngle) * 15 - 10, pos.y + Math.sin(textAngle) * 15 + 4);
-            });
-        }
-
-        window.onload = () => { if(currentNodeID) renderNode(currentNodeID); };
-    </script>
-</body>
-</html>