Update static/script.js

static/script.js

@@ -7,8 +7,20 @@ document.getElementById('lbw-form').addEventListener('submit', function(e) {
     })
     .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);
+        if (data.error) {
+            document.getElementById('decision').textContent = `Error: ${data.error}`;
+        } else {
+            document.getElementById('decision').textContent = `Decision: ${data.decision} (Confidence: ${data.confidence})`;
+            document.getElementById('details').innerHTML = `
+                Pitching: ${data.pitching.status}<br>
+                Impact: ${data.impact.status}<br>
+                Wickets: ${data.wicket}
+            `;
+            drawPitch(data.actual_path, data.projected_path, data.pitching, data.impact);
+        }
+    })
+    .catch(error => {
+        document.getElementById('decision').textContent = `Error: ${error.message}`;
     });
 });
 
@@ -16,25 +28,20 @@ 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.fillStyle = '#90EE90';
     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
+    ctx.fillRect(190, 50, 20, 10);
     
-    // 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.moveTo(50, 150); ctx.lineTo(350, 150);
+    ctx.moveTo(200, 50); ctx.lineTo(200, 150);
     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,
@@ -42,33 +49,34 @@ function drawPitch(actualPath, projectedPath, pitching, impact) {
         };
     }
     
-    // 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);
+    if (actualPath.length > 0) {
+        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();
     }
-    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();
+    if (projectedPath.length > 0) {
+        ctx.strokeStyle = 'blue';
+        ctx.lineWidth = 2;
+        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();