Update join logic — remove playerName from join request, store numeric ID only

Remove name input from landing page — players assigned numeric IDs instead
Increase font sizes for senior citizen accessibility
2026-04-08 18:53:05 -05:00 · 2026-04-08 18:52:51 -05:00 · 2026-04-08 18:41:31 -05:00 · 2026-03-26 00:17:59 -05:00 · 2026-03-25 21:14:15 +00:00 · 2026-03-25 21:08:30 +00:00
7 changed files with 1480 additions and 948 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,34 +1,6 @@
-# dependencies (bun install)
 node_modules
-
-# output
-out
 dist
-*.tgz
-
-# code coverage
-coverage
-*.lcov
-
-# logs
-logs
-_.log
-report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# caches
-.eslintcache
-.cache
-*.tsbuildinfo
-
-# IntelliJ based IDEs
-.idea
-
-# Finder (MacOS) folder config
 .DS_Store
+server/public
+vite.config.ts.*
+*.tar.gz
--- a/bun.lock
+++ b/bun.lock
@@ -1,15 +1,15 @@
 {
  "lockfileVersion": 1,
-  "configVersion": 1,
+  "configVersion": 0,
  "workspaces": {
    "": {
-      "name": "buzzer",
+      "name": "rest-express",
      "dependencies": {
        "hono": "^4.7.7",
      },
    },
  },
  "packages": {
-    "hono": ["hono@4.12.8", "", {}, "sha512-VJCEvtrezO1IAR+kqEYnxUOoStaQPGrCmX3j4wDTNOcD1uRPFpGlwQUIW8niPuvHXaTUxeOUl5MMDGrl+tmO9A=="],
+    "hono": ["hono@4.12.9", "", {}, "sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA=="],
  }
 }
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -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,27 +32,30 @@
    <!-- ══════════ 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>
+          <p>Enter a room code to join an existing session. You'll be assigned a numeric ID.</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">
-            <label>YOUR NAME</label>
-            <input id="ji-name" maxlength="24" placeholder="Enter name…" />
-          </div>
          <button class="btn btn-g btn-full" onclick="joinRoom()">JOIN ROOM →</button>
        </div>
      </div>
@@ -65,7 +67,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 +83,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 +121,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 +132,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 +153,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 +169,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 +182,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 +192,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 +203,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 +235,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 +294,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,8 +327,14 @@
      </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">
@@ -351,8 +354,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 +366,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,6 +375,9 @@
  </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>

--- a/src/public/script.js
+++ b/src/public/script.js
@@ -2,25 +2,13 @@
 // GREEK ALPHABET (mirrors server for display)
 // ══════════════════════════════════════════════════════
 const GREEK = ["Alpha","Beta","Gamma","Delta","Epsilon","Zeta","Eta","Theta","Iota","Kappa","Lambda","Mu","Nu","Xi","Omicron","Pi","Rho","Sigma","Tau","Upsilon","Phi","Chi","Psi","Omega"];
-function toRoman(n) {
-    const vals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
-    const syms = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
-    let out = "";
-    for (let i = 0; i < vals.length; i++) while (n >= vals[i]) { out += syms[i]; n -= vals[i]; }
-    return out;
-}
-function greekName(i) {
-    const cycle = Math.floor(i / GREEK.length);
-    return cycle === 0 ? GREEK[i % GREEK.length] : `${GREEK[i % GREEK.length]} ${toRoman(cycle + 1)}`;
-}
+function toRoman(n){const vals=[1000,900,500,400,100,90,50,40,10,9,5,4,1];const syms=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"];let out="";for(let i=0;i<vals.length;i++)while(n>=vals[i]){out+=syms[i];n-=vals[i];}return out;}
+function greekName(i){const cycle=Math.floor(i/GREEK.length);return cycle===0?GREEK[i%GREEK.length]:`${GREEK[i%GREEK.length]} ${toRoman(cycle+1)}`;}

 // ══════════════════════════════════════════════════════
 // COLORS — HSL wheel, infinite unique colors
 // ══════════════════════════════════════════════════════
-function teamColor(i) {
-    const hue = (i * 137.508) % 360; // golden angle spacing
-    return `hsl(${hue},90%,58%)`;
-}
+function teamColor(i){const hue=(i*137.508)%360;return `hsl(${hue},90%,58%)`;}

 // ══════════════════════════════════════════════════════
 // STATE
@@ -36,7 +24,7 @@ let playerTimerRemaining = 0, playerTimerInterval = null;
 const saveMod=(id,s)=>localStorage.setItem('mod',JSON.stringify({id,s}));
 const loadMod=()=>{try{return JSON.parse(localStorage.getItem('mod')||'null');}catch{return null;}};
 const clearMod=()=>{localStorage.removeItem('mod');document.getElementById('rejoin-bar').style.display='none';};
-const savePlay = (rid, pid, name) => localStorage.setItem('play', JSON.stringify({ rid, pid, name }));
+const savePlay=(rid,pid)=>localStorage.setItem('play',JSON.stringify({rid,pid}));
 const loadPlay=()=>{try{return JSON.parse(localStorage.getItem('play')||'null');}catch{return null;}};

 // ══════════════════════════════════════════════════════
@@ -56,11 +44,9 @@ function schedReconn() {
    clearTimeout(reconnTimer);
    const d=Math.min(8000,500*Math.pow(1.5,reconnAttempts++));
    reconnTimer=setTimeout(()=>{
-        if (role === 'mod') {
-            const m = loadMod(); if (m) connect(() => ws_send({ type: 'mod_rejoin', roomId: m.id, modSecret: m.s }));
-        } else if (role === 'player' && myId) {
-            const p = loadPlay(); if (p) connect(() => ws_send({ type: 'join_room', roomId: p.rid, playerName: p.name, playerId: p.pid }));
-        } else connect(null);
+        if(role==='mod'){const m=loadMod();if(m)connect(()=>ws_send({type:'mod_rejoin',roomId:m.id,modSecret:m.s}));}
+        else if(role==='player'&&myId){const p=loadPlay();if(p)connect(()=>ws_send({type:'join_room',roomId:p.rid,playerName:p.name,playerId:p.pid}));}
+        else connect(null);
    },d);
 }

@@ -82,7 +68,7 @@ function handle(msg) {
            break;
        case 'joined':
            myId=msg.playerId;room=msg.room;role='player';
-            savePlay(room.id, myId, document.getElementById('ji-name').value || loadPlay()?.name || '');
+            savePlay(room.id,myId);
            showScr('s-player');renderPlayer();
            break;
        case 'room_update':
@@ -130,19 +116,53 @@ function handle(msg) {
 }

 // ══════════════════════════════════════════════════════
-// SCREENS
+// SCREENS — with GSAP transitions
 // ══════════════════════════════════════════════════════
+let _currentScr = null;
 function showScr(id){
-    document.querySelectorAll('.scr').forEach(s => { s.classList.remove('on'); s.style.display = 'none'; });
-    const el = document.getElementById(id);
-    el.style.display = 'flex'; el.classList.add('on');
+    const prev = _currentScr;
+    const next = document.getElementById(id);
+
+    // Hide all screens
+    document.querySelectorAll('.scr').forEach(s=>{
+        if(s.id !== id){
+            s.style.display='none';
+            s.classList.remove('on');
+        }
+    });
+
+    next.style.display='flex';
+    next.classList.add('on');
+    _currentScr = id;
+
+    // GSAP entrance
+    if(typeof gsap !== 'undefined'){
+        gsap.fromTo(next,
+            {opacity:0, y:prev?14:22},
+            {opacity:1, y:0, duration:0.45, ease:'power3.out'}
+        );
+        // stagger children
+        const children = next.querySelectorAll(':scope > *');
+        gsap.fromTo(children,
+            {opacity:0, y:16},
+            {opacity:1, y:0, duration:0.5, stagger:0.06, ease:'power3.out', delay:0.05}
+        );
+    } else {
+        next.style.opacity='1';
+    }
+
+    // Update room chip
    const chip=document.getElementById('hdr-room');
    if(room?.id){chip.textContent='['+room.id+']';chip.style.display='block';}
    else chip.style.display='none';
 }
+
 function setConn(on){
    document.getElementById('cdot').className='conn-dot'+(on?' on':'');
    document.getElementById('clbl').textContent=on?'ONLINE':'OFFLINE';
+    if(on && typeof gsap!=='undefined'){
+        gsap.fromTo('#clbl',{opacity:0.3},{opacity:1,duration:0.4});
+    }
 }

 // ══════════════════════════════════════════════════════
@@ -151,10 +171,8 @@ function setConn(on) {
 function goSetup(){renderSetupTeamNames();showScr('s-setup');}
 function joinRoom(){
    const code=document.getElementById('ji-code').value.trim().toUpperCase();
-    const name = document.getElementById('ji-name').value.trim();
    if(!code){toast('Enter room code','err');return;}
-    if (!name) { toast('Enter your name', 'err'); return; }
-    connect(() => ws_send({ type: 'join_room', roomId: code, playerName: name }));
+    connect(()=>ws_send({type:'join_room',roomId:code}));
 }
 function openRejoin(){
    const m=loadMod();if(!m)return;
@@ -175,8 +193,23 @@ function segSelect(groupId, el) {
    el.classList.add('active');
    if(groupId==='seg-mode'){
        const isTeams=el.dataset.v==='teams';
-        document.getElementById('team-opts').style.display = isTeams ? 'flex' : 'none';
-        document.getElementById('team-opts').style.flexDirection = 'column';
+        const teamOpts=document.getElementById('team-opts');
+        if(isTeams){
+            teamOpts.style.display='flex';
+            teamOpts.style.flexDirection='column';
+            if(typeof gsap!=='undefined'){
+                gsap.fromTo(teamOpts,{opacity:0,y:-8},{opacity:1,y:0,duration:0.3,ease:'power2.out'});
+            }
+        } else {
+            if(typeof gsap!=='undefined'){
+                gsap.to(teamOpts,{opacity:0,y:-8,duration:0.2,ease:'power2.in',onComplete:()=>{
+                    teamOpts.style.display='none';
+                    teamOpts.style.opacity='1';
+                }});
+            } else {
+                teamOpts.style.display='none';
+            }
+        }
    }
 }

@@ -187,10 +220,10 @@ function renderSetupTeamNames() {
    container.innerHTML='';
    for(let i=0;i<n;i++){
        const row=document.createElement('div');
-        row.style.cssText = 'display:flex;align-items:center;gap:8px;';
+        row.style.cssText='display:flex;align-items:center;gap:10px;';
        const dot=document.createElement('div');
        const c=teamColor(i);
-        dot.style.cssText = `width:11px;height:11px;border-radius:50%;background:${c};box-shadow:0 0 6px ${c};flex-shrink:0;`;
+        dot.style.cssText=`width:12px;height:12px;border-radius:50%;background:${c};box-shadow:0 0 7px ${c};flex-shrink:0;`;
        const inp=document.createElement('input');
        inp.type='text';inp.maxLength=32;
        inp.value=existing[i]||greekName(i);
@@ -201,7 +234,20 @@ function renderSetupTeamNames() {
 }

 function toggleTimerField(){
-    document.getElementById('timer-field').style.display = document.getElementById('st-usetimer').checked ? 'block' : 'none';
+    const field=document.getElementById('timer-field');
+    const show=document.getElementById('st-usetimer').checked;
+    if(show){
+        field.style.display='block';
+        if(typeof gsap!=='undefined'){
+            gsap.fromTo(field,{opacity:0,y:-6},{opacity:1,y:0,duration:0.25,ease:'power2.out'});
+        }
+    } else {
+        if(typeof gsap!=='undefined'){
+            gsap.to(field,{opacity:0,duration:0.2,onComplete:()=>{field.style.display='none';field.style.opacity='1';}});
+        } else {
+            field.style.display='none';
+        }
+    }
 }

 function createRoom(){
@@ -240,7 +286,6 @@ function modTimerReset() {
    modTimerRemaining=Math.max(5,parseInt(document.getElementById('mod-timer-set').value)||30);
    document.getElementById('btn-timer-ss').textContent='START';
    renderModTimerDisplay();
-    // broadcast reset to players
    broadcastTimerToPlayers(modTimerRemaining,false);
 }
 function modTimerToggle(){
@@ -262,10 +307,14 @@ function modTimerToggle() {
                document.getElementById('btn-timer-ss').textContent='START';
                ws_send({type:'close_round'});
                toast('TIME UP — round closed','warn');
+                if(typeof gsap!=='undefined'){
+                    gsap.to('#mod-timer-disp',{scale:1.08,duration:0.1,yoyo:true,repeat:3,ease:'power2.inOut'});
+                }
            }
        },1000);
    }
 }
+
 function renderModTimerDisplay(){
    const el=document.getElementById('mod-timer-disp');
    const s=modTimerRemaining;
@@ -273,10 +322,7 @@ function renderModTimerDisplay() {
    el.className='timer-digits'+(s<=5?' danger':s<=10?' warn':'');
 }

-// We sync timer to players via a side-channel: store in sessionStorage and poll
-// (pure client-side sync — no extra server message needed)
 function broadcastTimerToPlayers(sec,running){
-    // encode into a BroadcastChannel so other tabs (players on same device) see it
    try{
        const bc=new BroadcastChannel('buzzer_timer');
        bc.postMessage({sec,running});
@@ -332,6 +378,13 @@ function renderModBuzz(evt) {
          </div>
        `;
        listEl.appendChild(div);
+        // GSAP entrance for new entries
+        if(typeof gsap!=='undefined'){
+            gsap.fromTo(div,
+                {opacity:0,x:-24},
+                {opacity:1,x:0,duration:0.4,ease:'power3.out',delay:idx*0.05}
+            );
+        }
    });
 }

@@ -350,13 +403,13 @@ function renderModPlayerList() {
                const tn=room.settings.teamNames[i]??greekName(i);
                opts+=`<option value="${i}" ${p.teamIndex===i?'selected':''}>${esc(tn)}</option>`;
            }
-            teamSel = `<select style="margin-top:6px;font-size:12px;padding:4px 8px;" onchange="ws_send({type:'assign_team',playerId:'${p.id}',teamIndex:+this.value===-1?null:+this.value})">${opts}</select>`;
+            teamSel=`<select style="margin-top:8px;font-size:12px;padding:6px 10px;" onchange="ws_send({type:'assign_team',playerId:'${p.id}',teamIndex:+this.value===-1?null:+this.value})">${opts}</select>`;
        }
        const row=document.createElement('div');
        row.className='pl-row'+(p.isConnected?'':' offline');
        row.innerHTML=`
          <div class="pl-info" style="flex:1;min-width:0;">
-        <div class="pl-name">${esc(p.name)} ${p.isConnected ? '' : '<span class="tag tag-red" style="font-size:9px">OFFLINE</span>'}</div>
+            <div class="pl-name">${esc(p.name)} ${p.isConnected?'':`<span class="tag tag-red" style="font-size:9px;padding:2px 6px;">OFFLINE</span>`}</div>
            ${teamName?`<div class="pl-meta" style="color:${color}">${esc(teamName)}</div>`:'<div class="pl-meta">No team</div>'}
            ${teamSel}
          </div>
@@ -385,6 +438,9 @@ function renderModTeams() {
          <div class="tc-m">${members.map(p=>esc(p.name)).join('<br>')||'—'}</div>
        `;
        grid.appendChild(card);
+        if(typeof gsap!=='undefined'){
+            gsap.fromTo(card,{opacity:0,scale:0.92},{opacity:1,scale:1,duration:0.35,ease:'back.out(1.2)',delay:i*0.04});
+        }
    }
 }

@@ -409,10 +465,10 @@ function renderLiveTeamNames() {
    container.innerHTML='';
    for(let i=0;i<room.settings.numTeams;i++){
        const row=document.createElement('div');
-        row.style.cssText = 'display:flex;align-items:center;gap:8px;';
+        row.style.cssText='display:flex;align-items:center;gap:10px;';
        const dot=document.createElement('div');
        const c=teamColor(i);
-        dot.style.cssText = `width:11px;height:11px;border-radius:50%;background:${c};flex-shrink:0;`;
+        dot.style.cssText=`width:12px;height:12px;border-radius:50%;background:${c};flex-shrink:0;`;
        const inp=document.createElement('input');
        inp.type='text';inp.maxLength=32;
        inp.value=room.settings.teamNames[i]??greekName(i);
@@ -453,9 +509,7 @@ function initPlayerTimer() {
    }catch{}
 }
 function stopPlayerTimer(){clearInterval(playerTimerInterval);}
-function startPlayerTimer() {
-    // timer already synced via BroadcastChannel
-}
+function startPlayerTimer(){}
 function renderPlayerTimer(){
    const el=document.getElementById('p-timer');
    const s=playerTimerRemaining;
@@ -492,39 +546,75 @@ function renderTeamPicker() {
        const isMine=me?.teamIndex===i;
        const btn=document.createElement('button');
        btn.className='team-btn'+(isMine?' mine':'');
-        btn.style.borderColor = isMine ? color : 'var(--border)';
+        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.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;
+
+    const hint=document.getElementById('spacebar-hint');
+    let newState='';
    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){
-        btn.className = 's-first'; btn.disabled = false; sts.textContent = '⚡ YOU BUZZED FIRST!';
+        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:10px">No players yet.</div>'; return; }
+    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;}
    el.innerHTML='';
    room.players.forEach(p=>{
        const isMe=p.id===myId;
@@ -533,9 +623,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(--border)'}"></div>
-      <div style="flex:1">${esc(p.name)}${isMe ? ' <span style="font-size:11px;color:var(--dim)">(YOU)</span>' : ''}</div>
-      ${teamName ? `<div style="font-size:12px;color:${color}">${esc(teamName)}</div>` : ''}
+          <div class="roster-dot" style="background:${p.isConnected?(isMe?'var(--g)':color):'var(--border2)'}"></div>
+          <div style="flex:1">${esc(p.name)}${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>`:''}
        `;
        el.appendChild(row);
    });
@@ -548,13 +638,28 @@ function addFeed(evt) {
    const teamStr=(room?.settings.mode==='teams'&&evt.teamIndex!==null)?` [${esc(room.settings.teamNames[evt.teamIndex]??'')}]`:'';
    const div=document.createElement('div');
    div.className='feed-entry'+(isFirst?' first':'');
-    div.style.borderColor = isFirst ? 'var(--yellow)' : color;
-    div.innerHTML = `<strong>${esc(evt.playerName)}</strong>${teamStr} buzzed${isFirst ? ' <span style="color:var(--yellow)">— FIRST!</span>' : ''}`;
+    div.style.borderLeftColor=isFirst?'var(--yellow)':color;
+    div.innerHTML=`<strong>${esc(evt.playerName)}</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' }); }
+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)'});
+        }});
+    }
+}

 // ══════════════════════════════════════════════════════
 // TABS
@@ -569,13 +674,35 @@ function setTab(name, el) {
    if(name==='players')renderModPlayerList();
    if(name==='teams')renderModTeams();
    if(name==='settings')renderModSettings();
+    // Animate tab content
+    const activeTab=document.getElementById('tab-'+name);
+    if(activeTab&&typeof gsap!=='undefined'){
+        gsap.fromTo(activeTab,{opacity:0,y:8},{opacity:1,y:0,duration:0.3,ease:'power2.out'});
+    }
 }

 // ══════════════════════════════════════════════════════
 // MODALS / TOAST / UTIL
 // ══════════════════════════════════════════════════════
-function openModal(id) { document.getElementById(id).classList.add('on'); }
-function closeModal(id) { document.getElementById(id).classList.remove('on'); }
+function openModal(id){
+    const bg=document.getElementById(id);
+    bg.classList.add('on');
+    if(typeof gsap!=='undefined'){
+        const modal=bg.querySelector('.modal');
+        gsap.fromTo(bg,{opacity:0},{opacity:1,duration:0.25,ease:'power2.out'});
+        gsap.fromTo(modal,{scale:0.88,y:20,opacity:0},{scale:1,y:0,opacity:1,duration:0.35,ease:'back.out(1.5)'});
+    }
+}
+function closeModal(id){
+    const bg=document.getElementById(id);
+    if(typeof gsap!=='undefined'){
+        const modal=bg.querySelector('.modal');
+        gsap.to(modal,{scale:0.92,opacity:0,duration:0.2,ease:'power2.in'});
+        gsap.to(bg,{opacity:0,duration:0.25,ease:'power2.in',onComplete:()=>bg.classList.remove('on')});
+    } else {
+        bg.classList.remove('on');
+    }
+}
 function copyCode(){
    if(!room)return;
    navigator.clipboard.writeText(room.id).then(()=>toast('Code copied','ok'));
@@ -584,8 +711,18 @@ function toast(msg, type = '') {
    const el=document.createElement('div');
    el.className='toast '+type;el.textContent=msg;
    document.getElementById('toasts').appendChild(el);
+    if(typeof gsap!=='undefined'){
+        gsap.fromTo(el,
+            {opacity:0,x:20},
+            {opacity:1,x:0,duration:0.3,ease:'power3.out'}
+        );
+        setTimeout(()=>{
+            gsap.to(el,{opacity:0,x:12,duration:0.3,ease:'power2.in',onComplete:()=>el.remove()});
+        },2700);
+    } else {
        setTimeout(()=>{ el.style.transition='opacity .3s';el.style.opacity='0';setTimeout(()=>el.remove(),300);},2700);
    }
+}
 function esc(s){
    return String(s??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 }
@@ -600,15 +737,36 @@ document.addEventListener('keydown', e => {
        if(tag==='INPUT'||tag==='TEXTAREA'||tag==='SELECT')return;
        e.preventDefault();
        const btn=document.getElementById('buzz-btn');
-        if (!btn.disabled) { btn.click(); btn.style.transform = 'scale(.93)'; setTimeout(() => btn.style.transform = '', 120); }
+        if(!btn.disabled){btn.click();}
    }
 });

 // close modals on backdrop click
 document.querySelectorAll('.modal-bg').forEach(bg=>{
-    bg.addEventListener('click', e => { if (e.target === bg) bg.classList.remove('on'); });
+    bg.addEventListener('click',e=>{if(e.target===bg)closeModal(bg.id);});
 });

+// ══════════════════════════════════════════════════════
+// LANDING PAGE ENTRANCE ANIMATION
+// ══════════════════════════════════════════════════════
+function animateLanding(){
+    if(typeof gsap==='undefined')return;
+    const h1=document.querySelector('#s-land .hero h1');
+    const sub=document.querySelector('#s-land .hero p');
+    const badge=document.querySelector('#s-land .hero-badge');
+    const cards=document.querySelectorAll('#s-land .land-card');
+    const rejoin=document.getElementById('rejoin-bar');
+
+    const tl=gsap.timeline({delay:0.1});
+    tl.fromTo(h1,{opacity:0,scale:0.85,y:24},{opacity:1,scale:1,y:0,duration:0.65,ease:'back.out(1.6)'});
+    tl.fromTo(sub,{opacity:0,y:12},{opacity:1,y:0,duration:0.4,ease:'power3.out'},'-=0.35');
+    if(badge)tl.fromTo(badge,{opacity:0,y:8},{opacity:1,y:0,duration:0.35,ease:'power2.out'},'-=0.25');
+    tl.fromTo(cards,{opacity:0,y:30},{opacity:1,y:0,duration:0.5,stagger:0.1,ease:'power3.out'},'-=0.2');
+    if(rejoin&&rejoin.style.display!=='none'){
+        tl.fromTo(rejoin,{opacity:0},{opacity:1,duration:0.4},'-=0.1');
+    }
+}
+
 // ══════════════════════════════════════════════════════
 // INIT
 // ══════════════════════════════════════════════════════
@@ -622,4 +780,6 @@ window.addEventListener('DOMContentLoaded', () => {
    // init seg mode display
    const modeBtn=document.querySelector('#seg-mode .seg-opt.active');
    if(modeBtn)segSelect('seg-mode',modeBtn);
+    // animate landing after GSAP loads
+    setTimeout(animateLanding,80);
 });
--- a/src/public/styles.css
+++ b/src/public/styles.css
--- a/src/server.ts
+++ b/src/server.ts
@@ -1,21 +1,30 @@
 import { readFileSync } from "fs";
 import { handleMessage, handleClose } from "./ws-handler";

-const HTML = readFileSync("./src/public/index.html", "utf-8");
-const CSS  = readFileSync("./src/public/styles.css",  "utf-8");
-const JS   = readFileSync("./src/public/script.js",   "utf-8");
+const PORT = parseInt(process.env.PORT || "3009", 10);

 const server = Bun.serve({
-  port: 3009,
+  port: PORT,
+  hostname: "0.0.0.0",
  fetch(req, server) {
    const url = new URL(req.url);
    if (url.pathname === "/ws") {
      if (!server.upgrade(req)) return new Response("WS upgrade failed", { status: 400 });
      return undefined as any;
    }
-    if (url.pathname === "/styles.css") return new Response(CSS,  { headers: { "Content-Type": "text/css" } });
-    if (url.pathname === "/script.js")  return new Response(JS,   { headers: { "Content-Type": "text/javascript" } });
-    return new Response(HTML, { headers: { "Content-Type": "text/html; charset=utf-8" } });
+    if (url.pathname === "/styles.css") {
+      return new Response(readFileSync("./src/public/styles.css", "utf-8"), {
+        headers: { "Content-Type": "text/css" },
+      });
+    }
+    if (url.pathname === "/script.js") {
+      return new Response(readFileSync("./src/public/script.js", "utf-8"), {
+        headers: { "Content-Type": "text/javascript" },
+      });
+    }
+    return new Response(readFileSync("./src/public/index.html", "utf-8"), {
+      headers: { "Content-Type": "text/html; charset=utf-8" },
+    });
  },
  websocket: {
    perMessageDeflate: true,
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "types": ["bun-types"]
-  }
-}
Author	SHA1	Message	Date
KeshavAnandCode	b76bcbffb2	Update join logic — remove playerName from join request, store numeric ID only	2026-04-08 18:53:05 -05:00
KeshavAnandCode	67bd8d9e77	Remove name input from landing page — players assigned numeric IDs instead	2026-04-08 18:52:51 -05:00
KeshavAnandCode	7696b6005b	Increase font sizes for senior citizen accessibility - Raised base HTML font size from 18px to 22px - Increased header logo from 22px to 32px - Enhanced all text labels from 13-15px to 16-17px for readability - Made timer display larger (72px to 84px for players, 56px to 52px for mod) - Increased room codes from 34-44px to 42-52px - Made tab navigation labels larger (14px to 17px) - Updated all panel titles and section labels - Enlarged player names from 16px to 18px - Increased buzz status and hints from 14-16px to 16-18px - Made modal text and toast notifications more readable - Adjusted responsive breakpoints for mobile devices - All interactive elements (toggles, buttons) preserved unchanged	2026-04-08 18:41:31 -05:00
KeshavAnandCode	c08c0831b1	fixed run	2026-03-26 00:17:59 -05:00
KeshavAnandCode	6afb853874	Update application aesthetics with a pastel color scheme and larger text Introduce the Catppuccin Mocha color palette and increase font sizes for improved readability, while also adding a visual hint for spacebar functionality. Replit-Commit-Author: Agent Replit-Commit-Session-Id: f3ac8eb3-f610-4678-ab6e-ebf900098be4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 098ca8d5-1a49-468d-abec-89858708710d 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	2026-03-25 21:14:15 +00:00
KeshavAnandCode	c0e7c08106	Integrate buzzer functionality into Bun server and update workflows Reverts Express server setup for the buzzer, migrates all functionality to a Bun server, and updates the workflow to execute the Bun server directly. Replit-Commit-Author: Agent Replit-Commit-Session-Id: f3ac8eb3-f610-4678-ab6e-ebf900098be4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: c1942b0a-0cf4-4ca9-9b5f-f80287c102f2 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	2026-03-25 21:08:30 +00:00
KeshavAnandCode	83bd893d93	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	2026-03-25 21:07:18 +00:00
KeshavAnandCode	ce13860cd1	Extracted stack files	2026-03-25 20:56:28 +00:00