working for, now writing
This commit is contained in:
@@ -9,9 +9,9 @@ RUN groupadd --gid 1000 flammenderberg && \
|
|||||||
useradd --uid 1000 --gid flammenderberg --shell /bin/bash --create-home hexenmeister
|
useradd --uid 1000 --gid flammenderberg --shell /bin/bash --create-home hexenmeister
|
||||||
|
|
||||||
WORKDIR /weltraum
|
WORKDIR /weltraum
|
||||||
RUN mkdir stories && mkdir export
|
RUN mkdir stories && mkdir export && mkdir frontend
|
||||||
COPY ./cyoa-engine ./
|
COPY ./cyoa-engine ./
|
||||||
ADD ./templates/template.html ./
|
COPY ./frontend ./frontend/
|
||||||
|
|
||||||
RUN chown -R hexenmeister:flammenderberg /weltraum
|
RUN chown -R hexenmeister:flammenderberg /weltraum
|
||||||
|
|
||||||
|
|||||||
@@ -1,173 +0,0 @@
|
|||||||
// engine_ui.js - Reines DOM-Handling und visuelle Logik
|
|
||||||
const EngineUI = {
|
|
||||||
audioCtx: null,
|
|
||||||
|
|
||||||
init: function() {
|
|
||||||
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
||||||
|
|
||||||
const rawData = document.getElementById("story-data").textContent.trim();
|
|
||||||
EngineLogic.init(rawData);
|
|
||||||
|
|
||||||
this.attachEvents();
|
|
||||||
this.renderNode(EngineLogic.state.node);
|
|
||||||
},
|
|
||||||
|
|
||||||
playBeep: function(freq = 440, type = "square", duration = 0.05) {
|
|
||||||
try {
|
|
||||||
if(!this.audioCtx) return;
|
|
||||||
const osc = this.audioCtx.createOscillator();
|
|
||||||
const gain = this.audioCtx.createGain();
|
|
||||||
osc.type = type;
|
|
||||||
osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
|
|
||||||
gain.gain.setValueAtTime(0.05, this.audioCtx.currentTime);
|
|
||||||
gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + duration);
|
|
||||||
osc.connect(gain); gain.connect(this.audioCtx.destination);
|
|
||||||
osc.start(); osc.stop(this.audioCtx.currentTime + duration);
|
|
||||||
} catch(e) {}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderHUD: function() {
|
|
||||||
const hud = document.getElementById("hud-dynamic");
|
|
||||||
hud.innerHTML = "";
|
|
||||||
|
|
||||||
hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(EngineLogic.state.reboots).padStart(3, "0")}</span></div>`;
|
|
||||||
hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${EngineLogic.state.node}</span></div>`;
|
|
||||||
|
|
||||||
Object.keys(EngineLogic.state).forEach(key => {
|
|
||||||
if(key !== "reboots" && key !== "node") {
|
|
||||||
hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${EngineLogic.state[key]}</span></div>`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
renderNode: function(id) {
|
|
||||||
const node = EngineLogic.processNodeEntry(id);
|
|
||||||
if (!node) return;
|
|
||||||
|
|
||||||
this.playBeep(600, "sine", 0.04);
|
|
||||||
if (node.isReboot) this.playBeep(200, "sawtooth", 0.3);
|
|
||||||
|
|
||||||
this.renderHUD();
|
|
||||||
|
|
||||||
document.getElementById("node-title").innerText = "=== " + node.title + " ===";
|
|
||||||
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) => {
|
|
||||||
const parsed = EngineLogic.parseRequirement(choice.text);
|
|
||||||
const btn = document.createElement("button");
|
|
||||||
btn.className = "choice-btn";
|
|
||||||
|
|
||||||
if (parsed.meetsCondition) {
|
|
||||||
btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${parsed.displayText}`;
|
|
||||||
btn.dataset.target = choice.targetId;
|
|
||||||
btn.dataset.index = visibleIndex;
|
|
||||||
btn.onclick = () => this.renderNode(choice.targetId);
|
|
||||||
visibleIndex++;
|
|
||||||
} else {
|
|
||||||
btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${parsed.displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${parsed.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 = () => this.triggerReboot();
|
|
||||||
choicesBox.appendChild(btn);
|
|
||||||
}
|
|
||||||
document.getElementById("terminal-viewport").scrollTop = 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
triggerReboot: function() {
|
|
||||||
const startId = EngineLogic.triggerReboot();
|
|
||||||
if (startId) this.renderNode(startId);
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleGraph: function() {
|
|
||||||
const modal = document.getElementById("graph-modal");
|
|
||||||
if (modal.style.display === "flex") {
|
|
||||||
modal.style.display = "none";
|
|
||||||
} else {
|
|
||||||
modal.style.display = "flex";
|
|
||||||
this.drawGraphCanvas();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
drawGraphCanvas: function() {
|
|
||||||
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(EngineLogic.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 = EngineLogic.storyData.nodes[key];
|
|
||||||
if (node && 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 === EngineLogic.state.node) ctx.fillStyle = "#00ffff";
|
|
||||||
else if (key === EngineLogic.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);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
attachEvents: function() {
|
|
||||||
window.addEventListener("keydown", (e) => {
|
|
||||||
if (document.getElementById("graph-modal").style.display === "flex") {
|
|
||||||
if (e.key.toLowerCase() === "g" || e.key === "Escape") this.toggleGraph();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key >= "1" && e.key <= "9") {
|
|
||||||
const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
|
|
||||||
if (btn && !btn.disabled) this.renderNode(btn.dataset.target);
|
|
||||||
} else if (e.key.toLowerCase() === "r") {
|
|
||||||
this.triggerReboot();
|
|
||||||
} else if (e.key.toLowerCase() === "g") {
|
|
||||||
this.toggleGraph();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onload = () => EngineUI.init();
|
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
// engine_logic.js - Reine State- und Datenverarbeitung (Kein UI, Kein Fetch)
|
||||||
|
const EngineLogic = {
|
||||||
|
storyData: { nodes: {} },
|
||||||
|
state: { reboots: 1, node: "" },
|
||||||
|
|
||||||
|
init: function(dataObj) {
|
||||||
|
if (!dataObj || !dataObj.nodes || Object.keys(dataObj.nodes).length === 0) {
|
||||||
|
console.warn("[System] Ungültige Graph-Daten. Fallback geladen.");
|
||||||
|
this.storyData = {
|
||||||
|
startNodeId: "err",
|
||||||
|
nodes: {
|
||||||
|
"err": {
|
||||||
|
id: "err", title: "SYSTEM OFFLINE",
|
||||||
|
content: "<p>Konnte <code>graph.json</code> nicht laden.</p>",
|
||||||
|
choices: [],
|
||||||
|
metadata: { status: "offline" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.storyData = dataObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state.node = this.storyData.startNodeId || Object.keys(this.storyData.nodes)[0] || "";
|
||||||
|
},
|
||||||
|
|
||||||
|
getNode: function(id) { return this.storyData.nodes[id]; },
|
||||||
|
|
||||||
|
processNodeEntry: function(id) {
|
||||||
|
const node = this.getNode(id);
|
||||||
|
if (!node) return null;
|
||||||
|
|
||||||
|
this.state.node = id;
|
||||||
|
|
||||||
|
if (node.metadata) {
|
||||||
|
Object.keys(node.metadata).forEach(key => {
|
||||||
|
this.state[key] = node.metadata[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.isReboot) this.state.reboots++;
|
||||||
|
return node;
|
||||||
|
},
|
||||||
|
|
||||||
|
parseRequirement: function(choiceText) {
|
||||||
|
let conditionMatch = choiceText.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
|
||||||
|
let displayText = choiceText;
|
||||||
|
let meetsCondition = true;
|
||||||
|
let missingReq = "";
|
||||||
|
|
||||||
|
if (conditionMatch) {
|
||||||
|
let reqKey = conditionMatch[1].toLowerCase();
|
||||||
|
let reqVal = conditionMatch[2];
|
||||||
|
if (String(this.state[reqKey]) !== String(reqVal)) {
|
||||||
|
meetsCondition = false;
|
||||||
|
missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
|
||||||
|
}
|
||||||
|
displayText = displayText.replace(conditionMatch[0], "").trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
return { displayText, meetsCondition, missingReq };
|
||||||
|
},
|
||||||
|
|
||||||
|
triggerReboot: function() {
|
||||||
|
const currentReboots = this.state.reboots + 1;
|
||||||
|
this.state = { reboots: currentReboots };
|
||||||
|
return this.storyData.startNodeId;
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,75 +1,185 @@
|
|||||||
// engine_logic.js - Reine State- und Datenverarbeitung
|
// engine_ui.js - Statisches Rendering & asynchrones Nachladen der graph.json
|
||||||
const EngineLogic = {
|
const EngineUI = {
|
||||||
storyData: { nodes: {} },
|
audioCtx: null,
|
||||||
state: { reboots: 1, node: "" },
|
|
||||||
|
|
||||||
init: function(rawJsonData) {
|
init: async function() {
|
||||||
|
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
||||||
|
if(AudioContext) this.audioCtx = new AudioContext();
|
||||||
|
|
||||||
|
// 1. Asynchroner Fetch der graph.json
|
||||||
|
// (Im Dev-Modus liefert Go dies on-the-fly, im Export-Modus ist es eine Datei)
|
||||||
try {
|
try {
|
||||||
if (!rawJsonData || rawJsonData.trim() === "") throw "Leer";
|
const response = await fetch('graph.json', { cache: "no-store" });
|
||||||
this.storyData = JSON.parse(rawJsonData);
|
if (!response.ok) throw new Error("HTTP Fehler " + response.status);
|
||||||
} catch(e) {
|
const graphData = await response.json();
|
||||||
console.warn("[System] Go-Engine Offline. Fallback Modus geladen.");
|
|
||||||
this.storyData = {
|
// 2. Initialisiere die gekapselte Logik mit den frisch geladenen Daten
|
||||||
startNodeId: "err",
|
EngineLogic.init(graphData);
|
||||||
nodes: {
|
} catch (err) {
|
||||||
"err": {
|
console.error("Fehler beim Abrufen der graph.json:", err);
|
||||||
id: "err", title: "SYSTEM OFFLINE",
|
EngineLogic.init(null);
|
||||||
content: "<p>Konnte <code>[story-data]</code> nicht parsen. Go-Server läuft nicht.</p>",
|
|
||||||
choices: []
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
this.attachEvents();
|
||||||
}
|
this.renderNode(EngineLogic.state.node);
|
||||||
this.state.node = this.storyData.startNodeId || Object.keys(this.storyData.nodes)[0] || "";
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getNode: function(id) {
|
playBeep: function(freq = 440, type = "square", duration = 0.05) {
|
||||||
return this.storyData.nodes[id];
|
try {
|
||||||
|
if(!this.audioCtx) return;
|
||||||
|
const osc = this.audioCtx.createOscillator();
|
||||||
|
const gain = this.audioCtx.createGain();
|
||||||
|
osc.type = type;
|
||||||
|
osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
|
||||||
|
gain.gain.setValueAtTime(0.05, this.audioCtx.currentTime);
|
||||||
|
gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + duration);
|
||||||
|
osc.connect(gain); gain.connect(this.audioCtx.destination);
|
||||||
|
osc.start(); osc.stop(this.audioCtx.currentTime + duration);
|
||||||
|
} catch(e) {}
|
||||||
},
|
},
|
||||||
|
|
||||||
processNodeEntry: function(id) {
|
renderHUD: function() {
|
||||||
const node = this.getNode(id);
|
const hud = document.getElementById("hud-dynamic");
|
||||||
if (!node) return null;
|
hud.innerHTML = "";
|
||||||
|
|
||||||
this.state.node = id;
|
hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(EngineLogic.state.reboots).padStart(3, "0")}</span></div>`;
|
||||||
|
hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${EngineLogic.state.node}</span></div>`;
|
||||||
|
|
||||||
// Metadaten anwenden (z.B. [meta: schild=80])
|
Object.keys(EngineLogic.state).forEach(key => {
|
||||||
if (node.metadata) {
|
if(key !== "reboots" && key !== "node") {
|
||||||
Object.keys(node.metadata).forEach(key => {
|
hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${EngineLogic.state[key]}</span></div>`;
|
||||||
this.state[key] = node.metadata[key];
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// Reboot Erkennung
|
|
||||||
if (node.isReboot) {
|
|
||||||
this.state.reboots++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return node;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
parseRequirement: function(choiceText) {
|
renderNode: function(id) {
|
||||||
let conditionMatch = choiceText.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
|
const node = EngineLogic.processNodeEntry(id);
|
||||||
let displayText = choiceText;
|
if (!node) return;
|
||||||
let meetsCondition = true;
|
|
||||||
let missingReq = "";
|
|
||||||
|
|
||||||
if (conditionMatch) {
|
this.playBeep(600, "sine", 0.04);
|
||||||
let reqKey = conditionMatch[1].toLowerCase();
|
if (node.isReboot) this.playBeep(200, "sawtooth", 0.3);
|
||||||
let reqVal = conditionMatch[2];
|
|
||||||
if (String(this.state[reqKey]) !== String(reqVal)) {
|
|
||||||
meetsCondition = false;
|
|
||||||
missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
|
|
||||||
}
|
|
||||||
displayText = displayText.replace(conditionMatch[0], "").trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
return { displayText, meetsCondition, missingReq };
|
this.renderHUD();
|
||||||
|
|
||||||
|
document.getElementById("node-title").innerText = "=== " + node.title + " ===";
|
||||||
|
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) => {
|
||||||
|
const parsed = EngineLogic.parseRequirement(choice.text);
|
||||||
|
const btn = document.createElement("button");
|
||||||
|
btn.className = "choice-btn";
|
||||||
|
|
||||||
|
if (parsed.meetsCondition) {
|
||||||
|
btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${parsed.displayText}`;
|
||||||
|
btn.dataset.target = choice.targetId;
|
||||||
|
btn.dataset.index = visibleIndex;
|
||||||
|
btn.onclick = () => this.renderNode(choice.targetId);
|
||||||
|
visibleIndex++;
|
||||||
|
} else {
|
||||||
|
btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${parsed.displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${parsed.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 = () => this.triggerReboot();
|
||||||
|
choicesBox.appendChild(btn);
|
||||||
|
}
|
||||||
|
document.getElementById("terminal-viewport").scrollTop = 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
triggerReboot: function() {
|
triggerReboot: function() {
|
||||||
const currentReboots = this.state.reboots + 1;
|
const startId = EngineLogic.triggerReboot();
|
||||||
this.state = { reboots: currentReboots }; // Resets inventory/state
|
if (startId) this.renderNode(startId);
|
||||||
return this.storyData.startNodeId;
|
},
|
||||||
|
|
||||||
|
toggleGraph: function() {
|
||||||
|
const modal = document.getElementById("graph-modal");
|
||||||
|
if (modal.style.display === "flex") {
|
||||||
|
modal.style.display = "none";
|
||||||
|
} else {
|
||||||
|
modal.style.display = "flex";
|
||||||
|
this.drawGraphCanvas();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
drawGraphCanvas: function() {
|
||||||
|
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(EngineLogic.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 = EngineLogic.storyData.nodes[key];
|
||||||
|
if (node && 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 === EngineLogic.state.node) ctx.fillStyle = "#00ffff";
|
||||||
|
else if (key === EngineLogic.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);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
attachEvents: function() {
|
||||||
|
window.addEventListener("keydown", (e) => {
|
||||||
|
if (document.getElementById("graph-modal").style.display === "flex") {
|
||||||
|
if (e.key.toLowerCase() === "g" || e.key === "Escape") this.toggleGraph();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (e.key >= "1" && e.key <= "9") {
|
||||||
|
const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
|
||||||
|
if (btn && !btn.disabled) this.renderNode(btn.dataset.target);
|
||||||
|
} else if (e.key.toLowerCase() === "r") {
|
||||||
|
this.triggerReboot();
|
||||||
|
} else if (e.key.toLowerCase() === "g") {
|
||||||
|
this.toggleGraph();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
window.onload = () => EngineUI.init();
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="sys-title">[COMPUTER HISTORYZ :: INSTANZ_TERMINAL]</div>
|
||||||
|
<div class="hud-stats" id="hud-dynamic"></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="EngineUI.toggleGraph()">[G] KNOTEN-GRAPH</button>
|
||||||
|
<button class="btn-small" onclick="EngineUI.triggerReboot()">[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="EngineUI.toggleGraph()">[X] SCHLIESSEN</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="graph-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vollständige Trennung: Eigene Dateien statt Injektion -->
|
||||||
|
<script src="engine_logic.js"></script>
|
||||||
|
<script src="engine_ui.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,373 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<!-- Eigenständiges Styling (Kapselung in der Master-Datei für fehlerfreies Preview) -->
|
|
||||||
<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 */
|
|
||||||
.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"></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="EngineUI.toggleGraph()">[G] KNOTEN-GRAPH</button>
|
|
||||||
<button class="btn-small" onclick="EngineUI.triggerReboot()">[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="EngineUI.toggleGraph()">[X] SCHLIESSEN</button>
|
|
||||||
</div>
|
|
||||||
<canvas id="graph-canvas"></canvas>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- JSON Injektion (Absolut sicher vor Go-Template Konflikten, da Typ application/json ist) -->
|
|
||||||
<script id="story-data" type="application/json">{{ .Graph }}</script>
|
|
||||||
|
|
||||||
<!-- Modulare JS-Block 1: Engine Logic -->
|
|
||||||
<script id="engine-logic">
|
|
||||||
// engine_logic.js - Reine State- und Datenverarbeitung
|
|
||||||
const EngineLogic = {
|
|
||||||
storyData: { nodes: {} },
|
|
||||||
state: { reboots: 1, node: "" },
|
|
||||||
|
|
||||||
init: function(rawJsonData) {
|
|
||||||
try {
|
|
||||||
// Fallback-Prüfung schützt vor fehlerhafter Injektion im Offline-Modus
|
|
||||||
if (!rawJsonData || rawJsonData.trim() === "" || rawJsonData.startsWith("{{")) throw "Leer";
|
|
||||||
this.storyData = JSON.parse(rawJsonData);
|
|
||||||
} catch(e) {
|
|
||||||
console.warn("[System] Go-Engine Offline. Fallback Modus geladen.");
|
|
||||||
this.storyData = {
|
|
||||||
startNodeId: "preview_start",
|
|
||||||
nodes: {
|
|
||||||
"preview_start": {
|
|
||||||
id: "preview_start",
|
|
||||||
title: "SYSTEM OFFLINE / PREVIEW MODUS",
|
|
||||||
content: "<p>Konnte <code>[story-data]</code> nicht parsen. Go-Server läuft nicht oder dies ist ein nativer Preview.</p><p>Die JS-Syntaxfehler wurden restlos eliminiert!</p>",
|
|
||||||
choices: [{targetId: "preview_start", text: "Endlosschleife testen"}],
|
|
||||||
metadata: { status: "offline", ui: "modular" }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
this.state.node = this.storyData.startNodeId || Object.keys(this.storyData.nodes)[0] || "";
|
|
||||||
},
|
|
||||||
|
|
||||||
getNode: function(id) {
|
|
||||||
return this.storyData.nodes[id];
|
|
||||||
},
|
|
||||||
|
|
||||||
processNodeEntry: function(id) {
|
|
||||||
const node = this.getNode(id);
|
|
||||||
if (!node) return null;
|
|
||||||
|
|
||||||
this.state.node = id;
|
|
||||||
|
|
||||||
// Metadaten anwenden
|
|
||||||
if (node.metadata) {
|
|
||||||
Object.keys(node.metadata).forEach(key => {
|
|
||||||
this.state[key] = node.metadata[key];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reboot Erkennung
|
|
||||||
if (node.isReboot) {
|
|
||||||
this.state.reboots++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return node;
|
|
||||||
},
|
|
||||||
|
|
||||||
parseRequirement: function(choiceText) {
|
|
||||||
let conditionMatch = choiceText.match(/\[req:\s*([a-zA-Z0-9_]+)\s*=\s*([^\]]+)\]/i);
|
|
||||||
let displayText = choiceText;
|
|
||||||
let meetsCondition = true;
|
|
||||||
let missingReq = "";
|
|
||||||
|
|
||||||
if (conditionMatch) {
|
|
||||||
let reqKey = conditionMatch[1].toLowerCase();
|
|
||||||
let reqVal = conditionMatch[2];
|
|
||||||
if (String(this.state[reqKey]) !== String(reqVal)) {
|
|
||||||
meetsCondition = false;
|
|
||||||
missingReq = `(Benötigt: ${reqKey}=${reqVal})`;
|
|
||||||
}
|
|
||||||
displayText = displayText.replace(conditionMatch[0], "").trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
return { displayText, meetsCondition, missingReq };
|
|
||||||
},
|
|
||||||
|
|
||||||
triggerReboot: function() {
|
|
||||||
const currentReboots = this.state.reboots + 1;
|
|
||||||
this.state = { reboots: currentReboots }; // Resets inventory/state
|
|
||||||
return this.storyData.startNodeId;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Modulare JS-Block 2: Engine UI -->
|
|
||||||
<script id="engine-ui">
|
|
||||||
// engine_ui.js - Reines DOM-Handling und visuelle Logik
|
|
||||||
const EngineUI = {
|
|
||||||
audioCtx: null,
|
|
||||||
|
|
||||||
init: function() {
|
|
||||||
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
||||||
if(AudioContext) this.audioCtx = new AudioContext();
|
|
||||||
|
|
||||||
const rawData = document.getElementById("story-data").textContent.trim();
|
|
||||||
EngineLogic.init(rawData);
|
|
||||||
|
|
||||||
this.attachEvents();
|
|
||||||
this.renderNode(EngineLogic.state.node);
|
|
||||||
},
|
|
||||||
|
|
||||||
playBeep: function(freq = 440, type = "square", duration = 0.05) {
|
|
||||||
try {
|
|
||||||
if(!this.audioCtx) return;
|
|
||||||
const osc = this.audioCtx.createOscillator();
|
|
||||||
const gain = this.audioCtx.createGain();
|
|
||||||
osc.type = type;
|
|
||||||
osc.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
|
|
||||||
gain.gain.setValueAtTime(0.05, this.audioCtx.currentTime);
|
|
||||||
gain.gain.exponentialRampToValueAtTime(0.001, this.audioCtx.currentTime + duration);
|
|
||||||
osc.connect(gain); gain.connect(this.audioCtx.destination);
|
|
||||||
osc.start(); osc.stop(this.audioCtx.currentTime + duration);
|
|
||||||
} catch(e) {}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderHUD: function() {
|
|
||||||
const hud = document.getElementById("hud-dynamic");
|
|
||||||
hud.innerHTML = "";
|
|
||||||
|
|
||||||
hud.innerHTML += `<div class="stat-item">REBOOTS: <span style="color:var(--term-cyan)">#${String(EngineLogic.state.reboots).padStart(3, "0")}</span></div>`;
|
|
||||||
hud.innerHTML += `<div class="stat-item">KNOTEN: <span style="color:var(--term-amber)">${EngineLogic.state.node}</span></div>`;
|
|
||||||
|
|
||||||
Object.keys(EngineLogic.state).forEach(key => {
|
|
||||||
if(key !== "reboots" && key !== "node") {
|
|
||||||
hud.innerHTML += `<div class="stat-item">${key.toUpperCase()}: <span style="color:var(--term-green)">${EngineLogic.state[key]}</span></div>`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
renderNode: function(id) {
|
|
||||||
const node = EngineLogic.processNodeEntry(id);
|
|
||||||
if (!node) return;
|
|
||||||
|
|
||||||
this.playBeep(600, "sine", 0.04);
|
|
||||||
if (node.isReboot) this.playBeep(200, "sawtooth", 0.3);
|
|
||||||
|
|
||||||
this.renderHUD();
|
|
||||||
|
|
||||||
document.getElementById("node-title").innerText = "=== " + node.title + " ===";
|
|
||||||
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) => {
|
|
||||||
const parsed = EngineLogic.parseRequirement(choice.text);
|
|
||||||
const btn = document.createElement("button");
|
|
||||||
btn.className = "choice-btn";
|
|
||||||
|
|
||||||
if (parsed.meetsCondition) {
|
|
||||||
btn.innerHTML = `<span class="choice-key">[${visibleIndex}]</span> ${parsed.displayText}`;
|
|
||||||
btn.dataset.target = choice.targetId;
|
|
||||||
btn.dataset.index = visibleIndex;
|
|
||||||
btn.onclick = () => this.renderNode(choice.targetId);
|
|
||||||
visibleIndex++;
|
|
||||||
} else {
|
|
||||||
btn.innerHTML = `<span class="choice-key">[LOCKED]</span> ${parsed.displayText} <span style="color:var(--term-warn); font-size:0.8rem; margin-left:auto;">${parsed.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 = () => this.triggerReboot();
|
|
||||||
choicesBox.appendChild(btn);
|
|
||||||
}
|
|
||||||
document.getElementById("terminal-viewport").scrollTop = 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
triggerReboot: function() {
|
|
||||||
const startId = EngineLogic.triggerReboot();
|
|
||||||
if (startId) this.renderNode(startId);
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleGraph: function() {
|
|
||||||
const modal = document.getElementById("graph-modal");
|
|
||||||
if (modal.style.display === "flex") {
|
|
||||||
modal.style.display = "none";
|
|
||||||
} else {
|
|
||||||
modal.style.display = "flex";
|
|
||||||
this.drawGraphCanvas();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
drawGraphCanvas: function() {
|
|
||||||
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(EngineLogic.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 = EngineLogic.storyData.nodes[key];
|
|
||||||
if (node && 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 === EngineLogic.state.node) ctx.fillStyle = "#00ffff";
|
|
||||||
else if (key === EngineLogic.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);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
attachEvents: function() {
|
|
||||||
window.addEventListener("keydown", (e) => {
|
|
||||||
if (document.getElementById("graph-modal").style.display === "flex") {
|
|
||||||
if (e.key.toLowerCase() === "g" || e.key === "Escape") this.toggleGraph();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key >= "1" && e.key <= "9") {
|
|
||||||
const btn = document.querySelector(`.choice-btn[data-index="${e.key}"]`);
|
|
||||||
if (btn && !btn.disabled) this.renderNode(btn.dataset.target);
|
|
||||||
} else if (e.key.toLowerCase() === "r") {
|
|
||||||
this.triggerReboot();
|
|
||||||
} else if (e.key.toLowerCase() === "g") {
|
|
||||||
this.toggleGraph();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onload = () => EngineUI.init();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
+47
-100
@@ -21,7 +21,7 @@ type Choice struct {
|
|||||||
type StoryNode struct {
|
type StoryNode struct {
|
||||||
ID string `json:"id"`
|
ID string `json:"id"`
|
||||||
Title string `json:"title"`
|
Title string `json:"title"`
|
||||||
Content string `json:"content"` // Reiner String, JSON kümmert sich um das Escaping des HTMLs
|
Content string `json:"content"`
|
||||||
Choices []Choice `json:"choices"`
|
Choices []Choice `json:"choices"`
|
||||||
IsReboot bool `json:"isReboot"`
|
IsReboot bool `json:"isReboot"`
|
||||||
IsEnd bool `json:"isEnd"`
|
IsEnd bool `json:"isEnd"`
|
||||||
@@ -48,12 +48,12 @@ var (
|
|||||||
func main() {
|
func main() {
|
||||||
dirPtr := flag.String("dir", "./stories", "Verzeichnis mit AsciiDoc/Markdown Dateien")
|
dirPtr := flag.String("dir", "./stories", "Verzeichnis mit AsciiDoc/Markdown Dateien")
|
||||||
frontendPtr := flag.String("frontend", "./frontend", "Pfad zum Verzeichnis der statischen Frontend-Dateien")
|
frontendPtr := flag.String("frontend", "./frontend", "Pfad zum Verzeichnis der statischen Frontend-Dateien")
|
||||||
outPtr := flag.String("out", "export/story.html", "Zielpfad für den Dateiexport (Single-File HTML)")
|
outPtr := flag.String("out", "export", "Ziel-Ordner für den Dateiexport (SSG Modus)")
|
||||||
servePtr := flag.Bool("serve", false, "Startet den API- & Preview-Server, statt zu exportieren")
|
servePtr := flag.Bool("serve", false, "Startet den Live-Preview-Server (API Modus)")
|
||||||
portPtr := flag.Int("port", 3344, "Port für den Server")
|
portPtr := flag.Int("port", 3344, "Port für den Server")
|
||||||
flag.Parse()
|
flag.Parse()
|
||||||
|
|
||||||
fmt.Println("\033[1;36m=== Computer Historyz :: CYOA Engine ===\033[0m")
|
fmt.Println("\033[1;36m=== Computer Historyz :: CYOA SSG & API ===\033[0m")
|
||||||
|
|
||||||
if info, err := os.Stat(*frontendPtr); os.IsNotExist(err) || !info.IsDir() {
|
if info, err := os.Stat(*frontendPtr); os.IsNotExist(err) || !info.IsDir() {
|
||||||
fmt.Printf("\033[1;33m[WARNUNG]\033[0m Frontend-Verzeichnis '%s' nicht gefunden!\n", *frontendPtr)
|
fmt.Printf("\033[1;33m[WARNUNG]\033[0m Frontend-Verzeichnis '%s' nicht gefunden!\n", *frontendPtr)
|
||||||
@@ -64,104 +64,79 @@ func main() {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- EXPORT MODUS ---
|
// --- EXPORT MODUS (Static Site Generation) ---
|
||||||
fmt.Printf("\033[1;34m[EXPORT]\033[0m Kompiliere Story-Graph via Asciidoctor aus '%s'...\n", *dirPtr)
|
fmt.Printf("\033[1;34m[EXPORT]\033[0m Kompiliere Story-Graph via Asciidoctor...\n")
|
||||||
graph := loadStoryGraphFromDir(*dirPtr)
|
graph := loadStoryGraphFromDir(*dirPtr)
|
||||||
validateGraph(graph)
|
validateGraph(graph)
|
||||||
|
|
||||||
outDir := filepath.Dir(*outPtr)
|
// Export Ordner anlegen
|
||||||
os.MkdirAll(outDir, 0755)
|
os.MkdirAll(*outPtr, 0755)
|
||||||
|
|
||||||
err := buildSingleFileExport(graph, *frontendPtr, *outPtr)
|
// 1. Statische Daten als JSON schreiben
|
||||||
if err != nil {
|
graphPath := filepath.Join(*outPtr, "graph.json")
|
||||||
fmt.Printf("\033[1;31m[FEHLER]\033[0m Build fehlgeschlagen: %v\n", err)
|
graphJson, _ := json.MarshalIndent(graph, "", " ")
|
||||||
os.Exit(1)
|
os.WriteFile(graphPath, graphJson, 0644)
|
||||||
|
|
||||||
|
// 2. Frontend-Dateien 1:1 kopieren
|
||||||
|
copyFile(filepath.Join(*frontendPtr, "index.html"), filepath.Join(*outPtr, "index.html"))
|
||||||
|
copyFile(filepath.Join(*frontendPtr, "style.css"), filepath.Join(*outPtr, "style.css"))
|
||||||
|
copyFile(filepath.Join(*frontendPtr, "engine_logic.js"), filepath.Join(*outPtr, "engine_logic.js"))
|
||||||
|
copyFile(filepath.Join(*frontendPtr, "engine_ui.js"), filepath.Join(*outPtr, "engine_ui.js"))
|
||||||
|
|
||||||
|
fmt.Printf("\033[1;32m[ERFOLG]\033[0m Web-App erfolgreich exportiert nach -> \033[1;33m%s/\033[0m\n", *outPtr)
|
||||||
}
|
}
|
||||||
fmt.Printf("\033[1;32m[ERFOLG]\033[0m Single-File Story exportiert -> \033[1;33m%s\033[0m\n", *outPtr)
|
|
||||||
|
func copyFile(src, dst string) {
|
||||||
|
input, err := os.ReadFile(src)
|
||||||
|
if err != nil {
|
||||||
|
fmt.Printf("\033[1;33m[WARNUNG]\033[0m Frontend-Datei %s fehlt.\n", src)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
os.WriteFile(dst, input, 0644)
|
||||||
}
|
}
|
||||||
|
|
||||||
func startServer(port int, watchDir string, frontendDir string) {
|
func startServer(port int, watchDir string, frontendDir string) {
|
||||||
addr := fmt.Sprintf(":%d", port)
|
addr := fmt.Sprintf(":%d", port)
|
||||||
|
fmt.Printf("\n\033[1;32m[SERVER LÄUFT]\033[0m http://localhost:%d\n", port)
|
||||||
|
|
||||||
http.HandleFunc("/api/graph", func(w http.ResponseWriter, r *http.Request) {
|
// Dynamischer API-Endpunkt für graph.json
|
||||||
|
http.HandleFunc("/graph.json", func(w http.ResponseWriter, r *http.Request) {
|
||||||
w.Header().Set("Access-Control-Allow-Origin", "*")
|
w.Header().Set("Access-Control-Allow-Origin", "*")
|
||||||
w.Header().Set("Content-Type", "application/json")
|
w.Header().Set("Content-Type", "application/json")
|
||||||
|
|
||||||
|
var graph *StoryGraph
|
||||||
if r.Method == http.MethodPost {
|
if r.Method == http.MethodPost {
|
||||||
bodyBytes, err := io.ReadAll(r.Body)
|
bodyBytes, _ := io.ReadAll(r.Body)
|
||||||
if err != nil {
|
graph = &StoryGraph{Nodes: make(map[string]*StoryNode)}
|
||||||
http.Error(w, `{"error": "Daten defekt"}`, http.StatusBadRequest)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
graph := &StoryGraph{Nodes: make(map[string]*StoryNode)}
|
|
||||||
parseContent(string(bodyBytes), "API_POST_Stream", graph)
|
parseContent(string(bodyBytes), "API_POST_Stream", graph)
|
||||||
validateGraph(graph)
|
} else {
|
||||||
|
graph = loadStoryGraphFromDir(watchDir)
|
||||||
json.NewEncoder(w).Encode(graph)
|
|
||||||
fmt.Println("\033[1;34m[POST-API]\033[0m Story-Graph verarbeitet.")
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if r.Method == http.MethodGet {
|
|
||||||
graph := loadStoryGraphFromDir(watchDir)
|
|
||||||
validateGraph(graph)
|
validateGraph(graph)
|
||||||
json.NewEncoder(w).Encode(graph)
|
json.NewEncoder(w).Encode(graph)
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Liefert alles andere aus dem /frontend Ordner
|
||||||
fs := http.FileServer(http.Dir(frontendDir))
|
fs := http.FileServer(http.Dir(frontendDir))
|
||||||
http.Handle("/", fs)
|
http.Handle("/", fs)
|
||||||
|
|
||||||
fmt.Printf("\n\033[1;32m[SERVER LÄUFT]\033[0m http://localhost:%d\n", port)
|
|
||||||
if err := http.ListenAndServe(addr, nil); err != nil {
|
if err := http.ListenAndServe(addr, nil); err != nil {
|
||||||
fmt.Printf("\033[1;31m[FEHLER]\033[0m %v\n", err)
|
fmt.Printf("\033[1;31m[FEHLER]\033[0m %v\n", err)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func buildSingleFileExport(graph *StoryGraph, frontendDir string, outPath string) error {
|
|
||||||
indexPath := filepath.Join(frontendDir, "index.html")
|
|
||||||
htmlBytes, err := os.ReadFile(indexPath)
|
|
||||||
if err != nil {
|
|
||||||
return fmt.Errorf("konnte %s nicht lesen: %v", indexPath, err)
|
|
||||||
}
|
|
||||||
htmlStr := string(htmlBytes)
|
|
||||||
|
|
||||||
cssBytes, _ := os.ReadFile(filepath.Join(frontendDir, "style.css"))
|
|
||||||
logicBytes, _ := os.ReadFile(filepath.Join(frontendDir, "engine_logic.js"))
|
|
||||||
uiBytes, _ := os.ReadFile(filepath.Join(frontendDir, "engine_ui.js"))
|
|
||||||
|
|
||||||
graphJson, _ := json.Marshal(graph)
|
|
||||||
|
|
||||||
// CSS ersetzen
|
|
||||||
htmlStr = strings.Replace(htmlStr, `<link rel="stylesheet" href="style.css">`, fmt.Sprintf("<style>\n%s\n</style>", string(cssBytes)), 1)
|
|
||||||
|
|
||||||
// JS ersetzen
|
|
||||||
htmlStr = strings.Replace(htmlStr, `<script src="engine_logic.js"></script>`, fmt.Sprintf("<script>\n%s\n</script>", string(logicBytes)), 1)
|
|
||||||
htmlStr = strings.Replace(htmlStr, `<script src="engine_ui.js"></script>`, fmt.Sprintf("<script>\n%s\n</script>", string(uiBytes)), 1)
|
|
||||||
|
|
||||||
// JSON State in den Data-Block pressen
|
|
||||||
re := regexp.MustCompile(`(?s)<script id="story-data" type="application/json">.*?</script>`)
|
|
||||||
htmlStr = re.ReplaceAllString(htmlStr, fmt.Sprintf("<script id=\"story-data\" type=\"application/json\">\n%s\n</script>", string(graphJson)))
|
|
||||||
|
|
||||||
return os.WriteFile(outPath, []byte(htmlStr), 0644)
|
|
||||||
}
|
|
||||||
|
|
||||||
// renderAsciidoctor piped rohen AsciiDoc Text in den lokalen Container-Prozess
|
// renderAsciidoctor piped rohen AsciiDoc Text in den lokalen Container-Prozess
|
||||||
func renderAsciidoctor(text string) string {
|
func renderAsciidoctor(text string) string {
|
||||||
if strings.TrimSpace(text) == "" {
|
if strings.TrimSpace(text) == "" {
|
||||||
return ""
|
return ""
|
||||||
}
|
}
|
||||||
|
|
||||||
cmd := exec.Command("asciidoctor", "--embedded", "-")
|
cmd := exec.Command("asciidoctor", "--embedded", "-")
|
||||||
cmd.Stdin = strings.NewReader(text)
|
cmd.Stdin = strings.NewReader(text)
|
||||||
|
|
||||||
out, err := cmd.Output()
|
out, err := cmd.Output()
|
||||||
if err != nil {
|
if err != nil {
|
||||||
fmt.Printf("\033[1;33m[WARNUNG]\033[0m Asciidoctor Rendering fehlgeschlagen: %v\n", err)
|
fmt.Printf("\033[1;33m[WARNUNG]\033[0m Asciidoctor Rendering fehlgeschlagen: %v\n", err)
|
||||||
return strings.ReplaceAll(text, "\n", "<br>")
|
return strings.ReplaceAll(text, "\n", "<br>")
|
||||||
}
|
}
|
||||||
|
|
||||||
return string(out)
|
return string(out)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -184,38 +159,18 @@ func parseContent(rawContent string, sourceName string, graph *StoryGraph) {
|
|||||||
currentBody.Reset()
|
currentBody.Reset()
|
||||||
}
|
}
|
||||||
nodeID := matches[1]
|
nodeID := matches[1]
|
||||||
currentNode = &StoryNode{
|
currentNode = &StoryNode{ ID: nodeID, Title: nodeID, Choices: make([]Choice, 0), FileSource: sourceName, Metadata: make(map[string]string) }
|
||||||
ID: nodeID,
|
if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" { graph.StartNodeID = nodeID }
|
||||||
Title: nodeID,
|
|
||||||
Choices: make([]Choice, 0),
|
|
||||||
FileSource: sourceName,
|
|
||||||
Metadata: make(map[string]string),
|
|
||||||
}
|
|
||||||
if graph.StartNodeID == "" || nodeID == "start" || nodeID == "node_start" {
|
|
||||||
graph.StartNodeID = nodeID
|
|
||||||
}
|
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
if currentNode == nil {
|
if currentNode == nil {
|
||||||
if strings.TrimSpace(line) != "" {
|
if strings.TrimSpace(line) != "" {
|
||||||
baseID := "start"
|
baseID := "start"
|
||||||
if sourceName != "API_POST_Stream" {
|
if sourceName != "API_POST_Stream" { baseID = strings.TrimSuffix(filepath.Base(sourceName), filepath.Ext(sourceName)) }
|
||||||
baseID = strings.TrimSuffix(filepath.Base(sourceName), filepath.Ext(sourceName))
|
currentNode = &StoryNode{ ID: baseID, Title: baseID, Choices: make([]Choice, 0), FileSource: sourceName, Metadata: make(map[string]string) }
|
||||||
}
|
if graph.StartNodeID == "" { graph.StartNodeID = baseID }
|
||||||
currentNode = &StoryNode{
|
} else { continue }
|
||||||
ID: baseID,
|
|
||||||
Title: baseID,
|
|
||||||
Choices: make([]Choice, 0),
|
|
||||||
FileSource: sourceName,
|
|
||||||
Metadata: make(map[string]string),
|
|
||||||
}
|
|
||||||
if graph.StartNodeID == "" {
|
|
||||||
graph.StartNodeID = baseID
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if mMatches := metaRegex.FindStringSubmatch(line); len(mMatches) > 2 {
|
if mMatches := metaRegex.FindStringSubmatch(line); len(mMatches) > 2 {
|
||||||
@@ -228,24 +183,16 @@ func parseContent(rawContent string, sourceName string, graph *StoryGraph) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if cMatches := adocChoiceRegex.FindAllStringSubmatch(line, -1); len(cMatches) > 0 {
|
if cMatches := adocChoiceRegex.FindAllStringSubmatch(line, -1); len(cMatches) > 0 {
|
||||||
for _, match := range cMatches {
|
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])})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if mMatches := mdChoiceRegex.FindAllStringSubmatch(line, -1); len(mMatches) > 0 {
|
if mMatches := mdChoiceRegex.FindAllStringSubmatch(line, -1); len(mMatches) > 0 {
|
||||||
for _, match := range mMatches {
|
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])})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
lowerLine := strings.ToLower(line)
|
lowerLine := strings.ToLower(line)
|
||||||
if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") {
|
if strings.Contains(lowerLine, "[reboot]") || strings.Contains(lowerLine, "speicherabbild") { currentNode.IsReboot = true }
|
||||||
currentNode.IsReboot = true
|
if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") { currentNode.IsEnd = true }
|
||||||
}
|
|
||||||
if strings.Contains(lowerLine, "[ende]") || strings.Contains(lowerLine, "[end]") {
|
|
||||||
currentNode.IsEnd = true
|
|
||||||
}
|
|
||||||
|
|
||||||
currentBody.WriteString(line + "\n")
|
currentBody.WriteString(line + "\n")
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
```
|
```
|
||||||
: sensor daten angeschlossen
|
: sensor daten angeschlossen
|
||||||
```
|
```
|
||||||
|
[meta: sensor=online]
|
||||||
|
|
||||||
## Kontext
|
## Kontext
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
## Kontext
|
## Kontext
|
||||||
|
|
||||||
Mitte
|
Unten
|
||||||
|
|
||||||
### Was werden wir ausführen?
|
### Was werden wir ausführen?
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user