Implement DAS/ARR for smooth horizontal piece movement

public/js/renderer.js

@@ -35,10 +35,10 @@ class TetrisRenderer {
     nextDiv.className = 'board-info';
     const nextCanvas = document.createElement('canvas');
     nextCanvas.id = `next-${playerId}`;
-    nextCanvas.width = 80;
-    nextCanvas.height = 80;
-    nextCanvas.style.width = '80px';
-    nextCanvas.style.height = '80px';
+    nextCanvas.width = 60;
+    nextCanvas.height = 60;
+    nextCanvas.style.width = '60px';
+    nextCanvas.style.height = '60px';
     nextDiv.innerHTML = '<span>NEXT:</span>';
     nextDiv.appendChild(nextCanvas);
     boardDiv.appendChild(nextDiv);
@@ -48,14 +48,21 @@ class TetrisRenderer {
     holdDiv.className = 'board-info';
     const holdCanvas = document.createElement('canvas');
     holdCanvas.id = `hold-${playerId}`;
-    holdCanvas.width = 80;
-    holdCanvas.height = 80;
-    holdCanvas.style.width = '80px';
-    holdCanvas.style.height = '80px';
+    holdCanvas.width = 60;
+    holdCanvas.height = 60;
+    holdCanvas.style.width = '60px';
+    holdCanvas.style.height = '60px';
     holdDiv.innerHTML = '<span>HOLD:</span>';
     holdDiv.appendChild(holdCanvas);
     boardDiv.appendChild(holdDiv);
 
+    // Zone meter
+    const zoneDiv = document.createElement('div');
+    zoneDiv.className = 'board-info zone-info';
+    zoneDiv.id = `zone-${playerId}`;
+    zoneDiv.innerHTML = '<span>ZONE: <span class="zone-meter-bar"><span class="zone-meter-fill"></span></span> <span class="zone-status"></span></span>';
+    boardDiv.appendChild(zoneDiv);
+
     this.container.appendChild(boardDiv);
 
     this.boards.set(playerId, {
@@ -63,6 +70,7 @@ class TetrisRenderer {
       canvas: canvas,
       nextCanvas: nextCanvas,
       holdCanvas: holdCanvas,
+      zoneDiv: zoneDiv,
       info: infoDiv,
       ctx: canvas.getContext('2d'),
       nextCtx: nextCanvas.getContext('2d'),
@@ -128,6 +136,28 @@ class TetrisRenderer {
       if (linesSpan) {
         linesSpan.textContent = gameState.lines;
       }
+
+      // Update Zone meter
+      const zoneDiv = boardData.zoneDiv;
+      if (zoneDiv) {
+        const meterFill = zoneDiv.querySelector('.zone-meter-fill');
+        const statusSpan = zoneDiv.querySelector('.zone-status');
+        if (meterFill) {
+          meterFill.style.width = gameState.zoneMeter + '%';
+        }
+        if (statusSpan) {
+          if (gameState.zoneActive) {
+            statusSpan.textContent = `ACTIVE (${Math.max(0, Math.round(gameState.zoneTimeRemaining / 1000))}s)`;
+            statusSpan.style.color = '#00ff00';
+          } else if (gameState.zoneMeter >= 100) {
+            statusSpan.textContent = 'READY!';
+            statusSpan.style.color = '#ffff00';
+          } else {
+            statusSpan.textContent = '';
+            statusSpan.style.color = '#fff';
+          }
+        }
+      }
     }
 
     // Update board state classes (preserving main/spectator/position classes)