bad time side project
This commit is contained in:
dexta.de
@@ -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>`
|
||||
Reference in New Issue
Block a user