Files
ai-spel-frontend/index.html
T
Ein Anderssono b57c4c075f
Build and publish frontend / publish (push) Successful in 45s
Gate local Gemma behind explicit terms acceptance
2026-10-19 12:03:51 +02:00

1213 lines
70 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Svensk livssimulator</title>
<style>
:root { font: 1rem/1.6 system-ui, sans-serif; }
body { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1, h2 { line-height: 1.2; }
form { display: grid; gap: .75rem; max-width: 32rem; }
label { display: grid; gap: .25rem; font-weight: 600; }
input, textarea, button { font: inherit; padding: .65rem; }
button { justify-self: start; cursor: pointer; }
#dialogue { list-style: none; padding: 0; margin: 0; }
#dialogue li { margin-block: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
#dialogue li[data-role="user"] { font-weight: 650; }
#dialogue li[data-role="assistant"] { padding-inline-start: .75rem; border-inline-start: .2rem solid currentColor; }
#dialogue li[data-role="system"] { padding-inline-start: .75rem; border-inline-start: .2rem dashed currentColor; font-size: .92em; }
#message { width: 100%; min-height: 3.5rem; box-sizing: border-box; }
#message-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#voice-status { min-height: 1.5em; }
#speech-progress { width: min(100%, 32rem); height: 1.25rem; }
#speech-progress-value { margin-inline-start: .5rem; font-variant-numeric: tabular-nums; }
#dialogue li[data-role="voice-controls"] { border: 1px solid currentColor; border-radius: .35rem; padding: .75rem; }
#dialogue li[data-role="voice-controls"] fieldset { display: grid; gap: .5rem; margin-block: .5rem; }
#admin-content { display: grid; gap: 1rem; }
#admin-content section, #admin-content article { border: 1px solid currentColor; border-radius: .35rem; padding: .75rem; }
#admin-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; }
#admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
#player-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
body.debug-layout { max-width: none; margin: 0; padding: .5rem; height: 100vh; overflow: hidden; }
#play-layout.debug-enabled { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; height: calc(100vh - 4rem); }
#play-layout.debug-enabled #play, #play-layout.debug-enabled #debug-panel { min-width: 0; height: 100%; overflow: auto; padding: 1rem; box-sizing: border-box; }
#play-layout.debug-enabled #debug-panel { border-inline-start: 1px solid currentColor; }
#debug-panel h2 { margin-block-start: 0; }
#debug-trace { display: grid; gap: .6rem; }
#debug-trace details { border: 1px solid currentColor; border-radius: .3rem; padding: .5rem; }
#debug-trace summary { cursor: pointer; overflow-wrap: anywhere; }
#debug-trace pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.45 ui-monospace, monospace; }
.trace-chain { display: grid; gap: .65rem; margin-block: .75rem; }
.trace-step { border: 1px solid currentColor; border-inline-start: .35rem solid currentColor; border-radius: .3rem; padding: .65rem; }
.trace-step[data-engine="player"] { border-inline-start-color: #64748b; }
.trace-step[data-engine="ai"] { border-inline-start-color: #2563eb; }
.trace-step[data-engine="luau"] { border-inline-start-color: #9333ea; }
.trace-step[data-engine="rust"] { border-inline-start-color: #c2410c; }
.trace-step h3 { font-size: 1rem; margin: 0 0 .5rem; }
.trace-step .trace-engine { font-weight: 750; }
.trace-step pre { margin: .25rem 0 .75rem; }
.trace-raw { margin-block-start: .75rem; }
@media (max-width: 800px) {
body.debug-layout { height: auto; overflow: auto; }
#play-layout.debug-enabled { grid-template-columns: minmax(0, 1fr); height: auto; }
#play-layout.debug-enabled #play { min-height: 55vh; }
#play-layout.debug-enabled #debug-panel { min-height: 45vh; border-inline-start: 0; border-block-start: 1px solid currentColor; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
footer { margin-top: 2rem; border-top: 1px solid; padding-top: .5rem; color: GrayText; font-size: .875rem; }
</style>
</head>
<body>
<main>
<section id="auth" aria-labelledby="auth-heading">
<h1 id="auth-heading">Svensk livssimulator</h1>
<p id="auth-intro">Välkommen till en svensk, dialogbaserad livssimulator utan bilder. Världen beskrivs med ljud, dofter, temperatur, beröring och riktning. Skapa konto med ett användarnamn och ett lösenord på minst tolv tecken. Berätta sedan fritt om en vuxen person. Du får redigera och godkänna personens biografi och startplats. Spela genom att skriva eller tala vad du gör och frågar. Personer du möter kan minnas tidigare samtal. Spelets repliker läses automatiskt upp på svenska och finns kvar som text. Har du redan konto väljer du Logga in.</p>
<button type="button" id="auth-repeat-intro">Läs introduktionen</button>
<p id="auth-voice-status" role="status" aria-live="polite">På iPhone och iPad kan du behöva trycka på Läs introduktionen igen en gång för att aktivera uppläsningen.</p>
<p id="auth-status" role="status" aria-live="polite" hidden></p>
<form id="auth-form">
<label>Användarnamn <input name="username" required minlength="3" maxlength="40" autocomplete="username"></label>
<label>Lösenord <input name="password" type="password" required minlength="12" maxlength="256" autocomplete="current-password"></label>
<div><button type="submit" name="intent" value="login">Logga in</button> <button type="submit" name="intent" value="register">Skapa konto</button></div>
</form>
</section>
<div id="play-layout">
<section id="play" aria-label="Spelets dialog" hidden>
<h1 class="sr-only">Dialog</h1>
<ol id="dialogue" aria-label="Dialoghistorik" role="log" aria-live="polite" aria-relevant="additions text"></ol>
<form id="message-form">
<label for="message" id="message-label">Skriv ett meddelande</label>
<textarea id="message" name="message" maxlength="4000" aria-describedby="message-help" autocomplete="off"></textarea>
<div id="message-tools"><button type="submit" id="send-message">Skicka</button> <button type="button" id="microphone" aria-pressed="false" aria-describedby="voice-status">Starta mikrofon</button> <button type="button" id="redo-action" disabled>Gör om senaste</button> <button type="button" id="dry-run-action" disabled>Torrkör senaste</button></div>
<span id="message-help" class="sr-only">Tryck på Skicka eller Enter för att skicka. Tryck Skift och Enter för ny rad.</span>
</form>
<p id="voice-status" role="status" aria-live="polite"></p>
<div id="speech-progress-container" hidden>
<label for="speech-progress">Hämtar svensk röstmodell till enheten</label>
<progress id="speech-progress" aria-label="Nedladdning av svensk röstmodell"></progress>
<output id="speech-progress-value" for="speech-progress">Väntar på nedladdning</output>
</div>
</section>
<aside id="debug-panel" aria-labelledby="debug-heading" hidden>
<h2 id="debug-heading">Beslutsspårning</h2>
<p>Administratörsvy för ditt eget spelkonto. Varje steg visar sparad indata och utdata i kedjan: spelare (grå), AI (blå), Luau (lila) och Rust (orange). Promptar, modelltrafik, regelresultat och commit visas från revisionsloggad API-data. Hemligheter och credentials maskeras av servern.</p>
<button type="button" id="debug-refresh">Uppdatera spår</button>
<p id="debug-status" role="status" aria-live="polite">Hämtar spårning…</p>
<div id="debug-trace" aria-label="Kronologiskt beslutsspår"></div>
</aside>
</div>
<section id="admin-view" aria-labelledby="admin-heading" hidden>
<h1 id="admin-heading">Administration</h1>
<p>Privilegierad läsning loggas. Känsligt spelarinnehåll visas bara här för administratörer.</p>
<nav id="admin-toolbar" aria-label="Administrationsvyer">
<button type="button" data-admin-view="players">Spelare</button>
<button type="button" data-admin-view="prompts">Prompter</button>
<button type="button" data-admin-view="rules">Luau-regler</button>
<button type="button" data-admin-view="logging">Driftloggar</button>
<button type="button" data-admin-view="audit">Revisionslogg</button>
<button type="button" id="admin-logout">Logga ut</button>
</nav>
<div id="admin-content" aria-live="polite" aria-busy="false"></div>
</section>
</main>
<footer id="version-footer">Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · Statik <span id="static-version">hämtar version…</span> · API <span id="api-version">hämtar version…</span></footer>
<script src="/piper-runtime.js?v=__FRONTEND_VERSION__"></script>
<script src="/voice.js?v=__FRONTEND_VERSION__"></script>
<script src="/static/wllama-gemma3-v1/local-ai.js"></script>
<script>
const auth = document.querySelector('#auth');
const play = document.querySelector('#play');
const playLayout = document.querySelector('#play-layout');
const debugPanel = document.querySelector('#debug-panel');
const debugTrace = document.querySelector('#debug-trace');
const debugStatus = document.querySelector('#debug-status');
const adminView = document.querySelector('#admin-view');
const adminContent = document.querySelector('#admin-content');
const transcript = document.querySelector('#dialogue');
const messageField = document.querySelector('#message');
const messageLabel = document.querySelector('#message-label');
let stage = 'auth';
let characterDraft = null;
let worldDraft = null;
let gameState = null;
let currentAccount = null;
let debugRefreshBusy = false;
let submitBusy = false;
let pendingDialogue = null;
let latestAssistantText = '';
let latestPlayerAction = '';
let latestAssistantVoice = {role: 'narrator', voiceIdentity: 'neutral'};
let speechRecoveryElement = null;
const voiceSettingsKey = 'ai-spel.voice-settings.v2';
let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey, 'ai-spel.voice-settings.v1');
let voiceController;
let audioContext;
let voiceDisclosureAcknowledged = false;
let adminOffset = 0;
const adminPageSize = 50;
let presenceTimer = null;
let playerMessagesPrimed = false;
const seenPlayerMessageIds = new Set();
async function request(path, options = {}) {
const response = await fetch(path, {credentials: 'same-origin', ...options});
const body = response.status === 204 ? null : await response.json();
if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
return body;
}
function appendLine(role, content, options = {}) {
const line = document.createElement('li');
line.dataset.role = role;
line.textContent = `${options.speaker || (role === 'user' ? 'Du' : 'Berättelsen')}: ${content}`;
transcript.append(line);
if (role === 'user' || role === 'assistant') window.localGameAI?.record({type: 'dialogue', role, content});
line.scrollIntoView({block: 'end'});
if (role === 'assistant') {
latestAssistantText = content;
latestAssistantVoice = options.voice || {role: 'narrator', voiceIdentity: 'neutral'};
if (options.speak !== false && location.pathname !== '/admin') {
voiceController?.speak(content, {...latestAssistantVoice, onStart: clearSpeechRecovery});
}
}
return line;
}
function biographyContextText(context) {
if (!context || typeof context !== 'object') return '';
const details = [];
if (typeof context.current_situation === 'string' && context.current_situation.trim()) {
details.push(`Nuvarande situation: ${context.current_situation.trim()}.`);
}
for (const [key, label] of [
['skills', 'Färdigheter'],
['possessions', 'Ägodelar som nämnts'],
['obligations', 'Åtaganden'],
['past_events', 'Tidigare händelser'],
['known_people', 'Kända personer'],
]) {
const values = context[key];
if (Array.isArray(values) && values.length) details.push(`${label}: ${values.join(', ')}.`);
}
return details.length ? `\n\nStartuppgifter att granska: ${details.join(' ')}` : '';
}
function explainDialogueError(error) {
const code = String(error?.message || '');
const known = {
dialogue_temporarily_unavailable: 'Berättartjänsten svarar inte just nu. Vänta en stund och försök igen.',
world_version_conflict: 'Världen hann ändras medan du skrev. Jag har uppdaterat läget; skicka meddelandet igen.',
world_not_available: 'Världen är inte tillgänglig just nu. Försök igen om en liten stund.',
};
return known[code] || (/^[a-z0-9_]+$/.test(code)
? 'Jag kunde inte behandla det just nu. Försök igen om en liten stund.'
: code || 'Ett tillfälligt fel uppstod. Försök igen om en liten stund.');
}
function setVoiceStatus(message = '') {
document.querySelector('#voice-status').textContent = message;
const authVoiceStatus = document.querySelector('#auth-voice-status');
if (authVoiceStatus && !auth.hidden && message) authVoiceStatus.textContent = message;
}
window.addEventListener('local-ai-status', event => {
if (!currentAccount || currentAccount.is_admin || play.hidden) return;
let statusLine = transcript.querySelector('li[data-local-ai-status]');
if (!statusLine) {
const detail = typeof event.detail === 'string' ? {text: event.detail} : event.detail;
statusLine = appendLine(detail.type === 'terms-required' ? 'assistant' : 'system', detail.text || '', {speaker: 'Lokal AI', speak: detail.type === 'terms-required'});
statusLine.dataset.localAiStatus = 'true';
}
const detail = typeof event.detail === 'string' ? {text: event.detail} : event.detail;
statusLine.replaceChildren(document.createTextNode(`Lokal AI: ${detail.text || ''}`));
if (detail.type === 'terms-required') {
statusLine.append(document.createTextNode(' Läs dokumenten: '));
for (const [label, url] of [['Spelvillkor för Gemma', detail.user_terms], ['Gemma-villkor', detail.terms], ['policy för förbjuden användning', detail.policy], ['modellinformation', detail.notice]]) {
if (!url) continue;
const link = document.createElement('a');
link.href = url; link.target = '_blank'; link.rel = 'noopener noreferrer';
link.textContent = label;
statusLine.append(link, document.createTextNode('. '));
}
statusLine.append(document.createElement('br'), document.createTextNode(detail.command || ''));
}
});
function updateSpeechProgress(message = '') {
const container = document.querySelector('#speech-progress-container');
const progress = document.querySelector('#speech-progress');
const value = document.querySelector('#speech-progress-value');
const label = container.querySelector('label');
const preparing = message.startsWith('Förbereder svensk uppläsning.');
const phase = [
'Laddar WebAssembly-motorn för svensk uppläsning.',
'Startar WebAssembly-motorn efter nedladdning av',
'Hämtar information om den svenska röstmodellen.',
'Ansluter till servern för att hämta den svenska röstmodellen.',
'Läser in den svenska röstmodellen.',
'Röstmodellen är inläst. Skapar uppläsningen.',
].find(text => message.startsWith(text));
const match = message.match(/^Hämtar svensk röstmodell till enheten: (\d+) procent\.$/);
const bytesMatch = message.match(/^Hämtar svensk röstmodell till enheten: ([\d.,]+) MB hämtade\.$/);
const runtimeFile = message.match(/^(?:Hämtar|Läser in) WebAssembly-filen ([\w.-]+)\.?$/);
const runtimePercent = message.match(/^Hämtar WebAssembly-filen ([\w.-]+): (\d+) procent\.$/);
const runtimeBytes = message.match(/^Hämtar WebAssembly-filen ([\w.-]+): ([\d.,]+) MB hämtade\.$/);
if (!preparing && !phase && !match && !bytesMatch && !runtimeFile && !runtimePercent && !runtimeBytes) {
container.hidden = true;
progress.removeAttribute('value');
value.textContent = 'Väntar på nedladdning';
return false;
}
container.hidden = false;
label.textContent = runtimePercent || runtimeBytes
? `Hämtar WebAssembly-filen ${runtimePercent?.[1] || runtimeBytes?.[1]}`
: runtimeFile
? runtimeFile[0].replace(/\.$/, '')
: phase || 'Hämtar svensk röstmodell till enheten';
if (runtimePercent) {
progress.value = Math.max(0, Math.min(100, Number(runtimePercent[2])));
value.textContent = `${runtimePercent[2]}%`;
return true;
}
if (runtimeBytes) {
progress.removeAttribute('value');
value.textContent = `${runtimeBytes[2]} MB hämtade`;
return true;
}
if (match) {
const percent = Math.max(0, Math.min(100, Number(match[1])));
progress.value = percent;
value.textContent = `${percent}%`;
return true;
}
if (bytesMatch) {
progress.removeAttribute('value');
value.textContent = `${bytesMatch[1]} MB hämtade`;
return true;
}
progress.removeAttribute('value');
value.textContent = phase ? 'Pågår…' : 'Förbereder…';
return true;
}
function clearSpeechRecovery() {
speechRecoveryElement?.remove();
speechRecoveryElement = null;
const status = document.querySelector('#voice-status');
if (status?.textContent.startsWith('Uppläsningen startade inte')) setVoiceStatus('Läser upp dialog.');
}
function showSpeechRecovery(message) {
clearSpeechRecovery();
const item = document.createElement('li');
item.dataset.role = 'voice-controls';
item.setAttribute('aria-label', 'Uppläsning kunde inte starta');
const explanation = document.createElement('p');
explanation.textContent = message;
const retry = document.createElement('button');
retry.type = 'button';
retry.textContent = 'Läs senaste repliken';
retry.addEventListener('click', () => {
voiceController.activateFromUserGesture();
if (voiceController.speak(latestAssistantText, {...latestAssistantVoice, onStart: clearSpeechRecovery})) {
clearSpeechRecovery();
}
});
item.append(explanation, retry);
transcript.append(item);
item.scrollIntoView({block: 'end'});
speechRecoveryElement = item;
}
function refreshMicrophone() {
const button = document.querySelector('#microphone');
if (button) button.disabled = play.hidden || messageField.disabled || submitBusy;
const sendButton = document.querySelector('#send-message');
if (sendButton) sendButton.disabled = play.hidden || messageField.disabled || submitBusy;
}
function persistVoiceSettings() {
voiceSettings.mode = 'game-voice';
voiceSettings.autoSpeak = true;
if (!window.GameVoice.saveSettings(localStorage, voiceSettingsKey, voiceSettings)) {
setVoiceStatus('Röstinställningen kunde inte sparas i den här webbläsaren.');
}
voiceController?.update(voiceSettings);
transcript.setAttribute('aria-live', 'polite');
}
function playVoiceSignal(state) {
if (!voiceSettings.soundSignals || !['LISTENING', 'PROCESSING', 'ERROR', 'STOPPED'].includes(state)) return;
try {
const Audio = window.AudioContext || window.webkitAudioContext;
if (!Audio) return;
audioContext ||= new Audio();
if (audioContext.state === 'suspended') audioContext.resume();
const oscillator = audioContext.createOscillator(); const gain = audioContext.createGain();
oscillator.frequency.value = state === 'ERROR' ? 260 : state === 'PROCESSING' ? 820 : state === 'STOPPED' ? 420 : 560;
gain.gain.value = 0.025; oscillator.connect(gain); gain.connect(audioContext.destination);
oscillator.start(); oscillator.stop(audioContext.currentTime + 0.055);
} catch (_) { /* Audio cues are optional and never block the game. */ }
}
voiceController = window.GameVoice.createVoiceController({
settings: voiceSettings,
onState(state, message) {
const microphone = document.querySelector('#microphone');
const listening = state === 'LISTENING';
microphone.setAttribute('aria-pressed', String(listening));
microphone.textContent = listening ? 'Avsluta mikrofon' : 'Starta mikrofon';
refreshMicrophone();
if (message) {
const downloading = updateSpeechProgress(message);
setVoiceStatus(downloading && message.startsWith('Hämtar svensk röstmodell')
? 'Hämtar svensk röstmodell till enheten.'
: message);
} else if (state === 'IDLE') {
updateSpeechProgress('');
setVoiceStatus('');
}
if (/Läs senaste repliken/.test(message)) showSpeechRecovery(message);
playVoiceSignal(state === 'IDLE' && /Mikrofonen är avstängd/.test(message) ? 'STOPPED' : state);
},
onTranscript(text) {
return submitMessage(text, 'voice');
},
});
function primeSpeechFromGesture(event) {
if (!event.isTrusted) return;
voiceController.activateFromUserGesture();
}
document.addEventListener('pointerdown', primeSpeechFromGesture, true);
document.addEventListener('keydown', primeSpeechFromGesture, true);
persistVoiceSettings();
function addVoiceButton(parent, label, handler) {
const button = document.createElement('button'); button.type = 'button'; button.textContent = label;
button.addEventListener('click', handler); parent.append(button); return button;
}
function appendVoiceSettings() {
const item = document.createElement('li'); item.dataset.role = 'voice-controls';
item.setAttribute('aria-label', 'Röstinställningar och uppläsning');
const heading = document.createElement('strong'); heading.textContent = 'Röstinställningar'; item.append(heading);
const fieldset = document.createElement('fieldset');
const legend = document.createElement('legend'); legend.textContent = 'Spelets repliker läses alltid upp. Anpassa rösten här.'; fieldset.append(legend);
const speedLabel = document.createElement('label'); speedLabel.textContent = `Talhastighet: ${Number(voiceSettings.rate).toFixed(1)}`;
const speed = document.createElement('input'); speed.type = 'range'; speed.min = '0.5'; speed.max = '2'; speed.step = '0.1'; speed.value = String(voiceSettings.rate);
speed.setAttribute('aria-label', 'Talhastighet'); speed.addEventListener('input', () => { speedLabel.firstChild.textContent = `Talhastighet: ${Number(speed.value).toFixed(1)}`; });
speedLabel.append(speed); fieldset.append(speedLabel);
const voiceLabel = document.createElement('label'); voiceLabel.textContent = 'Svensk röst';
const voice = document.createElement('select'); voice.setAttribute('aria-label', 'Svensk röst');
const defaultVoice = document.createElement('option'); defaultVoice.value = ''; defaultVoice.textContent = 'Systemets standardröst'; voice.append(defaultVoice);
const piperVoice = document.createElement('option');
piperVoice.value = 'piper-sv-nst';
piperVoice.textContent = 'Piper – svensk röst på enheten';
voice.append(piperVoice);
voice.value = piperVoice.value;
voiceSettings.voiceName = piperVoice.value;
voiceLabel.append(voice); fieldset.append(voiceLabel);
const modelCredits = document.createElement('a');
modelCredits.href = '/static/piper-wasm-v1/voices/ATTRIBUTION.txt';
modelCredits.textContent = 'Svenska rösters upphov och licenser';
fieldset.append(modelCredits);
const signalLabel = document.createElement('label'); const signals = document.createElement('input');
signals.type = 'checkbox'; signals.checked = voiceSettings.soundSignals;
signalLabel.append(signals, document.createTextNode(' Ljudsignal vid röstinmatning')); fieldset.append(signalLabel);
item.append(fieldset);
const speakLatest = () => {
voiceController.activateFromUserGesture();
if (!voiceController.speak(latestAssistantText, {...latestAssistantVoice, onStart: clearSpeechRecovery})) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.');
};
const testSpeech = () => {
voiceController.activateFromUserGesture();
if (!voiceController.speak('Det här är ett test av uppläsningen.', {role: 'narrator', voiceIdentity: 'neutral', onStart: clearSpeechRecovery})) {
setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.');
}
};
addVoiceButton(item, 'Testa ljudet', testSpeech);
addVoiceButton(item, 'Läs senaste repliken', speakLatest);
addVoiceButton(item, 'Upprepa', speakLatest);
addVoiceButton(item, 'Avbryt uppläsning', () => voiceController.cancelSpeech());
speed.addEventListener('change', () => { voiceSettings.rate = Number(speed.value); persistVoiceSettings(); });
voice.addEventListener('change', () => { voiceSettings.voiceName = voice.value; persistVoiceSettings(); });
signals.addEventListener('change', () => { voiceSettings.soundSignals = signals.checked; persistVoiceSettings(); });
addVoiceButton(item, 'Stäng röstinställningar', () => item.remove());
transcript.append(item); item.scrollIntoView({block: 'end'}); speed.focus();
}
function requestVoiceDisclosure() {
const item = document.createElement('li'); item.dataset.role = 'voice-controls';
item.setAttribute('aria-label', 'Information om mikrofonen');
const message = document.createElement('p');
message.textContent = 'Innan du startar: webbläsarens taligenkänning kan behandla ljud genom en tjänst som webbläsaren väljer. Spelet tar inte emot eller sparar ljudinspelningen. Den färdiga transkriberingen skickas och sparas som din vanliga dialog. Fortsätt bara om du godkänner webbläsarens hantering av tal.';
item.append(message);
voiceController.speak(message.textContent, {role: 'narrator', voiceIdentity: 'neutral'});
addVoiceButton(item, 'Jag förstår – starta mikrofonen', () => {
voiceDisclosureAcknowledged = true;
item.remove();
voiceController.startListening();
});
transcript.append(item); item.scrollIntoView({block: 'end'});
item.querySelector('button').focus();
}
function handleVoiceCommand(message, source) {
const parsed = window.GameVoice.parseVoiceCommand(message, {requirePrefix: source === 'voice'});
if (!parsed) return false;
if (parsed.command === 'settings') {
appendLine('assistant', 'Här kan du välja en svensk röst och justera talhastigheten. Alla repliker i spelet läses upp automatiskt.');
appendVoiceSettings();
}
else if (parsed.command === 'repeat') {
if (!voiceController.speak(latestAssistantText, latestAssistantVoice)) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.');
} else if (parsed.command === 'stop') {
voiceController.cancelSpeech(); voiceController.stopListening(); setVoiceStatus('Röstinteraktionen är avbruten.');
} else if (parsed.command === 'help') {
appendLine('assistant', 'Skriv röstinställningar för att välja svensk röst och talhastighet. Spelets repliker läses alltid upp. Du kan tala i mikrofonen när den finns, eller skriva. Använd “röstkommando upprepa” för att höra senaste repliken igen.');
} else setVoiceStatus('Okänt röstkommando. Skriv röstinställningar för alternativen.');
return true;
}
document.querySelector('#microphone').addEventListener('click', () => {
if (voiceController.getState() === 'LISTENING') voiceController.stopListening();
else if (!voiceDisclosureAcknowledged && voiceController.supportsRecognition()) requestVoiceDisclosure();
else voiceController.startListening();
});
document.addEventListener('visibilitychange', () => { if (document.hidden) voiceController.stopAll(); });
window.addEventListener('pagehide', () => voiceController.stopAll());
function setStage(next) {
stage = next;
messageField.disabled = false;
refreshMicrophone();
messageField.value = '';
messageLabel.textContent = next === 'biography'
? 'Berätta fritt om personen du vill spela'
: next === 'world-start'
? 'Skriv “försök igen” för att försöka skapa startplatsen'
: next === 'world-draft'
? 'Ändra startförslaget eller skriv “godkänn”'
: 'Skriv vad du vill göra eller fråga';
refreshActionTools();
messageField.focus();
}
function showAuth() {
stage = 'auth';
play.hidden = true;
debugPanel.hidden = true;
playLayout.classList.remove('debug-enabled');
document.body.classList.remove('debug-layout');
adminView.hidden = true;
auth.hidden = false;
document.querySelector('#auth-heading').textContent = location.pathname === '/admin' ? 'Administratörsinloggning' : 'Svensk livssimulator';
document.querySelector('#version-footer').hidden = false;
const adminRoute = location.pathname === '/admin';
document.querySelector('#auth-intro').hidden = adminRoute;
document.querySelector('#auth-repeat-intro').hidden = adminRoute;
document.querySelector('[name="intent"][value="register"]').hidden = adminRoute;
if (!adminRoute) playFirstVisitIntroduction();
}
function showPlay() {
auth.hidden = true;
adminView.hidden = true;
play.hidden = false;
const showDebug = currentAccount?.is_admin === true;
debugPanel.hidden = !showDebug;
playLayout.classList.toggle('debug-enabled', showDebug);
document.body.classList.toggle('debug-layout', showDebug);
refreshMicrophone();
messageField.focus();
}
function showAdmin() {
if (presenceTimer) clearInterval(presenceTimer);
presenceTimer = null;
voiceController.stopAll();
auth.hidden = true;
play.hidden = true;
debugPanel.hidden = true;
playLayout.classList.remove('debug-enabled');
document.body.classList.remove('debug-layout');
adminView.hidden = false;
document.querySelector('#version-footer').hidden = true;
}
const introductionKey = 'ai-spel.introduction-heard.v2';
function playFirstVisitIntroduction() {
let alreadyHeard = false;
try { alreadyHeard = localStorage.getItem(introductionKey) === 'true'; } catch (_) { /* Keep the intro available for this visit. */ }
if (alreadyHeard) return;
const isAppleMobile = /iPad|iPhone|iPod/i.test(navigator.userAgent)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (isAppleMobile) {
document.querySelector('#auth-repeat-intro').textContent = 'Läs introduktionen';
return;
}
const introduction = document.querySelector('#auth-intro').textContent;
voiceController.speak(introduction, {
role: 'narrator', voiceIdentity: 'neutral',
onStart() { try { localStorage.setItem(introductionKey, 'true'); } catch (_) { /* The page text remains available. */ } },
});
}
document.querySelector('#auth-repeat-intro').addEventListener('click', () => {
if (location.pathname !== '/admin') {
voiceController.activateFromUserGesture();
const introduction = document.querySelector('#auth-intro').textContent;
voiceController.speak(introduction, {
role: 'narrator', voiceIdentity: 'neutral',
onStart() { try { localStorage.setItem(introductionKey, 'true'); } catch (_) { /* The page text remains available. */ } },
});
}
});
function explainAuthError(error, intent) {
if (intent === 'register' && error?.message === 'username_unavailable') return 'Det användarnamnet används redan. Välj ett annat och försök igen.';
if (intent === 'register' && ['invalid_username', 'password_length_must_be_12_to_256'].includes(error?.message)) return 'Kontot kunde inte skapas. Användarnamnet ska ha 3 till 40 bokstäver, siffror eller tecknen punkt, bindestreck och understreck. Lösenordet ska ha minst tolv tecken.';
if (intent === 'login' && ['unauthorized', 'invalid_credentials'].includes(error?.message)) return 'Användarnamnet eller lösenordet stämmer inte. Försök igen.';
return 'Begäran kunde inte genomföras just nu. Kontrollera uppgifterna och försök igen.';
}
function adminElement(tag, text, parent = adminContent) {
const element = document.createElement(tag);
if (text !== undefined) element.textContent = text;
parent.append(element);
return element;
}
function adminJson(title, value, parent = adminContent) {
const details = adminElement('details', undefined, parent);
adminElement('summary', title, details);
adminElement('pre', JSON.stringify(value, null, 2), details);
return details;
}
async function loadAdminPlayers(query = '', offset = 0) {
adminOffset = offset;
adminContent.replaceChildren();
const search = adminElement('form');
search.id = 'player-search';
const label = adminElement('label', 'Sök efter användarnamn eller karaktär', search);
const field = document.createElement('input');
field.type = 'search'; field.name = 'q'; field.value = query; field.maxLength = 100;
label.append(field);
const submit = adminElement('button', 'Sök', search); submit.type = 'submit';
search.addEventListener('submit', event => { event.preventDefault(); loadAdminPlayers(field.value, 0); });
const result = await request(`/api/admin/players?q=${encodeURIComponent(query)}&limit=${adminPageSize}&offset=${offset}`);
adminElement('p', `${result.total} spelare. Visar ${result.offset + 1}–${Math.min(result.total, result.offset + result.players.length)}.`, adminContent);
const list = adminElement('ul');
for (const player of result.players) {
const item = adminElement('li', undefined, list);
const button = adminElement('button', `${player.username} · ${player.character_name || 'ingen karaktär'} · världsversion ${player.world_version ?? 'saknas'}`, item);
button.type = 'button'; button.addEventListener('click', () => openAdminPlayer(player.account_id));
}
const paging = adminElement('div');
const previous = adminElement('button', 'Föregående sida', paging);
previous.type = 'button'; previous.disabled = offset <= 0; previous.addEventListener('click', () => loadAdminPlayers(query, Math.max(0, offset - adminPageSize)));
const next = adminElement('button', 'Nästa sida', paging);
next.type = 'button'; next.disabled = offset + result.players.length >= result.total; next.addEventListener('click', () => loadAdminPlayers(query, offset + adminPageSize));
}
async function openAdminPlayer(accountId) {
adminContent.replaceChildren();
const back = adminElement('button', 'Tillbaka till spelare'); back.type = 'button'; back.addEventListener('click', () => loadAdminPlayers('', adminOffset));
adminElement('h2', 'Spelarprofil');
const profile = await request(`/api/admin/players/${encodeURIComponent(accountId)}`);
adminJson(`${profile.username} · profil och biografi`, profile);
const trace = await request(`/api/admin/players/${encodeURIComponent(accountId)}/trace?limit=200`);
const entries = [
...trace.events.map(event => ({kind: 'Världshändelse', at: event.recorded_at, order: event.commit_sequence, data: event})),
...trace.player_messages.map(message => ({kind: 'Privat spelarmeddelande', at: message.recorded_at, order: message.sequence, data: message})),
...trace.ai_interactions.map(interaction => ({kind: `AI ${interaction.prompt_id} · ${interaction.outcome}`, at: interaction.requested_at, order: interaction.correlation_id, data: interaction}))
].sort((a, b) => String(a.at).localeCompare(String(b.at)));
adminElement('h2', 'Kronologiskt spelarspår');
adminElement('p', 'Registreringstid visas separat från världstid och commitordning. AI-frågor, svar och världshändelser är korrelerade där korrelations-ID finns.');
for (const [index, entry] of entries.entries()) {
const status = entry.data.execution_mode || entry.data.metadata?.decision || entry.data.outcome || 'status okänd';
adminJson(`${index + 1}. ${entry.kind} · ${status} · ${entry.at} · ${entry.order}`, entry.data);
if (entry.data.external_call && Object.keys(entry.data.external_call).length > 0) {
const call = entry.data.external_call;
const outcome = call.error || `HTTP ${call.response_status ?? 'okänt'}`;
adminJson(`Externt tjänsteanrop · ${call.service || 'okänd tjänst'} · ${outcome} · ${call.duration_ms ?? '?'} ms`, call);
}
}
}
async function loadAdminPrompts() {
adminContent.replaceChildren();
const result = await request('/api/admin/prompts');
adminElement('h2', 'Prompttillgångar');
for (const prompt of result.prompts) adminJson(`${prompt.id} · version ${prompt.version}`, prompt.yaml);
}
async function loadAdminRules() {
adminContent.replaceChildren();
const result = await request('/api/admin/rules');
adminElement('h2', 'Luau-regler');
for (const rule of result.rules) adminJson(`${rule.rule_key} · v${rule.version} · ${rule.active ? 'aktiv' : 'inaktiv'} · ${rule.source_hash}`, {source: rule.source, validation_results: rule.validation_results, created_at: rule.created_at});
}
async function loadAdminAudit() {
adminContent.replaceChildren();
const result = await request('/api/admin/audit?limit=200');
adminElement('h2', 'Revisionslogg');
for (const entry of result.entries) adminJson(`${entry.created_at} · ${entry.action} · ${entry.admin_account_id || entry.operator_identity}`, entry);
}
async function loadAdminLogging() {
adminContent.replaceChildren();
const result = await request('/api/admin/settings/logging');
adminElement('h2', 'Driftloggar');
adminElement('p', 'debug=true skriver detaljerade tekniska händelser för HTTP, AI-anrop, validering och commit. debug=false behåller korta tekniska åtkomstloggar och fel. Ändringen sparas i databasen och börjar gälla utan omstart. Spelartext, promptinnehåll, AI-svar, sessionsuppgifter och hemligheter skrivs aldrig till poddloggarna.');
const form = adminElement('form');
const label = adminElement('label', undefined, form);
const checkbox = document.createElement('input');
checkbox.type = 'checkbox'; checkbox.name = 'debug'; checkbox.checked = result.debug;
label.append(checkbox, document.createTextNode(' Aktivera verbose felsökningsloggar (debug=true)'));
const save = adminElement('button', 'Spara loggnivå', form); save.type = 'submit';
const status = adminElement('p', `Aktuell nivå: debug=${result.debug}`);
status.setAttribute('role', 'status');
form.addEventListener('submit', async event => {
event.preventDefault(); save.disabled = true;
try {
const updated = await request('/api/admin/settings/logging', {
method: 'PUT', headers: {'content-type': 'application/json'},
body: JSON.stringify({debug: checkbox.checked}),
});
status.textContent = `Aktuell nivå: debug=${updated.debug}. Ändringen gäller utan omstart.`;
} catch (error) {
status.textContent = `Loggnivån kunde inte ändras: ${error.message}`;
} finally { save.disabled = false; }
});
}
async function openAdmin() {
showAdmin();
adminContent.setAttribute('aria-busy', 'true');
try { await loadAdminPlayers(); }
catch (error) { adminContent.replaceChildren(); adminElement('p', `Administrationsvyn kunde inte öppnas: ${error.message}`); }
finally { adminContent.setAttribute('aria-busy', 'false'); }
}
function appendInitialPrompt() {
appendLine('assistant', 'Välkommen. Skriv fritt om personen du vill spela. Jag föreslår en vuxen biografi som du kan ändra innan du godkänner den.');
setStage('biography');
}
async function proposeWorld(message) {
stage = 'world-start';
messageField.disabled = true;
appendLine('user', message);
appendLine('assistant', 'Jag tar fram ett förslag på startplats och startläge…');
try {
const proposal = await request('/api/world/draft', {
method: 'POST', headers: {'content-type': 'application/json'},
body: JSON.stringify({input: message, current_draft: worldDraft}),
});
worldDraft = proposal.draft;
appendLine('assistant', `${proposal.message}\n\nVärld: ${worldDraft.name}\nStartplats: ${worldDraft.location_name}. ${worldDraft.location_description}\nStartbelopp: ${worldDraft.starting_balance_sek} kronor. ${worldDraft.offer_name} kostar ${worldDraft.offer_price_sek} kronor.\n\nSkriv ändringar eller “godkänn”.`);
} catch (error) {
appendLine('assistant', `Förslaget kunde inte tas fram: ${error.message}. Skriv “försök igen” när du vill försöka på nytt.`);
}
setStage('world-draft');
messageField.disabled = false;
messageField.focus();
}
async function approveWorldDraft(message) {
if (!worldDraft) {
appendLine('assistant', 'Det finns inget världsförslag att godkänna. Skriv “försök igen” först.');
return;
}
appendLine('user', message);
messageField.disabled = true;
try {
gameState = await request('/api/world/start', {
method: 'POST', headers: {'content-type': 'application/json'}, body: JSON.stringify(worldDraft),
});
worldDraft = null;
await loadSavedDialogue();
setStage('game');
appendLine('assistant', 'Du kan fråga om platsen, dina saker eller din ekonomi, vänta, handla, prata med någon som finns här eller skriva vart du vill gå.');
} catch (error) {
appendLine('assistant', `Världsförslaget kunde inte sparas: ${error.message}. Förslaget finns kvar så att du kan försöka igen.`);
}
messageField.disabled = false;
messageField.focus();
}
async function loadSavedDialogue() {
const lines = await request('/api/dialogue');
transcript.replaceChildren();
latestAssistantText = '';
latestPlayerAction = [...lines].reverse().find(line => line.role === 'user')?.content || '';
for (const line of lines) appendLine(line.role === 'user' ? 'user' : line.role === 'system' ? 'system' : 'assistant', line.content, {speaker: line.speaker, speak: false});
refreshActionTools();
if (lines.length > 0 && latestAssistantText && location.pathname !== '/admin') {
voiceController?.speak(latestAssistantText, {role: 'narrator', voiceIdentity: 'neutral'});
} else if (lines.length === 0 && gameState?.world) {
const place = gameState.world.location;
appendLine('assistant', `Du börjar på ${place.name}. ${place.description}`);
}
}
async function openGame() {
currentAccount = await request('/api/me');
gameState = await request('/api/world');
showPlay();
if (!currentAccount.is_admin) window.localGameAI?.start(currentAccount.id);
if (!gameState.character) {
transcript.replaceChildren();
appendInitialPrompt();
if (currentAccount.is_admin) await refreshDecisionTrace();
return;
}
characterDraft = null;
if (!gameState.world) {
worldDraft = null;
appendLine('assistant', 'Nu föreslår jag en startplats som passar biografin. Du kan ändra förslaget innan något sparas. Skriv “börja”.');
setStage('world-draft');
if (currentAccount.is_admin) await refreshDecisionTrace();
return;
}
await loadSavedDialogue();
if (currentAccount.is_admin) await refreshDecisionTrace();
setStage('game');
startPlayerPresence();
announcePlayerChatHelp();
}
function traceTimestamp(record) {
return record.recorded_at || record.requested_at || record.completed_at || record.created_at || '';
}
function renderDecisionTrace(data) {
const groups = new Map();
for (const [kind, records] of Object.entries({events: data.events || [], ai_interactions: data.ai_interactions || [], player_messages: data.player_messages || []})) {
for (const record of records) {
const key = record.correlation_id || `${kind}:${record.event_id || record.id || traceTimestamp(record)}`;
if (!groups.has(key)) groups.set(key, {correlation_id: key, events: [], ai_interactions: [], player_messages: [], latest: ''});
const group = groups.get(key);
group[kind].push(record);
const time = traceTimestamp(record);
if (time > group.latest) group.latest = time;
}
}
const ordered = [...groups.values()].sort((a, b) => b.latest.localeCompare(a.latest));
debugTrace.replaceChildren();
if (ordered.length === 0) {
const empty = document.createElement('p');
empty.textContent = 'Ingen sparad spårning för kontot ännu.';
debugTrace.append(empty);
return;
}
for (const group of ordered) {
const details = document.createElement('details');
details.open = debugTrace.childElementCount === 0;
const summary = document.createElement('summary');
const eventNames = group.events.map(event => `${event.event_type} (${event.commit_status || 'okänt utfall'})`).join(', ');
const prompts = group.ai_interactions.map(interaction => `${interaction.prompt_id} v${interaction.prompt_version}: ${interaction.outcome}`).join(', ');
summary.textContent = `${group.latest || 'Tid saknas'} · ${group.correlation_id}${eventNames ? ` · Rust: ${eventNames}` : ''}${prompts ? ` · AI: ${prompts}` : ''}`;
const chain = document.createElement('div');
chain.className = 'trace-chain';
const addStep = (engine, title, input, output, note = '') => {
const card = document.createElement('article');
card.className = 'trace-step';
card.dataset.engine = engine;
const heading = document.createElement('h3');
const label = document.createElement('span');
label.className = 'trace-engine';
label.textContent = `${engine === 'luau' ? 'Luau' : engine === 'ai' ? 'AI' : engine === 'rust' ? 'Rust' : 'Spelare'} · `;
heading.append(label, document.createTextNode(title));
card.append(heading);
if (note) {
const noteElement = document.createElement('p');
noteElement.textContent = note;
card.append(noteElement);
}
const addValue = (name, value) => {
const valueHeading = document.createElement('strong');
valueHeading.textContent = name;
const pre = document.createElement('pre');
pre.textContent = typeof value === 'string' ? value : JSON.stringify(value ?? 'Ingen uppgift sparad', null, 2);
card.append(valueHeading, pre);
};
addValue('Indata', input);
addValue('Utdata', output);
chain.append(card);
};
const orderedEvents = [...group.events].sort((a, b) => traceTimestamp(a).localeCompare(traceTimestamp(b)));
const orderedInteractions = [...group.ai_interactions].sort((a, b) => traceTimestamp(a).localeCompare(traceTimestamp(b)));
const playerMessages = [
...orderedEvents.map(event => event.payload?.player_message).filter(Boolean),
...group.player_messages.map(message => message.message).filter(Boolean),
];
for (const [index, message] of playerMessages.entries()) {
addStep('player', `Spelarens avsikt ${playerMessages.length > 1 ? index + 1 : ''}`, message, {submitted: true});
}
for (const interaction of orderedInteractions) {
const external = interaction.external_call || {};
const isCompaction = interaction.prompt_id === 'dialogue-context-compaction';
addStep('ai', `${isCompaction ? 'Kontextkomprimering' : interaction.prompt_id} · v${interaction.prompt_version} · ${interaction.outcome}`,
{prompt_yaml: interaction.prompt_yaml, rendered_messages: interaction.rendered_messages, provider: external.service, model: external.model, thinking_effort: external.thinking_effort, provider_request: external.request},
{response: interaction.response, outcome: interaction.outcome, provider_status: external.response_status, provider_response: external.response_body, provider_error: external.error, duration_ms: external.duration_ms, rust_interpretation_and_validation: interaction.metadata},
isCompaction
? 'Äldre privat dialog kondenseras; kontrollera källhändelser, prompt, modellsvar, sammanfattningshash och sparad sekvens. Sammanfattningen är inte kanonisk världssanning.'
: 'AI-förslag och providertrafik. Förslaget är inte i sig ett fastställt världsfaktum.');
const metadata = interaction.metadata || {};
if (metadata.validation_inputs || metadata.validation_results || metadata.decision?.includes?.('rule')) {
addStep('luau', `Regelutkast och tester · ${metadata.rule_key || metadata.activity_key || interaction.prompt_id}`,
{rule_draft: interaction.response, test_inputs: metadata.validation_inputs},
{decision: metadata.decision || interaction.outcome, test_results: metadata.validation_results, source_hash: metadata.source_hash, rule_id: metadata.rule_id, rule_version: metadata.rule_version},
'Luau körs med isolerade testindata; resultatet kontrolleras av Rust innan regeln aktiveras.');
}
}
for (const event of orderedEvents) {
const payload = event.payload || {};
const domain = payload.details || {};
const luau = domain.luau_trace;
if (luau) {
addStep('luau', `Regelkörning · ${domain.activity_key || domain.rule_id || 'regel'}`,
{source: event.rule_source || 'Källkod saknas i denna spårpost.', invocation: luau.input},
luau.error ? {error: luau.error, output: luau.output} : luau.output,
`Regel ${domain.rule_id || 'okänd'} version ${domain.rule_version ?? 'okänd'} · hash ${domain.rule_hash || 'saknas'}`);
addStep('rust', 'Effektvalidering och världskommando',
{proposed_effects: domain.rust_validation?.input_effects || luau.output, activity: domain.activity_key, world_version_before: luau.input?.snapshot?.version},
{validation: domain.rust_validation, committed_event: event.event_type, commit_status: event.commit_status, commit_sequence: event.commit_sequence, world_time: event.world_time, committed_details: domain},
'Rust verifierar typade effekter och skriver den godkända förändringen atomärt.');
} else {
addStep('rust', `Domänbeslut och commit · ${event.event_type}`,
{player_intent: payload.player_message, interpreted_intent: payload.intent, details: domain, world_version: payload.world_version},
{commit_status: event.commit_status, commit_sequence: event.commit_sequence, world_time: event.world_time, event_id: event.event_id},
'Rust fastställer om handlingen kan committas till den kanoniska världen.');
}
}
const raw = document.createElement('details');
raw.className = 'trace-raw';
const rawSummary = document.createElement('summary');
rawSummary.textContent = 'Visa all rå spårdata';
const pre = document.createElement('pre');
pre.textContent = JSON.stringify(group, null, 2);
raw.append(rawSummary, pre);
details.append(summary, chain, raw);
debugTrace.append(details);
}
}
async function refreshDecisionTrace() {
if (!currentAccount?.is_admin || debugRefreshBusy || debugPanel.hidden) return;
debugRefreshBusy = true;
debugStatus.textContent = 'Hämtar revisionsloggad spårning…';
try {
const trace = await request('/api/admin/self/trace?limit=200');
renderDecisionTrace(trace);
debugStatus.textContent = `Visar ${debugTrace.childElementCount} korrelerade händelsegrupper. Uppdaterad ${new Date().toLocaleTimeString('sv-SE')}.`;
} catch (error) {
debugStatus.textContent = `Spårningen kunde inte hämtas: ${error.message}`;
} finally {
debugRefreshBusy = false;
}
}
function announcePlayerChatHelp() {
const key = 'ai-spel.player-chat-help.v1';
try {
if (localStorage.getItem(key) === 'true') return;
localStorage.setItem(key, 'true');
} catch (_) { /* The help remains available through dialogue questions. */ }
appendLine('assistant', 'Du kan fråga vilka andra spelare som är här, säga “Säg till Robin: hej” för att skriva direkt till en spelare eller be mig visa meddelanden från spelare.');
}
async function handleLogout() {
if (presenceTimer) clearInterval(presenceTimer);
presenceTimer = null;
playerMessagesPrimed = false;
seenPlayerMessageIds.clear();
window.localGameAI?.stop();
await request('/api/logout', {method: 'POST'});
if (location.pathname !== '/admin') appendLine('assistant', 'Du har loggat ut. Logga in igen för att fortsätta spela.');
characterDraft = null;
gameState = null;
transcript.replaceChildren();
showAuth();
}
async function handleBiography(message) {
if (/^(godkänn|jag godkänner|godkänn biografin)[.!]?$/i.test(message.trim())) {
if (!characterDraft) {
appendLine('assistant', 'Jag har inget biografiutkast att godkänna än. Berätta först om personen du vill spela.');
return;
}
appendLine('user', message);
messageField.disabled = true;
appendLine('assistant', 'Sparar den godkända karaktären…');
try {
await request('/api/character', {method: 'POST', headers: {'content-type': 'application/json'}, body: JSON.stringify(characterDraft)});
characterDraft = null;
await openGame();
} catch (error) {
if (error.message === 'character_already_exists') {
await openGame();
} else {
appendLine('assistant', `Karaktären kunde inte sparas: ${error.message}. Utkastet finns kvar så att du kan försöka igen.`);
setStage('biography');
}
}
return;
}
appendLine('user', message);
messageField.disabled = true;
try {
const proposal = await request('/api/character/draft', {
method: 'POST',
headers: {'content-type': 'application/json'},
body: JSON.stringify({input: message, current_draft: characterDraft}),
});
characterDraft = proposal.draft;
appendLine('assistant', `${proposal.message}\n\nFörslag: ${characterDraft.name}, ${characterDraft.age} år.\n${characterDraft.biography}${biographyContextText(characterDraft.life_context)}\n\nSkriv ändringar eller “godkänn”.`);
} catch (error) {
appendLine('assistant', `Jag kunde inte ta fram ett biografiförslag: ${error.message}. Försök igen när tjänsten svarar.`);
}
messageField.disabled = false;
messageField.focus();
}
function refreshActionTools() {
const enabled = stage === 'game' && Boolean(latestPlayerAction) && !submitBusy;
document.querySelector('#redo-action').disabled = !enabled;
document.querySelector('#dry-run-action').disabled = !enabled;
}
async function handleGameMessage(message, actionMode = 'normal') {
if (actionMode === 'normal' && /^lokal ai(?:\s|$)/i.test(message.trim())) {
const response = await window.localGameAI?.settings(message);
appendLine('user', message);
appendLine('assistant', response || 'Kommandon: “lokal ai villkor”, “lokal ai godkänn villkor”, “lokal ai avvisa villkor”, “lokal ai på/av”, “lokal ai loggar på/av”, “lokal ai exportera loggar” och “lokal ai radera loggar”.');
return;
}
if (/^logga ut[.!]?$/i.test(message.trim())) {
appendLine('user', message);
await handleLogout();
return;
}
if (stage === 'world-start') {
if (/^försök igen[.!]?$/i.test(message.trim())) {
await proposeWorld(message);
} else {
appendLine('user', message);
appendLine('assistant', 'Startplatsen är inte skapad än. Skriv “försök igen” när du vill försöka på nytt.');
}
return;
}
if (stage === 'world-draft') {
if (/^godkänn[.!]?$/i.test(message.trim())) await approveWorldDraft(message);
else await proposeWorld(message);
return;
}
if (actionMode === 'normal' && await handlePlayerMessageCommand(message)) return;
if (actionMode === 'normal') latestPlayerAction = message;
const idempotencyKey = actionMode === 'normal' && pendingDialogue?.message === message
? pendingDialogue.idempotencyKey
: crypto.randomUUID();
if (actionMode === 'normal') pendingDialogue = {message, idempotencyKey};
appendLine('user', message, actionMode === 'dry_run' ? {speaker: 'Torrkörning'} : actionMode === 'redo' ? {speaker: 'Gör om'} : {});
messageField.disabled = true;
try {
let clientAssistance = null;
if (actionMode === 'normal' && currentAccount && !currentAccount.is_admin && window.localGameAI) {
try {
const history = [...transcript.querySelectorAll('li')].map(line => line.textContent).filter(Boolean);
const assisted = await window.localGameAI.assist(message, history, gameState?.world || {});
clientAssistance = {
intent_hint: String(assisted.intent_hint || '').slice(0, 500),
warning: String(assisted.warning || '').slice(0, 500),
excerpts: Array.isArray(assisted.excerpts) ? assisted.excerpts.filter(item => typeof item === 'string' && item.length <= 500 && history.some(line => line.includes(item))).slice(0, 3) : [],
};
if (clientAssistance.warning) appendLine('system', `Lokal textkontroll: ${clientAssistance.warning}`, {speaker: 'Lokal AI', speak: false});
} catch (_) { /* Local assistance is optional; the original input always proceeds. */ }
}
let result;
for (let attempt = 0; attempt < 2; attempt += 1) {
try {
result = await request('/api/dialogue', {
method: 'POST',
headers: {'content-type': 'application/json'},
body: JSON.stringify({message, expected_world_version: gameState.world.version, idempotency_key: idempotencyKey, forget_previous_turn: actionMode !== 'normal', dry_run: actionMode === 'dry_run', client_assistance: clientAssistance}),
});
break;
} catch (error) {
if (error.message !== 'world_version_conflict' || attempt > 0) throw error;
gameState = await request('/api/world');
if (!gameState.world) throw new Error('world_not_available');
}
}
if (result.status !== 'dry_run') {
gameState.world.version = result.world_version;
gameState.world.world_time = result.world_time;
pendingDialogue = null;
}
if (result.status !== 'dry_run' && (result.intent === 'move' || result.intent === 'meet')) {
try {
const refreshed = await request('/api/world');
if (refreshed.world) gameState = refreshed;
} catch (_) { /* The committed dialogue stays successful if this optional view refresh fails. */ }
}
const speakingNpc = result.status !== 'dry_run' && ['speak', 'meet'].includes(result.intent) ? gameState.world.npc : null;
for (const ruleName of result.debug_rules_created || []) {
appendLine('assistant', ruleName, {speaker: 'Nya regler', speak: false});
}
appendLine('assistant', result.reply, result.status === 'dry_run'
? {speaker: 'Torrkörning', voice: {role: 'narrator', voiceIdentity: 'neutral'}}
: speakingNpc
? {speaker: speakingNpc.name, voice: {characterId: speakingNpc.id, voiceIdentity: speakingNpc.voice_identity}}
: {speaker: 'Berättaren', voice: {role: 'narrator', voiceIdentity: 'neutral'}});
if (result.context_compaction?.notice) {
appendLine('system', result.context_compaction.notice, {speaker: 'Kontext', speak: false});
}
refreshActionTools();
} catch (error) {
messageField.value = message;
try {
const history = [...transcript.querySelectorAll('li')].map(line => line.textContent).filter(Boolean);
const localReply = await window.localGameAI?.offline(message, history, gameState?.world || {});
if (localReply) appendLine('assistant', `Lokalt, osparat förslag: ${localReply}`, {speaker: 'Lokal hjälp'});
else appendLine('assistant', `${explainDialogueError(error)} Ditt meddelande ligger kvar i inmatningen.`);
} catch (_) { appendLine('assistant', `${explainDialogueError(error)} Ditt meddelande ligger kvar i inmatningen.`); }
}
messageField.disabled = false;
messageField.focus();
}
document.querySelector('#auth-form').addEventListener('submit', async (event) => {
event.preventDefault();
const form = event.currentTarget;
const data = new FormData(form);
const intent = event.submitter?.value || 'login';
try {
await request(`/api/${intent}`, {method: 'POST', headers: {'content-type': 'application/json'}, body: JSON.stringify({username: data.get('username'), password: data.get('password')})});
form.reset();
if (location.pathname === '/admin') await openAdmin(); else await openGame();
} catch (error) {
const status = document.querySelector('#auth-status');
status.textContent = explainAuthError(error, intent);
status.hidden = false;
if (location.pathname !== '/admin') voiceController.speak(status.textContent, {role: 'narrator', voiceIdentity: 'neutral'});
}
});
async function submitMessage(input, source = 'text', actionMode = 'normal') {
if (submitBusy || messageField.disabled) return;
const message = String(input || '').trim();
if (!message) return;
if (actionMode === 'normal' && handleVoiceCommand(message, source)) { messageField.value = ''; return; }
submitBusy = true;
refreshMicrophone();
voiceController.stopListening();
voiceController.cancelSpeech();
// cancel() above may also have discarded Safari's silent speech-channel
// primer. Restore it synchronously inside the submit gesture, before
// waiting for the API response that will be read aloud.
voiceController.activateFromUserGesture();
messageField.value = '';
try {
if (stage === 'biography') await handleBiography(message);
else await handleGameMessage(message, actionMode);
} catch (error) {
appendLine('assistant', `Det gick inte att genomföra begäran: ${error.message}`);
} finally {
submitBusy = false;
refreshActionTools();
refreshMicrophone();
if (currentAccount?.is_admin) await refreshDecisionTrace();
if (!play.hidden && !messageField.disabled) messageField.focus();
}
}
async function handlePlayerMessageCommand(message) {
const listPlayers = /^(?:vilka (?:andra )?spelare är här|finns det andra spelare här)\??$/i.test(message.trim());
const sendMatch = /^(?:säg|skriv|skicka) till ([^:]{1,80}):\s*(.{1,4000})$/is.exec(message.trim());
const readMessages = /^(?:visa|läs upp) (?:de senaste )?meddelanden från spelare\.?$/i.test(message.trim());
if (!listPlayers && !sendMatch && !readMessages) return false;
appendLine('user', message);
try {
if (listPlayers) {
const players = await request('/api/players/nearby');
appendLine('assistant', players.length
? `Här finns ${players.map(player => player.name).join(', ')} att prata med.`
: 'Just nu finns inga andra inloggade spelare på platsen.');
return true;
}
if (readMessages) {
const messages = await request('/api/player/messages');
const recent = messages.slice(-10);
if (recent.length === 0) appendLine('assistant', 'Du har inga sparade meddelanden från andra spelare.');
else for (const entry of recent) {
seenPlayerMessageIds.add(entry.id);
const isIncoming = entry.direction === 'incoming';
appendLine(isIncoming ? 'assistant' : 'user', entry.message, isIncoming
? {speaker: entry.sender_name, voice: {characterId: entry.sender_character_id, voiceIdentity: entry.sender_voice_identity}}
: {speaker: 'Du', speak: false});
}
return true;
}
const players = await request('/api/players/nearby');
const targetName = sendMatch[1].trim();
const matches = players.filter(player => player.name.localeCompare(targetName, 'sv', {sensitivity: 'base'}) === 0);
if (matches.length === 0) {
appendLine('assistant', `Jag hittar ingen inloggad spelare som heter ${targetName} på platsen. Fråga vilka andra spelare som är här.`);
return true;
}
if (matches.length > 1) {
appendLine('assistant', `Flera spelare heter ${targetName}. Säg vilket namn de använder i spelet.`);
return true;
}
const key = pendingPlayerMessage?.text === sendMatch[2] && pendingPlayerMessage?.target === matches[0].character_id
? pendingPlayerMessage.key
: crypto.randomUUID();
pendingPlayerMessage = {text: sendMatch[2], target: matches[0].character_id, key};
const result = await request(`/api/players/${encodeURIComponent(matches[0].character_id)}/messages`, {
method: 'POST', headers: {'content-type': 'application/json'},
body: JSON.stringify({message: sendMatch[2], idempotency_key: key}),
});
pendingPlayerMessage = null;
appendLine('assistant', `Ditt meddelande skickades till ${matches[0].name}.`);
return Boolean(result.message_id);
} catch (error) {
messageField.value = message;
appendLine('assistant', `Spelarmeddelandet kunde inte hanteras: ${explainDialogueError(error)}`);
return true;
}
}
let pendingPlayerMessage = null;
async function startPlayerPresence() {
if (presenceTimer) clearInterval(presenceTimer);
const refresh = async (announceNewMessages) => {
if (play.hidden || stage !== 'game') return;
try {
await request('/api/presence/heartbeat', {method: 'POST'});
const messages = await request('/api/player/messages');
for (const entry of messages) {
if (seenPlayerMessageIds.has(entry.id)) continue;
if (announceNewMessages && entry.direction === 'incoming'
&& (submitBusy || ['LISTENING', 'PROCESSING', 'SPEAKING'].includes(voiceController.getState()))) continue;
seenPlayerMessageIds.add(entry.id);
if (announceNewMessages && entry.direction === 'incoming') {
appendLine('assistant', entry.message, {
speaker: entry.sender_name,
voice: {characterId: entry.sender_character_id, voiceIdentity: entry.sender_voice_identity},
});
}
}
playerMessagesPrimed = true;
} catch (_) { /* Presence is a hint; the text game remains usable if it is unavailable. */ }
};
await refresh(playerMessagesPrimed);
presenceTimer = setInterval(() => refresh(true), 30_000);
}
document.querySelector('#message-form').addEventListener('submit', async (event) => {
event.preventDefault();
await submitMessage(messageField.value);
});
document.querySelector('#redo-action').addEventListener('click', () => {
if (latestPlayerAction) submitMessage(latestPlayerAction, 'button', 'redo');
});
document.querySelector('#dry-run-action').addEventListener('click', () => {
if (latestPlayerAction) submitMessage(latestPlayerAction, 'button', 'dry_run');
});
document.querySelectorAll('[data-admin-view]').forEach(button => button.addEventListener('click', async () => {
adminContent.setAttribute('aria-busy', 'true');
try {
if (button.dataset.adminView === 'players') await loadAdminPlayers();
else if (button.dataset.adminView === 'prompts') await loadAdminPrompts();
else if (button.dataset.adminView === 'rules') await loadAdminRules();
else if (button.dataset.adminView === 'logging') await loadAdminLogging();
else await loadAdminAudit();
} catch (error) { adminContent.replaceChildren(); adminElement('p', `Vyn kunde inte läsas: ${error.message}`); }
finally { adminContent.setAttribute('aria-busy', 'false'); }
}));
document.querySelector('#admin-logout').addEventListener('click', handleLogout);
document.querySelector('#debug-refresh').addEventListener('click', refreshDecisionTrace);
messageField.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
event.preventDefault();
document.querySelector('#message-form').requestSubmit();
}
});
request('/version').then(({version}) => {
document.querySelector('#api-version').textContent = version;
}).catch(() => {
document.querySelector('#api-version').textContent = 'otillgänglig';
});
request('/static/version.json', {cache: 'no-store'}).then(({version}) => {
document.querySelector('#static-version').textContent = version;
}).catch(() => {
document.querySelector('#static-version').textContent = 'otillgänglig';
});
request('/api/me').then(() => location.pathname === '/admin' ? openAdmin() : openGame()).catch(showAuth);
</script>
</body>
</html>