// Additionally we add a fallback node in case of invalid target (never happen if graph consistent) const FALLBACK_NODE = id: "fallback", text: "The mist swallows the path... but the story finds a way. You return to the beginning, ready for a new fate.", choices: [ text: "🔄 Restart journey", targetId: "start" ] ;
.choice-btn:active transform: scale(0.98); xstoryplayer
// subscribe to player updates player.subscribe((updatedPlayer) => fullUpdate(updatedPlayer); ); // Additionally we add a fallback node in
// add theme subscription const originalNotify = player._notify.bind(player); player._notify = function() originalNotify(); const node = this.getCurrentNode(); if (node) applyNodeTheme(node.id); ; player._notify(); // re-bind listeners after override? but subscriptions already safe, just refresh player.subscribe((p) => applyNodeTheme(p.getCurrentNode().id); ); // ensure initial theme applyNodeTheme(player.getCurrentNode().id); but subscriptions already safe, just refresh player
// initial render fullUpdate(player);
<div class="control-bar"> <button class="ctrl-btn" id="undoBtn" title="rewind last choice">↩ Undo</button> <button class="ctrl-btn reset-btn" id="resetBtn">⟳ Restart journey</button> <div class="progress-indicator"> <span>📖</span> <span id="historyDepth">0</span> steps </div> </div> <div class="footer-note"> ✦ every choice weaves destiny — xstoryplayer ✦ </div> </div>
// attach event listeners for controls undoBtn.addEventListener("click", () => if (player.getStepCount() > 0) player.undo(); else // subtle feedback storyTextEl.style.transform = "translateX(2px)"; setTimeout(() => storyTextEl.style.transform = ""; , 150);