go to container

00_aMeta/toolz/CYOA/main.go

@@ -1,10 +1,11 @@
 package main
 
 import (
+	"encoding/json"
 	"flag"
 	"fmt"
-	"html"
 	"html/template"
+	"io"
 	"net/http"
 	"os"
 	"os/exec"
@@ -13,24 +14,22 @@ import (
 	"strings"
 )
 
-// Choice beschreibt eine Entscheidungsmöglichkeit zu einem Ziel-Knoten
 type Choice struct {
 	TargetID string `json:"targetId"`
 	Text     string `json:"text"`
 }
 
-// StoryNode repräsentiert einen einzelnen Knotenpunkt in der Geschichte
 type StoryNode struct {
-	ID         string   `json:"id"`
+	ID         string            `json:"id"`
-	Title      string   `json:"title"`
+	Title      string            `json:"title"`
-	Content    string   `json:"content"`
+	Content    template.HTML     `json:"content"` // HTML für das Asciidoctor Rendering
-	Choices    []Choice `json:"choices"`
+	Choices    []Choice          `json:"choices"`
-	IsReboot   bool     `json:"isReboot"`
+	IsReboot   bool              `json:"isReboot"`
-	IsEnd      bool     `json:"isEnd"`
+	IsEnd      bool              `json:"isEnd"`
-	FileSource string   `json:"fileSource"`
+	FileSource string            `json:"fileSource"`
+	Metadata   map[string]string `json:"metadata"`
 }
 
-// StoryGraph hält alle Knoten und Analyse-Daten
 type StoryGraph struct {
 	Nodes        map[string]*StoryNode `json:"nodes"`
 	StartNodeID  string                `json:"startNodeId"`
@@ -39,689 +38,250 @@ type StoryGraph struct {
 	DeadEndNodes []string              `json:"deadEndNodes"`
 }
 
+var (
+	adocNodeRegex   = regexp.MustCompile(`\[\[([a-zA-Z0-9_\-]+)\]\]`)
+	adocChoiceRegex = regexp.MustCompile(`<<([a-zA-Z0-9_\-]+)\s*,\s*([^>]+)>>`)
+	mdChoiceRegex   = regexp.MustCompile(`\[([^\]]+)\]\((?:#)?([a-zA-Z0-9_\-]+)\)`)
+	headingRegex    = regexp.MustCompile(`^(?:={1,4}|#{1,4})\s+(.+)`)
+	metaRegex       = regexp.MustCompile(`(?i)\[meta:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]`)
+)
+
 func main() {
-	dirPtr := flag.String("dir", ".", "Verzeichnis mit AsciiDoc oder Markdown Story-Dateien")
+	dirPtr := flag.String("dir", ".", "Verzeichnis mit AsciiDoc/Markdown Dateien")
-	outPtr := flag.String("out", "export/story.html", "Zielpfad für die generierte HTML-Datei")
+	outPtr := flag.String("out", "export/story.html", "Zielpfad für den Dateiexport")
-	servePtr := flag.Bool("serve", false, "Startet einen lokalen Preview-Webserver auf -port")
+	tmplPtr := flag.String("tmpl", "template.html", "Pfad zur ausgelagerten HTML/JS Template-Datei")
-	portPtr := flag.Int("port", 8080, "Port für den Preview-Webserver")
+	servePtr := flag.Bool("serve", false, "Startet den API- & Preview-Server")
+	portPtr := flag.Int("port", 8080, "Port für den Server")
 	flag.Parse()
 
-	fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine & Generator ===\033[0m")
+	fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine (Asciidoctor Bindings) ===\033[0m")
-
-	graph := loadStoryGraph(*dirPtr)
-	validateGraph(graph)
-
-	// Export-Verzeichnis anlegen falls nicht vorhanden
-	outDir := filepath.Dir(*outPtr)
-	if err := os.MkdirAll(outDir, 0755); err != nil {
-		fmt.Printf("\033[1;31m[FEHLER]\033[0m Kann Ordner %s nicht erstellen: %v\n", outDir, err)
-		os.Exit(1)
-	}
-
-	// Single-File HTML generieren
-	err := generateHTML(graph, *outPtr)
-	if err != nil {
-		fmt.Printf("\033[1;31m[FEHLER]\033[0m Fehler beim Schreiben der HTML-Datei: %v\n", err)
-		os.Exit(1)
-	}
-
-	fmt.Printf("\033[1;32m[ERFOLG]\033[0m Interaktive Story generiert -> \033[1;33m%s\033[0m\n", *outPtr)
 
 	if *servePtr {
-		startServer(graph, *outPtr, *portPtr, *dirPtr)
+		startServer(*portPtr, *dirPtr, *outPtr, *tmplPtr)
+		return
 	}
+
+	graph := loadStoryGraphFromDir(*dirPtr)
+	validateGraph(graph)
+
+	outDir := filepath.Dir(*outPtr)
+	os.MkdirAll(outDir, 0755)
+
+	if err := generateHTMLFile(graph, *outPtr, *tmplPtr); err != nil {
+		fmt.Printf("\033[1;31m[FEHLER]\033[0m %v\n", err)
+		os.Exit(1)
+	}
+	fmt.Printf("\033[1;32m[ERFOLG]\033[0m Story generiert -> \033[1;33m%s\033[0m\n", *outPtr)
 }
 
-// loadStoryGraph scannt das Verzeichnis nach .adoc und .md Dateien
+// renderAsciidoctor piped rohen AsciiDoc Text in den lokalen Container-Prozess
-func loadStoryGraph(rootDir string) *StoryGraph {
+func renderAsciidoctor(text string) template.HTML {
-	graph := &StoryGraph{
+	if strings.TrimSpace(text) == "" {
-		Nodes: make(map[string]*StoryNode),
+		return ""
 	}
 	
-	// Regex-Muster für Knoten und Links
+	cmd := exec.Command("asciidoctor", "--embedded", "-")
-	adocNodeRegex := regexp.MustCompile(`\[\[([a-zA-Z0-9_\-]+)\]\]`)
+	cmd.Stdin = strings.NewReader(text)
-	adocChoiceRegex := regexp.MustCompile(`<<([a-zA-Z0-9_\-]+)\s*,\s*([^>]+)>>`)
-	mdChoiceRegex := regexp.MustCompile(`\[([^\]]+)\]\((?:#)?([a-zA-Z0-9_\-]+)\)`)
-	headingRegex := regexp.MustCompile(`^(?:={1,4}|#{1,4})\s+(.+)`)
-
-	err := filepath.Walk(rootDir, func(path string, info os.FileInfo, err error) error {
-		if err != nil || info.IsDir() {
-			return nil
-		}
-
-		ext := strings.ToLower(filepath.Ext(path))
-		if ext != ".adoc" && ext != ".md" {
-			return nil
-		}
-
-		contentBytes, err := os.ReadFile(path)
-		if err != nil {
-			return nil
-		}
-
-		rawContent := string(contentBytes)
-		relPath, _ := filepath.Rel(rootDir, path)
-
-		// Dateien anhand von [[node_id]]-Blöcken aufteilen
-		lines := strings.Split(rawContent, "\n")
-		var currentNode *StoryNode = nil
-		var currentBody strings.Builder
-
-		for _, line := range lines {
-			// Prüfung auf neuen Knoten-Anker [[id]]
-			if matches := adocNodeRegex.FindStringSubmatch(line); len(matches) > 1 {
-				if currentNode != nil {
-					currentNode.Content = renderWithEchoBox(currentBody.String())
-					graph.Nodes[currentNode.ID] = currentNode
-					currentBody.Reset()
-				}
-
-				nodeID := matches[1]
-				currentNode = &StoryNode{
-					ID:         nodeID,
-					Title:      nodeID,
-					Choices:    make([]Choice, 0),
-					FileSource: relPath,
-				}
-				if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" {
-					graph.StartNodeID = nodeID
-				}
-				continue
-			}
-
-			if currentNode == nil {
-				// Fallback: Erste Zeile oder Datei-Header als Standard-Start-Knoten verwenden
-				if strings.TrimSpace(line) != "" {
-					baseID := strings.TrimSuffix(filepath.Base(path), ext)
-					currentNode = &StoryNode{
-						ID:         baseID,
-						Title:      baseID,
-						Choices:    make([]Choice, 0),
-						FileSource: relPath,
-					}
-					if graph.StartNodeID == "" {
-						graph.StartNodeID = baseID
-					}
-				} else {
-					continue
-				}
-			}
-
-			// Titel extrahieren
-			if hMatches := headingRegex.FindStringSubmatch(line); len(hMatches) > 1 && currentNode.Title == currentNode.ID {
-				currentNode.Title = strings.TrimSpace(hMatches[1])
-			}
-
-			// AsciiDoc Verzweigung finden: <<ziel_id, Optionstext>>
-			if cMatches := adocChoiceRegex.FindAllStringSubmatch(line, -1); len(cMatches) > 0 {
-				for _, match := range cMatches {
-					currentNode.Choices = append(currentNode.Choices, Choice{
-						TargetID: match[1],
-						Text:     strings.TrimSpace(match[2]),
-					})
-				}
-			}
-
-			// Markdown Verzweigung finden: [Optionstext](#ziel_id)
-			if mMatches := mdChoiceRegex.FindAllStringSubmatch(line, -1); len(mMatches) > 0 {
-				for _, match := range mMatches {
-					currentNode.Choices = append(currentNode.Choices, Choice{
-						TargetID: match[2],
-						Text:     strings.TrimSpace(match[1]),
-					})
-				}
-			}
-
-			// Status-Kennzeichnungen erkennen
-			lowerLine := strings.ToLower(line)
-			if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") {
-				currentNode.IsReboot = true
-			}
-			if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") {
-				currentNode.IsEnd = true
-			}
-
-			currentBody.WriteString(line + "\n")
-		}
-
-		if currentNode != nil {
-			currentNode.Content = renderWithEchoBox(currentBody.String())
-			graph.Nodes[currentNode.ID] = currentNode
-		}
-
-		return nil
-	})
-
-	if err != nil {
-		fmt.Printf("\033[1;31m[WARNUNG]\033[0m Fehler beim Durchsuchen der Dateien: %v\n", err)
-	}
-
-	return graph
-}
-
-// renderWithEchoBox entfernt Syntax-Rauschen und nutzt den Debian 13 Docker Container als HTML Echo Box
-func renderWithEchoBox(raw string) string {
-	fmt.Println("render with docker")
-	// Links entfernen (Diese sollen als Buttons, nicht als Text-Wirrwarr auftauchen)
-	adocChoiceRegex := regexp.MustCompile(`<<[a-zA-Z0-9_\-]+\s*,\s*([^>]+)>>`)
-	cleaned := adocChoiceRegex.ReplaceAllString(raw, "")
-
-	mdChoiceRegex := regexp.MustCompile(`\[([^\]]+)\]\((?:#)?[a-zA-Z0-9_\-]+\)`)
-	cleaned = mdChoiceRegex.ReplaceAllString(cleaned, "")
-
-	// Docker Echo Box aufrufen (Debian 13 Asciidoctor)
-	cmd := exec.Command("docker", "run", "--rm", "-i", "asciidoctor-echo")
-	cmd.Stdin = strings.NewReader(strings.TrimSpace(cleaned))
 	
 	out, err := cmd.Output()
 	if err != nil {
-		// Fallback bei Docker-Fehler (z.B. wenn der Daemon nicht läuft)
+		fmt.Printf("\033[1;33m[WARNUNG]\033[0m Asciidoctor Rendering fehlgeschlagen: %v\n", err)
-		fmt.Printf("\033[1;31m[DOCKER FEHLER]\033[0m Konnte Echo Box nicht nutzen. Fallback auf RAW Text.\n")
+		// Fallback auf rohen Text (mit rudimentären Linebreaks), falls asciidoctor fehlschlägt
-		return html.EscapeString(strings.TrimSpace(cleaned))
+		fallback := strings.ReplaceAll(text, "\n", "<br>")
+		return template.HTML(fallback)
 	}
 	
-	return string(out)
+	return template.HTML(string(out))
 }
 
-// validateGraph prüft Verzweigungen auf Konsistenz
+func cleanBodyText(raw string) string {
-func validateGraph(g *StoryGraph) {
+	cleaned := adocChoiceRegex.ReplaceAllString(raw, "")
-	fmt.Printf("Gefundene Knotenpunkte: \033[1;32m%d\033[0m | Start-Knoten: \033[1;33m%s\033[0m\n", len(g.Nodes), g.StartNodeID)
+	cleaned = mdChoiceRegex.ReplaceAllString(cleaned, "")
+	return strings.TrimSpace(cleaned)
+}
 
-	referenced := make(map[string]bool)
+func parseContent(rawContent string, sourceName string, graph *StoryGraph) {
-	if g.StartNodeID != "" {
+	lines := strings.Split(rawContent, "\n")
-		referenced[g.StartNodeID] = true
+	var currentNode *StoryNode = nil
+	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{
+				ID:         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" {
+					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
+				}
+			} 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 {
+				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 {
+				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") {
+			currentNode.IsReboot = true
+		}
+		if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") {
+			currentNode.IsEnd = true
+		}
+
+		currentBody.WriteString(line + "\n")
 	}
 
+	if currentNode != nil {
+		currentNode.Content = renderAsciidoctor(cleanBodyText(currentBody.String()))
+		graph.Nodes[currentNode.ID] = currentNode
+	}
+}
+
+func loadStoryGraphFromDir(rootDir string) *StoryGraph {
+	graph := &StoryGraph{Nodes: make(map[string]*StoryNode)}
+	filepath.Walk(rootDir, func(path string, info os.FileInfo, err error) error {
+		if err != nil || info.IsDir() { return nil }
+		ext := strings.ToLower(filepath.Ext(path))
+		if ext != ".adoc" && ext != ".md" { return nil }
+		contentBytes, err := os.ReadFile(path)
+		if err == nil {
+			relPath, _ := filepath.Rel(rootDir, path)
+			parseContent(string(contentBytes), relPath, graph)
+		}
+		return nil
+	})
+	return graph
+}
+
+func validateGraph(g *StoryGraph) {
+	referenced := make(map[string]bool)
+	if g.StartNodeID != "" { referenced[g.StartNodeID] = true }
 	for id, node := range g.Nodes {
-		// Tote Links prüfen
 		for _, choice := range node.Choices {
 			referenced[choice.TargetID] = true
 			if _, exists := g.Nodes[choice.TargetID]; !exists {
 				g.BrokenLinks = append(g.BrokenLinks, fmt.Sprintf("%s -> %s (in %s)", id, choice.TargetID, node.FileSource))
 			}
 		}
-
-		// Sackgassen ohne Choices & ohne End-Markierung
 		if len(node.Choices) == 0 && !node.IsReboot && !node.IsEnd {
 			g.DeadEndNodes = append(g.DeadEndNodes, id)
 		}
 	}
-
-	// Waisen-Knoten ermitteln
 	for id := range g.Nodes {
-		if !referenced[id] {
+		if !referenced[id] { g.OrphanNodes = append(g.OrphanNodes, id) }
-			g.OrphanNodes = append(g.OrphanNodes, id)
-		}
-	}
-
-	// Konsolen-Bericht
-	if len(g.BrokenLinks) > 0 {
-		fmt.Println("\n\033[1;31m[!] DEFEKTE ZIEL-LINKS (Fehlende Knoten):\033[0m")
-		for _, link := range g.BrokenLinks {
-			fmt.Printf("   - %s\n", link)
-		}
-	}
-
-	if len(g.OrphanNodes) > 0 {
-		fmt.Println("\n\033[1;33m[?] UNERREICHBARE KNOTEN (Waisen):\033[0m")
-		for _, orphan := range g.OrphanNodes {
-			fmt.Printf("   - %s\n", orphan)
-		}
-	}
-
-	if len(g.DeadEndNodes) > 0 {
-		fmt.Println("\n\033[1;35m[*] SACKGASSEN OHNE OPTIONEN:\033[0m")
-		for _, dead := range g.DeadEndNodes {
-			fmt.Printf("   - %s\n", dead)
-		}
-	}
-
-	if len(g.BrokenLinks) == 0 && len(g.OrphanNodes) == 0 && len(g.DeadEndNodes) == 0 {
-		fmt.Println("\033[1;32m[✓] Graph-Check bestanden: Alle Verzweigungen sind konsistent!\033[0m")
 	}
 }
 
-// generateHTML erzeugt das eigenständige HTML5 CRT-Terminal Schreibdeck
+// JSON Helper für das Template
-func generateHTML(g *StoryGraph, outPath string) error {
+func getTemplateFuncMap() template.FuncMap {
-	tmpl, err := template.New("story").Parse(htmlTemplate)
+	return template.FuncMap{
-	if err != nil {
+		"json": func(v interface{}) template.JS {
-		return err
+			a, _ := json.Marshal(v)
+			return template.JS(a)
+		},
 	}
+}
 
+func generateHTMLFile(g *StoryGraph, outPath string, tmplPath string) error {
+	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 {
+	if err != nil { return err }
-		return err
-	}
 	defer f.Close()
-
 	return tmpl.Execute(f, g)
 }
 
-// startServer führt den Live-Preview-Webserver aus
+func startServer(port int, watchDir string, htmlPath string, tmplPath string) {
-func startServer(g *StoryGraph, htmlPath string, port int, watchDir string) {
 	addr := fmt.Sprintf(":%d", port)
-	fmt.Printf("\n\033[1;34m[SERVER]\033[0m Live Terminal Web-Engine läuft unter: \033[1;32mhttp://localhost:%d\033[0m\n", port)
+	fmt.Printf("\n\033[1;32m[CONTAINER-API LÄUFT]\033[0m Port: %d | Nutzt Template: %s\n", port, tmplPath)
-	fmt.Println("Drücke Strg+C zum Beenden.")
 
 	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		// Bei jedem Aufruf Graph neu laden für Hot-Reload Feeling
+		w.Header().Set("Access-Control-Allow-Origin", "*")
-		freshGraph := loadStoryGraph(watchDir)
+
-		_ = generateHTML(freshGraph, htmlPath)
+		if r.Method == http.MethodPost {
-		http.ServeFile(w, r, htmlPath)
+			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)
+		}
 	})
 
-	err := http.ListenAndServe(addr, nil)
+	http.ListenAndServe(addr, nil)
-	if err != nil {
-		fmt.Printf("Server-Fehler: %v\n", err)
-	}
 }
-
-// Integrierte Retro-CRT Engine Templates (HTML, CSS, JS)
-const htmlTemplate = `<!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);
-        }
-
-        /* Scanlines & CRT Effekte */
-        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;
-        }
-
-        .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;
-        }
-
-        .node-body {
-            line-height: 1.6;
-            font-size: 1rem;
-            margin-bottom: 20px;
-        }
-
-        /* AsciiDoc Formatierungen im Terminal Look */
-        .node-body p { margin-bottom: 15px; }
-        .node-body ul, .node-body ol { margin-bottom: 15px; margin-left: 20px; }
-        .node-body li { margin-bottom: 5px; }
-        .node-body strong, .node-body b { color: var(--term-amber); }
-        .node-body em, .node-body i { color: var(--term-cyan); font-style: italic;}
-        .node-body code { background: rgba(0, 255, 102, 0.1); padding: 2px 5px; border-radius: 3px; font-family: var(--font-stack); }
-        .node-body h1, .node-body h2, .node-body h3, .node-body h4 { color: var(--term-cyan); margin: 20px 0 10px 0; border-bottom: 1px dashed var(--term-dim); padding-bottom: 5px; }
-        .node-body blockquote { border-left: 3px solid var(--term-dim); padding-left: 10px; margin-bottom: 15px; font-style: italic; opacity: 0.8; }
-
-        .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, .choice-btn:focus {
-            background: var(--term-green);
-            color: var(--bg-color);
-            box-shadow: 0 0 10px var(--term-green);
-            outline: none;
-        }
-
-        .choice-key {
-            background: var(--term-dim);
-            color: var(--term-green);
-            padding: 2px 6px;
-            font-size: 0.8rem;
-            border-radius: 2px;
-        }
-
-        .choice-btn:hover .choice-key {
-            background: var(--bg-color);
-            color: var(--term-green);
-        }
-
-        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">
-            <div class="stat-item">SPEICHERABBILD: <span id="stat-reboots" style="color:var(--term-cyan)">#001</span></div>
-            <div class="stat-item">HYDRAULIK: <span id="stat-hull" style="color:var(--term-green)">100%</span></div>
-            <div class="stat-item">KNOTEN: <span id="stat-node-id" style="color:var(--term-amber)">-</span></div>
-        </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-size:space-between; margin-bottom:10px;">
-            <span style="color:var(--term-cyan)">=== INTERAKTIVER VORHERSAGE-GRAPH ===</span>
-            <button class="btn-small" style="margin-left: auto;" onclick="toggleGraphView()">[X] SCHLIESSEN</button>
-        </div>
-        <canvas id="graph-canvas"></canvas>
-    </div>
-
-    <script>
-        const storyData = {{.}};
-
-        let currentNodeID = storyData.startNodeId || Object.keys(storyData.nodes)[0];
-        let rebootCount = 1;
-        let hullIntegrity = 100;
-        let history = [];
-
-        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 renderNode(id) {
-            const node = storyData.nodes[id];
-            if (!node) {
-                console.error("Knoten nicht gefunden:", id);
-                return;
-            }
-
-            currentNodeID = id;
-            history.push(id);
-
-            playBeep(600, 'sine', 0.04);
-
-            document.getElementById('stat-node-id').innerText = node.id;
-            document.getElementById('node-title').innerText = "=== " + node.title + " ===";
-            // WICHTIG: Nutzt jetzt gerendertes HTML statt purem Text
-            document.getElementById('node-body').innerHTML = node.content; 
-
-            const choicesBox = document.getElementById('choices-box');
-            choicesBox.innerHTML = '';
-
-            if (node.isReboot) {
-                rebootCount++;
-                hullIntegrity = 100;
-                playBeep(200, 'sawtooth', 0.3);
-            }
-
-            document.getElementById('stat-reboots').innerText = '#' + String(rebootCount).padStart(3, '0');
-            document.getElementById('stat-hull').innerText = hullIntegrity + '%';
-
-            if (node.choices && node.choices.length > 0) {
-                node.choices.forEach((choice, index) => {
-                    const btn = document.createElement('button');
-                    btn.className = 'choice-btn';
-                    btn.innerHTML = '<span class="choice-key">[' + (index + 1) + ']</span> ' + choice.text;
-                    btn.onclick = () => renderNode(choice.targetId);
-                    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() {
-            rebootCount++;
-            hullIntegrity = 100;
-            renderNode(storyData.startNodeId);
-        }
-
-        window.addEventListener('keydown', (e) => {
-            if (e.key >= '1' && e.key <= '9') {
-                const idx = parseInt(e.key) - 1;
-                const node = storyData.nodes[currentNodeID];
-                if (node && node.choices && node.choices[idx]) {
-                    renderNode(node.choices[idx].targetId);
-                }
-            } 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);
-            const total = keys.length;
-            const radius = Math.min(canvas.width, canvas.height) * 0.35;
-            const centerX = canvas.width / 2;
-            const centerY = canvas.height / 2;
-
-            const positions = {};
-
-            keys.forEach((key, idx) => {
-                const angle = (idx / total) * 2 * Math.PI;
-                const x = centerX + radius * Math.cos(angle);
-                const y = centerY + radius * Math.sin(angle);
-                positions[key] = { x, y };
-            });
-
-            ctx.strokeStyle = 'rgba(51, 255, 102, 0.3)';
-            ctx.lineWidth = 1;
-
-            keys.forEach(key => {
-                const node = storyData.nodes[key];
-                if (node.choices) {
-                    node.choices.forEach(c => {
-                        if (positions[c.targetId]) {
-                            ctx.beginPath();
-                            ctx.moveTo(positions[key].x, positions[key].y);
-                            ctx.lineTo(positions[c.targetId].x, positions[c.targetId].y);
-                            ctx.stroke();
-                        }
-                    });
-                }
-            });
-
-            keys.forEach(key => {
-                const pos = positions[key];
-                ctx.beginPath();
-                ctx.arc(pos.x, pos.y, 6, 0, 2 * Math.PI);
-                if (key === currentNodeID) {
-                    ctx.fillStyle = '#00ffff';
-                } else if (key === storyData.startNodeId) {
-                    ctx.fillStyle = '#ffb000';
-                } else {
-                    ctx.fillStyle = '#33ff66';
-                }
-                ctx.fill();
-
-                ctx.fillStyle = '#fff';
-                ctx.font = '10px monospace';
-                ctx.fillText(key, pos.x + 10, pos.y + 4);
-            });
-        }
-
-        window.onload = () => {
-            renderNode(currentNodeID);
-        };
-    </script>
-</body>
-</html>`

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

@@ -0,0 +1,336 @@
+<!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>