|
|
|
@@ -16,6 +16,9 @@
|
|
|
|
|
button { justify-self: start; cursor: pointer; }
|
|
|
|
|
#status { min-height: 1.5em; }
|
|
|
|
|
.card { border: 1px solid; border-radius: .5rem; padding: 1rem; margin-block: 1rem; }
|
|
|
|
|
dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .35rem 1rem; }
|
|
|
|
|
dt { font-weight: 700; }
|
|
|
|
|
dd { margin: 0; }
|
|
|
|
|
.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; }
|
|
|
|
@@ -47,30 +50,24 @@
|
|
|
|
|
</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>
|
|
|
|
|
<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>
|
|
|
|
|
<h2 id="world-setup-heading">Hitta din startplats</h2>
|
|
|
|
|
<p>Du behöver inte beskriva världen. Startplatsen formas utifrån din biografi. Människor upptäcks senare när du utforskar.</p>
|
|
|
|
|
<button id="start-world-button" type="button">Börja spela</button>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="game" hidden>
|
|
|
|
|
<div class="row"><h2 id="world-heading"></h2><button id="logout" type="button">Logga ut</button></div>
|
|
|
|
|
<div class="row"><h2 id="world-heading" tabindex="-1"></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>
|
|
|
|
|
<h4>Platsens sinnesintryck</h4>
|
|
|
|
|
<dl>
|
|
|
|
|
<dt>Synintryck</dt><dd id="sense-visual"></dd>
|
|
|
|
|
<dt>Ljud</dt><dd id="sense-sound"></dd>
|
|
|
|
|
<dt>Dofter</dt><dd id="sense-smell"></dd>
|
|
|
|
|
<dt>Luft och temperatur</dt><dd id="sense-air"></dd>
|
|
|
|
|
<dt>Beröring och ytor</dt><dd id="sense-touch"></dd>
|
|
|
|
|
<dt>Orientering i rummet</dt><dd id="sense-orientation"></dd>
|
|
|
|
|
</dl>
|
|
|
|
|
<p id="place-status" role="status"></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>
|
|
|
|
@@ -83,7 +80,7 @@
|
|
|
|
|
<p id="offer-affordability"></p>
|
|
|
|
|
<button id="buy-offer" type="button">Köp</button>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="card" aria-labelledby="conversation-heading">
|
|
|
|
|
<section class="card" id="conversation-card" aria-labelledby="conversation-heading">
|
|
|
|
|
<h3 id="conversation-heading">Samtal</h3>
|
|
|
|
|
<ol id="transcript" aria-label="Sparat samtal"></ol>
|
|
|
|
|
<form id="message-form">
|
|
|
|
@@ -126,17 +123,50 @@
|
|
|
|
|
async function openGame() {
|
|
|
|
|
gameState = await request('/api/world');
|
|
|
|
|
if (!gameState.character) { showCharacter(); return; }
|
|
|
|
|
if (!gameState.world) { showWorldSetup(); return; }
|
|
|
|
|
if (!gameState.world) {
|
|
|
|
|
showWorldSetup();
|
|
|
|
|
try {
|
|
|
|
|
status.textContent = 'Hittar en startplats som passar din biografi…';
|
|
|
|
|
gameState = await request('/api/world/start', {method:'POST'});
|
|
|
|
|
if (!gameState.world) throw new Error('world_start_not_created');
|
|
|
|
|
} catch (error) {
|
|
|
|
|
status.textContent = `Kunde inte hitta en startplats: ${error.message}`;
|
|
|
|
|
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('#world-heading').focus();
|
|
|
|
|
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} `;
|
|
|
|
|
const senses = world.location.senses ?? {};
|
|
|
|
|
for (const [id, key] of [
|
|
|
|
|
['sense-visual', 'visual'],
|
|
|
|
|
['sense-sound', 'sound'],
|
|
|
|
|
['sense-smell', 'smell'],
|
|
|
|
|
['sense-air', 'air_and_temperature'],
|
|
|
|
|
['sense-touch', 'touch_and_surfaces'],
|
|
|
|
|
['sense-orientation', 'spatial_orientation'],
|
|
|
|
|
]) {
|
|
|
|
|
document.querySelector(`#${id}`).textContent = senses[key] || 'Inget särskilt intryck beskrivet.';
|
|
|
|
|
}
|
|
|
|
|
const conversation = document.querySelector('#conversation-card');
|
|
|
|
|
if (world.npc) {
|
|
|
|
|
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} `;
|
|
|
|
|
conversation.hidden = false;
|
|
|
|
|
renderConversation(await request('/api/npc/conversation'), world.npc.name);
|
|
|
|
|
document.querySelector('#place-status').textContent = '';
|
|
|
|
|
} else {
|
|
|
|
|
document.querySelector('#npc-heading').textContent = '';
|
|
|
|
|
document.querySelector('#npc-description').textContent = '';
|
|
|
|
|
document.querySelector('#place-status').textContent = 'Du har inte mött någon här ännu. Vilka du möter beror på vart du tar dig i världen.';
|
|
|
|
|
conversation.hidden = true;
|
|
|
|
|
}
|
|
|
|
|
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');
|
|
|
|
@@ -154,7 +184,6 @@
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
document.querySelector('#auth-form').addEventListener('submit', async (event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
@@ -164,36 +193,16 @@
|
|
|
|
|
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.';
|
|
|
|
|
form.reset(); await openGame();
|
|
|
|
|
if (gameState?.world || !gameState?.character) 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.'; }
|
|
|
|
|
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(); if (gameState?.world) status.textContent='Karaktären har sparats och du har börjat på en ny plats.'; }
|
|
|
|
|
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('#start-world-button').addEventListener('click', openGame);
|
|
|
|
|
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…';
|
|
|
|
|