<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Buzzers</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}} <img src="{{character}}"/></h2>
  
      <button id="buzzer">
        BUZZ
      </button>
    </main>
    
    <div id="messageBox" class="hide">
      
    </div>
    
    <script>
      let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`);

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

      socket.onmessage = function(event) {
        let msg = JSON.parse(event.data);
        if (msg.type === "buzz") {
          showMessage(msg.msg);
        }
      };
      
      document.getElementById('buzzer').addEventListener('touchstart', function() {
        socket.send(JSON.stringify({ 
          type: "buzz" 
        }));
      });
      
      document.getElementById('buzzer').addEventListener('mousedown', function() {
        socket.send(JSON.stringify({ 
          type: "buzz" 
        }));
      });
      
      function showMessage(msg) {
        document.getElementById('buzzer').disabled = true;
        let mb = document.getElementById('messageBox');
        mb.innerHTML = msg;
        mb.classList.remove('hide');
        setTimeout(() => {
          document.getElementById('buzzer').disabled = false;
          mb.classList.add('hide');
        }, 5000)
      }
    </script>
  </body>
</html>