avery-game-proto/public/index.html

113 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Avery game prototype</title>
<style>
.msg.dir-in::before {
content: "< ";
}
.msg.dir-out::before {
content: "> ";
}
</style>
</head>
<body>
<div id="setup">
<div>
<label for="joinCode">Join game:</label>
<input id="joinCode" placeholder="Join Code" />
<button id="join">Join</button>
</div>
<div>
<button id="host">Host new game</button>
</div>
</div>
<div id="joinCodeNew"></div>
<form id="msg" style="display: none">
<input placeholder="message" id="msgBox" />
<button type="submit">send</button>
<hr />
<div id="msgs"></div>
</form>
<footer>
<hr />
<p>this is a basic prototype, some stuff might be janky</p>
<div>
rules:
<ul>
<li>all whitespace is merged into a single space</li>
<li>all letters in each word get lower-cased, and (consistently) jumbled around based on the previous character</li>
<li>all numbers and symbols get jumbled around, also based on their position</li>
<li>other symbols (outside printable ASCII) are voided</li>
<li>max message length: 1024 characters (after whitespace and other symbol striping)</li>
</ul>
</div>
<p>
idea by Avery [Kelly], prototype by CodedSakura
</p>
</footer>
<script>
const setup = document.getElementById("setup");
const form = document.getElementById("msg");
document.getElementById("join").addEventListener("click", () => {
const joinCode = document.getElementById("joinCode");
ws.send("join " + joinCode.value.toLowerCase());
});
document.getElementById("host").addEventListener("click", () => {
ws.send("host");
});
form.addEventListener("submit", e => {
e.preventDefault();
const data = document.getElementById("msgBox").value
.replaceAll(/[^\x20-\x7e]+/g, "")
.replaceAll(/\s+/g, " ")
.toLowerCase()
.substring(0, 1024);
ws.send("send " + data);
newMessage(data, "out");
document.getElementById("msgBox").value = "";
});
const ws = new WebSocket("ws://" + window.location.host);
ws.addEventListener("message", ({ data: msg }) => {
console.log(msg);
if (msg.startsWith("code ")) {
document.getElementById("joinCodeNew").innerText = "code: " + msg.substring(5);
setup.style.display = "none";
form.style.display = "";
const msgs = document.getElementById("msgs");
while (msgs.lastChild) msgs.removeChild(msgs.lastChild);
}
if (msg === "good") {
setup.style.display = "none";
form.style.display = "";
const msgs = document.getElementById("msgs");
while (msgs.lastChild) msgs.removeChild(msgs.lastChild);
}
if (msg.startsWith("rcv ")) {
const data = msg.substring(4);
newMessage(data, "in");
}
if (msg === "disconnected") {
setup.style.display = "";
form.style.display = "none";
document.getElementById("joinCodeNew").innerText = "";
}
});
function newMessage(data, direction) {
const elem = document.createElement("div");
elem.classList.add("msg", `dir-${direction}`);
elem.appendChild(document.createTextNode(data));
elem.title = new Date().toLocaleTimeString();
document.getElementById("msgs").prepend(elem);
}
</script>
</body>
</html>