added ignore for pycache

frontend/src/pages/scenario.jsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Stage, Layer, Circle, Text, Line } from 'react-konva';
-import { Slider, Button } from '@mui/material';
+import { Slider, Button, MenuItem, Select, Typography, Box } from '@mui/material';
 import axios from 'axios';
 
-
 const EARTH_RADIUS_KM = 6371; // Earth's radius in kilometers
 const EARTH_DISPLAY_SCALE = 0.01; // Display scale for Earth
 const ASTEROID_DISPLAY_SCALE = 0.3; // Display scale for asteroids
@@ -41,15 +40,16 @@ function Scenario() {
     x: EARTH_X,
     y: EARTH_Y,
     trajectory: [],
-    vx: 0, vy: 0
+    vx: 0,
+    vy: 0,
   });
-  const rocketDistanceRef = useRef(10000);
-
+  const [rocketDistance, setRocketDistance] = useState(10000);
+  const [collisionOccurred, setCollisionOccurred] = useState(false);
 
   useEffect(() => {
-    const fetchAsteroids = async (self, request) => {
+    const fetchAsteroids = async () => {
       try {
-        const response = await axios.get(`http://localhost:8000/api/sentry/`);
+        const response = await axios.get('http://localhost:8080/api/sentry/');
         asteroidsData.current = response.data.near_earth_objects;
         setAsteroidData(0); // Set initial asteroid
       } catch (error) {
@@ -59,8 +59,6 @@ function Scenario() {
     fetchAsteroids();
   }, []);
 
-
-
   const estimateMass = (diameter) => {
     const radius = diameter / 2;
     const volume = (4 / 3) * Math.PI * Math.pow(radius, 3);
@@ -85,7 +83,8 @@ function Scenario() {
     setTrajectoryPoints([]);
     calculateForecastPath(size, speed, Math.PI / 9, mass); // Calculate the forecast path once
     setRocket({ active: false, x: EARTH_X, y: EARTH_Y, trajectory: [], vx: 0, vy: 0 });
-
+    setRocketDistance(10000);
+    setCollisionOccurred(false);
   };
 
   const handleAsteroidSelect = (event) => {
@@ -138,9 +137,19 @@ function Scenario() {
     setForecastPoints(points);
   };
 
-  // useEffect(() => {
-  //
-  //   }, [rocketDistanceRef]);
+  const applyVelocityImpulse = (asteroid, strategy, rocketDx, rocketDy) => {
+    let impulseX = 0;
+    let impulseY = 0;
+    const angle = Math.atan2(rocketDy, rocketDx);
+    if (strategy === 'Nuclear Detonation') {
+      impulseX = 0.01 * Math.cos(angle);
+      impulseY = 0.01 * Math.sin(angle);
+    } else if (strategy === 'Kinetic Impact') {
+      impulseX = 0.005 * Math.cos(angle);
+      impulseY = 0.005 * Math.sin(angle);
+    }
+    return { vx: asteroid.vx + impulseX, vy: asteroid.vy + impulseY };
+  };
 
   const simulate = () => {
     let { x, y, speed, angle, mass } = asteroid;
@@ -170,47 +179,54 @@ function Scenario() {
       x += vx * timeStep;
       y += vy * timeStep;
 
-      rocketDistanceRef.current = 1000;
-
+      // Update rocket position
       setRocket((prev) => {
-        // Update rocket position
         const rocketDx = x - prev.x;
         const rocketDy = y - prev.y;
-
-        const rocketDist = Math.sqrt(rocketDx * rocketDx + rocketDy* rocketDy);
+        const rocketDistance = Math.sqrt(rocketDx * rocketDx + rocketDy * rocketDy);
         const rocketAngle = Math.atan2(rocketDy, rocketDx);
+
         const rocketVX = ROCKET_SPEED * Math.cos(rocketAngle);
-        const rocketVY = ROCKET_SPEED * Math.sin(rocketAngle) ;
+        const rocketVY = ROCKET_SPEED * Math.sin(rocketAngle);
 
         const newX = prev.x + rocketVX * timeStep;
         const newY = prev.y + rocketVY * timeStep;
-        rocketDistanceRef.current=rocketDist;
 
-        const temprocket = {
+        if (rocketDistance <= asteroid.size * ASTEROID_DISPLAY_SCALE && !collisionOccurred) {
+          const newVelocity = applyVelocityImpulse({ vx, vy }, strategy, rocketDx, rocketDy);
+          vx = newVelocity.vx;
+          vy = newVelocity.vy;
+          setSimulationResult('Rocket intercepted the asteroid!');
+          setCollisionOccurred(true); // Mark collision occurred
+          return { ...prev, active: false, x: newX, y: newY, vx: 0, vy: 0 }; // Stop the rocket
+        }
+
+        return {
+          ...prev,
           x: newX,
           y: newY,
-          vx: rocketVX,
-          vy: rocketVY,
+          vx: prev.active ? rocketVX : 0, // Stop velocity if inactive
+          vy: prev.active ? rocketVY : 0, // Stop velocity if inactive
           trajectory: [...prev.trajectory, newX, newY],
         };
-
-        return temprocket;
       });
 
-      console.log('rocketDistance:', rocketDistanceRef);
-     if (rocketDistanceRef < asteroid.size * ASTEROID_DISPLAY_SCALE) {
-       setSimulationResult('Rocket intercepted the asteroid!');
-       setIsSimulating(false);
-       return;
-     }
+      setRocketDistance(rocketDistance);
+
+      if (rocketDistance <= asteroid.size * ASTEROID_DISPLAY_SCALE && !collisionOccurred) {
+        setSimulationResult('Rocket intercepted the asteroid!');
+        setIsSimulating(false);
+        return;
+      }
+
       if (y > CANVAS_HEIGHT * SIMULATION_AREA_MULTIPLIER || x > CANVAS_WIDTH * SIMULATION_AREA_MULTIPLIER || y < -CANVAS_HEIGHT * SIMULATION_AREA_MULTIPLIER || x < -CANVAS_WIDTH * SIMULATION_AREA_MULTIPLIER) {
         setSimulationResult('Asteroid missed Earth!');
         setIsSimulating(false);
         return;
       }
 
-      setAsteroid(prev => ({ ...prev, x, y }));
-      setTrajectoryPoints(prev => [...prev, x, y]);
+      setAsteroid((prev) => ({ ...prev, x, y }));
+      setTrajectoryPoints((prev) => [...prev, x, y]);
       animationRef.current = window.requestAnimationFrame(updateFrame);
     };
 
@@ -234,50 +250,67 @@ function Scenario() {
   };
 
   const handleAngleChange = (event, newValue) => {
-    setAsteroid(prev => ({ ...prev, angle: newValue }));
+    setAsteroid((prev) => ({ ...prev, angle: newValue }));
     calculateForecastPath(asteroid.size, asteroid.speed, newValue, asteroid.mass);
   };
 
   return (
     <>
-      <div>
-        <h1>Asteroid Collision Scenario</h1>
-        <select onChange={handleAsteroidSelect}>
-          {asteroidsData.current.map((ast, index) => (
-            <option key={index} value={index}>{ast.name}</option>
-          ))}
-        </select>
-        <select onChange={(e) => setStrategy(e.target.value)}>
-          <option value="">Select Deflection Strategy</option>
-          <option value="Nuclear Detonation">Nuclear Detonation</option>
-          <option value="Kinetic Impact">Kinetic Impact</option>
-          <option value="Gravity Tractor">Gravity Tractor</option>
-        </select>
+      <Box sx={{ padding: '20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
+        <Typography variant="h4" gutterBottom>
+          Asteroid Collision Scenario
+        </Typography>
+        <Box sx={{ marginBottom: '20px' }}>
+          <Select
+            value={asteroid.name}
+            onChange={handleAsteroidSelect}
+            displayEmpty
+            fullWidth
+          >
+            {asteroidsData.current.map((ast, index) => (
+              <MenuItem key={index} value={index}>
+                {ast.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </Box>
+        <Box sx={{ marginBottom: '20px' }}>
+          <Select
+            value={strategy}
+            onChange={(e) => setStrategy(e.target.value)}
+            displayEmpty
+            fullWidth
+          >
+            <MenuItem value="">Select Deflection Strategy</MenuItem>
+            <MenuItem value="Nuclear Detonation">Nuclear Detonation</MenuItem>
+            <MenuItem value="Kinetic Impact">Kinetic Impact</MenuItem>
+          </Select>
+        </Box>
         <Button
           variant="contained"
           color="primary"
           onClick={handleSimulate}
-          style={{ marginTop: '10px' }}
+          style={{ marginBottom: '20px' }}
         >
           {isSimulating ? 'Stop Simulation' : 'Simulate'}
         </Button>
         {simulationResult && (
-          <div>
-            <h2>Simulation Result</h2>
-            <p>{simulationResult}</p>
-          </div>
+          <Box sx={{ marginBottom: '20px' }}>
+            <Typography variant="h6">Simulation Result</Typography>
+            <Typography>{simulationResult}</Typography>
+          </Box>
         )}
         {asteroid.name && (
-          <div>
-            <h3>Asteroid Information</h3>
-            <p><strong>Name:</strong> {asteroid.name}</p>
-            <p><strong>Size:</strong> {asteroid.size.toFixed(3)} kilometers</p>
-            <p><strong>Speed:</strong> {(asteroid.speed * 1000).toFixed(3)} km/s</p>
-            <p><strong>Mass:</strong> {asteroid.mass.toExponential(3)} kg</p>
-          </div>
+          <Box sx={{ marginBottom: '20px' }}>
+            <Typography variant="h6">Asteroid Information</Typography>
+            <Typography><strong>Name:</strong> {asteroid.name}</Typography>
+            <Typography><strong>Size:</strong> {asteroid.size.toFixed(3)} kilometers</Typography>
+            <Typography><strong>Speed:</strong> {(asteroid.speed * 1000).toFixed(3)} km/s</Typography>
+            <Typography><strong>Mass:</strong> {asteroid.mass.toExponential(3)} kg</Typography>
+          </Box>
         )}
-        <div>
-          <h3>Time Step: {timeStep}</h3>
+        <Box sx={{ marginBottom: '20px' }}>
+          <Typography>Time Step: {timeStep}</Typography>
           <Slider
             value={timeStep}
             min={10}
@@ -286,9 +319,9 @@ function Scenario() {
             onChange={handleTimeStepChange}
             aria-labelledby="time-step-slider"
           />
-        </div>
-        <div>
-          <h3>Initial Angle: {(asteroid.angle * 180 / Math.PI).toFixed(2)}°</h3>
+        </Box>
+        <Box sx={{ marginBottom: '20px' }}>
+          <Typography>Initial Angle: {(asteroid.angle * 180 / Math.PI).toFixed(2)}°</Typography>
           <Slider
             value={asteroid.angle}
             min={0}
@@ -297,8 +330,8 @@ function Scenario() {
             onChange={handleAngleChange}
             aria-labelledby="angle-slider"
           />
-        </div>
-      </div>
+        </Box>
+      </Box>
       <Stage width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
         <Layer>
           <Text text="Earth" fontSize={20} x={EARTH_X - EARTH_RADIUS_KM * EARTH_DISPLAY_SCALE} y={EARTH_Y - 10} />
@@ -314,7 +347,7 @@ function Scenario() {
             <Circle x={rocket.x} y={rocket.y} radius={5} fill="red" />
           )}
           {rocket.trajectory.length > 0 && (
-            <Line points={rocket.trajectory} stroke="red" strokeWidth={2} />
+            <Line points={rocket.trajectory} stroke="green" strokeWidth={2} />
           )}
         </Layer>
       </Stage>