Improve RunRate Lab bat rig and swing posture

app.py

@@ -2200,18 +2200,41 @@ GAME_HTML = r"""
     ctx.stroke();
   }
 
-  function drawBat(gloveA, gloveB, angle, scale) {
-    const anchor = { x: (gloveA.x + gloveB.x) / 2, y: (gloveA.y + gloveB.y) / 2 };
-    const handleLen = 58 * scale;
-    const bladeLen = 112 * scale;
-    const handleW = 7 * scale;
-    const bladeTopW = 23 * scale;
-    const bladeBotW = 42 * scale;
+  function drawGlove(x, y, angle, scale, flip = 1) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(angle + flip * 0.10);
+    ctx.fillStyle = "#f8fafc";
+    roundedRect(-12 * scale, -8 * scale, 24 * scale, 16 * scale, 5 * scale);
+    ctx.fill();
+    ctx.fillStyle = "#d8ae55";
+    roundedRect(-13 * scale, 3 * scale, 12 * scale, 9 * scale, 4 * scale);
+    ctx.fill();
+    ctx.fillStyle = "rgba(15,23,42,0.18)";
+    ctx.fillRect(-4 * scale, -4 * scale, 12 * scale, 2 * scale);
+    ctx.fillRect(-4 * scale, 0, 12 * scale, 2 * scale);
+    ctx.restore();
+  }
+
+  function drawBat(topHand, bottomHand, angle, scale) {
+    const anchor = topHand;
+    const handSpacing = 16 * scale;
+    const handleLen = 56 * scale;
+    const bladeLen = 126 * scale;
+    const handleW = 6 * scale;
+    const bladeTopW = 18 * scale;
+    const bladeMidW = 28 * scale;
+    const bladeBotW = 40 * scale;
 
     ctx.save();
     ctx.translate(anchor.x, anchor.y);
     ctx.rotate(angle);
 
+    ctx.fillStyle = "rgba(0,0,0,0.22)";
+    ctx.beginPath();
+    ctx.ellipse(handleLen + bladeLen * 0.52, 14 * scale, bladeBotW * 0.55, 9 * scale, 0, 0, Math.PI * 2);
+    ctx.fill();
+
     ctx.strokeStyle = "#4a3417";
     ctx.lineWidth = handleW;
     ctx.lineCap = "round";
@@ -2223,42 +2246,59 @@ GAME_HTML = r"""
     ctx.strokeStyle = "#f8fafc";
     ctx.lineWidth = 2 * scale;
     for (let i = 0; i < 3; i += 1) {
-      const gx = (13 + i * 12) * scale;
+      const gx = (11 + i * 11) * scale;
       ctx.beginPath();
       ctx.moveTo(gx, -6 * scale);
       ctx.lineTo(gx, 6 * scale);
       ctx.stroke();
     }
 
-    const shoulder = handleLen + 10 * scale;
-    const toe = handleLen + bladeLen;
-    ctx.fillStyle = "#d8ae55";
+    ctx.fillStyle = "#d9b368";
+    ctx.beginPath();
+    ctx.moveTo(handleLen - 2 * scale, -bladeTopW * 0.50);
+    ctx.quadraticCurveTo(handleLen + 10 * scale, -bladeTopW * 0.78, handleLen + 22 * scale, -bladeMidW * 0.48);
+    ctx.lineTo(handleLen + bladeLen * 0.68, -bladeBotW * 0.44);
+    ctx.quadraticCurveTo(handleLen + bladeLen + 8 * scale, -bladeBotW * 0.12, handleLen + bladeLen, 0);
+    ctx.quadraticCurveTo(handleLen + bladeLen + 8 * scale, bladeBotW * 0.12, handleLen + bladeLen * 0.68, bladeBotW * 0.44);
+    ctx.lineTo(handleLen + 22 * scale, bladeMidW * 0.48);
+    ctx.quadraticCurveTo(handleLen + 10 * scale, bladeTopW * 0.78, handleLen - 2 * scale, bladeTopW * 0.50);
+    ctx.closePath();
+    ctx.fill();
+
     ctx.strokeStyle = "#76551e";
     ctx.lineWidth = 3 * scale;
     ctx.beginPath();
-    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.moveTo(handleLen - 2 * scale, -bladeTopW * 0.50);
+    ctx.quadraticCurveTo(handleLen + 10 * scale, -bladeTopW * 0.78, handleLen + 22 * scale, -bladeMidW * 0.48);
+    ctx.lineTo(handleLen + bladeLen * 0.68, -bladeBotW * 0.44);
+    ctx.quadraticCurveTo(handleLen + bladeLen + 8 * scale, -bladeBotW * 0.12, handleLen + bladeLen, 0);
+    ctx.quadraticCurveTo(handleLen + bladeLen + 8 * scale, bladeBotW * 0.12, handleLen + bladeLen * 0.68, bladeBotW * 0.44);
+    ctx.lineTo(handleLen + 22 * scale, bladeMidW * 0.48);
+    ctx.quadraticCurveTo(handleLen + 10 * scale, bladeTopW * 0.78, handleLen - 2 * scale, bladeTopW * 0.50);
     ctx.closePath();
-    ctx.fill();
     ctx.stroke();
 
     ctx.strokeStyle = "rgba(255,255,255,0.32)";
     ctx.lineWidth = 2 * scale;
     ctx.beginPath();
-    ctx.moveTo(shoulder + 8 * scale, -4 * scale);
-    ctx.lineTo(toe - 20 * scale, -11 * scale);
+    ctx.moveTo(handleLen + 18 * scale, -4 * scale);
+    ctx.lineTo(handleLen + bladeLen * 0.74, -11 * scale);
     ctx.stroke();
 
-    ctx.strokeStyle = "rgba(118,85,30,0.35)";
+    ctx.strokeStyle = "rgba(118,85,30,0.28)";
     ctx.lineWidth = 1.5 * scale;
     ctx.beginPath();
-    ctx.moveTo(shoulder + 5 * scale, 0);
-    ctx.lineTo(toe - 22 * scale, 0);
+    ctx.moveTo(handleLen + 14 * scale, 0);
+    ctx.lineTo(handleLen + bladeLen * 0.76, 0);
     ctx.stroke();
+
+    ctx.fillStyle = "#1f1600";
+    ctx.beginPath();
+    ctx.arc(handSpacing * 0.22, 0, 2.2 * scale, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(handSpacing, 0, 2.2 * scale, 0, Math.PI * 2);
+    ctx.fill();
     ctx.restore();
   }
 
@@ -2269,28 +2309,88 @@ 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;
+    const easeOut = 1 - Math.pow(1 - progress, 3);
+    let batAngle = -1.18;
+    let handReach = 0;
+    let handLift = 0;
+    let torsoLean = 0;
     if (state.mode === "bowling" && state.charging) {
-      batAngle = -1.54 - clamp(state.power / 100, 0, 1) * 0.42;
-      shoulderTilt = -0.10;
+      const charge = clamp(state.power / 100, 0, 1);
+      batAngle = -1.58 - charge * 0.34;
+      handReach = -8 * charge;
+      handLift = -18 * charge;
+      torsoLean = -0.05;
     } else if (state.swingState === "contact") {
-      batAngle = -1.70 + finishProgress * 1.28;
-      shoulderTilt = 0.20 * finishProgress;
+      if (state.selectedShot === "Loft") {
+        batAngle = -1.72 + easeOut * 1.46;
+        handReach = 26 * easeOut;
+        handLift = -16 * easeOut;
+        torsoLean = 0.14 * easeOut;
+      } else if (state.selectedShot === "Cut / Pull") {
+        batAngle = -1.66 + easeOut * 1.12;
+        handReach = 22 * easeOut;
+        handLift = -6 * easeOut;
+        torsoLean = 0.08 * easeOut;
+      } else if (state.selectedShot === "Defend") {
+        batAngle = -1.46 + easeOut * 0.62;
+        handReach = 8 * easeOut;
+        handLift = 2 * easeOut;
+        torsoLean = 0.03 * easeOut;
+      } else {
+        batAngle = -1.64 + easeOut * 0.96;
+        handReach = 18 * easeOut;
+        handLift = -2 * easeOut;
+        torsoLean = 0.08 * easeOut;
+      }
     } else if (state.swingState === "miss") {
-      batAngle = -1.58 + finishProgress * 0.88;
-      shoulderTilt = 0.10;
-    } else {
-      batAngle = -1.24;
+      batAngle = -1.56 + easeOut * 0.72;
+      handReach = 10 * easeOut;
+      handLift = -4 * easeOut;
+      torsoLean = 0.04 * easeOut;
+    } else if (state.mode === "between" && state.lastInsight) {
+      if (state.lastInsight.shot === "Loft") {
+        batAngle = -0.32;
+        handReach = 24;
+        handLift = -12;
+        torsoLean = 0.10;
+      } else if (state.lastInsight.shot === "Defend") {
+        batAngle = -0.86;
+        handReach = 8;
+        handLift = 2;
+        torsoLean = 0.02;
+      } else if (state.lastInsight.shot === "Cut / Pull") {
+        batAngle = -0.58;
+        handReach = 18;
+        handLift = -2;
+        torsoLean = 0.06;
+      } else {
+        batAngle = -0.70;
+        handReach = 16;
+        handLift = -2;
+        torsoLean = 0.06;
+      }
     }
 
     const hipY = y - 82 * scale;
     const shoulderY = y - 178 * scale;
     const headY = y - 232 * scale;
     const footY = y + 18 * scale;
-    const leftGlove = { x: x + (30 + shoulderTilt * 35) * scale, y: shoulderY + 24 * scale };
-    const rightGlove = { x: x + (55 + shoulderTilt * 45) * scale, y: shoulderY + 38 * scale };
+    const torsoShift = torsoLean * 34 * scale;
+    const leftShoulder = { x: x - 48 * scale + torsoShift, y: shoulderY + 28 * scale };
+    const rightShoulder = { x: x + 44 * scale + torsoShift, y: shoulderY + 28 * scale };
+    const topHand = { x: x + (26 + handReach) * scale, y: shoulderY + (32 + handLift) * scale };
+    const bottomHand = {
+      x: topHand.x + Math.cos(batAngle) * 18 * scale,
+      y: topHand.y + Math.sin(batAngle) * 18 * scale
+    };
+    const leftElbow = {
+      x: (leftShoulder.x + topHand.x) / 2 + 4 * scale,
+      y: (leftShoulder.y + topHand.y) / 2 + 7 * scale
+    };
+    const rightElbow = {
+      x: (rightShoulder.x + bottomHand.x) / 2 + 16 * scale,
+      y: (rightShoulder.y + bottomHand.y) / 2 + 10 * scale
+    };
 
     ctx.save();
     ctx.fillStyle = "rgba(0,0,0,0.26)";
@@ -2307,41 +2407,37 @@ GAME_HTML = r"""
     ctx.fill();
 
     ctx.fillStyle = "#f8fafc";
-    roundedRect(x - 54 * scale, shoulderY, 108 * scale, 124 * scale, 26 * scale);
+    roundedRect(x - 54 * scale + torsoShift, shoulderY, 108 * scale, 124 * scale, 26 * scale);
     ctx.fill();
     ctx.fillStyle = "#2563eb";
-    roundedRect(x - 68 * scale, shoulderY + 16 * scale, 136 * scale, 36 * scale, 15 * scale);
+    roundedRect(x - 68 * scale + torsoShift, shoulderY + 16 * scale, 136 * scale, 36 * scale, 15 * scale);
     ctx.fill();
     ctx.fillStyle = "#0f172a";
-    roundedRect(x - 42 * scale, shoulderY + 40 * scale, 84 * scale, 80 * scale, 13 * scale);
+    roundedRect(x - 42 * scale + torsoShift, shoulderY + 40 * scale, 84 * scale, 80 * scale, 13 * scale);
     ctx.fill();
 
-    drawLimb(x - 48 * scale, shoulderY + 30 * scale, x - 88 * scale, shoulderY + 82 * scale, 15 * scale, "#f8fafc");
-    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");
+    drawLimb(leftShoulder.x, leftShoulder.y, leftElbow.x, leftElbow.y, 15 * scale, "#f8fafc");
+    drawLimb(leftElbow.x, leftElbow.y, topHand.x, topHand.y, 15 * scale, "#f8fafc");
+    drawLimb(rightShoulder.x, rightShoulder.y, rightElbow.x, rightElbow.y, 15 * scale, "#f8fafc");
+    drawLimb(rightElbow.x, rightElbow.y, bottomHand.x, bottomHand.y, 15 * scale, "#f8fafc");
 
-    drawBat(leftGlove, rightGlove, batAngle, scale);
+    drawBat(topHand, bottomHand, batAngle, scale);
 
-    ctx.fillStyle = "#facc15";
-    ctx.beginPath();
-    ctx.arc(leftGlove.x, leftGlove.y, 13 * scale, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.arc(rightGlove.x, rightGlove.y, 13 * scale, 0, Math.PI * 2);
-    ctx.fill();
+    drawGlove(topHand.x, topHand.y, batAngle - 0.08, scale, -1);
+    drawGlove(bottomHand.x, bottomHand.y, batAngle + 0.02, scale, 1);
 
     ctx.fillStyle = "#f8fafc";
     ctx.beginPath();
-    ctx.arc(x, headY, 32 * scale, 0, Math.PI * 2);
+    ctx.arc(x + torsoShift, headY, 32 * scale, 0, Math.PI * 2);
     ctx.fill();
     ctx.fillStyle = "#0f172a";
     ctx.beginPath();
-    ctx.arc(x, headY - 9 * scale, 34 * scale, Math.PI, Math.PI * 2);
+    ctx.arc(x + torsoShift, headY - 9 * scale, 34 * scale, Math.PI, Math.PI * 2);
     ctx.fill();
     ctx.fillStyle = "rgba(15,23,42,0.95)";
-    ctx.fillRect(x - 36 * scale, headY - 9 * scale, 72 * scale, 9 * scale);
+    ctx.fillRect(x - 36 * scale + torsoShift, headY - 9 * scale, 72 * scale, 9 * scale);
     ctx.fillStyle = "rgba(56,189,248,0.58)";
-    ctx.fillRect(x - 28 * scale, headY + 10 * scale, 56 * scale, 6 * scale);
+    ctx.fillRect(x - 28 * scale + torsoShift, headY + 10 * scale, 56 * scale, 6 * scale);
     ctx.restore();
   }