KeshavAnandCode/buzzer-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign mod UI — combine round controls into toggle system with pause/resume

Browse Source
This commit is contained in:
Keshav Anand
2026-04-08 19:02:37 -05:00
parent 9c9a95206d
commit 01cd50abf7
2 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/public/index.html
View File

@@ -182,11 +182,11 @@
<!-- BUZZER CONTROLS -->
<div class="side-sec">
<div class="side-label">BUZZER CONTROLS</div>
<div class="side-label">ROUND CONTROL</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>
<button class="btn btn-yellow btn-full" onclick="ws_send({type:'reset_buzzer'})">↺ RESET BUZZER</button>
<button class="btn btn-g btn-full" id="mod-round-btn" onclick="toggleRound()">▶ OPEN ROUND</button>
<button class="btn btn-ghost btn-full" id="mod-resume-btn" style="display:none;" onclick="resumeRound()">▶ RESUME ROUND</button>
<button class="btn btn-yellow btn-full" onclick="resetBuzzer()">↺ RESET BUZZER</button>
</div>
</div>

59
src/public/script.js
View File

@@ -73,17 +73,26 @@ function handle(msg){
break;
case 'room_update':
room=msg.room;
if(role==='mod')renderMod();else renderPlayer();
if(role==='mod'){renderMod();renderRoundButtons();}else renderPlayer();
break;
case 'settings_updated':
room=msg.room;
if(role==='mod'){renderMod();renderModSettings();}else renderPlayer();
if(role==='mod'){renderMod();renderRoundButtons();renderModSettings();}else renderPlayer();
break;
case 'round_open':
case 'round_open':
room=msg.room;
if(role==='mod')renderMod();
if(role==='mod'){renderMod();renderRoundButtons();}
else{renderPlayerBuzzer();startPlayerTimer();toast('ROUND OPEN','ok');}
break;
case 'round_closed':
room=msg.room;
if(role==='mod'){renderMod();renderRoundButtons();}
else{renderPlayerBuzzer();stopPlayerTimer();toast('ROUND CLOSED','warn');}
break;
case 'buzzer_reset':
room=msg.room;
if(role==='mod'){renderMod();renderRoundButtons();}else renderPlayerBuzzer();
break;
case 'round_closed':
room=msg.room;
if(role==='mod')renderMod();
@@ -93,9 +102,9 @@ function handle(msg){
room=msg.room;
if(role==='mod')renderMod();else renderPlayerBuzzer();
break;
case 'buzz_event':
case 'buzz_event':
room=msg.room;
if(role==='mod')renderModBuzz(msg);else{renderPlayerBuzzer();addFeed(msg);}
if(role==='mod'){renderMod();renderRoundButtons();}else{renderPlayerBuzzer();addFeed(msg);}
break;
case 'buzz_rejected':
toast(msg.reason,'warn');break;
@@ -272,7 +281,6 @@ function createRoom(){
// MOD TIMER
// ══════════════════════════════════════════════════════
function fmtTime(s){return Math.floor(s/60)+':'+(s%60<10?'0':'')+(s%60);}
function modTimerLoad(){
modTimerRemaining=Math.max(5,parseInt(document.getElementById('mod-timer-set').value)||30);
modTimerRunning=false;
@@ -330,6 +338,42 @@ function broadcastTimerToPlayers(sec,running){
}catch{}
}
// ══════════════════════════════════════════════════════
// MOD ROUND CONTROL
// ══════════════════════════════════════════════════════
function toggleRound(){
if(room.buzzerState.roundOpen){
ws_send({type:'close_round'});
} else {
ws_send({type:'open_round'});
}
}
function resumeRound(){
ws_send({type:'open_round'});
}
function renderRoundButtons(){
const openBtn=document.getElementById('mod-round-btn');
const resumeBtn=document.getElementById('mod-resume-btn');
if(room.buzzerState.roundOpen){
openBtn.innerHTML='■ CLOSE ROUND';
openBtn.className='btn btn-red btn-full';
resumeBtn.style.display='block';
if(typeof gsap!=='undefined'){
gsap.fromTo(resumeBtn,{opacity:0,y:4},{opacity:1,y:0,duration:0.3,ease:'power2.out'});
}
} else {
openBtn.innerHTML='▶ OPEN ROUND';
openBtn.className='btn btn-g btn-full';
resumeBtn.style.display='none';
if(typeof gsap!=='undefined'){
gsap.to(resumeBtn,{opacity:0,y:-4,duration:0.3,ease:'power2.in',onComplete:()=>{resumeBtn.style.display='none';}});
}
}
}
// ══════════════════════════════════════════════════════
// MOD RENDER
// ══════════════════════════════════════════════════════
@@ -351,6 +395,7 @@ function renderMod(){
renderModBuzz(null);
renderModPlayerList();
renderModTeams();
renderRoundButtons();
}
function renderModBuzz(evt){