Speak onboarding and all game dialogue automatically
Build and publish frontend / publish (push) Successful in 38s
Build and publish frontend / publish (push) Successful in 38s
This commit is contained in:
Ein Anderssono
+50
-25
@@ -36,7 +36,9 @@
|
||||
<main>
|
||||
<section id="auth" aria-labelledby="auth-heading">
|
||||
<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>
|
||||
<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 igen</button>
|
||||
<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>
|
||||
@@ -108,8 +110,7 @@
|
||||
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) {
|
||||
if (options.speak !== false && location.pathname !== '/admin') {
|
||||
voiceController?.speak(content, latestAssistantVoice);
|
||||
}
|
||||
}
|
||||
@@ -132,13 +133,13 @@
|
||||
if (button) button.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);
|
||||
if (voiceSettings.mode !== 'game-voice') voiceController?.stopAll();
|
||||
else if (!voiceSettings.autoSpeak) voiceController?.cancelSpeech();
|
||||
transcript.setAttribute('aria-live', voiceSettings.mode === 'game-voice' ? 'off' : 'polite');
|
||||
transcript.setAttribute('aria-live', 'polite');
|
||||
}
|
||||
function playVoiceSignal(state) {
|
||||
if (!voiceSettings.soundSignals || !['LISTENING', 'PROCESSING', 'ERROR', 'STOPPED'].includes(state)) return;
|
||||
@@ -179,16 +180,7 @@
|
||||
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 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)}`; });
|
||||
@@ -212,18 +204,16 @@
|
||||
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.');
|
||||
if (!voiceController.speak(latestAssistantText, latestAssistantVoice)) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. 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();
|
||||
transcript.append(item); item.scrollIntoView({block: 'end'}); speed.focus();
|
||||
}
|
||||
function requestVoiceDisclosure() {
|
||||
const item = document.createElement('li'); item.dataset.role = 'voice-controls';
|
||||
@@ -231,6 +221,7 @@
|
||||
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();
|
||||
@@ -242,13 +233,16 @@
|
||||
function handleVoiceCommand(message, source) {
|
||||
const parsed = window.GameVoice.parseVoiceCommand(message, {requirePrefix: source === 'voice'});
|
||||
if (!parsed) return false;
|
||||
if (parsed.command === 'settings') appendVoiceSettings();
|
||||
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 här eller är avstängd. Dialogen finns kvar som text.');
|
||||
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 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.');
|
||||
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;
|
||||
}
|
||||
@@ -280,6 +274,11 @@
|
||||
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;
|
||||
@@ -290,11 +289,31 @@
|
||||
messageField.focus();
|
||||
}
|
||||
function showAdmin() {
|
||||
voiceController.stopAll();
|
||||
auth.hidden = true;
|
||||
play.hidden = true;
|
||||
adminView.hidden = false;
|
||||
document.querySelector('#version-footer').hidden = true;
|
||||
}
|
||||
const introductionKey = 'ai-spel.introduction-heard.v1';
|
||||
function playFirstVisitIntroduction() {
|
||||
let alreadyHeard = false;
|
||||
try { alreadyHeard = localStorage.getItem(introductionKey) === 'true'; } catch (_) { /* Keep the intro available for this visit. */ }
|
||||
if (alreadyHeard) return;
|
||||
const introduction = document.querySelector('#auth-intro').textContent;
|
||||
if (voiceController.speak(introduction, {role: 'narrator', voiceIdentity: 'neutral'})) {
|
||||
try { localStorage.setItem(introductionKey, 'true'); } catch (_) { /* The page text remains available. */ }
|
||||
}
|
||||
}
|
||||
document.querySelector('#auth-repeat-intro').addEventListener('click', () => {
|
||||
if (location.pathname !== '/admin') voiceController.speak(document.querySelector('#auth-intro').textContent, {role: 'narrator', voiceIdentity: 'neutral'});
|
||||
});
|
||||
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;
|
||||
@@ -430,7 +449,9 @@
|
||||
transcript.replaceChildren();
|
||||
latestAssistantText = '';
|
||||
for (const line of lines) appendLine(line.role === 'user' ? 'user' : 'assistant', line.content, {speak: false});
|
||||
if (lines.length === 0 && gameState?.world) {
|
||||
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;
|
||||
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.'}`);
|
||||
@@ -456,6 +477,7 @@
|
||||
}
|
||||
async function handleLogout() {
|
||||
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();
|
||||
@@ -573,7 +595,10 @@
|
||||
form.reset();
|
||||
if (location.pathname === '/admin') await openAdmin(); else await openGame();
|
||||
} catch (error) {
|
||||
window.alert(`Kunde inte logga in: ${error.message}`);
|
||||
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') {
|
||||
|
||||
Reference in New Issue
Block a user