<!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="text-center space-y-3">
    <h2 class="text-3xl font-bold">You’re in the Queue</h2>
    <p>ID: <b id="pid">{{ pid }}</b> — Persona: <b>{{ persona }}</b></p>
    <p>Hang tight—host will assign your match.</p>
  </div>
<script>
const pid = "{{ pid }}";
const socket = io("/game", { transports: ["websocket"] });
socket.emit("queue_subscribe", { pid });

// Host will notify your personal channel
socket.on("assigned_room", ({ code, side }) => {
  // Optional: you can show side here; server still verifies it
  window.location.href = `/play/${code}`;
});
</script>
</body>
</html>

