157 lines
4.2 KiB
HTML
157 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>just the frax!</title>
|
|
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
|
<style>
|
|
:root {
|
|
--accent: #459991;
|
|
--accent-hover: #65e5d9;
|
|
}
|
|
|
|
.block {
|
|
border-radius: 10px;
|
|
border: thin gray solid;
|
|
margin: 10px;
|
|
margin-bottom: 5px;
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.warn {
|
|
background: orange;
|
|
color: black;
|
|
}
|
|
|
|
.block .title {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#card {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
width: 10em;
|
|
color: white;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
#reveal-false {
|
|
background: #99454D;
|
|
}
|
|
|
|
#warning {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>just the frax!</h1>
|
|
<p>A game of truth and lies.</p>
|
|
</header>
|
|
|
|
<div class="block">
|
|
<div class="title">Status</div>
|
|
<div id="status-message"></div>
|
|
</div>
|
|
|
|
<div class="block warn" id="warning">
|
|
<div class="title">Error</div>
|
|
<p id="warning-message"></p>
|
|
</div>
|
|
|
|
<div class="block" id="card">
|
|
<div class="title">Story Card</div>
|
|
<p>Read this part aloud verbatim, then answer questions:</p>
|
|
<blockquote id="card-content"></blockquote>
|
|
|
|
<p>When the host tells you to reveal, use the correct button:</p>
|
|
<button type="button" id="reveal-true">This is THE TRUTH</button>
|
|
<button type="button" id="reveal-false">This is A LIE</button>
|
|
</div>
|
|
|
|
<script type="module">
|
|
function sendMessage(conn, type, message) {
|
|
const data = JSON.stringify({type, message});
|
|
console.log("Sending:", data);
|
|
conn.send(data);
|
|
}
|
|
|
|
function register(conn) {
|
|
showStatus("Registering...");
|
|
const params = new URLSearchParams(window.location.search);
|
|
const name = params.get('name');
|
|
const team = params.get('team');
|
|
const token = params.get('token');
|
|
sendMessage(conn, "register", {name, team, token});
|
|
}
|
|
|
|
function handleMessage(data, conn) {
|
|
console.warn("Got message data:", data);
|
|
const msg = JSON.parse(data)
|
|
switch (msg.type) {
|
|
case "error":
|
|
showError(msg.message);
|
|
break;
|
|
|
|
case "registered":
|
|
const params = new URLSearchParams(window.location.search);
|
|
const name = params.get('name');
|
|
const team = params.get('team');
|
|
showStatus(`Signed in as ${name} [Team: ${team}]`)
|
|
break;
|
|
|
|
case "card":
|
|
const cardDiv = document.getElementById("card");
|
|
const cardContent = document.getElementById("card-content");
|
|
cardContent.innerHTML = msg.message;
|
|
cardDiv.style.display = "block";
|
|
break;
|
|
|
|
default:
|
|
showError(`Unknown message type: ${msg.type}`);
|
|
}
|
|
|
|
}
|
|
|
|
function showStatus(message) {
|
|
const statusDiv = document.getElementById('status-message');
|
|
statusDiv.innerHTML = message;
|
|
}
|
|
|
|
function showError(message) {
|
|
const warnDiv = document.getElementById('warning');
|
|
const warnMessage = document.getElementById('warning-message');
|
|
warnMessage.innerHTML = message;
|
|
warnDiv.style.display = "block";
|
|
}
|
|
|
|
var proto = "ws:";
|
|
if (location.protocol == "https:")
|
|
proto = "wss:";
|
|
|
|
showStatus("Connecting...");
|
|
const conn = new WebSocket(`${proto}//${location.host}/player/ws`);
|
|
conn.addEventListener("close", e => { showStatus("Disconnected."); });
|
|
conn.addEventListener("error", e => { showError("Websocket error."); });
|
|
conn.addEventListener("message", e => { handleMessage(e.data, conn); });
|
|
conn.addEventListener("open", e => { register(conn); });
|
|
|
|
const revealTrue = document.getElementById('reveal-true');
|
|
const revealFalse = document.getElementById('reveal-false');
|
|
[revealTrue, revealFalse].forEach(button => {
|
|
button.addEventListener("click", e => {
|
|
const value = (button === revealTrue);
|
|
const cardDiv = document.getElementById("card");
|
|
cardDiv.style.display = "none";
|
|
sendMessage(conn, "reveal", value);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|