/* progress / history indicator */ .progress-indicator margin-left: auto; font-size: 0.75rem; background: #0b1020; padding: 5px 12px; border-radius: 30px; display: inline-flex; align-items: center; gap: 8px;
// full reset to start, clearing history reset() this.history = []; this.currentNodeId = this.startId; this._notify();
// undo last choice: revert to previous node in history undo() if (this.history.length === 0) return false; const previousNode = this.history.pop(); this.currentNodeId = previousNode; this._notify(); return true; xstoryplayer
); choicesContainer.appendChild(btn); ); else // ending screen: special restart hint and maybe extra flair choicesContainer.innerHTML = ` <button class="choice-btn" id="restartFromEnding">✨ Start a new legend ✨</button> `; const restartEndBtn = document.getElementById("restartFromEnding"); if (restartEndBtn) restartEndBtn.addEventListener("click", () => player.reset(); );
// provide a small easter egg: console info console.log("✨ xstoryplayer active — use number keys (1-9) for choices, Ctrl+Z undo, Ctrl+R restart"); </script> </body> </html> /* progress / history indicator */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>xstoryplayer | immersive story engine</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevent accidental text selection on UI */
</style> </head> <body> <div class="story-player" id="xstoryRoot"> <div class="player-header"> <div class="title-badge"> <h1>✦ xstoryplayer</h1> <p>interactive narrative engine</p> </div> <div class="story-stats" id="statsDisplay"> <span id="nodeCounter">chapter 0</span> </div> </div> padding: 5px 12px
/* animations */ @keyframes fadeSlide 0% opacity: 0; transform: translateY(8px); 100% opacity: 1; transform: translateY(0);
// update everything after state changes function fullUpdate(playerInstance) renderStory(playerInstance); updateMetaDisplay(playerInstance); // also manage undo button state based on history (disabled if no history) const hasHistory = playerInstance.getStepCount() > 0; undoBtn.style.opacity = hasHistory ? "1" : "0.6"; undoBtn.style.cursor = hasHistory ? "pointer" : "not-allowed"; if (!hasHistory) undoBtn.disabled = true; else undoBtn.disabled = false;
