<!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>

