feat: chess pieces smaller + faster move animation with squish effect

- Pieces now have 10% padding (was 5%) making them visually smaller
- Move animation 120ms (was 200ms) with cubic ease-out
- Slight squish (85% scale) at midpoint of move
- Bigger squish (72% scale) when capturing a piece
- Dragging piece slightly smaller (1.1x instead of 1.2x)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/chess/canvas/board.js

@@ -355,23 +355,26 @@ export class ChessBoard {
 
     // Draw pieces
     loadPieceImages();
+    const pad = sq * 0.1;
     for (const [square, piece] of Object.entries(this.pieces)) {
       if (this.dragging && this.dragging.square === square) continue;
       if (this.animating && this.animating.square === square) continue;
       const { x, y } = this.squareToXY(square);
-      const padding = sq * 0.05;
-      this.drawPieceAt(ctx, piece, x + padding, y + padding, sq - padding * 2);
+      this.drawPieceAt(ctx, piece, x + pad, y + pad, sq - pad * 2);
     }
 
-    // Draw animating piece at interpolated position
+    // Draw animating piece with squish
     if (this.animating) {
-      const padding = sq * 0.05;
-      this.drawPieceAt(ctx, this.animating.piece, this.animating.x + padding, this.animating.y + padding, sq - padding * 2);
+      const { piece, x, y, scale } = this.animating;
+      const sc = scale || 1;
+      const s = (sq - pad * 2) * sc;
+      const offset = ((sq - pad * 2) - s) / 2;
+      this.drawPieceAt(ctx, piece, x + pad + offset, y + pad + offset, s);
     }
 
     // Draw dragging piece
     if (this.dragging) {
-      const ds = sq * 1.2;
+      const ds = sq * 1.1;
       this.drawPieceAt(ctx, this.dragging.piece, this.dragging.x - ds / 2, this.dragging.y - ds / 2, ds);
     }
 
@@ -507,17 +510,25 @@ export class ChessBoard {
 
     const fromXY = this.squareToXY(from);
     const toXY = this.squareToXY(to);
-    const duration = 200;
+    const isCapture = !!this.pieces[to];
+    const duration = 120;
     const startTime = performance.now();
+    const squishAmount = isCapture ? 0.72 : 0.85;
 
-    this.animating = { square: from, piece, x: fromXY.x, y: fromXY.y };
+    this.animating = { square: from, piece, x: fromXY.x, y: fromXY.y, scale: 1 };
 
     const step = (now) => {
       const elapsed = now - startTime;
       const t = Math.min(elapsed / duration, 1);
+      const ease = 1 - Math.pow(1 - t, 3);
+
+      this.animating.x = fromXY.x + (toXY.x - fromXY.x) * ease;
+      this.animating.y = fromXY.y + (toXY.y - fromXY.y) * ease;
+
+      // Squish: scale dips at midpoint then pops back
+      const squishT = Math.sin(t * Math.PI);
+      this.animating.scale = 1 - (1 - squishAmount) * squishT;
 
-      this.animating.x = fromXY.x + (toXY.x - fromXY.x) * t;
-      this.animating.y = fromXY.y + (toXY.y - fromXY.y) * t;
       this.draw();
 
       if (t < 1) {