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

src/public/index.html

@@ -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">

src/public/script.js

@@ -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 class="roster-dot" style="width:16px;height:16px;border-radius:50%;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>
+          <div style="font-size:20px;font-weight:700;">#${p.id}</div>
-          ${teamName?`<div style="font-size:12px;color:${color};letter-spacing:0.5px;">${esc(teamName)}</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)'});
-        }});
-    }
 }
 
 // ══════════════════════════════════════════════════════