This commit is contained in:
Ein Anderssono
+175
@@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>Svensk livssimulator</title>
|
||||
<style>
|
||||
:root { font: 1rem/1.55 system-ui, sans-serif; }
|
||||
body { max-width: 52rem; margin: 0 auto; padding: 1.25rem; }
|
||||
h1, h2, h3 { 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: 40rem; }
|
||||
label { display: grid; gap: .2rem; font-weight: 600; }
|
||||
input, textarea, button { font: inherit; padding: .6rem; }
|
||||
button { justify-self: start; cursor: pointer; }
|
||||
#status { min-height: 1.5em; }
|
||||
.card { border: 1px solid; border-radius: .5rem; padding: 1rem; margin-block: 1rem; }
|
||||
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
|
||||
.row button { margin-block: .4rem; }
|
||||
#transcript { min-height: 5rem; max-height: 28rem; overflow: auto; }
|
||||
#transcript li { margin-block: .6rem; }
|
||||
[hidden] { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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">
|
||||
<h2 id="auth-heading">Logga in eller skapa konto</h2>
|
||||
<form id="auth-form">
|
||||
<label>Användarnamn <input name="username" required minlength="3" maxlength="40" autocomplete="username"></label>
|
||||
<label>Lösenord <input name="password" type="password" required minlength="12" maxlength="256" autocomplete="current-password"></label>
|
||||
<div class="row"><button type="submit" name="intent" value="login">Logga in</button><button type="submit" name="intent" value="register">Skapa konto</button></div>
|
||||
</form>
|
||||
</section>
|
||||
<section id="new-character" aria-labelledby="character-heading" hidden>
|
||||
<h2 id="character-heading">Vem är du?</h2>
|
||||
<p>Du väljer själv bakgrund. Karaktären ska vara vuxen, men du behöver inte välja yrke eller startpaket.</p>
|
||||
<form id="character-form">
|
||||
<label>Namn <input name="name" required maxlength="120" autocomplete="name"></label>
|
||||
<label>Ålder (18 år eller äldre) <input name="age" type="number" min="18" required value="30"></label>
|
||||
<label>Biografi <textarea name="biography" required maxlength="20000" rows="6" placeholder="Berätta fritt om personens liv och nuläge."></textarea></label>
|
||||
<button type="submit">Börja spela</button>
|
||||
</form>
|
||||
</section>
|
||||
<section id="world-setup" aria-labelledby="world-setup-heading" hidden>
|
||||
<h2 id="world-setup-heading">Skapa din startvärld</h2>
|
||||
<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>
|
||||
<form id="world-idea-form">
|
||||
<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="submit">Skapa ett förslag</button>
|
||||
</form>
|
||||
<form id="world-draft-form" hidden>
|
||||
<label>Världens namn <input name="name" required maxlength="120"></label>
|
||||
<label>Plats <input name="location_name" required maxlength="120"></label>
|
||||
<label>Beskrivning av platsen <textarea name="location_description" required maxlength="2000" rows="4"></textarea></label>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</main>
|
||||
<footer>Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · API <span id="api-version">hämtar version…</span></footer>
|
||||
<script>
|
||||
const status = document.querySelector('#status');
|
||||
const auth = document.querySelector('#auth');
|
||||
const characterSection = document.querySelector('#new-character');
|
||||
const worldSetup = document.querySelector('#world-setup');
|
||||
const game = document.querySelector('#game');
|
||||
let gameState = null;
|
||||
async function request(path, options = {}) {
|
||||
const response = await fetch(path, { credentials: 'same-origin', ...options });
|
||||
const body = response.status === 204 ? null : await response.json();
|
||||
if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
|
||||
return body;
|
||||
}
|
||||
request('/version').then(({version}) => {
|
||||
document.querySelector('#api-version').textContent = version;
|
||||
}).catch(() => {
|
||||
document.querySelector('#api-version').textContent = 'otillgänglig';
|
||||
});
|
||||
function showAuth() { auth.hidden = false; characterSection.hidden = true; worldSetup.hidden = true; game.hidden = true; }
|
||||
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 renderConversation(lines, npcName) {
|
||||
const transcript = document.querySelector('#transcript');
|
||||
transcript.replaceChildren(...lines.map((line) => {
|
||||
const entry = document.createElement('li');
|
||||
entry.textContent = `${line.role === 'user' ? 'Du' : npcName}: ${line.content}`;
|
||||
return entry;
|
||||
}));
|
||||
}
|
||||
async function openGame() {
|
||||
gameState = await request('/api/world');
|
||||
if (!gameState.character) { showCharacter(); return; }
|
||||
if (!gameState.world) { showWorldSetup(); return; }
|
||||
const world = gameState.world;
|
||||
auth.hidden = true; characterSection.hidden = true; game.hidden = false;
|
||||
worldSetup.hidden = true;
|
||||
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;
|
||||
renderConversation(await request('/api/npc/conversation'), world.npc.name);
|
||||
}
|
||||
document.querySelector('#auth-form').addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.currentTarget;
|
||||
const data = new FormData(form);
|
||||
const intent = event.submitter?.value || 'login';
|
||||
status.textContent = intent === 'register' ? 'Skapar konto…' : 'Loggar in…';
|
||||
try {
|
||||
await request(`/api/${intent}`, { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({username:data.get('username'),password:data.get('password')}) });
|
||||
form.reset(); await openGame(); status.textContent = 'Du är inloggad.';
|
||||
} catch (error) { status.textContent = `Kunde inte logga in: ${error.message}`; }
|
||||
});
|
||||
document.querySelector('#character-form').addEventListener('submit', async (event) => {
|
||||
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']) 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 {
|
||||
await request('/api/world', {method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(Object.fromEntries(data.entries()))});
|
||||
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('#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}`;} });
|
||||
request('/api/me').then(async () => { await openGame(); status.textContent='Din sparade spelvärld har lästs in.'; }).catch(() => { showAuth(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user