Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0876538e58 | ||
|
|
f2a2a3b30a | ||
|
|
c9e31d23ba | ||
|
|
1f9fc464d4 | ||
|
|
49ee16a688 | ||
|
|
e59919a328 | ||
|
|
31fa4db673 | ||
|
|
c392dfe39f | ||
|
|
5a44d3d4f4 | ||
|
|
e29414e7c0 | ||
|
|
17604e736b | ||
|
|
c462ef1871 | ||
|
|
94eef5d998 | ||
|
|
4c36c5e421 | ||
|
|
370af29c47 | ||
|
|
1d60387a9b | ||
|
|
4502e2406d | ||
|
|
92741baec7 | ||
|
|
f4dcb0de1a |
@@ -25,6 +25,7 @@ jobs:
|
|||||||
shell: bash
|
shell: bash
|
||||||
run: |
|
run: |
|
||||||
set -euo pipefail
|
set -euo pipefail
|
||||||
|
node --version
|
||||||
python3 scripts/bump-version.py --check
|
python3 scripts/bump-version.py --check
|
||||||
scripts/check-frontend.sh
|
scripts/check-frontend.sh
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ FROM nginxinc/nginx-unprivileged:1.27-alpine
|
|||||||
ARG FRONTEND_VERSION
|
ARG FRONTEND_VERSION
|
||||||
RUN test -n "$FRONTEND_VERSION"
|
RUN test -n "$FRONTEND_VERSION"
|
||||||
COPY index.html /usr/share/nginx/html/index.html
|
COPY index.html /usr/share/nginx/html/index.html
|
||||||
|
COPY voice.js /usr/share/nginx/html/voice.js
|
||||||
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
|
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
|
||||||
USER root
|
USER root
|
||||||
RUN sed -i "s/__FRONTEND_VERSION__/${FRONTEND_VERSION}/g" /usr/share/nginx/html/index.html
|
RUN sed -i "s/__FRONTEND_VERSION__/${FRONTEND_VERSION}/g" /usr/share/nginx/html/index.html
|
||||||
|
|||||||
@@ -2,6 +2,20 @@
|
|||||||
|
|
||||||
This repository contains the static Swedish web client for the AI-driven life simulator. The intended deployment is a small Nginx pod in the `ai-spel` namespace. The existing Rust service remains authoritative for accounts, game state, and all `/api/...` routes.
|
This repository contains the static Swedish web client for the AI-driven life simulator. The intended deployment is a small Nginx pod in the `ai-spel` namespace. The existing Rust service remains authoritative for accounts, game state, and all `/api/...` routes.
|
||||||
|
|
||||||
|
After login, character creation and play use one dialogue history and one text input. The player writes a free biography, receives a temporary AI draft, can request revisions, and approves it by writing `godkänn`. The player then receives a proposed start world and place based on the biography. That draft can also be revised in dialogue and is saved only after a second explicit `godkänn`. Drafts stay in the browser until approval and are lost if the page is reloaded first. The backend creates the character and initializes the world only after their respective approvals.
|
||||||
|
|
||||||
|
During play the UI has no persistent location, task, inventory, economy, status, or purchase panels. The player asks for information or writes an action in the same input. Rust validates state changes; the AI can only propose a typed intent. A direct request to travel may establish a new place and an encounter when Rust commits that movement.
|
||||||
|
|
||||||
|
The separate `/admin` route provides an authenticated, read-only operations view for player search/profile/trace, YAML prompt assets, generated Luau rules with validation results, and the append-only audit log. All privileged data comes from the Rust `/api/admin/...` API; the browser never connects directly to PostgreSQL. Backend endpoints require `accounts.is_admin=true`.
|
||||||
|
|
||||||
|
The game is text- and dialogue-based and uses no images. Place descriptions include sound, smell, air/temperature, touch/surface, and spatial-orientation cues. Visible details may also be described in words, but are never required to understand the scene or play. The transcript is screen-reader announced, and Enter submits the input while Shift+Enter inserts a newline; no separate send button is required.
|
||||||
|
|
||||||
|
Voice input and output are optional browser features. The microphone button beside the text field uses Web Speech API when available and sends only its final Swedish transcript through the same submission path as typed text. Before its first use, the client explains that the browser may process audio through a provider-selected service; the game itself does not receive or store recordings, while the final transcript is saved as ordinary dialogue. Writing `röstinställningar` or saying `röstkommando alternativ` opens the temporary controls in the dialogue. The player can choose `Spelets röst`, `Skärmläsare`, or `Endast text`, select available Swedish speech voices and rate, and enable auto-read and short audio cues. The default mode is `Skärmläsare`; auto-read is off. These preferences are stored in browser `localStorage`. If speech APIs are unavailable or permission is denied, text play remains available.
|
||||||
|
|
||||||
|
When a character or NPC is created, its saved voice identity is masculine, feminine, or neutral. The biography prompt only assigns masculine/feminine when the character is explicitly described that way; otherwise it uses neutral. Speech synthesis applies a stable, subtly varied pitch/rate profile per character, so a character keeps the same sound across visits. Narration always uses neutral pitch. The browser's selected Swedish voice still determines the underlying voice, so the exact sound depends on installed system voices.
|
||||||
|
|
||||||
|
System voice commands require the prefix `röstkommando`: `upprepa`, `avbryt`, `hjälp`, `alternativ`, or `paus`. Without the prefix, the same words remain ordinary dialogue. Speech recognition and synthesis are browser-dependent; release acceptance must record which real iPhone/Safari/VoiceOver and Android/Chrome/TalkBack combinations were actually checked.
|
||||||
|
|
||||||
The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`. The ingress routes `/` to this frontend service and routes `/api`, `/version`, and `/health` to the Rust service. That keeps the current server-side session cookie same-origin and avoids browser CORS configuration.
|
The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`. The ingress routes `/` to this frontend service and routes `/api`, `/version`, and `/health` to the Rust service. That keeps the current server-side session cookie same-origin and avoids browser CORS configuration.
|
||||||
|
|
||||||
## Release flow
|
## Release flow
|
||||||
@@ -10,6 +24,6 @@ The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`.
|
|||||||
|
|
||||||
CI needs repository Action secrets named `HARBOR_USERNAME` and `HARBOR_PASSWORD`. The Harbor pull secret `harbor-pull` is already present in the Kubernetes namespace. Argo CD uses the existing `ai-spel` project and Harbor OCI credentials.
|
CI needs repository Action secrets named `HARBOR_USERNAME` and `HARBOR_PASSWORD`. The Harbor pull secret `harbor-pull` is already present in the Kubernetes namespace. Argo CD uses the existing `ai-spel` project and Harbor OCI credentials.
|
||||||
|
|
||||||
The first Argo Application is described in `deploy/argocd/application.yaml`. The backend ingress must be switched to the frontend Service before public traffic uses this pod. That cutover is intentionally coordinated with a backend release so the API routes and login session remain on the same host.
|
The first Argo Application is described in `deploy/argocd/application.yaml`. The backend ingress routes `/api`, `/version`, and health checks to Rust while serving the static client at `/`. Both services share the same origin so the session cookie remains same-origin.
|
||||||
|
|
||||||
Builds, checks, and runtime verification happen in the pipeline and Kubernetes. Do not run the app, tests, container images, or binaries locally.
|
Builds, checks, and runtime verification happen in the pipeline and Kubernetes. Do not run the app, tests, container images, or binaries locally.
|
||||||
|
|||||||
@@ -2,5 +2,5 @@ apiVersion: v2
|
|||||||
name: ai-spel-frontend
|
name: ai-spel-frontend
|
||||||
description: Static web frontend for the Swedish life simulator
|
description: Static web frontend for the Swedish life simulator
|
||||||
type: application
|
type: application
|
||||||
version: 0.1.19
|
version: 0.1.28
|
||||||
appVersion: "0.1.19"
|
appVersion: "0.1.28"
|
||||||
+569
-179
@@ -6,223 +6,613 @@
|
|||||||
<meta name="color-scheme" content="light dark">
|
<meta name="color-scheme" content="light dark">
|
||||||
<title>Svensk livssimulator</title>
|
<title>Svensk livssimulator</title>
|
||||||
<style>
|
<style>
|
||||||
:root { font: 1rem/1.55 system-ui, sans-serif; }
|
:root { font: 1rem/1.6 system-ui, sans-serif; }
|
||||||
body { max-width: 52rem; margin: 0 auto; padding: 1.25rem; }
|
body { max-width: 52rem; margin: 0 auto; padding: 1rem; }
|
||||||
h1, h2, h3 { line-height: 1.2; }
|
h1, h2 { line-height: 1.2; }
|
||||||
footer { border-top: 1px solid; margin-top: 2rem; padding-top: .5rem; color: GrayText; font-size: .875rem; }
|
form { display: grid; gap: .75rem; max-width: 32rem; }
|
||||||
form { display: grid; gap: .75rem; max-width: 40rem; }
|
label { display: grid; gap: .25rem; font-weight: 600; }
|
||||||
label { display: grid; gap: .2rem; font-weight: 600; }
|
input, textarea, button { font: inherit; padding: .65rem; }
|
||||||
input, textarea, button { font: inherit; padding: .6rem; }
|
|
||||||
button { justify-self: start; cursor: pointer; }
|
button { justify-self: start; cursor: pointer; }
|
||||||
#status { min-height: 1.5em; }
|
#dialogue { list-style: none; padding: 0; margin: 0; }
|
||||||
.card { border: 1px solid; border-radius: .5rem; padding: 1rem; margin-block: 1rem; }
|
#dialogue li { margin-block: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||||
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
|
#dialogue li[data-role="user"] { font-weight: 650; }
|
||||||
.row button { margin-block: .4rem; }
|
#dialogue li[data-role="assistant"] { padding-inline-start: .75rem; border-inline-start: .2rem solid currentColor; }
|
||||||
#transcript { min-height: 5rem; max-height: 28rem; overflow: auto; }
|
#message { width: 100%; min-height: 3.5rem; box-sizing: border-box; }
|
||||||
#transcript li { margin-block: .6rem; }
|
#message-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
|
||||||
|
#voice-status { min-height: 1.5em; }
|
||||||
|
#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; }
|
||||||
|
.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; }
|
[hidden] { display: none !important; }
|
||||||
|
footer { margin-top: 2rem; border-top: 1px solid; padding-top: .5rem; color: GrayText; font-size: .875rem; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<h1>En värld du formar</h1>
|
|
||||||
<p>Skapa en vuxen person och forma en egen vardag. AI-förslag sparas inte förrän du har granskat och godkänt dem.</p>
|
|
||||||
<p id="status" role="status" aria-live="polite"></p>
|
|
||||||
<section id="auth" aria-labelledby="auth-heading">
|
<section id="auth" aria-labelledby="auth-heading">
|
||||||
<h2 id="auth-heading">Logga in eller skapa konto</h2>
|
<h1 id="auth-heading">Svensk livssimulator</h1>
|
||||||
|
<p>Skapa en vuxen person och utforska en bestående värld genom dialog. Inga bilder används.</p>
|
||||||
<form id="auth-form">
|
<form id="auth-form">
|
||||||
<label>Användarnamn <input name="username" required minlength="3" maxlength="40" autocomplete="username"></label>
|
<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>
|
<label>Lösenord <input name="password" type="password" required minlength="12" maxlength="256" autocomplete="current-password"></label>
|
||||||
<div class="row"><button type="submit" name="intent" value="login">Logga in</button><button type="submit" name="intent" value="register">Skapa konto</button></div>
|
<div><button type="submit" name="intent" value="login">Logga in</button> <button type="submit" name="intent" value="register">Skapa konto</button></div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
<section id="new-character" aria-labelledby="character-heading" hidden>
|
<section id="play" aria-label="Spelets dialog" hidden>
|
||||||
<h2 id="character-heading">Vem är du?</h2>
|
<h1 class="sr-only">Dialog</h1>
|
||||||
<p>Du väljer själv bakgrund. Karaktären ska vara vuxen, men du behöver inte välja yrke eller startpaket.</p>
|
<ol id="dialogue" aria-label="Dialoghistorik" role="log" aria-live="polite" aria-relevant="additions text"></ol>
|
||||||
<form id="character-form">
|
<form id="message-form">
|
||||||
<label>Namn <input name="name" required maxlength="120" autocomplete="name"></label>
|
<label for="message" id="message-label">Skriv ett meddelande</label>
|
||||||
<label>Ålder (18 år eller äldre) <input name="age" type="number" min="18" required value="30"></label>
|
<textarea id="message" name="message" maxlength="4000" aria-describedby="message-help" autocomplete="off"></textarea>
|
||||||
<label>Biografi <textarea name="biography" required maxlength="20000" rows="6" placeholder="Berätta fritt om personens liv och nuläge."></textarea></label>
|
<div id="message-tools"><button type="button" id="microphone" aria-pressed="false" aria-describedby="voice-status">Starta mikrofon</button></div>
|
||||||
<button type="submit">Börja spela</button>
|
<span id="message-help" class="sr-only">Tryck Enter för att skicka. Tryck Skift och Enter för ny rad.</span>
|
||||||
</form>
|
</form>
|
||||||
|
<p id="voice-status" role="status" aria-live="polite"></p>
|
||||||
</section>
|
</section>
|
||||||
<section id="world-setup" aria-labelledby="world-setup-heading" hidden>
|
<section id="admin-view" aria-labelledby="admin-heading" hidden>
|
||||||
<h2 id="world-setup-heading">Skapa din startvärld</h2>
|
<h1 id="admin-heading">Administration</h1>
|
||||||
<p>Beskriv vad du vill börja med. AI:n föreslår en plats och en person; du kan redigera allt innan världen sparas.</p>
|
<p>Privilegierad läsning loggas. Känsligt spelarinnehåll visas bara här för administratörer.</p>
|
||||||
<form id="world-idea-form">
|
<nav id="admin-toolbar" aria-label="Administrationsvyer">
|
||||||
<label>Din idé <textarea name="idea" required maxlength="4000" rows="4" placeholder="Till exempel: en småstad vid kusten där min karaktär just har flyttat in."></textarea></label>
|
<button type="button" data-admin-view="players">Spelare</button>
|
||||||
<button type="submit">Skapa ett förslag</button>
|
<button type="button" data-admin-view="prompts">Prompter</button>
|
||||||
</form>
|
<button type="button" data-admin-view="rules">Luau-regler</button>
|
||||||
<form id="world-draft-form" hidden>
|
<button type="button" data-admin-view="audit">Revisionslogg</button>
|
||||||
<label>Världens namn <input name="name" required maxlength="120"></label>
|
<button type="button" id="admin-logout">Logga ut</button>
|
||||||
<label>Plats <input name="location_name" required maxlength="120"></label>
|
</nav>
|
||||||
<label>Beskrivning av platsen <textarea name="location_description" required maxlength="2000" rows="4"></textarea></label>
|
<div id="admin-content" aria-live="polite" aria-busy="false"></div>
|
||||||
<label>Person du kan möta <input name="npc_name" required maxlength="120"></label>
|
|
||||||
<label>Om personen <textarea name="npc_biography" required maxlength="2000" rows="4"></textarea></label>
|
|
||||||
<h3>Förslag på startläge</h3>
|
|
||||||
<p>Startpengar och varan är bara förslag. De sparas först när du redigerat och godkänt dem.</p>
|
|
||||||
<label>Startsaldo i kronor <input name="starting_balance_sek" type="number" min="0" step="1" required></label>
|
|
||||||
<label>En vara som går att köpa här <input name="offer_name" required maxlength="120"></label>
|
|
||||||
<label>Pris i hela kronor <input name="offer_price_sek" type="number" min="1" step="1" required></label>
|
|
||||||
<div class="row"><button type="submit">Godkänn och börja spela</button><button id="discard-world-draft" type="button">Gör ett nytt förslag</button></div>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<section id="game" hidden>
|
|
||||||
<div class="row"><h2 id="world-heading"></h2><button id="logout" type="button">Logga ut</button></div>
|
|
||||||
<section class="card" aria-labelledby="place-heading">
|
|
||||||
<h3 id="place-heading"></h3><p id="place-description"></p>
|
|
||||||
<h3 id="npc-heading"></h3><p id="npc-description"></p>
|
|
||||||
<h3 id="player-heading"></h3><p id="player-biography"></p>
|
|
||||||
<h3>Ekonomi och ägodelar</h3>
|
|
||||||
<p>Saldo: <span id="balance"></span> kr</p>
|
|
||||||
<ul id="inventory" aria-label="Dina ägodelar"></ul>
|
|
||||||
</section>
|
|
||||||
<section class="card" id="shop" aria-labelledby="shop-heading" hidden>
|
|
||||||
<h3 id="shop-heading">Köp på platsen</h3>
|
|
||||||
<p><span id="offer-description"></span></p>
|
|
||||||
<p id="offer-affordability"></p>
|
|
||||||
<button id="buy-offer" type="button">Köp</button>
|
|
||||||
</section>
|
|
||||||
<section class="card" aria-labelledby="conversation-heading">
|
|
||||||
<h3 id="conversation-heading">Samtal</h3>
|
|
||||||
<ol id="transcript" aria-label="Sparat samtal"></ol>
|
|
||||||
<form id="message-form">
|
|
||||||
<label id="message-label">Skriv ett meddelande <textarea name="message" required maxlength="4000" rows="3"></textarea></label>
|
|
||||||
<button type="submit">Skicka</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · API <span id="api-version">hämtar version…</span></footer>
|
<footer id="version-footer">Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · API <span id="api-version">hämtar version…</span></footer>
|
||||||
|
<script src="/voice.js"></script>
|
||||||
<script>
|
<script>
|
||||||
const status = document.querySelector('#status');
|
|
||||||
const auth = document.querySelector('#auth');
|
const auth = document.querySelector('#auth');
|
||||||
const characterSection = document.querySelector('#new-character');
|
const play = document.querySelector('#play');
|
||||||
const worldSetup = document.querySelector('#world-setup');
|
const adminView = document.querySelector('#admin-view');
|
||||||
const game = document.querySelector('#game');
|
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 gameState = null;
|
||||||
|
let submitBusy = false;
|
||||||
|
let pendingDialogue = null;
|
||||||
|
let latestAssistantText = '';
|
||||||
|
let latestAssistantVoice = {role: 'narrator', voiceIdentity: 'neutral'};
|
||||||
|
const voiceSettingsKey = 'ai-spel.voice-settings.v1';
|
||||||
|
let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey);
|
||||||
|
let voiceController;
|
||||||
|
let audioContext;
|
||||||
|
let voiceDisclosureAcknowledged = false;
|
||||||
|
let adminOffset = 0;
|
||||||
|
const adminPageSize = 50;
|
||||||
|
|
||||||
async function request(path, options = {}) {
|
async function request(path, options = {}) {
|
||||||
const response = await fetch(path, { credentials: 'same-origin', ...options });
|
const response = await fetch(path, {credentials: 'same-origin', ...options});
|
||||||
const body = response.status === 204 ? null : await response.json();
|
const body = response.status === 204 ? null : await response.json();
|
||||||
if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
|
if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
|
||||||
return body;
|
return body;
|
||||||
}
|
}
|
||||||
request('/version').then(({version}) => {
|
function appendLine(role, content, options = {}) {
|
||||||
document.querySelector('#api-version').textContent = version;
|
const line = document.createElement('li');
|
||||||
}).catch(() => {
|
line.dataset.role = role;
|
||||||
document.querySelector('#api-version').textContent = 'otillgänglig';
|
line.textContent = `${options.speaker || (role === 'user' ? 'Du' : 'Berättelsen')}: ${content}`;
|
||||||
|
transcript.append(line);
|
||||||
|
line.scrollIntoView({block: 'end'});
|
||||||
|
if (role === 'assistant') {
|
||||||
|
latestAssistantText = content;
|
||||||
|
latestAssistantVoice = options.voice || {role: 'narrator', voiceIdentity: 'neutral'};
|
||||||
|
if (options.speak !== false && !content.trim().endsWith('…') && !content.trim().endsWith('...')
|
||||||
|
&& voiceSettings.mode === 'game-voice' && voiceSettings.autoSpeak && !play.hidden) {
|
||||||
|
voiceController?.speak(content, latestAssistantVoice);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
function setVoiceStatus(message = '') { document.querySelector('#voice-status').textContent = message; }
|
||||||
|
function refreshMicrophone() {
|
||||||
|
const button = document.querySelector('#microphone');
|
||||||
|
if (button) button.disabled = play.hidden || messageField.disabled || submitBusy;
|
||||||
|
}
|
||||||
|
function persistVoiceSettings() {
|
||||||
|
if (!window.GameVoice.saveSettings(localStorage, voiceSettingsKey, voiceSettings)) {
|
||||||
|
setVoiceStatus('Röstinställningen kunde inte sparas i den här webbläsaren.');
|
||||||
|
}
|
||||||
|
voiceController?.update(voiceSettings);
|
||||||
|
if (voiceSettings.mode !== 'game-voice') voiceController?.stopAll();
|
||||||
|
else if (!voiceSettings.autoSpeak) voiceController?.cancelSpeech();
|
||||||
|
transcript.setAttribute('aria-live', voiceSettings.mode === 'game-voice' ? 'off' : '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) setVoiceStatus(message);
|
||||||
|
playVoiceSignal(state === 'IDLE' && /Mikrofonen är avstängd/.test(message) ? 'STOPPED' : state);
|
||||||
|
},
|
||||||
|
onTranscript(text) {
|
||||||
|
return submitMessage(text, 'voice');
|
||||||
|
},
|
||||||
});
|
});
|
||||||
function showAuth() { auth.hidden = false; characterSection.hidden = true; worldSetup.hidden = true; game.hidden = true; }
|
persistVoiceSettings();
|
||||||
function showCharacter() { auth.hidden = true; characterSection.hidden = false; worldSetup.hidden = true; game.hidden = true; }
|
|
||||||
function showWorldSetup() { auth.hidden = true; characterSection.hidden = true; worldSetup.hidden = false; game.hidden = true; }
|
function addVoiceButton(parent, label, handler) {
|
||||||
function renderConversation(lines, npcName) {
|
const button = document.createElement('button'); button.type = 'button'; button.textContent = label;
|
||||||
const transcript = document.querySelector('#transcript');
|
button.addEventListener('click', handler); parent.append(button); return button;
|
||||||
transcript.replaceChildren(...lines.map((line) => {
|
}
|
||||||
const entry = document.createElement('li');
|
function appendVoiceSettings() {
|
||||||
entry.textContent = `${line.role === 'user' ? 'Du' : npcName}: ${line.content}`;
|
const item = document.createElement('li'); item.dataset.role = 'voice-controls';
|
||||||
return entry;
|
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 = 'Välj hur dialogen ska läsas upp'; fieldset.append(legend);
|
||||||
|
const modeLabel = document.createElement('label'); modeLabel.textContent = 'Läge';
|
||||||
|
const mode = document.createElement('select');
|
||||||
|
[['screen-reader', 'Skärmläsare'], ['game-voice', 'Spelets röst'], ['text-only', 'Endast text']].forEach(([value, label]) => {
|
||||||
|
const option = document.createElement('option'); option.value = value; option.textContent = label; mode.append(option);
|
||||||
|
});
|
||||||
|
mode.value = voiceSettings.mode; modeLabel.append(mode); fieldset.append(modeLabel);
|
||||||
|
const autoLabel = document.createElement('label'); const auto = document.createElement('input');
|
||||||
|
auto.type = 'checkbox'; auto.checked = voiceSettings.autoSpeak;
|
||||||
|
autoLabel.append(auto, document.createTextNode(' Läs nya repliker automatiskt')); fieldset.append(autoLabel);
|
||||||
|
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);
|
||||||
|
function refreshVoices() {
|
||||||
|
const selected = voiceSettings.voiceName;
|
||||||
|
voice.replaceChildren(defaultVoice.cloneNode(true));
|
||||||
|
voiceController.getVoices().filter(entry => /^sv(-|$)/i.test(entry.lang)).forEach(entry => {
|
||||||
|
const option = document.createElement('option'); option.value = entry.name; option.textContent = `${entry.name} (${entry.lang})`; voice.append(option);
|
||||||
|
});
|
||||||
|
voice.value = selected;
|
||||||
|
}
|
||||||
|
refreshVoices();
|
||||||
|
window.speechSynthesis?.addEventListener?.('voiceschanged', refreshVoices);
|
||||||
|
voice.value = voiceSettings.voiceName; voiceLabel.append(voice); fieldset.append(voiceLabel);
|
||||||
|
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 = () => {
|
||||||
|
if (!voiceController.speak(latestAssistantText, latestAssistantVoice)) setVoiceStatus('Talsyntes stöds inte här eller är avstängd. Dialogen finns kvar som text.');
|
||||||
|
};
|
||||||
|
addVoiceButton(item, 'Läs senaste repliken', speakLatest);
|
||||||
|
addVoiceButton(item, 'Upprepa', speakLatest);
|
||||||
|
addVoiceButton(item, 'Avbryt uppläsning', () => voiceController.cancelSpeech());
|
||||||
|
mode.addEventListener('change', () => { voiceSettings.mode = mode.value; persistVoiceSettings(); });
|
||||||
|
auto.addEventListener('change', () => { voiceSettings.autoSpeak = auto.checked; persistVoiceSettings(); });
|
||||||
|
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'}); mode.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);
|
||||||
|
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') appendVoiceSettings();
|
||||||
|
else if (parsed.command === 'repeat') {
|
||||||
|
if (!voiceController.speak(latestAssistantText, latestAssistantVoice)) setVoiceStatus('Talsyntes stöds inte här eller är avstängd. 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 röstlägen. I spelets röstläge kan du tala till mikrofonen 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';
|
||||||
|
messageField.focus();
|
||||||
|
}
|
||||||
|
function showAuth() {
|
||||||
|
stage = 'auth';
|
||||||
|
play.hidden = true;
|
||||||
|
adminView.hidden = true;
|
||||||
|
auth.hidden = false;
|
||||||
|
document.querySelector('#auth-heading').textContent = location.pathname === '/admin' ? 'Administratörsinloggning' : 'Svensk livssimulator';
|
||||||
|
document.querySelector('#version-footer').hidden = false;
|
||||||
|
}
|
||||||
|
function showPlay() {
|
||||||
|
auth.hidden = true;
|
||||||
|
adminView.hidden = true;
|
||||||
|
play.hidden = false;
|
||||||
|
document.querySelector('#version-footer').hidden = true;
|
||||||
|
refreshMicrophone();
|
||||||
|
messageField.focus();
|
||||||
|
}
|
||||||
|
function showAdmin() {
|
||||||
|
auth.hidden = true;
|
||||||
|
play.hidden = true;
|
||||||
|
adminView.hidden = false;
|
||||||
|
document.querySelector('#version-footer').hidden = true;
|
||||||
|
}
|
||||||
|
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.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 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;
|
||||||
|
const senses = worldDraft.location_senses;
|
||||||
|
appendLine('assistant', `${proposal.message}\n\nVärld: ${worldDraft.name}\nStartplats: ${worldDraft.location_name}. ${worldDraft.location_description}\nLjud: ${senses.sound}\nDoft: ${senses.smell}\nLuft och temperatur: ${senses.air_and_temperature}\nBeröring och ytor: ${senses.touch_and_surfaces}\nOrientering: ${senses.spatial_orientation}\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 = '';
|
||||||
|
for (const line of lines) appendLine(line.role === 'user' ? 'user' : 'assistant', line.content, {speak: false});
|
||||||
|
if (lines.length === 0 && gameState?.world) {
|
||||||
|
const place = gameState.world.location;
|
||||||
|
const senses = place.senses || {};
|
||||||
|
appendLine('assistant', `Du börjar på ${place.name}. ${place.description} Ljud: ${senses.sound || 'Inget särskilt ljud beskrivet.'} Doft: ${senses.smell || 'Ingen särskild doft beskriven.'} Luft och temperatur: ${senses.air_and_temperature || 'Inte beskrivet.'} Beröring och ytor: ${senses.touch_and_surfaces || 'Inte beskrivet.'} Orientering: ${senses.spatial_orientation || 'Inte beskrivet.'}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
async function openGame() {
|
async function openGame() {
|
||||||
gameState = await request('/api/world');
|
gameState = await request('/api/world');
|
||||||
if (!gameState.character) { showCharacter(); return; }
|
showPlay();
|
||||||
if (!gameState.world) { showWorldSetup(); return; }
|
if (!gameState.character) {
|
||||||
const world = gameState.world;
|
transcript.replaceChildren();
|
||||||
auth.hidden = true; characterSection.hidden = true; game.hidden = false;
|
appendInitialPrompt();
|
||||||
worldSetup.hidden = true;
|
return;
|
||||||
document.querySelector('#world-heading').textContent = world.name;
|
|
||||||
document.querySelector('#place-heading').textContent = world.location.name;
|
|
||||||
document.querySelector('#place-description').textContent = world.location.description;
|
|
||||||
document.querySelector('#npc-heading').textContent = world.npc.name;
|
|
||||||
document.querySelector('#npc-description').textContent = world.npc.biography;
|
|
||||||
document.querySelector('#conversation-heading').textContent = `Samtal med ${world.npc.name}`;
|
|
||||||
document.querySelector('#message-label').firstChild.textContent = `Skriv till ${world.npc.name} `;
|
|
||||||
document.querySelector('#player-heading').textContent = `${gameState.character.name}, ${gameState.character.age} år`;
|
|
||||||
document.querySelector('#player-biography').textContent = gameState.character.biography;
|
|
||||||
document.querySelector('#balance').textContent = (world.balance_sek ?? 0).toLocaleString('sv-SE');
|
|
||||||
const inventory = document.querySelector('#inventory');
|
|
||||||
inventory.replaceChildren(...(world.inventory ?? []).map((item) => {
|
|
||||||
const entry = document.createElement('li');
|
|
||||||
entry.textContent = `${item.name}: ${item.quantity}`;
|
|
||||||
return entry;
|
|
||||||
}));
|
|
||||||
const shop = document.querySelector('#shop');
|
|
||||||
shop.hidden = !world.offer;
|
|
||||||
if (world.offer) {
|
|
||||||
document.querySelector('#offer-description').textContent = `${world.offer.name} — ${world.offer.price_sek.toLocaleString('sv-SE')} kr`;
|
|
||||||
document.querySelector('#buy-offer').disabled = (world.balance_sek ?? 0) < world.offer.price_sek;
|
|
||||||
document.querySelector('#offer-affordability').textContent = (world.balance_sek ?? 0) < world.offer.price_sek ? 'Du har inte tillräckligt saldo för det här köpet.' : '';
|
|
||||||
document.querySelector('#buy-offer').setAttribute('aria-label', `Köp ${world.offer.name} för ${world.offer.price_sek} kronor`);
|
|
||||||
}
|
}
|
||||||
renderConversation(await request('/api/npc/conversation'), world.npc.name);
|
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');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await loadSavedDialogue();
|
||||||
|
setStage('game');
|
||||||
}
|
}
|
||||||
|
async function handleLogout() {
|
||||||
|
await request('/api/logout', {method: 'POST'});
|
||||||
|
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}\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();
|
||||||
|
}
|
||||||
|
async function handleGameMessage(message) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
const idempotencyKey = pendingDialogue?.message === message
|
||||||
|
? pendingDialogue.idempotencyKey
|
||||||
|
: crypto.randomUUID();
|
||||||
|
pendingDialogue = {message, idempotencyKey};
|
||||||
|
appendLine('user', message);
|
||||||
|
messageField.disabled = true;
|
||||||
|
try {
|
||||||
|
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}),
|
||||||
|
});
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
gameState.world.version = result.world_version;
|
||||||
|
gameState.world.world_time = result.world_time;
|
||||||
|
pendingDialogue = null;
|
||||||
|
if (result.intent === 'move') {
|
||||||
|
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.intent === 'speak' ? gameState.world.npc : null;
|
||||||
|
appendLine('assistant', result.reply, speakingNpc
|
||||||
|
? {speaker: speakingNpc.name, voice: {characterId: speakingNpc.id, voiceIdentity: speakingNpc.voice_identity}}
|
||||||
|
: {speaker: 'Berättelsen', voice: {role: 'narrator', voiceIdentity: 'neutral'}});
|
||||||
|
} catch (error) {
|
||||||
|
messageField.value = message;
|
||||||
|
appendLine('assistant', `Meddelandet kunde inte behandlas: ${error.message}. Texten ligger kvar i inmatningen; skicka igen för att försöka på nytt.`);
|
||||||
|
}
|
||||||
|
messageField.disabled = false;
|
||||||
|
messageField.focus();
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('#auth-form').addEventListener('submit', async (event) => {
|
document.querySelector('#auth-form').addEventListener('submit', async (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const form = event.currentTarget;
|
const form = event.currentTarget;
|
||||||
const data = new FormData(form);
|
const data = new FormData(form);
|
||||||
const intent = event.submitter?.value || 'login';
|
const intent = event.submitter?.value || 'login';
|
||||||
status.textContent = intent === 'register' ? 'Skapar konto…' : 'Loggar in…';
|
|
||||||
try {
|
try {
|
||||||
await request(`/api/${intent}`, { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({username:data.get('username'),password:data.get('password')}) });
|
await request(`/api/${intent}`, {method: 'POST', headers: {'content-type': 'application/json'}, body: JSON.stringify({username: data.get('username'), password: data.get('password')})});
|
||||||
form.reset(); await openGame(); status.textContent = 'Du är inloggad.';
|
form.reset();
|
||||||
} catch (error) { status.textContent = `Kunde inte logga in: ${error.message}`; }
|
if (location.pathname === '/admin') await openAdmin(); else await openGame();
|
||||||
});
|
} catch (error) {
|
||||||
document.querySelector('#character-form').addEventListener('submit', async (event) => {
|
window.alert(`Kunde inte logga in: ${error.message}`);
|
||||||
event.preventDefault(); const data = new FormData(event.currentTarget); status.textContent = 'Sparar din karaktär…';
|
|
||||||
try { await request('/api/character', {method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({name:data.get('name'),age:Number(data.get('age')),biography:data.get('biography')})}); await openGame(); status.textContent='Karaktären har sparats.'; }
|
|
||||||
catch(error){status.textContent=`Kunde inte spara karaktären: ${error.message}`;}
|
|
||||||
});
|
|
||||||
document.querySelector('#world-idea-form').addEventListener('submit', async (event) => {
|
|
||||||
event.preventDefault(); const data = new FormData(event.currentTarget); status.textContent='Skapar ett redigerbart förslag…';
|
|
||||||
try {
|
|
||||||
const proposal = await request('/api/world/draft', {method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({idea:data.get('idea')})});
|
|
||||||
const form = document.querySelector('#world-draft-form');
|
|
||||||
for (const key of ['name','location_name','location_description','npc_name','npc_biography','starting_balance_sek','offer_name','offer_price_sek']) form.elements[key].value = proposal[key];
|
|
||||||
form.hidden = false; status.textContent='Förslaget är klart. Granska och redigera det innan du godkänner.';
|
|
||||||
} catch(error) { status.textContent=`Kunde inte skapa ett förslag: ${error.message}`; }
|
|
||||||
});
|
|
||||||
document.querySelector('#discard-world-draft').addEventListener('click', () => {
|
|
||||||
document.querySelector('#world-draft-form').hidden = true; status.textContent='Förslaget har inte sparats. Ändra din idé och försök igen.';
|
|
||||||
});
|
|
||||||
document.querySelector('#world-draft-form').addEventListener('submit', async (event) => {
|
|
||||||
event.preventDefault(); const data = new FormData(event.currentTarget); status.textContent='Sparar din godkända värld…';
|
|
||||||
try {
|
|
||||||
const approval = Object.fromEntries(data.entries());
|
|
||||||
approval.starting_balance_sek = Number(approval.starting_balance_sek);
|
|
||||||
approval.offer_price_sek = Number(approval.offer_price_sek);
|
|
||||||
await request('/api/world', {method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(approval)});
|
|
||||||
await openGame(); status.textContent='Din värld har sparats.';
|
|
||||||
} catch(error) { status.textContent=`Kunde inte spara världen: ${error.message}`; }
|
|
||||||
});
|
|
||||||
document.querySelector('#message-form').addEventListener('submit', async (event) => {
|
|
||||||
event.preventDefault(); const form=event.currentTarget; const field=form.elements.message; const message=field.value.trim(); if(!message)return;
|
|
||||||
status.textContent='Din samtalspartner funderar på sitt svar…';
|
|
||||||
try { const result=await request('/api/npc/messages',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({message,idempotency_key:crypto.randomUUID()})}); field.value=''; await openGame(); status.textContent='Samtalet har sparats.'; }
|
|
||||||
catch(error){status.textContent=`Samtalet kunde inte skickas: ${error.message}`;}
|
|
||||||
});
|
|
||||||
document.querySelector('#buy-offer').addEventListener('click', async () => {
|
|
||||||
if (!gameState?.world?.offer) return;
|
|
||||||
const world = gameState.world;
|
|
||||||
const storageKey = `pending-purchase:${world.id}:${world.offer.id}`;
|
|
||||||
const idempotencyKey = sessionStorage.getItem(storageKey) || crypto.randomUUID();
|
|
||||||
sessionStorage.setItem(storageKey, idempotencyKey);
|
|
||||||
const button = document.querySelector('#buy-offer');
|
|
||||||
button.disabled = true;
|
|
||||||
status.textContent = 'Genomför köpet…';
|
|
||||||
try {
|
|
||||||
await request('/api/purchases', {method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({offer_id:world.offer.id,expected_world_version:world.version,idempotency_key:idempotencyKey})});
|
|
||||||
sessionStorage.removeItem(storageKey);
|
|
||||||
} catch(error) {
|
|
||||||
button.disabled = false;
|
|
||||||
status.textContent = `Köpet kunde inte genomföras: ${error.message}`;
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
try {
|
|
||||||
await openGame(); status.textContent = 'Köpet är sparat i din värld.';
|
|
||||||
} catch(error) { status.textContent = 'Köpet är sparat. Världen kunde inte läsas in just nu; ladda om sidan för att visa det.'; }
|
|
||||||
});
|
});
|
||||||
document.querySelector('#logout').addEventListener('click', async () => { try { await request('/api/logout',{method:'POST'}); showAuth(); status.textContent='Du har loggat ut.'; } catch(error){status.textContent=`Kunde inte logga ut: ${error.message}`;} });
|
async function submitMessage(input, source = 'text') {
|
||||||
request('/api/me').then(async () => { await openGame(); status.textContent='Din sparade spelvärld har lästs in.'; }).catch(() => { showAuth(); });
|
if (submitBusy || messageField.disabled) return;
|
||||||
|
const message = String(input || '').trim();
|
||||||
|
if (!message) return;
|
||||||
|
if (handleVoiceCommand(message, source)) { messageField.value = ''; return; }
|
||||||
|
submitBusy = true;
|
||||||
|
refreshMicrophone();
|
||||||
|
voiceController.stopListening();
|
||||||
|
voiceController.cancelSpeech();
|
||||||
|
messageField.value = '';
|
||||||
|
try {
|
||||||
|
if (stage === 'biography') await handleBiography(message);
|
||||||
|
else await handleGameMessage(message);
|
||||||
|
} catch (error) {
|
||||||
|
appendLine('assistant', `Det gick inte att genomföra begäran: ${error.message}`);
|
||||||
|
} finally {
|
||||||
|
submitBusy = false;
|
||||||
|
refreshMicrophone();
|
||||||
|
if (!play.hidden && !messageField.disabled) messageField.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.querySelector('#message-form').addEventListener('submit', async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
await submitMessage(messageField.value);
|
||||||
|
});
|
||||||
|
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 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);
|
||||||
|
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('/api/me').then(() => location.pathname === '/admin' ? openAdmin() : openGame()).catch(showAuth);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -3,13 +3,48 @@ set -euo pipefail
|
|||||||
|
|
||||||
test -s index.html
|
test -s index.html
|
||||||
grep -q '<html lang="sv">' index.html
|
grep -q '<html lang="sv">' index.html
|
||||||
grep -q '<h1>En värld du formar</h1>' index.html
|
|
||||||
grep -q 'id="frontend-version">__FRONTEND_VERSION__' index.html
|
grep -q 'id="frontend-version">__FRONTEND_VERSION__' index.html
|
||||||
grep -q "request('/version')" index.html
|
grep -q "request('/version')" index.html
|
||||||
grep -q 'id="api-version"' index.html
|
|
||||||
grep -Fq "credentials: 'same-origin'" index.html
|
grep -Fq "credentials: 'same-origin'" index.html
|
||||||
grep -q 'Köp på platsen' index.html
|
grep -q 'id="dialogue" aria-label="Dialoghistorik" role="log" aria-live="polite"' index.html
|
||||||
grep -q "request('/api/purchases'" index.html
|
grep -q 'id="message" name="message"' index.html
|
||||||
|
grep -q 'id="microphone" aria-pressed="false"' index.html
|
||||||
|
grep -q 'id="voice-status" role="status" aria-live="polite"' index.html
|
||||||
|
grep -q "window.GameVoice.createVoiceController" index.html
|
||||||
|
grep -q 'Jag förstår – starta mikrofonen' index.html
|
||||||
|
grep -q 'supportsRecognition' voice.js
|
||||||
|
grep -q 'characterVoiceProfile' voice.js
|
||||||
|
grep -q "voiceIdentity: speakingNpc.voice_identity" index.html
|
||||||
|
grep -q "role: 'narrator', voiceIdentity: 'neutral'" index.html
|
||||||
|
grep -q 'COPY voice.js /usr/share/nginx/html/voice.js' Dockerfile
|
||||||
|
grep -q "SpeechRecognition || win.webkitSpeechRecognition" voice.js
|
||||||
|
grep -q "submitMessage(text, 'voice')" index.html
|
||||||
|
grep -q "'screen-reader', 'Skärmläsare'" index.html
|
||||||
|
grep -q "'game-voice', 'Spelets röst'" index.html
|
||||||
|
grep -q "'text-only', 'Endast text'" index.html
|
||||||
|
grep -q "event.key === 'Enter' && !event.shiftKey" index.html
|
||||||
|
grep -q "request('/api/character/draft'" index.html
|
||||||
|
grep -q "request('/api/world/draft'" index.html
|
||||||
|
grep -q "request('/api/dialogue'" index.html
|
||||||
|
grep -q 'id="admin-view"' index.html
|
||||||
|
grep -q '/api/admin/players?' index.html
|
||||||
|
grep -q "request('/api/admin/prompts'" index.html
|
||||||
|
grep -q "request('/api/admin/rules'" index.html
|
||||||
|
grep -q '/api/admin/audit?limit=200' index.html
|
||||||
|
grep -q 'entry.data.external_call' index.html
|
||||||
|
grep -q 'Externt tjänsteanrop' index.html
|
||||||
|
grep -q "request('/api/world/start'" index.html
|
||||||
|
grep -q "request('/api/character'" index.html
|
||||||
grep -q 'location = /healthz' nginx/default.conf
|
grep -q 'location = /healthz' nginx/default.conf
|
||||||
|
if grep -Eq 'id="(new-character|world-setup|shop|buy-offer|balance|inventory|place-heading|npc-heading)"|Platsens sinnesintryck|Ekonomi och ägodelar|Köp på platsen|id="status"|id="logout"' index.html; then
|
||||||
|
echo 'The active player UI must not contain permanent data panels, forms, or action buttons.' >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
if sed -n '/<section id="play"/,/^ <\/section>/p' index.html | grep '<button' | grep -v 'id="microphone"' >/dev/null; then
|
||||||
|
echo 'Only the microphone control may appear beside the game text input.' >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
node --test tests/voice.test.cjs
|
||||||
|
|
||||||
echo 'Frontend source checks passed.'
|
echo 'Frontend source checks passed.'
|
||||||
|
|||||||
@@ -0,0 +1,189 @@
|
|||||||
|
const assert = require('node:assert/strict');
|
||||||
|
const fs = require('node:fs');
|
||||||
|
const path = require('node:path');
|
||||||
|
const test = require('node:test');
|
||||||
|
const vm = require('node:vm');
|
||||||
|
|
||||||
|
const source = fs.readFileSync(path.join(__dirname, '..', 'voice.js'), 'utf8');
|
||||||
|
const apiWindow = {};
|
||||||
|
vm.runInNewContext(source, {window: apiWindow, globalThis: apiWindow, Promise, String, Math, Object});
|
||||||
|
const GameVoice = apiWindow.GameVoice;
|
||||||
|
|
||||||
|
function makeHarness({supported = true, tts = true, onTranscript = () => Promise.resolve()} = {}) {
|
||||||
|
const recognitions = [];
|
||||||
|
const utterances = [];
|
||||||
|
const states = [];
|
||||||
|
const timers = new Map();
|
||||||
|
let timerId = 0;
|
||||||
|
class Recognition {
|
||||||
|
constructor() { recognitions.push(this); }
|
||||||
|
start() { this.started = true; }
|
||||||
|
stop() { this.stopped = true; }
|
||||||
|
abort() { this.aborted = true; }
|
||||||
|
}
|
||||||
|
class Utterance {
|
||||||
|
constructor(text) { this.text = text; utterances.push(this); }
|
||||||
|
}
|
||||||
|
const synthesis = tts ? {
|
||||||
|
spoken: [], cancelled: 0,
|
||||||
|
getVoices: () => [{name: 'Svensk', lang: 'sv-SE'}],
|
||||||
|
speak(utterance) { this.spoken.push(utterance); },
|
||||||
|
cancel() { this.cancelled += 1; },
|
||||||
|
} : undefined;
|
||||||
|
const window = {
|
||||||
|
setTimeout(callback) { const id = ++timerId; timers.set(id, callback); return id; },
|
||||||
|
clearTimeout(id) { timers.delete(id); },
|
||||||
|
speechSynthesis: synthesis,
|
||||||
|
SpeechSynthesisUtterance: tts ? Utterance : undefined,
|
||||||
|
SpeechRecognition: supported ? Recognition : undefined,
|
||||||
|
};
|
||||||
|
vm.runInNewContext(source, {window, globalThis: window, Promise, String, Math, Object});
|
||||||
|
const controller = window.GameVoice.createVoiceController({
|
||||||
|
window,
|
||||||
|
onState: (state, message) => states.push({state, message}),
|
||||||
|
onTranscript,
|
||||||
|
});
|
||||||
|
return {controller, recognitions, utterances, synthesis, states, timers};
|
||||||
|
}
|
||||||
|
|
||||||
|
test('recognition is single-shot Swedish and sends only final transcript once', async () => {
|
||||||
|
const received = [];
|
||||||
|
const h = makeHarness({onTranscript: text => { received.push(text); }});
|
||||||
|
assert.equal(h.controller.startListening(), true);
|
||||||
|
const recognition = h.recognitions[0];
|
||||||
|
assert.equal(recognition.lang, 'sv-SE');
|
||||||
|
assert.equal(recognition.continuous, false);
|
||||||
|
assert.equal(recognition.interimResults, false);
|
||||||
|
recognition.onresult({resultIndex: 0, results: [{isFinal: false, 0: {transcript: 'delvis'}}]});
|
||||||
|
recognition.onresult({resultIndex: 0, results: [{isFinal: true, 0: {transcript: ' Hej världen '}}]});
|
||||||
|
recognition.onresult({resultIndex: 0, results: [{isFinal: true, 0: {transcript: 'dubblett'}}]});
|
||||||
|
await Promise.resolve(); await Promise.resolve();
|
||||||
|
assert.deepEqual(received, ['Hej världen']);
|
||||||
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('second microphone activation stops the active recognition session', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
h.controller.startListening();
|
||||||
|
h.controller.startListening();
|
||||||
|
assert.equal(h.recognitions.length, 1);
|
||||||
|
assert.equal(h.recognitions[0].aborted, true);
|
||||||
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('unsupported recognition stays recoverable and leaves text input available', () => {
|
||||||
|
const h = makeHarness({supported: false});
|
||||||
|
assert.equal(h.controller.startListening(), false);
|
||||||
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
|
assert.match(h.states.at(-1).message, /skriva/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('permission errors reset state and a later session can start', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
h.controller.startListening();
|
||||||
|
h.recognitions[0].onerror({error: 'not-allowed'});
|
||||||
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
|
assert.match(h.states.at(-1).message, /behörighet nekades/);
|
||||||
|
assert.equal(h.controller.startListening(), true);
|
||||||
|
assert.equal(h.recognitions.length, 2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('late recognition results after cancellation are ignored', () => {
|
||||||
|
let delivered = 0;
|
||||||
|
const h = makeHarness({onTranscript: () => { delivered += 1; }});
|
||||||
|
h.controller.startListening();
|
||||||
|
const old = h.recognitions[0];
|
||||||
|
h.controller.stopListening();
|
||||||
|
old.onresult({resultIndex: 0, results: [{isFinal: true, 0: {transcript: 'för sent'}}]});
|
||||||
|
assert.equal(delivered, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('recognition watchdog closes a session that never ends and permits retry', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
h.controller.startListening();
|
||||||
|
const watchdog = [...h.timers.values()][0];
|
||||||
|
watchdog();
|
||||||
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
|
assert.match(h.states.at(-1).message, /en minut/);
|
||||||
|
assert.equal(h.controller.startListening(), true);
|
||||||
|
assert.equal(h.recognitions.length, 2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('TTS selects Swedish fallback, applies rate, and cancellation invalidates callbacks', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
h.controller.update({mode: 'game-voice', rate: 1.4});
|
||||||
|
assert.equal(h.controller.speak('Hej.'), true);
|
||||||
|
const first = h.utterances[0];
|
||||||
|
assert.equal(first.lang, 'sv-SE');
|
||||||
|
assert.equal(first.rate, 1.4);
|
||||||
|
assert.equal(first.voice.name, 'Svensk');
|
||||||
|
h.controller.cancelSpeech();
|
||||||
|
first.onend();
|
||||||
|
assert.equal(h.controller.getState(), 'IDLE');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('character voice identity gives stable distinct masculine, feminine, and neutral timbres', () => {
|
||||||
|
const profile = GameVoice.characterVoiceProfile;
|
||||||
|
const masculine = profile('masculine', 'character-1');
|
||||||
|
const feminine = profile('feminine', 'character-1');
|
||||||
|
const neutral = profile('neutral', 'character-1');
|
||||||
|
assert.equal(profile('masculine', 'character-1').pitch, masculine.pitch);
|
||||||
|
assert.ok(masculine.pitch < neutral.pitch);
|
||||||
|
assert.ok(neutral.pitch < feminine.pitch);
|
||||||
|
assert.notEqual(profile('masculine', 'character-2').pitch, masculine.pitch);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('narrator uses neutral pitch while character replies use their saved voice identity', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
h.controller.update({mode: 'game-voice'});
|
||||||
|
h.controller.speak('Berättarröst', {role: 'narrator', voiceIdentity: 'feminine', characterId: 'narrator'});
|
||||||
|
h.controller.speak('NPC-replik', {voiceIdentity: 'masculine', characterId: 'npc-1'});
|
||||||
|
assert.equal(h.utterances[0].pitch, 1);
|
||||||
|
assert.ok(h.utterances[1].pitch < 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('TTS and microphone are mutually exclusive', () => {
|
||||||
|
const h = makeHarness();
|
||||||
|
h.controller.update({mode: 'game-voice'});
|
||||||
|
h.controller.startListening();
|
||||||
|
h.controller.speak('Svar');
|
||||||
|
assert.equal(h.recognitions[0].aborted, true);
|
||||||
|
assert.equal(h.controller.getState(), 'SPEAKING');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('speech is disabled in screen-reader mode and gracefully degrades without synthesis', () => {
|
||||||
|
const screenReader = makeHarness();
|
||||||
|
assert.equal(screenReader.controller.speak('dialog'), false);
|
||||||
|
const noTts = makeHarness({tts: false});
|
||||||
|
noTts.controller.update({mode: 'game-voice'});
|
||||||
|
assert.equal(noTts.controller.speak('dialog'), false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('system commands require an explicit prefix; ordinary dialogue words are untouched', () => {
|
||||||
|
const global = {};
|
||||||
|
vm.runInNewContext(source, {window: global, globalThis: global, Promise, String, Math, Object});
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('upprepa'), null);
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('hjälp'), null);
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('röstkommando upprepa.' ).command, 'repeat');
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('röstkommando alternativ').command, 'settings');
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('röstinställningar').command, 'settings');
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('röstinställningar', {requirePrefix: true}), null);
|
||||||
|
assert.equal(GameVoice.parseVoiceCommand('röstkommando alternativ', {requirePrefix: true}).command, 'settings');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('settings survive reload and invalid storage falls back to accessible defaults', () => {
|
||||||
|
const global = {};
|
||||||
|
vm.runInNewContext(source, {window: global, globalThis: global, Promise, String, Math, Object});
|
||||||
|
const values = new Map();
|
||||||
|
const storage = {getItem: key => values.get(key) || null, setItem: (key, value) => values.set(key, value)};
|
||||||
|
const requested = {...GameVoice.DEFAULT_SETTINGS, mode: 'game-voice', autoSpeak: true, rate: 1.5, voiceName: 'Svensk'};
|
||||||
|
assert.equal(GameVoice.saveSettings(storage, 'voice', requested), true);
|
||||||
|
const loaded = GameVoice.loadSettings(storage, 'voice');
|
||||||
|
assert.equal(loaded.mode, 'game-voice');
|
||||||
|
assert.equal(loaded.autoSpeak, true);
|
||||||
|
assert.equal(loaded.rate, 1.5);
|
||||||
|
assert.equal(loaded.voiceName, 'Svensk');
|
||||||
|
values.set('voice', '{trasig');
|
||||||
|
assert.equal(GameVoice.loadSettings(storage, 'voice').mode, 'screen-reader');
|
||||||
|
assert.equal(GameVoice.saveSettings({setItem() { throw new Error('blocked'); }}, 'voice', requested), false);
|
||||||
|
});
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
/* Browser voice adapters. Kept independent of the game submission and API layer. */
|
||||||
|
(function exposeVoice(root) {
|
||||||
|
const DEFAULT_SETTINGS = Object.freeze({
|
||||||
|
mode: 'screen-reader',
|
||||||
|
autoSpeak: false,
|
||||||
|
language: 'sv-SE',
|
||||||
|
rate: 1,
|
||||||
|
voiceName: '',
|
||||||
|
speakerProfiles: {},
|
||||||
|
autoStop: true,
|
||||||
|
soundSignals: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
function parseVoiceCommand(text, options = {}) {
|
||||||
|
const value = String(text || '').trim();
|
||||||
|
if (/^röstinställningar[.!]?$/i.test(value)) return options.requirePrefix ? null : {command: 'settings'};
|
||||||
|
const match = value.match(/^röstkommando\s+(.+?)[.!]?$/i);
|
||||||
|
if (!match) return null;
|
||||||
|
const command = match[1].trim().replace(/[.!?]+$/, '').toLocaleLowerCase('sv-SE');
|
||||||
|
const aliases = {
|
||||||
|
upprepa: 'repeat', 'läs igen': 'repeat',
|
||||||
|
avbryt: 'stop', stopp: 'stop', paus: 'stop',
|
||||||
|
hjälp: 'help', alternativ: 'settings', inställningar: 'settings', röstinställningar: 'settings',
|
||||||
|
};
|
||||||
|
return {command: aliases[command] || 'unknown'};
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSettings(storage, key) {
|
||||||
|
try {
|
||||||
|
const stored = JSON.parse(storage.getItem(key) || '{}');
|
||||||
|
const settings = {...DEFAULT_SETTINGS, ...stored};
|
||||||
|
if (!['screen-reader', 'game-voice', 'text-only'].includes(settings.mode)) settings.mode = DEFAULT_SETTINGS.mode;
|
||||||
|
settings.rate = Math.min(2, Math.max(0.5, Number(settings.rate) || 1));
|
||||||
|
settings.voiceName = typeof settings.voiceName === 'string' ? settings.voiceName : '';
|
||||||
|
settings.speakerProfiles = settings.speakerProfiles && typeof settings.speakerProfiles === 'object' ? settings.speakerProfiles : {};
|
||||||
|
settings.autoSpeak = settings.autoSpeak === true;
|
||||||
|
settings.soundSignals = settings.soundSignals !== false;
|
||||||
|
return settings;
|
||||||
|
} catch (_) { return {...DEFAULT_SETTINGS}; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveSettings(storage, key, settings) {
|
||||||
|
try { storage.setItem(key, JSON.stringify(settings)); return true; }
|
||||||
|
catch (_) { return false; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function characterVoiceProfile(voiceIdentity, characterId = '') {
|
||||||
|
const identity = ['masculine', 'feminine', 'neutral'].includes(voiceIdentity) ? voiceIdentity : 'neutral';
|
||||||
|
let hash = 2166136261;
|
||||||
|
for (const char of String(characterId)) hash = Math.imul(hash ^ char.charCodeAt(0), 16777619) >>> 0;
|
||||||
|
const variation = (hash % 1000) / 1000;
|
||||||
|
if (identity === 'masculine') return {pitch: 0.88 + variation * 0.08, rate: 0.96 + variation * 0.04};
|
||||||
|
if (identity === 'feminine') return {pitch: 1.06 + variation * 0.08, rate: 0.98 + variation * 0.04};
|
||||||
|
return {pitch: 0.98 + variation * 0.04, rate: 1};
|
||||||
|
}
|
||||||
|
|
||||||
|
function createVoiceController(options = {}) {
|
||||||
|
const win = options.window || root;
|
||||||
|
const onState = options.onState || (() => {});
|
||||||
|
const onTranscript = options.onTranscript || (() => {});
|
||||||
|
const settings = {...DEFAULT_SETTINGS, ...(options.settings || {})};
|
||||||
|
let state = 'IDLE';
|
||||||
|
let generation = 0;
|
||||||
|
let recognition = null;
|
||||||
|
let speechTimer = null;
|
||||||
|
let listeningTimer = null;
|
||||||
|
|
||||||
|
function setState(next, message = '') {
|
||||||
|
state = next;
|
||||||
|
onState(next, message);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelSpeech() {
|
||||||
|
generation += 1;
|
||||||
|
if (speechTimer !== null) win.clearTimeout(speechTimer);
|
||||||
|
speechTimer = null;
|
||||||
|
try { win.speechSynthesis?.cancel(); } catch (_) { /* Best effort. */ }
|
||||||
|
if (!recognition) setState('IDLE');
|
||||||
|
}
|
||||||
|
|
||||||
|
function finishRecognition(token, message = '') {
|
||||||
|
if (token !== generation) return;
|
||||||
|
if (listeningTimer !== null) win.clearTimeout(listeningTimer);
|
||||||
|
listeningTimer = null;
|
||||||
|
recognition = null;
|
||||||
|
generation += 1;
|
||||||
|
if (message) setState('ERROR', message);
|
||||||
|
setState('IDLE', message);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopListening() {
|
||||||
|
if (!recognition) return;
|
||||||
|
const old = recognition;
|
||||||
|
recognition = null;
|
||||||
|
generation += 1;
|
||||||
|
if (listeningTimer !== null) win.clearTimeout(listeningTimer);
|
||||||
|
listeningTimer = null;
|
||||||
|
try { old.abort(); } catch (_) { try { old.stop(); } catch (_) { /* Already stopped. */ } }
|
||||||
|
setState('IDLE', 'Mikrofonen är avstängd.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function startListening() {
|
||||||
|
if (recognition) { stopListening(); return true; }
|
||||||
|
const Recognition = win.SpeechRecognition || win.webkitSpeechRecognition;
|
||||||
|
if (!Recognition) {
|
||||||
|
setState('ERROR', 'Taligenkänning stöds inte här. Du kan fortfarande skriva.');
|
||||||
|
setState('IDLE', 'Taligenkänning stöds inte här. Du kan fortfarande skriva.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
cancelSpeech();
|
||||||
|
const token = ++generation;
|
||||||
|
let instance;
|
||||||
|
try { instance = new Recognition(); }
|
||||||
|
catch (_) { setState('IDLE', 'Mikrofonen kunde inte startas. Kontrollera behörigheten och försök igen.'); return false; }
|
||||||
|
recognition = instance;
|
||||||
|
instance.lang = settings.language || 'sv-SE';
|
||||||
|
instance.continuous = false;
|
||||||
|
instance.interimResults = false;
|
||||||
|
let delivered = false;
|
||||||
|
instance.onresult = event => {
|
||||||
|
if (token !== generation || delivered) return;
|
||||||
|
const result = event.results?.[event.resultIndex ?? 0];
|
||||||
|
if (!result?.isFinal) return;
|
||||||
|
const text = String(result[0]?.transcript || '').trim();
|
||||||
|
if (!text) { finishRecognition(token, 'Inget tal kunde identifieras. Försök igen eller skriv.'); return; }
|
||||||
|
delivered = true;
|
||||||
|
if (listeningTimer !== null) win.clearTimeout(listeningTimer);
|
||||||
|
listeningTimer = null;
|
||||||
|
setState('PROCESSING', 'Tal identifierat.');
|
||||||
|
Promise.resolve().then(() => onTranscript(text)).then(
|
||||||
|
() => finishRecognition(token),
|
||||||
|
() => finishRecognition(token, 'Meddelandet kunde inte skickas. Du kan försöka igen eller skriva.')
|
||||||
|
);
|
||||||
|
};
|
||||||
|
instance.onerror = event => {
|
||||||
|
if (token !== generation) return;
|
||||||
|
const messages = {
|
||||||
|
'not-allowed': 'Mikrofonbehörighet nekades. Tillåt mikrofonen i webbläsaren eller skriv i stället.',
|
||||||
|
'service-not-allowed': 'Taligenkänning är inte tillgänglig. Du kan skriva i stället.',
|
||||||
|
'audio-capture': 'Ingen mikrofon hittades. Anslut en mikrofon eller skriv i stället.',
|
||||||
|
'no-speech': 'Inget tal hördes. Tryck på mikrofonen och försök igen.',
|
||||||
|
network: 'Taligenkänningens nätverkstjänst svarar inte. Försök igen eller skriv.',
|
||||||
|
aborted: 'Taligenkänningen avbröts. Du kan starta den igen.',
|
||||||
|
};
|
||||||
|
finishRecognition(token, messages[event.error] || 'Taligenkänningen avslutades oväntat. Försök igen eller skriv.');
|
||||||
|
};
|
||||||
|
instance.onend = () => {
|
||||||
|
if (token !== generation || delivered || state === 'PROCESSING') return;
|
||||||
|
finishRecognition(token, 'Mikrofonen avslutades. Tryck för att försöka igen eller skriv.');
|
||||||
|
};
|
||||||
|
setState('LISTENING', 'Lyssnar. Tryck på mikrofonen igen för att avsluta.');
|
||||||
|
listeningTimer = win.setTimeout(() => {
|
||||||
|
if (token !== generation) return;
|
||||||
|
try { instance.abort(); } catch (_) { /* Recognition may already have stopped. */ }
|
||||||
|
finishRecognition(token, 'Mikrofonen stängdes efter en minut. Tryck för att försöka igen eller skriv.');
|
||||||
|
}, 60000);
|
||||||
|
try { instance.start(); }
|
||||||
|
catch (_) { finishRecognition(token, 'Mikrofonen kunde inte startas. Kontrollera behörigheten och försök igen.'); return false; }
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function availableVoices() {
|
||||||
|
try { return win.speechSynthesis?.getVoices?.() || []; } catch (_) { return []; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function speak(text, voiceOptions = {}) {
|
||||||
|
if (!text || settings.mode !== 'game-voice' || !win.speechSynthesis || !win.SpeechSynthesisUtterance) return false;
|
||||||
|
stopListening();
|
||||||
|
cancelSpeech();
|
||||||
|
const token = generation;
|
||||||
|
let utterance;
|
||||||
|
try { utterance = new win.SpeechSynthesisUtterance(text); }
|
||||||
|
catch (_) { setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; }
|
||||||
|
utterance.lang = settings.language || 'sv-SE';
|
||||||
|
const profile = voiceOptions.characterId ? settings.speakerProfiles?.[voiceOptions.characterId] || {} : {};
|
||||||
|
const identityProfile = characterVoiceProfile(voiceOptions.voiceIdentity, voiceOptions.characterId);
|
||||||
|
const isNarrator = voiceOptions.role === 'narrator';
|
||||||
|
const configuredRate = Number(voiceOptions.rate ?? profile.rate ?? settings.rate) || 1;
|
||||||
|
utterance.rate = Math.min(2, Math.max(0.5, configuredRate * (isNarrator || voiceOptions.rate != null || profile.rate != null ? 1 : identityProfile.rate)));
|
||||||
|
utterance.pitch = isNarrator ? 1 : Math.min(2, Math.max(0, Number(voiceOptions.pitch ?? profile.pitch ?? identityProfile.pitch) || 1));
|
||||||
|
const requestedName = voiceOptions.voiceName || profile.voiceName || settings.voiceName;
|
||||||
|
const voices = availableVoices();
|
||||||
|
utterance.voice = voices.find(voice => voice.name === requestedName)
|
||||||
|
|| voices.find(voice => /^sv(-|$)/i.test(voice.lang))
|
||||||
|
|| null;
|
||||||
|
utterance.onend = () => {
|
||||||
|
if (token !== generation) return;
|
||||||
|
if (speechTimer !== null) win.clearTimeout(speechTimer);
|
||||||
|
speechTimer = null;
|
||||||
|
setState('IDLE');
|
||||||
|
};
|
||||||
|
utterance.onerror = () => {
|
||||||
|
if (token !== generation) return;
|
||||||
|
if (speechTimer !== null) win.clearTimeout(speechTimer);
|
||||||
|
speechTimer = null;
|
||||||
|
generation += 1;
|
||||||
|
setState('IDLE', 'Uppläsningen avbröts. Dialogen finns kvar som text.');
|
||||||
|
};
|
||||||
|
setState('SPEAKING', 'Läser upp dialog.');
|
||||||
|
speechTimer = win.setTimeout(() => {
|
||||||
|
if (token !== generation) return;
|
||||||
|
generation += 1;
|
||||||
|
try { win.speechSynthesis.cancel(); } catch (_) { /* Best effort. */ }
|
||||||
|
speechTimer = null;
|
||||||
|
setState('IDLE', 'Uppläsningen avslutades. Dialogen finns kvar som text.');
|
||||||
|
}, Math.max(30000, Math.min(180000, String(text).length * 180)));
|
||||||
|
try { win.speechSynthesis.speak(utterance); }
|
||||||
|
catch (_) { cancelSpeech(); setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; }
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update(patch) { Object.assign(settings, patch); return {...settings}; }
|
||||||
|
function stopAll() { stopListening(); cancelSpeech(); }
|
||||||
|
function getState() { return state; }
|
||||||
|
function getSettings() { return {...settings}; }
|
||||||
|
function getVoices() { return availableVoices(); }
|
||||||
|
function supportsRecognition() { return Boolean(win.SpeechRecognition || win.webkitSpeechRecognition); }
|
||||||
|
return {startListening, stopListening, speak, cancelSpeech, stopAll, update, getState, getSettings, getVoices, supportsRecognition};
|
||||||
|
}
|
||||||
|
|
||||||
|
root.GameVoice = {createVoiceController, DEFAULT_SETTINGS, parseVoiceCommand, loadSettings, saveSettings, characterVoiceProfile};
|
||||||
|
})(typeof window !== 'undefined' ? window : globalThis);
|
||||||
Reference in New Issue
Block a user