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