57 lines
7.8 KiB
HTML
57 lines
7.8 KiB
HTML
<!doctype html>
|
||
<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; }
|
||
#guessStatus { margin: 6px 0 10px; font-size: 0.95rem; color: #333; }
|
||
#lieStatus { margin: 6px 0 10px; font-size: 0.95rem; color: #333; }
|
||
#lieStatus.locked { color: #0a5f2d; font-weight: 600; }
|
||
#guessStatus.locked { color: #0a5f2d; font-weight: 600; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Player panel (MVP)</h1>
|
||
<input id="code" placeholder="Sessionkode">
|
||
<input id="nickname" placeholder="Nickname">
|
||
<button onclick="joinSession()">1) Join</button>
|
||
<input id="playerId" placeholder="Player id">
|
||
<input id="sessionToken" placeholder="Session token" type="password" readonly>
|
||
<input id="roundQuestionId" placeholder="Round question id">
|
||
<input id="lieText" placeholder="Din løgn">
|
||
<button id="lieSubmitBtn" onclick="submitLie()">2) Submit løgn</button>
|
||
<p id="lieStatus">Skriv din løgn.</p>
|
||
<input id="guessText" placeholder="Dit gæt" readonly>
|
||
<div id="answerOptions"></div>
|
||
<p id="guessStatus">Vælg et svar.</p>
|
||
<button id="guessSubmitBtn" onclick="submitGuess()" disabled>3) Submit gæt</button>
|
||
<button onclick="sessionDetail()">Opdater session-status</button>
|
||
<pre id="out">Klar.</pre>
|
||
<script>
|
||
var availableAnswers=[];
|
||
var guessSubmitted=false;
|
||
var lieSubmitted=false;
|
||
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();}
|
||
function guessStorageKey(){var c=code();var p=pid();var q=rq();if(!c||!p||!q){return "";}return ["wppGuess",c,p,q].join(":");}
|
||
function lieStorageKey(){var c=code();var p=pid();var q=rq();if(!c||!p||!q){return "";}return ["wppLie",c,p,q].join(":");}
|
||
function persistLieState(text,submitted){var key=lieStorageKey();if(!key){return;}try{localStorage.setItem(key,JSON.stringify({text:text||"",submitted:!!submitted}));}catch(_e){}}
|
||
function loadLieState(){var key=lieStorageKey();if(!key){return null;}try{var raw=localStorage.getItem(key);if(!raw){return null;}return JSON.parse(raw);}catch(_e){return null;}}
|
||
function updateLieSubmitState(){var text=(document.getElementById("lieText").value||"").trim();var btn=document.getElementById("lieSubmitBtn");var input=document.getElementById("lieText");var status=document.getElementById("lieStatus");if(input){input.readOnly=lieSubmitted;}if(btn){btn.disabled=lieSubmitted||!text;}if(status){if(lieSubmitted){status.textContent="Løgn sendt – input er låst.";status.classList.add("locked");}else{status.classList.remove("locked");status.textContent=text?"Løgn klar til afsendelse.":"Skriv din løgn.";}}}
|
||
function setLieState(text,submitted){document.getElementById("lieText").value=text||"";if(typeof submitted==="boolean"){lieSubmitted=submitted;}updateLieSubmitState();}
|
||
function persistGuessState(text,submitted){var key=guessStorageKey();if(!key){return;}try{localStorage.setItem(key,JSON.stringify({selected_text:text||"",submitted:!!submitted}));}catch(_e){}}
|
||
function loadGuessState(){var key=guessStorageKey();if(!key){return null;}try{var raw=localStorage.getItem(key);if(!raw){return null;}return JSON.parse(raw);}catch(_e){return null;}}
|
||
function updateGuessStatus(){var el=document.getElementById("guessStatus");if(!el){return;}var selected=document.getElementById("guessText").value;if(guessSubmitted){el.textContent="Gæt sendt – valg er låst.";el.classList.add("locked");return;}el.classList.remove("locked");el.textContent=selected?"Valgt svar klar til afsendelse.":"Vælg et svar.";}
|
||
function updateGuessSubmitState(){var selected=document.getElementById("guessText").value;var hasValid=availableAnswers.indexOf(selected)!==-1;document.getElementById("guessSubmitBtn").disabled=guessSubmitted||!hasValid;var buttons=document.querySelectorAll("#answerOptions button");buttons.forEach(function(btn){btn.disabled=guessSubmitted;});updateGuessStatus();}
|
||
function setGuess(text,submitted){document.getElementById("guessText").value=text||"";if(typeof submitted==="boolean"){guessSubmitted=submitted;}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=[];guessSubmitted=false;setGuess("",false);lieSubmitted=false;setLieState("",false);if(!roundQuestion||!Array.isArray(roundQuestion.answers)){updateGuessSubmitState();updateLieSubmitState();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(){if(guessSubmitted){return;}setGuess(item.text,false);persistGuessState(item.text,false);};wrap.appendChild(btn);});var saved=loadGuessState();if(saved&&availableAnswers.indexOf(saved.selected_text)!==-1){setGuess(saved.selected_text,!!saved.submitted);}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);var savedLie=loadLieState();if(savedLie){setLieState(savedLie.text||"",!!savedLie.submitted);}}if(d.guess&&d.guess.round_question_id){document.getElementById("roundQuestionId").value=d.guess.round_question_id;setGuess(d.guess.selected_text||"",true);persistGuessState(d.guess.selected_text||"",true);}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(){if(lieSubmitted){return Promise.resolve({error:"lie_already_submitted_client"});}var text=(document.getElementById("lieText").value||"").trim();if(!text){updateLieSubmitState();return Promise.resolve({error:"empty_lie_text"});}return api("/lobby/sessions/"+code()+"/questions/"+rq()+"/lies/submit","POST",{player_id:parseInt(pid(),10),session_token:document.getElementById("sessionToken").value,text:text}).then(function(d){if(d&&d.lie&&d.lie.id){lieSubmitted=true;persistLieState(text,true);updateLieSubmitState();}return d;});}
|
||
document.getElementById("lieText").addEventListener("input",function(){if(!lieSubmitted){updateLieSubmitState();persistLieState(document.getElementById("lieText").value,false);}});updateLieSubmitState();
|
||
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>
|
||
</body></html>
|