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

Simplify player page — remove ripple effects, animations, and decorations for cleaner senior-friendly UI

Browse Source
This commit is contained in:
Keshav Anand
2026-04-08 18:57:40 -05:00
parent b69c442c90
commit ed46de26b3
2 changed files with 5 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/public/index.html
View File

@@ -327,14 +327,8 @@
</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 class="spacebar-hint" id="spacebar-hint">SPACEBAR TO BUZZ</div>
</div>
<div class="p-panel">

44
src/public/script.js
View File

@@ -548,21 +548,16 @@ function renderTeamPicker(){
btn.className='team-btn'+(isMine?' mine':'');
btn.style.borderColor=isMine?color:'var(--border2)';
btn.style.color=isMine?color:'var(--text)';
btn.innerHTML=`<div>${esc(s.teamNames[i]??greekName(i))}</div><div class="tb-count">${members.length} player${members.length!==1?'s':''}</div>`;
btn.innerHTML=`<div style="font-size:24px;">${esc(s.teamNames[i]??greekName(i))}</div><div style="font-size:12px;color:var(--dim);margin-top:4px;">${members.length} player${members.length!==1?'s':''}</div>`;
btn.onclick=()=>ws_send({type:'pick_team',teamIndex:i});
grid.appendChild(btn);
if(typeof gsap!=='undefined'){
gsap.fromTo(btn,{opacity:0,y:10},{opacity:1,y:0,duration:0.3,ease:'power2.out',delay:i*0.04});
}
}
}
let _lastBuzzState='';
function renderPlayerBuzzer(){
if(!room)return;
const btn=document.getElementById('buzz-btn');
const sts=document.getElementById('buzz-status');
const ripple=document.getElementById('buzz-ripple');
const bz=room.buzzerState;
const already=bz.buzzOrder.includes(myId);
const isFirst=bz.buzzOrder[0]===myId;
@@ -572,49 +567,33 @@ function renderPlayerBuzzer(){
if(!bz.roundOpen){
newState='closed';
btn.className='s-closed';btn.disabled=true;sts.textContent='WAITING FOR ROUND';
ripple.style.display='none';
if(hint)hint.classList.remove('visible');
} else if(isFirst){
newState='first';
btn.className='s-first';btn.disabled=false;sts.textContent='YOU BUZZED FIRST!';
ripple.style.display='flex';
if(hint)hint.classList.remove('visible');
} else if(already){
const pos=bz.buzzOrder.indexOf(myId)+1;
newState='buzzed';
btn.className='s-buzzed';btn.disabled=true;sts.textContent='BUZZED — #'+pos+' IN ORDER';
ripple.style.display='none';
if(hint)hint.classList.remove('visible');
} else if(room.settings.buzzerLockout&&bz.buzzOrder.length>0){
newState='locked';
btn.className='s-locked';btn.disabled=true;sts.textContent='BUZZER LOCKED OUT';
ripple.style.display='none';
if(hint)hint.classList.remove('visible');
} else {
newState='open';
btn.className='s-open';btn.disabled=false;sts.textContent='ROUND OPEN — BUZZ!';
ripple.style.display='flex';
if(hint)hint.classList.add('visible');
}
// Animate state transitions
if(newState!==_lastBuzzState && typeof gsap!=='undefined'){
if(newState==='first'){
gsap.fromTo(btn,{scale:0.88},{scale:1,duration:0.5,ease:'back.out(2.5)'});
gsap.fromTo(sts,{opacity:0,y:6},{opacity:1,y:0,duration:0.4,ease:'power2.out'});
} else if(newState==='open' && _lastBuzzState==='closed'){
gsap.fromTo(btn,{scale:0.95},{scale:1,duration:0.4,ease:'back.out(1.5)'});
} else if(newState==='closed'){
gsap.to(btn,{scale:0.97,duration:0.15,yoyo:true,repeat:1,ease:'power2.inOut'});
}
}
_lastBuzzState=newState;
}
function renderRoster(){
if(!room)return;
const el=document.getElementById('p-roster');
if(room.players.length===0){el.innerHTML='<div style="font-size:13px;color:var(--dim);padding:12px;letter-spacing:1px;">No players yet.</div>';return;}
if(room.players.length===0){el.innerHTML='<div style="font-size:18px;color:var(--dim);padding:20px;">No players yet.</div>';return;}
el.innerHTML='';
room.players.forEach(p=>{
const isMe=p.id===myId;
@@ -623,9 +602,9 @@ function renderRoster(){
const row=document.createElement('div');
row.className='roster-row'+(isMe?' roster-me':'');
row.innerHTML=`
<div class="roster-dot" style="background:${p.isConnected?(isMe?'var(--g)':color):'var(--border2)'}"></div>
<div style="flex:1">${p.id}${isMe?' <span style="font-size:11px;color:var(--dim);letter-spacing:1px;">(YOU)</span>':''}</div>
${teamName?`<div style="font-size:12px;color:${color};letter-spacing:0.5px;">${esc(teamName)}</div>`:''}
<div class="roster-dot" style="width:16px;height:16px;border-radius:50%;background:${p.isConnected?(isMe?'var(--g)':color):'var(--border2)'}"></div>
<div style="font-size:20px;font-weight:700;">#${p.id}</div>
${teamName?`<div style="font-size:14px;color:${color};margin-top:2px;">${esc(teamName)}</div>`:''}
`;
el.appendChild(row);
});
@@ -641,24 +620,11 @@ function addFeed(evt){
div.style.borderLeftColor=isFirst?'var(--yellow)':color;
div.innerHTML=`<strong>#${evt.playerId}</strong>${teamStr} buzzed${isFirst?' <span style="color:var(--yellow);font-weight:700;"> — FIRST!</span>':''}`;
feed.prepend(div);
if(typeof gsap!=='undefined'){
gsap.fromTo(div,
{opacity:0,x:-20,borderLeftWidth:'3px'},
{opacity:1,x:0,duration:0.38,ease:'power3.out'}
);
}
while(feed.children.length>30)feed.removeChild(feed.lastChild);
}
function doBuzz(){
ws_send({type:'buzz'});
// Immediate haptic-like feedback
if(typeof gsap!=='undefined'){
const btn=document.getElementById('buzz-btn');
gsap.to(btn,{scale:0.91,duration:0.08,ease:'power2.in',onComplete:()=>{
gsap.to(btn,{scale:1,duration:0.25,ease:'back.out(2.5)'});
}});
}
}
// ══════════════════════════════════════════════════════