<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Buzzer</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A cool thing made with Glitch">
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <link rel="stylesheet" href="/style.css">
    <script src="/script.js" defer></script>
  </head>
  <body>
    <header>
      <h1>{{room}}</h1>
    </header>

    <main>
      <h2>Oh hi, {{name}}</h2>
  
      <button id="buzzer">
        BUZZ
      </button>
    </main>
    
    <script>
    let socket = new WebSocket(`wss://${window.location.hostname}`);

    socket.onopen = function(e) {
      socket.send({
        type: "join",
        data: {
          participantId: '{{participantId}}',
          participantName: '{{participantName}}',
        }
      });
    };

    socket.onmessage = function(event) {
      
    };

    socket.onerror = function(error) {
      alert(`[error] ${error.message}`);
    };
    </script>
  </body>
</html>