Update buzzer app to serve static files and handle WebSocket connections
Integrates static file serving for HTML, CSS, and JS, and sets up a WebSocket server for real-time communication. Replit-Commit-Author: Agent Replit-Commit-Session-Id: f3ac8eb3-f610-4678-ab6e-ebf900098be4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 182c9671-a459-4b94-a7eb-1c7a0cefe768 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d4b7863b-f7b2-425c-a9b5-ad7bd1885e9d/f3ac8eb3-f610-4678-ab6e-ebf900098be4/N1qS6qo Replit-Helium-Checkpoint-Created: true
This commit is contained in:
ka-official
@@ -7,8 +7,7 @@
|
||||
<title>Buzzer Platform</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
|
||||
@@ -17,9 +16,9 @@
|
||||
|
||||
<!-- HEADER -->
|
||||
<header>
|
||||
<div>
|
||||
<div class="logo-wrap">
|
||||
<div class="logo">BUZZER</div>
|
||||
<div class="logo-sub">// QUIZ CONTROL</div>
|
||||
<div class="logo-sub">// QUIZ CONTROL PLATFORM</div>
|
||||
</div>
|
||||
<div class="hdr-r">
|
||||
<div class="room-chip" id="hdr-room"></div>
|
||||
@@ -33,21 +32,28 @@
|
||||
<!-- ══════════ LANDING ══════════ -->
|
||||
<div class="scr" id="s-land">
|
||||
<div class="hero">
|
||||
<div class="hero-decoration"></div>
|
||||
<h1 class="glow">BUZZ</h1>
|
||||
<p>REAL-TIME QUIZ BUZZER SYSTEM</p>
|
||||
<div class="hero-badge">
|
||||
<div class="hero-badge-dot"></div>
|
||||
WEBSOCKET POWERED
|
||||
</div>
|
||||
</div>
|
||||
<div class="land-cards">
|
||||
<div class="land-card">
|
||||
<div class="land-card-icon">⬛</div>
|
||||
<h2>// HOST A SESSION</h2>
|
||||
<p>Create a room, configure teams and rules, then control the buzzer live.</p>
|
||||
<button class="btn btn-g" onclick="goSetup()">CREATE ROOM →</button>
|
||||
</div>
|
||||
<div class="land-card">
|
||||
<div class="land-card-icon">⬜</div>
|
||||
<h2>// JOIN A SESSION</h2>
|
||||
<p>Enter a room code and your name to join an existing session.</p>
|
||||
<div class="field">
|
||||
<label>ROOM CODE</label>
|
||||
<input id="ji-code" maxlength="8" placeholder="XXXXXX" style="letter-spacing:4px;text-transform:uppercase"
|
||||
<input id="ji-code" maxlength="8" placeholder="XXXXXX" style="letter-spacing:5px;text-transform:uppercase;font-size:20px;"
|
||||
oninput="this.value=this.value.toUpperCase()" />
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -65,7 +71,7 @@
|
||||
<!-- ══════════ SETUP ══════════ -->
|
||||
<div class="scr" id="s-setup">
|
||||
<div class="setup-wrap">
|
||||
<div>
|
||||
<div class="setup-header">
|
||||
<div class="setup-title">// NEW ROOM SETUP</div>
|
||||
<div class="setup-sub">Configure before creating — all settings are adjustable in-game too.</div>
|
||||
</div>
|
||||
@@ -81,28 +87,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="team-opts">
|
||||
<div class="field" style="margin-top:16px;">
|
||||
<div class="field" style="margin-top:20px;">
|
||||
<label>NUMBER OF TEAMS</label>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<input type="number" id="st-numteams" value="2" min="2" max="64" style="width:90px;"
|
||||
<div style="display:flex;align-items:center;gap:14px;">
|
||||
<input type="number" id="st-numteams" value="2" min="2" max="64" style="width:100px;"
|
||||
oninput="renderSetupTeamNames()" />
|
||||
<span style="font-size:12px;color:var(--dim);">2 – 64</span>
|
||||
<span style="font-size:12px;color:var(--dim);letter-spacing:1px;">2 – 64</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" style="margin-top:12px;">
|
||||
<label>TEAM NAMES <span style="color:var(--dim);font-size:9px;">(AUTO-FILLED WITH GREEK
|
||||
ALPHABET)</span></label>
|
||||
<div class="field" style="margin-top:14px;">
|
||||
<label>TEAM NAMES <span style="color:var(--dim);font-size:9px;letter-spacing:1px;">(AUTO-FILLED WITH GREEK ALPHABET)</span></label>
|
||||
<div id="setup-team-names"
|
||||
style="display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;padding-right:4px;">
|
||||
style="display:flex;flex-direction:column;gap:9px;max-height:240px;overflow-y:auto;padding-right:4px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tog-row" style="margin-top:12px;">
|
||||
<div class="tog-row" style="margin-top:14px;">
|
||||
<div>
|
||||
<div class="lbl">PLAYERS PICK OWN TEAM</div>
|
||||
<div class="lbl-sub">If off, moderator assigns teams manually</div>
|
||||
</div>
|
||||
<label class="tog"><input type="checkbox" id="st-playerpick" checked /><span
|
||||
class="tog-track"></span></label>
|
||||
<label class="tog"><input type="checkbox" id="st-playerpick" checked /><span class="tog-track"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,8 +125,7 @@
|
||||
<div class="lbl">SHOW FULL BUZZ ORDER TO PLAYERS</div>
|
||||
<div class="lbl-sub">If off, players only see if they were first</div>
|
||||
</div>
|
||||
<label class="tog"><input type="checkbox" id="st-showorder" checked /><span
|
||||
class="tog-track"></span></label>
|
||||
<label class="tog"><input type="checkbox" id="st-showorder" checked /><span class="tog-track"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -133,18 +136,17 @@
|
||||
<div class="lbl">ENABLE COUNTDOWN TIMER</div>
|
||||
<div class="lbl-sub">Auto-closes round when it hits zero</div>
|
||||
</div>
|
||||
<label class="tog"><input type="checkbox" id="st-usetimer" onchange="toggleTimerField()" /><span
|
||||
class="tog-track"></span></label>
|
||||
<label class="tog"><input type="checkbox" id="st-usetimer" onchange="toggleTimerField()" /><span class="tog-track"></span></label>
|
||||
</div>
|
||||
<div id="timer-field" style="display:none;margin-top:14px;">
|
||||
<div id="timer-field" style="display:none;margin-top:16px;">
|
||||
<div class="field">
|
||||
<label>SECONDS PER ROUND</label>
|
||||
<input type="number" id="st-timersec" value="30" min="5" max="600" style="max-width:160px;" />
|
||||
<input type="number" id="st-timersec" value="30" min="5" max="600" style="max-width:180px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;padding-bottom:32px;">
|
||||
<div style="display:flex;gap:12px;justify-content:flex-end;padding-bottom:40px;">
|
||||
<button class="btn btn-ghost" onclick="showScr('s-land')">← BACK</button>
|
||||
<button class="btn btn-g" onclick="createRoom()">CREATE ROOM →</button>
|
||||
</div>
|
||||
@@ -155,11 +157,11 @@
|
||||
<div class="scr" id="s-mod">
|
||||
<div class="mod-side">
|
||||
<div class="side-sec">
|
||||
<div class="side-label">ROOM</div>
|
||||
<div class="side-label">ROOM CODE</div>
|
||||
<div class="side-room-code glow" id="mod-code">──────</div>
|
||||
<div class="side-hint">SHARE WITH PLAYERS</div>
|
||||
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;">
|
||||
<button class="btn btn-ghost btn-sm" onclick="copyCode()">COPY</button>
|
||||
<div class="side-hint" style="margin-top:6px;">SHARE WITH PLAYERS</div>
|
||||
<div style="display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;">
|
||||
<button class="btn btn-ghost btn-sm" onclick="copyCode()">COPY CODE</button>
|
||||
<button class="btn btn-red btn-sm" onclick="openModal('m-end')">END ROOM</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,7 +173,7 @@
|
||||
<div class="timer-digits" id="mod-timer-disp">0:30</div>
|
||||
<div class="timer-controls">
|
||||
<button class="btn btn-g btn-sm" id="btn-timer-ss" onclick="modTimerToggle()">START</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick="modTimerReset()">↺</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick="modTimerReset()">↺ RESET</button>
|
||||
</div>
|
||||
<div class="timer-set-row">
|
||||
<span class="side-hint">SET</span>
|
||||
@@ -184,7 +186,7 @@
|
||||
|
||||
<!-- BUZZER CONTROLS -->
|
||||
<div class="side-sec">
|
||||
<div class="side-label">BUZZER</div>
|
||||
<div class="side-label">BUZZER CONTROLS</div>
|
||||
<div class="side-btn-group">
|
||||
<button class="btn btn-g btn-full" onclick="ws_send({type:'open_round'})">▶ OPEN ROUND</button>
|
||||
<button class="btn btn-ghost btn-full" onclick="ws_send({type:'close_round'})">■ CLOSE ROUND</button>
|
||||
@@ -194,7 +196,7 @@
|
||||
|
||||
<!-- ROOM CONTROLS -->
|
||||
<div class="side-sec">
|
||||
<div class="side-label">CONTROLS</div>
|
||||
<div class="side-label">ROOM CONTROLS</div>
|
||||
<div class="tog-row">
|
||||
<div class="lbl">LOCK ROOM</div>
|
||||
<label class="tog"><input type="checkbox" id="lock-room-tog"
|
||||
@@ -205,9 +207,8 @@
|
||||
<label class="tog"><input type="checkbox" id="lock-teams-tog"
|
||||
onchange="ws_send({type:'lock_teams',locked:this.checked})" /><span class="tog-track"></span></label>
|
||||
</div>
|
||||
<div style="margin-top:10px;display:flex;flex-direction:column;gap:5px;">
|
||||
<button class="btn btn-ghost btn-sm btn-full" onclick="ws_send({type:'reset_teams'})">CLEAR ALL
|
||||
TEAMS</button>
|
||||
<div style="margin-top:12px;display:flex;flex-direction:column;gap:6px;">
|
||||
<button class="btn btn-ghost btn-sm btn-full" onclick="ws_send({type:'reset_teams'})">CLEAR ALL TEAMS</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -238,7 +239,7 @@
|
||||
<div id="tab-players" style="display:none">
|
||||
<div class="panel">
|
||||
<div class="panel-title">
|
||||
<span>CONNECTED PLAYERS</span>
|
||||
CONNECTED PLAYERS
|
||||
<span class="tag tag-g" id="pcount-badge">0</span>
|
||||
</div>
|
||||
<div class="player-list" id="mod-plist">
|
||||
@@ -297,16 +298,16 @@
|
||||
<div class="sl">NUMBER OF TEAMS</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="number" id="ls-numteams" min="2" max="64" style="width:80px;"
|
||||
<input type="number" id="ls-numteams" min="2" max="64" style="width:84px;"
|
||||
onchange="pushSetting('numTeams',+this.value)" />
|
||||
<button class="btn btn-ghost btn-sm"
|
||||
onclick="pushSetting('numTeams',+document.getElementById('ls-numteams').value)">APPLY</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:18px;">
|
||||
<div class="lbl" style="margin-bottom:10px;">TEAM NAMES</div>
|
||||
<div style="margin-top:20px;">
|
||||
<div class="lbl" style="margin-bottom:12px;">TEAM NAMES</div>
|
||||
<div id="ls-team-names"
|
||||
style="display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;padding-right:4px;">
|
||||
style="display:flex;flex-direction:column;gap:9px;max-height:280px;overflow-y:auto;padding-right:4px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -330,6 +331,11 @@
|
||||
</div>
|
||||
|
||||
<div class="buzz-wrap">
|
||||
<div class="buzz-ripple" id="buzz-ripple" style="display:none;">
|
||||
<div class="buzz-ring"></div>
|
||||
<div class="buzz-ring"></div>
|
||||
<div class="buzz-ring"></div>
|
||||
</div>
|
||||
<button id="buzz-btn" class="s-closed" disabled onclick="doBuzz()">BUZZ</button>
|
||||
<div class="buzz-status" id="buzz-status">WAITING FOR ROUND</div>
|
||||
</div>
|
||||
@@ -351,8 +357,8 @@
|
||||
<div class="modal-bg" id="m-rejoin">
|
||||
<div class="modal">
|
||||
<h2>// REJOIN SESSION</h2>
|
||||
<p style="font-size:13px;color:var(--dim);">You have a saved mod session. Rejoin it?</p>
|
||||
<div style="font-size:24px;letter-spacing:6px;color:var(--g);font-weight:700;" id="m-rejoin-code"></div>
|
||||
<p style="font-size:13px;color:var(--dim);line-height:1.7;">You have a saved mod session. Rejoin it?</p>
|
||||
<div style="font-size:28px;letter-spacing:8px;color:var(--g);font-weight:700;text-shadow:0 0 12px var(--g);" id="m-rejoin-code"></div>
|
||||
<div class="modal-btns">
|
||||
<button class="btn btn-ghost btn-sm" onclick="clearMod();closeModal('m-rejoin')">DISCARD</button>
|
||||
<button class="btn btn-g btn-sm" onclick="doRejoin()">REJOIN →</button>
|
||||
@@ -363,7 +369,7 @@
|
||||
<div class="modal-bg" id="m-end">
|
||||
<div class="modal">
|
||||
<h2>// END ROOM</h2>
|
||||
<p style="font-size:13px;color:var(--dim);">All players will be disconnected and the room deleted.</p>
|
||||
<p style="font-size:13px;color:var(--dim);line-height:1.7;">All players will be disconnected and the room deleted.</p>
|
||||
<div class="modal-btns">
|
||||
<button class="btn btn-ghost btn-sm" onclick="closeModal('m-end')">CANCEL</button>
|
||||
<button class="btn btn-red btn-sm" onclick="ws_send({type:'end_room'});closeModal('m-end')">END ROOM</button>
|
||||
@@ -372,7 +378,10 @@
|
||||
</div>
|
||||
|
||||
<div id="toasts"></div>
|
||||
|
||||
<!-- GSAP -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user