wpp/weirsoe-party-protocol
8
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

UI: klikbare svarvalg i guess-fase (MVP) #42

Merged
integrator-bot merged 1 commits from feature/ui-guess-answer-options into main 2026-02-27 23:57:10 +01:00
Conversation 2 Commits 1 Files Changed 2 +13 -2
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
lobby/templates/lobby/player_screen.html
View File

@@ -1,5 +1,11 @@
<!doctype html>
<html lang="da"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WPP Player</title></head>
<html lang="da"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WPP Player</title>
<style>
#answerOptions { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
#answerOptions button { border: 1px solid #999; padding: 6px 10px; border-radius: 8px; background: #f4f4f4; cursor: pointer; }
#answerOptions button.active { border-color: #1652f0; background: #dfe9ff; }
</style>
</head>
<body>
<h1>Player panel (MVP)</h1>
<input id="code" placeholder="Sessionkode">
@@ -11,6 +17,7 @@
<input id="lieText" placeholder="Din løgn">
<button onclick="submitLie()">2) Submit løgn</button>
<input id="guessText" placeholder="Dit gæt">
<div id="answerOptions"></div>
<button onclick="submitGuess()">3) Submit gæt</button>
<button onclick="sessionDetail()">Opdater session-status</button>
<pre id="out">Klar.</pre>
@@ -18,7 +25,9 @@
function code(){return document.getElementById("code").value.trim().toUpperCase();}
function pid(){return document.getElementById("playerId").value.trim();}
function rq(){return document.getElementById("roundQuestionId").value.trim();}
async function api(path,method,payload){var o={method:method||"GET",headers:{"Accept":"application/json"}};if(payload!==null){o.headers["Content-Type"]="application/json";o.body=JSON.stringify(payload);}var r=await fetch(path,o);var d=await r.json().catch(function(){return {};});document.getElementById("out").textContent=JSON.stringify({status:r.status,data:d},null,2);if(d.player&&d.player.id){document.getElementById("playerId").value=d.player.id;}if(d.player&&d.player.session_token){document.getElementById("sessionToken").value=d.player.session_token;}if(d.round_question&&d.round_question.id){document.getElementById("roundQuestionId").value=d.round_question.id;}return d;}
function setGuess(text){document.getElementById("guessText").value=text;var buttons=document.querySelectorAll("#answerOptions button");buttons.forEach(function(btn){btn.classList.toggle("active",btn.dataset.answer===text);});}
function renderAnswerOptions(roundQuestion){var wrap=document.getElementById("answerOptions");wrap.innerHTML="";if(!roundQuestion||!Array.isArray(roundQuestion.answers)){return;}roundQuestion.answers.forEach(function(item){if(!item||!item.text){return;}var btn=document.createElement("button");btn.type="button";btn.dataset.answer=item.text;btn.textContent=item.text;btn.onclick=function(){setGuess(item.text);};wrap.appendChild(btn);});}
async function api(path,method,payload){var o={method:method||"GET",headers:{"Accept":"application/json"}};if(payload!==null){o.headers["Content-Type"]="application/json";o.body=JSON.stringify(payload);}var r=await fetch(path,o);var d=await r.json().catch(function(){return {};});document.getElementById("out").textContent=JSON.stringify({status:r.status,data:d},null,2);if(d.player&&d.player.id){document.getElementById("playerId").value=d.player.id;}if(d.player&&d.player.session_token){document.getElementById("sessionToken").value=d.player.session_token;}if(d.round_question&&d.round_question.id){document.getElementById("roundQuestionId").value=d.round_question.id;}if(d.round_question){renderAnswerOptions(d.round_question);}return d;}
function joinSession(){return api("/lobby/sessions/join","POST",{code:code(),nickname:document.getElementById("nickname").value.trim()});}
function sessionDetail(){return api("/lobby/sessions/"+code(),"GET",null);}
function submitLie(){return api("/lobby/sessions/"+code()+"/questions/"+rq()+"/lies/submit","POST",{player_id:parseInt(pid(),10),session_token:document.getElementById("sessionToken").value,text:document.getElementById("lieText").value});}

2
lobby/tests.py
View File

@@ -780,6 +780,8 @@ class UiScreenTests(TestCase):
self.assertContains(response, "Player panel")
self.assertContains(response, "id=\"sessionToken\"")
self.assertContains(response, "session_token")
self.assertContains(response, "id=\"answerOptions\"")
self.assertContains(response, "renderAnswerOptions")
class SessionDetailRoundQuestionTests(TestCase):