go to container
This commit is contained in:
+133
-573
@@ -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"`
|
||||
Title string `json:"title"`
|
||||
Content string `json:"content"`
|
||||
Content template.HTML `json:"content"` // HTML für das Asciidoctor Rendering
|
||||
Choices []Choice `json:"choices"`
|
||||
IsReboot bool `json:"isReboot"`
|
||||
IsEnd bool `json:"isEnd"`
|
||||
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,89 +38,89 @@ 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")
|
||||
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")
|
||||
dirPtr := flag.String("dir", ".", "Verzeichnis mit AsciiDoc/Markdown Dateien")
|
||||
outPtr := flag.String("out", "export/story.html", "Zielpfad für den Dateiexport")
|
||||
tmplPtr := flag.String("tmpl", "template.html", "Pfad zur ausgelagerten HTML/JS Template-Datei")
|
||||
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")
|
||||
|
||||
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)
|
||||
fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine (Asciidoctor Bindings) ===\033[0m")
|
||||
|
||||
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
|
||||
func loadStoryGraph(rootDir string) *StoryGraph {
|
||||
graph := &StoryGraph{
|
||||
Nodes: make(map[string]*StoryNode),
|
||||
// renderAsciidoctor piped rohen AsciiDoc Text in den lokalen Container-Prozess
|
||||
func renderAsciidoctor(text string) template.HTML {
|
||||
if strings.TrimSpace(text) == "" {
|
||||
return ""
|
||||
}
|
||||
|
||||
// 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+(.+)`)
|
||||
cmd := exec.Command("asciidoctor", "--embedded", "-")
|
||||
cmd.Stdin = strings.NewReader(text)
|
||||
|
||||
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)
|
||||
out, err := cmd.Output()
|
||||
if err != nil {
|
||||
return 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
|
||||
fallback := strings.ReplaceAll(text, "\n", "<br>")
|
||||
return template.HTML(fallback)
|
||||
}
|
||||
|
||||
rawContent := string(contentBytes)
|
||||
relPath, _ := filepath.Rel(rootDir, path)
|
||||
return template.HTML(string(out))
|
||||
}
|
||||
|
||||
// Dateien anhand von [[node_id]]-Blöcken aufteilen
|
||||
func cleanBodyText(raw string) string {
|
||||
cleaned := adocChoiceRegex.ReplaceAllString(raw, "")
|
||||
cleaned = mdChoiceRegex.ReplaceAllString(cleaned, "")
|
||||
return strings.TrimSpace(cleaned)
|
||||
}
|
||||
|
||||
func parseContent(rawContent string, sourceName string, graph *StoryGraph) {
|
||||
lines := strings.Split(rawContent, "\n")
|
||||
var currentNode *StoryNode = nil
|
||||
var currentBody strings.Builder
|
||||
|
||||
for _, line := range lines {
|
||||
// Prüfung auf neuen Knoten-Anker [[id]]
|
||||
// Knotenpunkte identifizieren
|
||||
if matches := adocNodeRegex.FindStringSubmatch(line); len(matches) > 1 {
|
||||
if currentNode != nil {
|
||||
currentNode.Content = renderWithEchoBox(currentBody.String())
|
||||
// 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: relPath,
|
||||
FileSource: sourceName,
|
||||
Metadata: make(map[string]string),
|
||||
}
|
||||
if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" {
|
||||
graph.StartNodeID = nodeID
|
||||
@@ -130,14 +129,17 @@ func loadStoryGraph(rootDir string) *StoryGraph {
|
||||
}
|
||||
|
||||
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)
|
||||
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: relPath,
|
||||
FileSource: sourceName,
|
||||
Metadata: make(map[string]string),
|
||||
}
|
||||
if graph.StartNodeID == "" {
|
||||
graph.StartNodeID = baseID
|
||||
@@ -147,32 +149,32 @@ func loadStoryGraph(rootDir string) *StoryGraph {
|
||||
}
|
||||
}
|
||||
|
||||
// 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])
|
||||
}
|
||||
|
||||
// AsciiDoc Verzweigung finden: <<ziel_id, Optionstext>>
|
||||
// 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]),
|
||||
})
|
||||
currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[1], Text: strings.TrimSpace(match[2])})
|
||||
}
|
||||
}
|
||||
|
||||
// Markdown Verzweigung finden: [Optionstext](#ziel_id)
|
||||
// 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]),
|
||||
})
|
||||
currentNode.Choices = append(currentNode.Choices, Choice{TargetID: match[2], Text: strings.TrimSpace(match[1])})
|
||||
}
|
||||
}
|
||||
|
||||
// Status-Kennzeichnungen erkennen
|
||||
// Spezielle System-Tags prüfen
|
||||
lowerLine := strings.ToLower(line)
|
||||
if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") {
|
||||
currentNode.IsReboot = true
|
||||
@@ -185,543 +187,101 @@ func loadStoryGraph(rootDir string) *StoryGraph {
|
||||
}
|
||||
|
||||
if currentNode != nil {
|
||||
currentNode.Content = renderWithEchoBox(currentBody.String())
|
||||
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
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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")
|
||||
if !referenced[id] { g.OrphanNodes = append(g.OrphanNodes, id) }
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
// 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 {
|
||||
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
|
||||
}
|
||||
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) {
|
||||
func startServer(port int, watchDir string, htmlPath string, tmplPath 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.")
|
||||
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) {
|
||||
// Bei jedem Aufruf Graph neu laden für Hot-Reload Feeling
|
||||
freshGraph := loadStoryGraph(watchDir)
|
||||
_ = generateHTML(freshGraph, htmlPath)
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
err := http.ListenAndServe(addr, nil)
|
||||
if err != nil {
|
||||
fmt.Printf("Server-Fehler: %v\n", err)
|
||||
}
|
||||
http.ListenAndServe(addr, nil)
|
||||
}
|
||||
|
||||
// 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>`
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user