Polish RunRate Lab cricket bat and ball visuals

app.py

@@ -738,9 +738,10 @@ GAME_HTML = r"""
     position: absolute;
     z-index: 6;
     right: 16px;
-    bottom: 16px;
-    width: min(380px, calc(100% - 32px));
-    max-height: min(460px, calc(100% - 96px));
+    top: 128px;
+    bottom: auto;
+    width: min(360px, calc(100% - 32px));
+    max-height: min(430px, calc(100% - 154px));
     overflow: auto;
     border: 1px solid var(--line);
     border-radius: 12px;
@@ -1080,6 +1081,7 @@ GAME_HTML = r"""
     .coach-panel {
       left: 14px;
       right: 14px;
+      top: auto;
       bottom: 14px;
       width: auto;
       max-height: 328px;
@@ -1327,6 +1329,7 @@ GAME_HTML = r"""
     log: [],
     particles: [],
     trail: [],
+    lastBallVisual: null,
     resultFlash: 0,
     wicketShake: 0,
     processStreak: 0,
@@ -1508,6 +1511,7 @@ GAME_HTML = r"""
     state.deliveryLine = rand(-0.28, 0.28);
     state.ballProgress = 0;
     state.trail = [];
+    state.lastBallVisual = null;
     state.message = `${pitch.Delivery}. Hold to charge. Release at impact.`;
   }
 
@@ -1519,6 +1523,7 @@ GAME_HTML = r"""
     state.log = [];
     state.particles = [];
     state.trail = [];
+    state.lastBallVisual = null;
     state.lastInsight = null;
     state.processSummary = null;
     state.processStreak = 0;
@@ -1621,7 +1626,9 @@ GAME_HTML = r"""
     state.message = "Review the analytics coach, then press Next Ball.";
     statusHint.textContent = "Review state. Press Next Ball or Enter when ready.";
 
+    if (sampled.wicket) addWicketBallVisual();
     if (!sampled.wicket && sampled.runs > 0) addShotTrail(sampled.runs);
+    if (!sampled.wicket && sampled.runs === 0) addDotBallVisual();
     addImpactParticles(sampled.wicket ? fxColor("risk") : sampled.runs >= 4 ? fxColor("boundary") : fxColor("single"));
     if (sampled.runs >= 4) state.resultFlash = state.settings.reduceFlash ? 0.35 : 1;
     if (sampled.wicket) state.wicketShake = 1;
@@ -1649,6 +1656,7 @@ GAME_HTML = r"""
     state.ballProgress = 0;
     state.swingState = "ready";
     state.trail = [];
+    state.lastBallVisual = null;
     nextBallBtn.classList.add("hidden");
     detailsBtn.classList.add("hidden");
     state.detailsOpen = false;
@@ -1972,6 +1980,7 @@ GAME_HTML = r"""
 
   function drawBallPath() {
     if (!state.delivery) return;
+    if (state.mode === "between" || state.mode === "gameover") return;
     const start = pitchPoint(0.08, state.deliveryLine);
     const end = pitchPoint(0.88, state.deliveryLine * 0.25);
     ctx.save();
@@ -1990,23 +1999,59 @@ GAME_HTML = r"""
     ctx.restore();
   }
 
-  function drawBall() {
-    if (state.mode !== "bowling" && state.mode !== "between") return;
-    const p = ballPosition();
-    if (state.mode === "between") return;
+  function drawCricketBall(x, y, r, rotation = 0, alpha = 1) {
     ctx.save();
-    ctx.fillStyle = "#ef4444";
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = "rgba(0,0,0,0.26)";
     ctx.beginPath();
-    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+    ctx.ellipse(x + r * 0.18, y + r * 0.78, r * 0.92, r * 0.30, 0, 0, Math.PI * 2);
     ctx.fill();
-    ctx.strokeStyle = "rgba(255,255,255,0.55)";
-    ctx.lineWidth = Math.max(1, p.r * 0.18);
+
+    const gradient = ctx.createRadialGradient(x - r * 0.35, y - r * 0.35, r * 0.1, x, y, r);
+    gradient.addColorStop(0, "#ff7a7a");
+    gradient.addColorStop(0.58, "#ef4444");
+    gradient.addColorStop(1, "#8f1f1f");
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.translate(x, y);
+    ctx.rotate(rotation);
+    ctx.strokeStyle = "rgba(255,255,255,0.72)";
+    ctx.lineWidth = Math.max(1.2, r * 0.15);
+    ctx.lineCap = "round";
     ctx.beginPath();
-    ctx.arc(p.x - p.r * 0.1, p.y - p.r * 0.1, p.r * 0.55, -0.8, 0.8);
+    ctx.arc(-r * 0.18, -r * 0.02, r * 0.62, -0.95, 0.95);
     ctx.stroke();
+    ctx.strokeStyle = "rgba(255,255,255,0.42)";
+    ctx.lineWidth = Math.max(1, r * 0.08);
+    for (let i = -2; i <= 2; i += 1) {
+      ctx.beginPath();
+      ctx.moveTo(-r * 0.24, i * r * 0.18);
+      ctx.lineTo(-r * 0.08, i * r * 0.18 + r * 0.05);
+      ctx.stroke();
+    }
     ctx.restore();
   }
 
+  function drawBall() {
+    if (state.mode !== "bowling") return;
+    const p = ballPosition();
+    drawCricketBall(p.x, p.y, p.r, p.t * Math.PI * 4, 1);
+  }
+
+  function drawReviewBall(now) {
+    if (state.mode !== "between" || !state.lastBallVisual) return;
+    const visual = state.lastBallVisual;
+    const elapsed = clamp((now - visual.createdAt) / 860, 0, 1);
+    const ease = 1 - Math.pow(1 - elapsed, 2);
+    const x = (1 - ease) * visual.x0 + ease * visual.x1;
+    const curveY = (1 - ease) * (1 - ease) * visual.y0 + 2 * (1 - ease) * ease * visual.cy + ease * ease * visual.y1;
+    const r = visual.wicket ? 9 : visual.runs >= 4 ? 8 : 7;
+    drawCricketBall(x, curveY, r, now / 95, 0.94);
+  }
+
   function drawShotTrail() {
     state.trail.forEach((trail) => {
       trail.life -= 0.018;
@@ -2024,21 +2069,65 @@ GAME_HTML = r"""
     state.trail = state.trail.filter((trail) => trail.life > 0);
   }
 
-  function addShotTrail(runs) {
+  function shotPathFor(runs) {
     const aim = rowBy(aims, "Aim", state.selectedAim);
     const angle = (Number(aim.Angle) - 90 + (state.selectedShot === "Cut / Pull" ? 14 : 0)) * Math.PI / 180;
     const start = pitchPoint(0.89, 0);
     const length = runs >= 6 ? height * 0.60 : runs === 4 ? height * 0.48 : height * 0.26;
-    state.trail.push({
+    return {
       x0: start.x,
       y0: start.y,
       cx: start.x + Math.cos(angle) * length * 0.38,
       cy: start.y + Math.sin(angle) * length * 0.36,
       x1: start.x + Math.cos(angle) * length,
       y1: start.y + Math.sin(angle) * length,
-      runs,
+      runs
+    };
+  }
+
+  function addShotTrail(runs) {
+    const path = shotPathFor(runs);
+    state.trail.push({
+      ...path,
       life: 1
     });
+    state.lastBallVisual = {
+      ...path,
+      wicket: false,
+      createdAt: performance.now()
+    };
+  }
+
+  function addWicketBallVisual() {
+    const start = pitchPoint(0.89, 0);
+    const side = state.deliveryLine < 0 ? -1 : 1;
+    state.lastBallVisual = {
+      x0: start.x + side * 10,
+      y0: start.y - 16,
+      cx: start.x + side * rand(26, 40),
+      cy: start.y - rand(24, 42),
+      x1: start.x + side * rand(48, 72),
+      y1: start.y + rand(0, 12),
+      runs: 0,
+      wicket: true,
+      createdAt: performance.now()
+    };
+  }
+
+  function addDotBallVisual() {
+    const start = pitchPoint(0.89, state.deliveryLine * 0.15);
+    const side = state.selectedAim === "Leg Side" ? -1 : 1;
+    state.lastBallVisual = {
+      x0: start.x + side * 12,
+      y0: start.y - 14,
+      cx: start.x + side * rand(26, 42),
+      cy: start.y - rand(18, 34),
+      x1: start.x + side * rand(52, 82),
+      y1: start.y + rand(2, 16),
+      runs: 0,
+      wicket: false,
+      createdAt: performance.now()
+    };
   }
 
   function addImpactParticles(color) {
@@ -2105,43 +2194,41 @@ GAME_HTML = r"""
     const handleW = 7 * scale;
     const bladeTopW = 23 * scale;
     const bladeBotW = 42 * scale;
-    const dx = Math.cos(angle);
-    const dy = Math.sin(angle);
-    const nx = -dy;
-    const ny = dx;
-    const hEnd = { x: anchor.x + dx * handleLen, y: anchor.y + dy * handleLen };
-    const bEnd = { x: hEnd.x + dx * bladeLen, y: hEnd.y + dy * bladeLen };
 
     ctx.save();
+    ctx.translate(anchor.x, anchor.y);
+    ctx.rotate(angle);
+
     ctx.strokeStyle = "#4a3417";
     ctx.lineWidth = handleW;
     ctx.lineCap = "round";
     ctx.beginPath();
-    ctx.moveTo(anchor.x, anchor.y);
-    ctx.lineTo(hEnd.x, hEnd.y);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(handleLen, 0);
     ctx.stroke();
 
     ctx.strokeStyle = "#f8fafc";
     ctx.lineWidth = 2 * scale;
     for (let i = 0; i < 3; i += 1) {
-      const gx = anchor.x + dx * (12 + i * 12) * scale;
-      const gy = anchor.y + dy * (12 + i * 12) * scale;
+      const gx = (13 + i * 12) * scale;
       ctx.beginPath();
-      ctx.moveTo(gx + nx * 6 * scale, gy + ny * 6 * scale);
-      ctx.lineTo(gx - nx * 6 * scale, gy - ny * 6 * scale);
+      ctx.moveTo(gx, -6 * scale);
+      ctx.lineTo(gx, 6 * scale);
       ctx.stroke();
     }
 
-    const shoulder = { x: hEnd.x + dx * 12 * scale, y: hEnd.y + dy * 12 * scale };
+    const shoulder = handleLen + 10 * scale;
+    const toe = handleLen + bladeLen;
     ctx.fillStyle = "#d8ae55";
     ctx.strokeStyle = "#76551e";
     ctx.lineWidth = 3 * scale;
     ctx.beginPath();
-    ctx.moveTo(hEnd.x + nx * bladeTopW * 0.5, hEnd.y + ny * bladeTopW * 0.5);
-    ctx.lineTo(shoulder.x - nx * bladeTopW * 0.5, shoulder.y - ny * bladeTopW * 0.5);
-    ctx.lineTo(bEnd.x - nx * bladeBotW * 0.5, bEnd.y - ny * bladeBotW * 0.5);
-    ctx.quadraticCurveTo(bEnd.x, bEnd.y + 10 * scale, bEnd.x + nx * bladeBotW * 0.5, bEnd.y + ny * bladeBotW * 0.5);
-    ctx.lineTo(shoulder.x + nx * bladeTopW * 0.5, shoulder.y + ny * bladeTopW * 0.5);
+    ctx.moveTo(handleLen, -bladeTopW * 0.44);
+    ctx.quadraticCurveTo(shoulder - 4 * scale, -bladeTopW * 0.56, shoulder, -bladeTopW * 0.5);
+    ctx.lineTo(toe - 16 * scale, -bladeBotW * 0.5);
+    ctx.quadraticCurveTo(toe + 9 * scale, 0, toe - 16 * scale, bladeBotW * 0.5);
+    ctx.lineTo(shoulder, bladeTopW * 0.5);
+    ctx.quadraticCurveTo(shoulder - 5 * scale, bladeTopW * 0.58, handleLen, bladeTopW * 0.44);
     ctx.closePath();
     ctx.fill();
     ctx.stroke();
@@ -2149,8 +2236,15 @@ GAME_HTML = r"""
     ctx.strokeStyle = "rgba(255,255,255,0.32)";
     ctx.lineWidth = 2 * scale;
     ctx.beginPath();
-    ctx.moveTo(shoulder.x + nx * 4 * scale, shoulder.y + ny * 4 * scale);
-    ctx.lineTo(bEnd.x + nx * 10 * scale, bEnd.y + ny * 10 * scale);
+    ctx.moveTo(shoulder + 8 * scale, -4 * scale);
+    ctx.lineTo(toe - 20 * scale, -11 * scale);
+    ctx.stroke();
+
+    ctx.strokeStyle = "rgba(118,85,30,0.35)";
+    ctx.lineWidth = 1.5 * scale;
+    ctx.beginPath();
+    ctx.moveTo(shoulder + 5 * scale, 0);
+    ctx.lineTo(toe - 22 * scale, 0);
     ctx.stroke();
     ctx.restore();
   }
@@ -2162,16 +2256,17 @@ GAME_HTML = r"""
     const x = base.x + shake;
     const y = base.y + 18 * scale;
     const progress = clamp((now - state.swingStart) / 420, 0, 1);
+    const finishProgress = state.mode === "between" ? 0.76 : progress;
     let batAngle = -1.25;
     let shoulderTilt = 0;
     if (state.mode === "bowling" && state.charging) {
       batAngle = -1.54 - clamp(state.power / 100, 0, 1) * 0.42;
       shoulderTilt = -0.10;
     } else if (state.swingState === "contact") {
-      batAngle = -1.70 + progress * 2.45;
-      shoulderTilt = 0.20 * progress;
+      batAngle = -1.70 + finishProgress * 1.28;
+      shoulderTilt = 0.20 * finishProgress;
     } else if (state.swingState === "miss") {
-      batAngle = -1.60 + progress * 1.78;
+      batAngle = -1.58 + finishProgress * 0.88;
       shoulderTilt = 0.10;
     } else {
       batAngle = -1.24;
@@ -2212,6 +2307,8 @@ GAME_HTML = r"""
     drawLimb(x + 48 * scale, shoulderY + 30 * scale, leftGlove.x, leftGlove.y, 15 * scale, "#f8fafc");
     drawLimb(leftGlove.x, leftGlove.y, rightGlove.x, rightGlove.y, 15 * scale, "#f8fafc");
 
+    drawBat(leftGlove, rightGlove, batAngle, scale);
+
     ctx.fillStyle = "#facc15";
     ctx.beginPath();
     ctx.arc(leftGlove.x, leftGlove.y, 13 * scale, 0, Math.PI * 2);
@@ -2220,8 +2317,6 @@ GAME_HTML = r"""
     ctx.arc(rightGlove.x, rightGlove.y, 13 * scale, 0, Math.PI * 2);
     ctx.fill();
 
-    drawBat(leftGlove, rightGlove, batAngle, scale);
-
     ctx.fillStyle = "#f8fafc";
     ctx.beginPath();
     ctx.arc(x, headY, 32 * scale, 0, Math.PI * 2);
@@ -2270,6 +2365,7 @@ GAME_HTML = r"""
     drawParticles();
     drawStumps(width / 2, pitchPoint(0.89, 0).y + 26, 1.15);
     drawBatter(now);
+    drawReviewBall(now);
     drawScoreState();
     drawFlash();
   }