727 lines
23 KiB
Go
727 lines
23 KiB
Go
package main
|
|
|
|
import (
|
|
"flag"
|
|
"fmt"
|
|
"html"
|
|
"html/template"
|
|
"net/http"
|
|
"os"
|
|
"os/exec"
|
|
"path/filepath"
|
|
"regexp"
|
|
"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"`
|
|
Title string `json:"title"`
|
|
Content string `json:"content"`
|
|
Choices []Choice `json:"choices"`
|
|
IsReboot bool `json:"isReboot"`
|
|
IsEnd bool `json:"isEnd"`
|
|
FileSource string `json:"fileSource"`
|
|
}
|
|
|
|
// StoryGraph hält alle Knoten und Analyse-Daten
|
|
type StoryGraph struct {
|
|
Nodes map[string]*StoryNode `json:"nodes"`
|
|
StartNodeID string `json:"startNodeId"`
|
|
BrokenLinks []string `json:"brokenLinks"`
|
|
OrphanNodes []string `json:"orphanNodes"`
|
|
DeadEndNodes []string `json:"deadEndNodes"`
|
|
}
|
|
|
|
func main() {
|
|
dirPtr := flag.String("dir", ".", "Verzeichnis mit AsciiDoc oder Markdown Story-Dateien")
|
|
outPtr := flag.String("out", "export/story.html", "Zielpfad für die generierte HTML-Datei")
|
|
servePtr := flag.Bool("serve", false, "Startet einen lokalen Preview-Webserver auf -port")
|
|
portPtr := flag.Int("port", 8080, "Port für den Preview-Webserver")
|
|
flag.Parse()
|
|
|
|
fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine & Generator ===\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)
|
|
}
|
|
}
|
|
|
|
// loadStoryGraph scannt das Verzeichnis nach .adoc und .md Dateien
|
|
func loadStoryGraph(rootDir string) *StoryGraph {
|
|
graph := &StoryGraph{
|
|
Nodes: make(map[string]*StoryNode),
|
|
}
|
|
|
|
// Regex-Muster für Knoten und Links
|
|
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+(.+)`)
|
|
|
|
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;31m[DOCKER FEHLER]\033[0m Konnte Echo Box nicht nutzen. Fallback auf RAW Text.\n")
|
|
return html.EscapeString(strings.TrimSpace(cleaned))
|
|
}
|
|
|
|
return string(out)
|
|
}
|
|
|
|
// validateGraph prüft Verzweigungen auf Konsistenz
|
|
func validateGraph(g *StoryGraph) {
|
|
fmt.Printf("Gefundene Knotenpunkte: \033[1;32m%d\033[0m | Start-Knoten: \033[1;33m%s\033[0m\n", len(g.Nodes), g.StartNodeID)
|
|
|
|
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] {
|
|
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
|
|
func generateHTML(g *StoryGraph, outPath string) error {
|
|
tmpl, err := template.New("story").Parse(htmlTemplate)
|
|
if err != nil {
|
|
return err
|
|
}
|
|
|
|
f, err := os.Create(outPath)
|
|
if err != nil {
|
|
return err
|
|
}
|
|
defer f.Close()
|
|
|
|
return tmpl.Execute(f, g)
|
|
}
|
|
|
|
// startServer führt den Live-Preview-Webserver aus
|
|
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.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
|
|
freshGraph := loadStoryGraph(watchDir)
|
|
_ = generateHTML(freshGraph, htmlPath)
|
|
http.ServeFile(w, r, htmlPath)
|
|
})
|
|
|
|
err := 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>` |