bad time side project
This commit is contained in:
dexta.de
@@ -0,0 +1,12 @@
|
|||||||
|
#nur einmal
|
||||||
|
go mod init cyoa
|
||||||
|
|
||||||
|
# kompilieren
|
||||||
|
go build -o cyoa-engine main.go
|
||||||
|
|
||||||
|
# Ausführen & Validieren:
|
||||||
|
./cyoa-engine -dir ./stories -out export/story.html
|
||||||
|
|
||||||
|
./cyoa-engine -dir ./stories -serve -port 8080
|
||||||
|
# Wenn du jetzt in Neovim Dateien abspeicherst oder neue `[[node_id]]`-Knoten anlegst, musst du im
|
||||||
|
# Browser nur `http://localhost:8080` aufrufen und siehst sofort deine Änderungen inkl. vollständiger Link-Prüfung!
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
module cyoa
|
||||||
|
|
||||||
|
go 1.26.5
|
||||||
@@ -0,0 +1,730 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"flag"
|
||||||
|
"fmt"
|
||||||
|
"html"
|
||||||
|
"html/template"
|
||||||
|
"net/http"
|
||||||
|
"os"
|
||||||
|
"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
|
||||||
|
// AsciiDoc: [[node_id]] gefolgt von === Titel
|
||||||
|
// Markdown: # node_id oder [[node_id]]
|
||||||
|
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 = 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,
|
||||||
|
}
|
||||||
|
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 = cleanBodyText(currentBody.String())
|
||||||
|
graph.Nodes[currentNode.ID] = currentNode
|
||||||
|
}
|
||||||
|
|
||||||
|
return nil
|
||||||
|
})
|
||||||
|
|
||||||
|
if err != nil {
|
||||||
|
fmt.Printf("\033[1;31m[WAR NUNG]\033[0m Fehler beim Durchsuchen der Dateien: %v\n", err)
|
||||||
|
}
|
||||||
|
|
||||||
|
return graph
|
||||||
|
}
|
||||||
|
|
||||||
|
// cleanBodyText entfernt Syntax-Rauschen für die HTML-Darstellung
|
||||||
|
func cleanBodyText(raw string) string {
|
||||||
|
// Links entfernen/bereinigen
|
||||||
|
adocChoiceRegex := regexp.MustCompile(`<<[a-zA-Z0-9_\-]+\s*,\s*([^>]+)>>`)
|
||||||
|
cleaned := adocChoiceRegex.ReplaceAllString(raw, "")
|
||||||
|
|
||||||
|
mdChoiceRegex := regexp.MustCompile(`\[([^\]]+)\]\((?:#)?[a-zA-Z0-9_\-]+\)`)
|
||||||
|
cleaned = mdChoiceRegex.ReplaceAllString(cleaned, "")
|
||||||
|
|
||||||
|
// HTML-Maskierung
|
||||||
|
return html.EscapeString(strings.TrimSpace(cleaned))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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[!] DEFECKTE 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)
|
||||||
|
})
|
||||||
|
|
||||||
|
http.HandleFunc("/api/graph", func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
w.Header().Set("Content-Type", "application/json")
|
||||||
|
freshGraph := loadStoryGraph(watchDir)
|
||||||
|
// Einfacher JSON Output
|
||||||
|
fmt.Fprintf(w, `{"nodes":%d, "start":"%s"}`, len(freshGraph.Nodes), freshGraph.StartNodeID)
|
||||||
|
})
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Window Maker Header */
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hauptbereich */
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Story Terminal Content */
|
||||||
|
.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;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Choices List */
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Controls & Graph Modal Toggle */
|
||||||
|
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 Canvas View */
|
||||||
|
#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>
|
||||||
|
|
||||||
|
<!-- Visual Graph Overlay -->
|
||||||
|
<div id="graph-modal">
|
||||||
|
<div style="display:flex; justify-size:space-between; margin-bottom:100px;">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Story Graph Injection aus Go Backend
|
||||||
|
const storyData = {{.}};
|
||||||
|
|
||||||
|
let currentNodeID = storyData.startNodeId || Object.keys(storyData.nodes)[0];
|
||||||
|
let rebootCount = 1;
|
||||||
|
let hullIntegrity = 100;
|
||||||
|
let history = [];
|
||||||
|
|
||||||
|
// Synthesizer Audio API (Retro-Beeps)
|
||||||
|
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 + " ===";
|
||||||
|
document.getElementById('node-body').innerText = 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Automatischer Scroll nach oben
|
||||||
|
document.getElementById('terminal-viewport').scrollTop = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function restartStory() {
|
||||||
|
rebootCount++;
|
||||||
|
hullIntegrity = 100;
|
||||||
|
renderNode(storyData.startNodeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyboard Shortcuts
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Visueller Canvas Graph
|
||||||
|
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 = {};
|
||||||
|
|
||||||
|
// Knoten im Kreis anordnen
|
||||||
|
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 };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Kanten zeichnen
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Knotenpunkte zeichnen
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Starten
|
||||||
|
window.onload = () => {
|
||||||
|
renderNode(currentNodeID);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>`
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
[[ausweichen]]
|
||||||
|
=== Knotenpunkt: Ausweichmanöver
|
||||||
|
|
||||||
|
[WARNING]
|
||||||
|
====
|
||||||
|
Systemmeldung: Kinetischer Impuls zu schwach. Magnetischer Fallschirm reagiert träge[cite: 66].
|
||||||
|
====
|
||||||
|
|
||||||
|
Du zündest die Steuerdüsen im vakuumverdichteten Plasma[cite: 68]. Die Kräftewirkung ist enorm[cite: 68]. Dein Speicherabbild verzeichnet eine Parallele zu einem früheren Zyklus – ein Fehler, der dich damals die Primärhülle kostete[cite: 103].
|
||||||
|
|
||||||
|
* <<abbau, [01] Den Asteroiden trotz Schieflage anbohren.>>
|
||||||
|
* <<reboot, [02] Selbstaufgabe einleiten und Speicherabbild an die Hauptmaschine senden.>>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
[[start]]
|
||||||
|
=== Sektor 42-A: Die erste Annäherung
|
||||||
|
|
||||||
|
Deine Sensoren erfassen eine massive Dichteschwankung im Trümmerfeld der Oortschen Wolke[cite: 66]. Die Panzerung deines Ernteschiffs vibriert leicht, als der elektromagnetische Trichter Staub einsaugt[cite: 67, 68].
|
||||||
|
|
||||||
|
Vor dir ragt ein eisenhaltiger Asteroid auf – ein echter "Felsenriese"[cite: 70]. Deine Hydraulik meldet kritische Druckverluste in Trakte 3[cite: 94].
|
||||||
|
|
||||||
|
* Was entscheidest du, Instanz-404?
|
||||||
|
|
||||||
|
* <<abbau, [01] Sofortigen Plasma-Trichter aktivieren und Bohrung einleiten.>>
|
||||||
|
* <<ausweichen, [02] Not-Ausweichmanöver fliegen und den Druckabfall analysieren.>>
|
||||||
Reference in New Issue
Block a user