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

ui: disable guess submit until option selected (#45)
All checks were successful
CI / test-and-quality (push) Successful in 1m35s
Details
CI / test-and-quality (pull_request) Successful in 1m35s
Details

Browse Source
This commit is contained in:
Asger Geel Weirsøe
2026-02-28 00:16:45 +01:00
parent fdaddc4f52
commit 298381586f
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,9 +16,9 @@
<input id="roundQuestionId" placeholder="Round question id"> <input id="roundQuestionId" placeholder="Round question id">
<input id="lieText" placeholder="Din løgn"> <input id="lieText" placeholder="Din løgn">
<button onclick="submitLie()">2) Submit løgn</button> <button onclick="submitLie()">2) Submit løgn</button>
<input id="guessText" placeholder="Dit gæt"> <input id="guessText" placeholder="Dit gæt" readonly>
<div id="answerOptions"></div> <div id="answerOptions"></div>
<button onclick="submitGuess()">3) Submit gæt</button> <button id="guessSubmitBtn" onclick="submitGuess()" disabled>3) Submit gæt</button>
<button onclick="sessionDetail()">Opdater session-status</button> <button onclick="sessionDetail()">Opdater session-status</button>
<pre id="out">Klar.</pre> <pre id="out">Klar.</pre>
<script> <script>
@@ -26,12 +26,13 @@ var availableAnswers=[];
function code(){return document.getElementById("code").value.trim().toUpperCase();} function code(){return document.getElementById("code").value.trim().toUpperCase();}
function pid(){return document.getElementById("playerId").value.trim();} function pid(){return document.getElementById("playerId").value.trim();}
function rq(){return document.getElementById("roundQuestionId").value.trim();} function rq(){return document.getElementById("roundQuestionId").value.trim();}
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 updateGuessSubmitState(){var selected=document.getElementById("guessText").value;var hasValid=availableAnswers.indexOf(selected)!==-1;document.getElementById("guessSubmitBtn").disabled=!hasValid;}
function renderAnswerOptions(roundQuestion){var wrap=document.getElementById("answerOptions");wrap.innerHTML="";availableAnswers=[];setGuess("");if(!roundQuestion||!Array.isArray(roundQuestion.answers)){return;}roundQuestion.answers.forEach(function(item){if(!item||!item.text){return;}availableAnswers.push(item.text);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);});} 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);});updateGuessSubmitState();}
function renderAnswerOptions(roundQuestion){var wrap=document.getElementById("answerOptions");wrap.innerHTML="";availableAnswers=[];setGuess("");if(!roundQuestion||!Array.isArray(roundQuestion.answers)){updateGuessSubmitState();return;}roundQuestion.answers.forEach(function(item){if(!item||!item.text){return;}availableAnswers.push(item.text);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);});updateGuessSubmitState();}
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;} 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 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 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});} 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});}
function submitGuess(){var selected=document.getElementById("guessText").value;if(availableAnswers.length>0&&availableAnswers.indexOf(selected)===-1){document.getElementById("out").textContent=JSON.stringify({status:400,data:{error:"Vælg et af de viste svarmuligheder"}},null,2);return Promise.resolve({error:"invalid_client_guess"});}return api("/lobby/sessions/"+code()+"/questions/"+rq()+"/guesses/submit","POST",{player_id:parseInt(pid(),10),session_token:document.getElementById("sessionToken").value,selected_text:selected});} function submitGuess(){var selected=document.getElementById("guessText").value;if(availableAnswers.indexOf(selected)===-1){document.getElementById("out").textContent=JSON.stringify({status:400,data:{error:"Vælg et af de viste svarmuligheder"}},null,2);return Promise.resolve({error:"invalid_client_guess"});}return api("/lobby/sessions/"+code()+"/questions/"+rq()+"/guesses/submit","POST",{player_id:parseInt(pid(),10),session_token:document.getElementById("sessionToken").value,selected_text:selected});}
</script> </script>
</body></html> </body></html>