240 lines
14 KiB
JavaScript
Executable File
240 lines
14 KiB
JavaScript
Executable File
(function (root) {
|
||
"use strict";
|
||
const Data = root.PrincessLimaV2Data;
|
||
const State = root.PrincessLimaV2State;
|
||
const Systems = root.PrincessLimaV2Systems;
|
||
|
||
function create(container, actions) {
|
||
const overlay = container.querySelector("[data-lima-overlay]");
|
||
const panel = container.querySelector("[data-lima-panel]");
|
||
const heading = container.querySelector("[data-lima-panel-title]");
|
||
const body = container.querySelector("[data-lima-panel-body]");
|
||
const closeButton = container.querySelector("[data-lima-panel-close]");
|
||
const live = container.querySelector("[data-lima-screenreader]");
|
||
let previousFocus = null;
|
||
let dialogue = null;
|
||
let typingTimer = null;
|
||
let displayed = "";
|
||
let fullText = "";
|
||
|
||
function portraitPosition(speaker, expression) {
|
||
const index = Data.PORTRAITS[speaker] && Data.PORTRAITS[speaker][expression] !== undefined
|
||
? Data.PORTRAITS[speaker][expression] : 14;
|
||
return `${(index % 4) * 33.333}% ${Math.floor(index / 4) * 33.333}%`;
|
||
}
|
||
function open(kind, title, html, closable = true) {
|
||
previousFocus = document.activeElement;
|
||
overlay.hidden = false;
|
||
panel.dataset.kind = kind;
|
||
heading.textContent = title;
|
||
body.innerHTML = html;
|
||
closeButton.hidden = !closable;
|
||
requestAnimationFrame(() => (body.querySelector("button, input, [tabindex]") || closeButton).focus());
|
||
}
|
||
function close() {
|
||
if (dialogue) return advance();
|
||
overlay.hidden = true;
|
||
panel.dataset.kind = "";
|
||
body.innerHTML = "";
|
||
actions.lock(false, "menu");
|
||
if (previousFocus && previousFocus.focus) previousFocus.focus();
|
||
else actions.focusGame();
|
||
}
|
||
function stopTyping() {
|
||
if (typingTimer) clearInterval(typingTimer);
|
||
typingTimer = null;
|
||
}
|
||
function typeLine(target, text) {
|
||
stopTyping();
|
||
fullText = text;
|
||
displayed = "";
|
||
const settings = actions.getState().settings;
|
||
const speed = { slow: 42, normal: 27, fast: 12, instant: 0 }[settings.textSpeed];
|
||
if (!speed || settings.reducedMotion) {
|
||
target.textContent = text;
|
||
displayed = text;
|
||
return;
|
||
}
|
||
let index = 0;
|
||
typingTimer = setInterval(() => {
|
||
index += 1;
|
||
displayed = text.slice(0, index);
|
||
target.textContent = displayed;
|
||
if (index >= text.length) stopTyping();
|
||
}, speed);
|
||
}
|
||
function startDialogue(id, options = {}) {
|
||
const definition = Data.DIALOGUES[id];
|
||
if (!definition) return;
|
||
actions.lock(true, "dialogue");
|
||
actions.beginDialogue(id, options.target);
|
||
dialogue = { id, node: definition.start, history: [], done: options.done || null, essential: definition.essential };
|
||
renderDialogue();
|
||
}
|
||
function renderDialogue() {
|
||
const definition = Data.DIALOGUES[dialogue.id];
|
||
const node = Systems.dialogueNode(dialogue.id, dialogue.node, actions.getState());
|
||
if (!node) return finishDialogue();
|
||
const speaker = Data.ACTORS[node.speaker] ? Data.ACTORS[node.speaker].name : node.speaker;
|
||
dialogue.history.push({ speaker, text: node.text });
|
||
live.textContent = `${speaker}: ${node.text}`;
|
||
open("dialogue", speaker, `
|
||
<div class="lima-cinematic-dialogue" data-expression="${escapeHtml(node.expression || "neutral")}">
|
||
<div class="lima-cinematic-dialogue__portrait" role="img" aria-label="${escapeHtml(speaker)}, ${escapeHtml(node.expression || "neutral")}"
|
||
style="background-position:${portraitPosition(node.speaker, node.expression || "neutral")}"></div>
|
||
<div class="lima-cinematic-dialogue__copy">
|
||
<p class="lima-cinematic-dialogue__speaker">${escapeHtml(speaker)} <span>${escapeHtml(node.expression || "")}</span></p>
|
||
<p class="lima-cinematic-dialogue__text" data-dialogue-line></p>
|
||
<div class="lima-cinematic-dialogue__choices" data-dialogue-choices></div>
|
||
<div class="lima-cinematic-dialogue__controls">
|
||
<button type="button" class="lima-primary" data-dialogue-advance>${node.choices ? "Choose" : node.next ? "Continue" : "Finish"}</button>
|
||
<button type="button" data-dialogue-history>History</button>
|
||
${!dialogue.essential && actions.getState().dialogueHistory.includes(dialogue.id) ? '<button type="button" data-dialogue-skip>Skip viewed scene</button>' : ""}
|
||
</div>
|
||
</div>
|
||
</div>`, false);
|
||
const line = body.querySelector("[data-dialogue-line]");
|
||
typeLine(line, node.text);
|
||
const choices = body.querySelector("[data-dialogue-choices]");
|
||
if (node.choices) {
|
||
body.querySelector("[data-dialogue-advance]").hidden = true;
|
||
choices.innerHTML = node.choices.map((choice, index) =>
|
||
`<button type="button" data-choice="${index}"><span>${index + 1}</span>${escapeHtml(choice.text)}</button>`).join("");
|
||
choices.querySelectorAll("[data-choice]").forEach((button) => button.addEventListener("click", () => choose(Number(button.dataset.choice))));
|
||
}
|
||
body.querySelector("[data-dialogue-advance]").addEventListener("click", advance);
|
||
body.querySelector("[data-dialogue-history]").addEventListener("click", showHistory);
|
||
const skip = body.querySelector("[data-dialogue-skip]");
|
||
if (skip) skip.addEventListener("click", finishDialogue);
|
||
actions.frameDialogue(node);
|
||
}
|
||
function advance() {
|
||
if (!dialogue) return;
|
||
if (displayed !== fullText) {
|
||
stopTyping();
|
||
const line = body.querySelector("[data-dialogue-line]");
|
||
if (line) line.textContent = fullText;
|
||
displayed = fullText;
|
||
return;
|
||
}
|
||
const node = Systems.dialogueNode(dialogue.id, dialogue.node, actions.getState());
|
||
if (!node || node.choices) return;
|
||
actions.applyEffects(node.effects);
|
||
if (node.next) {
|
||
dialogue.node = node.next;
|
||
renderDialogue();
|
||
} else finishDialogue();
|
||
}
|
||
function choose(index) {
|
||
const result = Systems.dialogueChoice(dialogue.id, dialogue.node, index, actions.getState());
|
||
if (!result) return;
|
||
actions.setState(result.state);
|
||
dialogue.node = result.next;
|
||
renderDialogue();
|
||
}
|
||
function finishDialogue() {
|
||
stopTyping();
|
||
const done = dialogue && dialogue.done;
|
||
if (dialogue) actions.recordDialogue(dialogue.id);
|
||
dialogue = null;
|
||
overlay.hidden = true;
|
||
body.innerHTML = "";
|
||
live.textContent = "";
|
||
actions.endDialogue();
|
||
actions.lock(false, "dialogue");
|
||
if (done) done();
|
||
actions.focusGame();
|
||
}
|
||
function showHistory() {
|
||
const history = dialogue.history.map((entry) => `<li><strong>${escapeHtml(entry.speaker)}</strong><p>${escapeHtml(entry.text)}</p></li>`).join("");
|
||
const dialog = document.createElement("dialog");
|
||
dialog.className = "lima-history";
|
||
dialog.innerHTML = `<h3>Conversation history</h3><ol>${history}</ol><button type="button">Return</button>`;
|
||
container.appendChild(dialog);
|
||
dialog.querySelector("button").addEventListener("click", () => { dialog.close(); dialog.remove(); });
|
||
dialog.showModal();
|
||
}
|
||
function openPanel(kind) {
|
||
const state = actions.getState();
|
||
actions.lock(true, "menu");
|
||
if (kind === "credits") {
|
||
open("credits", "Credits", `
|
||
<p class="lima-panel-lead">A locally hosted storybook RPG built for this site.</p>
|
||
<ul class="lima-list">
|
||
<li><strong>Story & world</strong><span>Princess Lima</span></li>
|
||
<li><strong>Engine</strong><span>Phaser 4.1.0</span></li>
|
||
<li><strong>Pathfinding</strong><span>EasyStar.js 0.4.4</span></li>
|
||
<li><strong>Portrait source art</strong><span>OpenAI ImageGen, edited and atlas-packed locally</span></li>
|
||
</ul>
|
||
<p>All game data, maps, images, code, and audio are served from this website.</p>`);
|
||
} else if (kind === "quests") {
|
||
const quests = Object.entries(Data.QUESTS).filter(([id]) => state.quests[id].status !== "locked").map(([id, quest]) => {
|
||
const progress = state.quests[id];
|
||
return `<li class="${progress.status}"><strong>${quest.main ? "Main · " : "Optional · "}${escapeHtml(quest.title)}</strong><span>${progress.status === "complete" ? "Complete" : `${progress.count}/${quest.target}`}</span><small>${escapeHtml(Data.MAP_NAMES[quest.region])}</small></li>`;
|
||
}).join("");
|
||
open("quests", "Quest Chronicle", `<p class="lima-panel-lead">${escapeHtml(Systems.currentObjective(state))}</p><ul class="lima-list">${quests || "<li>No quests have begun.</li>"}</ul>`);
|
||
} else if (kind === "inventory") {
|
||
const items = state.inventory.map((entry) => `<li><strong>${escapeHtml(Data.ITEMS[entry.id].name)}</strong><span>×${entry.quantity}</span></li>`).join("");
|
||
open("inventory", "Traveller's Satchel", `<ul class="lima-list">${items || "<li>The satchel is empty.</li>"}</ul><button type="button" class="lima-primary" data-use-tonic>Use Healing Tonic</button>`);
|
||
body.querySelector("[data-use-tonic]").addEventListener("click", () => { actions.useTonic(); openPanel("inventory"); });
|
||
} else if (kind === "settings") {
|
||
const checked = (key) => state.settings[key] ? "checked" : "";
|
||
open("settings", "Accessibility & Effects", `
|
||
<div class="lima-settings-grid">
|
||
<label><input type="checkbox" data-setting="soundEnabled" ${checked("soundEnabled")}> Sound</label>
|
||
<label><input type="checkbox" data-setting="subtitles" ${checked("subtitles")}> Subtitles</label>
|
||
<label><input type="checkbox" data-setting="narrationEnabled" ${checked("narrationEnabled")}> Narration</label>
|
||
<label><input type="checkbox" data-setting="reducedMotion" ${checked("reducedMotion")}> Reduced motion</label>
|
||
<label><input type="checkbox" data-setting="highContrast" ${checked("highContrast")}> High contrast</label>
|
||
<label><input type="checkbox" data-setting="blur" ${checked("blur")}> Dialogue blur</label>
|
||
<label><input type="checkbox" data-setting="particles" ${checked("particles")}> Particles</label>
|
||
<label><input type="checkbox" data-setting="screenShake" ${checked("screenShake")}> Screen shake</label>
|
||
<label><input type="checkbox" data-setting="lighting" ${checked("lighting")}> Lighting</label>
|
||
<label>Effects quality <select data-setting="effectsQuality"><option value="full">Full</option><option value="reduced">Reduced</option><option value="minimal">Minimal</option></select></label>
|
||
<label>Text speed <select data-setting="textSpeed"><option value="slow">Slow</option><option value="normal">Normal</option><option value="fast">Fast</option><option value="instant">Instant</option></select></label>
|
||
</div>`);
|
||
body.querySelector('[data-setting="effectsQuality"]').value = state.settings.effectsQuality;
|
||
body.querySelector('[data-setting="textSpeed"]').value = state.settings.textSpeed;
|
||
body.querySelectorAll("[data-setting]").forEach((control) => control.addEventListener("change", () =>
|
||
actions.setting(control.dataset.setting, control.type === "checkbox" ? control.checked : control.value)));
|
||
} else {
|
||
open("pause", "Roadside Menu", `
|
||
<p class="lima-panel-lead">${escapeHtml(Data.MAP_NAMES[state.region])}</p>
|
||
<div class="lima-menu-stack">
|
||
<button type="button" class="lima-primary" data-close-panel>Resume</button>
|
||
<button type="button" data-open-panel="quests">Quest Chronicle</button>
|
||
<button type="button" data-open-panel="inventory">Inventory</button>
|
||
<button type="button" data-open-panel="settings">Settings</button>
|
||
<button type="button" data-replay-intro>Replay Introduction</button>
|
||
</div>`);
|
||
body.querySelector("[data-close-panel]").addEventListener("click", close);
|
||
body.querySelectorAll("[data-open-panel]").forEach((button) => button.addEventListener("click", () => openPanel(button.dataset.openPanel)));
|
||
body.querySelector("[data-replay-intro]").addEventListener("click", actions.replayIntro);
|
||
}
|
||
}
|
||
function gameOver() {
|
||
actions.lock(true, "defeat");
|
||
open("gameover", "The Road Grows Quiet", `<p>You wake at the last safe fire. Your story progress and important items remain.</p><button type="button" class="lima-primary" data-respawn>Rise Again</button>`, false);
|
||
body.querySelector("[data-respawn]").addEventListener("click", () => { overlay.hidden = true; actions.lock(false, "defeat"); actions.respawn(); });
|
||
}
|
||
function ending() {
|
||
actions.lock(true, "ending");
|
||
const allies = ["promised_village", "defences_disabled", "prisoners_freed"].filter((flag) => actions.getState().flags[flag]).length;
|
||
open("ending", "Dawn Over Lima", `<p>At dawn the roads reopen. Village bells answer the resistance fires, and the fortress windows shine with ordinary sunlight.</p><p>${allies >= 2 ? "The people you helped arrive together; no one returns home alone." : "The kingdom begins the slower work of finding one another again."}</p><p class="lima-ending-mark">Princess Lima is free.</p><button type="button" class="lima-primary" data-ending-menu>Return to title</button>`, false);
|
||
body.querySelector("[data-ending-menu]").addEventListener("click", actions.returnToMenu);
|
||
}
|
||
|
||
closeButton.addEventListener("click", close);
|
||
overlay.addEventListener("click", (event) => { if (event.target === overlay && !dialogue) close(); });
|
||
document.addEventListener("keydown", (event) => {
|
||
if (dialogue && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); advance(); }
|
||
if (!dialogue && !overlay.hidden && event.key === "Escape") { event.preventDefault(); close(); }
|
||
});
|
||
return Object.freeze({ openPanel, startDialogue, gameOver, ending, close, finishDialogue });
|
||
}
|
||
function escapeHtml(value) {
|
||
return String(value || "").replace(/[&<>"']/g, (character) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[character]));
|
||
}
|
||
root.PrincessLimaV2UI = Object.freeze({ create });
|
||
}(typeof globalThis !== "undefined" ? globalThis : this));
|