113 lines
3.3 KiB
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>
|