Create script.js

static/script.js

@@ -0,0 +1,77 @@
+document.getElementById('lbw-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    const formData = new FormData(this);
+    fetch('/analyze', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('decision').textContent = `Decision: ${data.decision} (Confidence: ${data.confidence})`;
+        drawPitch(data.actual_path, data.projected_path, data.pitching, data.impact);
+    });
+});
+
+function drawPitch(actualPath, projectedPath, pitching, impact) {
+    const canvas = document.getElementById('pitchCanvas');
+    const ctx = canvas.getContext('2d');
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw pitch (22 yards scaled to 600px height, 10 feet scaled to 400px width)
+    ctx.fillStyle = '#90EE90'; // Light green for pitch
+    ctx.fillRect(50, 50, 300, 500);
+    
+    // Draw stumps (at y=1, scaled to canvas)
+    ctx.fillStyle = '#FFF';
+    ctx.fillRect(190, 50, 20, 10); // Top stumps
+    
+    // Draw creases
+    ctx.strokeStyle = '#000';
+    ctx.beginPath();
+    ctx.moveTo(50, 150); ctx.lineTo(350, 150); // Popping crease
+    ctx.moveTo(200, 50); ctx.lineTo(200, 150); // Middle stump line
+    ctx.stroke();
+    
+    // Scale coordinates (x: 0-1 to 50-350, y: 0-1 to 550-50)
+    function scalePoint(point) {
+        return {
+            x: 50 + point.x * 300,
+            y: 550 - point.y * 500
+        };
+    }
+    
+    // Draw actual path (red arc)
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    const actualScaled = actualPath.map(scalePoint);
+    ctx.moveTo(actualScaled[0].x, actualScaled[0].y);
+    for (let i = 1; i < actualScaled.length; i++) {
+        ctx.lineTo(actualScaled[i].x, actualScaled[i].y);
+    }
+    ctx.stroke();
+    
+    // Draw projected path (blue line)
+    ctx.strokeStyle = 'blue';
+    ctx.beginPath();
+    const projectedScaled = projectedPath.map(scalePoint);
+    ctx.moveTo(projectedScaled[0].x, projectedScaled[0].y);
+    ctx.lineTo(projectedScaled[1].x, projectedScaled[1].y);
+    ctx.stroke();
+    
+    // Draw pitching point
+    const pitchPt = scalePoint(pitching);
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(pitchPt.x, pitchPt.y, 5, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    // Draw impact point
+    const impactPt = scalePoint(impact);
+    ctx.fillStyle = 'orange';
+    ctx.beginPath();
+    ctx.arc(impactPt.x, impactPt.y, 5, 0, 2 * Math.PI);
+    ctx.fill();
+}