36 lines
1.3 KiB
HTML
36 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
|
</head>
|
|
<body class="bg-slate-900 text-white min-h-screen grid place-items-center">
|
|
<div class="grid gap-4 text-center">
|
|
<h2 class="text-2xl font-bold">Room {{ code }}</h2>
|
|
<button id="tap" class="text-2xl py-16 px-24 rounded bg-indigo-600 active:scale-95">TAP</button>
|
|
</div>
|
|
<script>
|
|
const code = "{{ code }}";
|
|
const pid = "{{ pid }}";
|
|
const socket = io("/game", { transports: ["websocket"] });
|
|
|
|
// join the room (server will verify if you're left/right)
|
|
socket.emit("player_join_room", { code, pid });
|
|
|
|
const tapBtn = document.getElementById("tap");
|
|
tapBtn.addEventListener("pointerdown", sendTap);
|
|
function sendTap(e){ e && e.preventDefault(); socket.emit("tap", { code, pid }); }
|
|
|
|
// optional: hold-to-repeat
|
|
tapBtn.addEventListener("pointerdown", () => {
|
|
const t = setInterval(() => socket.emit("tap", { code, pid }), 100);
|
|
const stop = () => { clearInterval(t); window.removeEventListener("pointerup", stop); tapBtn.removeEventListener("pointerleave", stop); };
|
|
window.addEventListener("pointerup", stop, { once: true });
|
|
tapBtn.addEventListener("pointerleave", stop, { once: true });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|