debug

3 files changed, 70 insertions, 94 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
index 0f05010b4..2e16417f5 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
@@ -69,4 +69,8 @@ button {
 
 .mechanicsSimulationSettingsMenuRowDescription {
   width: 50%;
+}
+
+.dropdownMenu {
+  z-index: 50;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 5335fc1ec..3cb34d5b9 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -33,10 +33,9 @@ import {
 import Typography from "@mui/material/Typography";
 import "./PhysicsSimulationBox.scss";
 import InputField from "./PhysicsSimulationInputField";
-// import questions from "./PhysicsSimulationQuestions.json";
-// import tutorials from "./PhysicsSimulationTutorial.json";
+import questions from "./PhysicsSimulationQuestions.json";
+import tutorials from "./PhysicsSimulationTutorial.json";
 import Wall from "./PhysicsSimulationWall";
-import IWall from "./PhysicsSimulationWall";
 import Weight from "./PhysicsSimulationWeight";
 
 interface IWallProps {
@@ -211,7 +210,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.mass2 = this.dataDoc.mass2 ?? 1;
 
     // Setup simulation
-    this.setupSimulation()
+    this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
   }
 
   componentDidUpdate() {
@@ -220,16 +219,17 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.radius = 0.05*this.layoutDoc._height ?? 50;
   }
 
-  setupSimulation = () => {
-    if (this.dataDoc.simulationType != "Circular Motion") {
+  setupSimulation = (simulationType: string, mode: string) => {
+    this.dataDoc.simulationPaused = true;
+    if (simulationType != "Circular Motion") {
       this.dataDoc.startVelX = 0;
       this.dataDoc.setStartVelY = 0;
       this.dataDoc.velocityXDisplay = (0);
       this.dataDoc.velocityYDisplay = (0);
     }
-    if (this.dataDoc.mode == "Freeform") {
+    if (mode == "Freeform") {
       this.dataDoc.showForceMagnitudes = (true);
-      if (this.dataDoc.simulationType == "One Weight") {
+      if (simulationType == "One Weight") {
         this.dataDoc.showComponentForces = false;
         this.dataDoc.startPosY = (this.yMin + this.radius);
         this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - this.radius);
@@ -252,7 +252,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
           },
         ]);
         this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-      } else if (this.dataDoc.simulationType == "Inclined Plane") {
+      } else if (simulationType == "Inclined Plane") {
         this.changeWedgeBasedOnNewAngle(26);
         this.dataDoc.startForces = ([
           {
@@ -263,46 +263,46 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
           },
         ]);
         this.updateForcesWithFriction(Number(this.dataDoc.coefficientOfStaticFriction));
-      } else if (this.dataDoc.simulationType == "Pendulum") {
+      } else if (simulationType == "Pendulum") {
         this.setupPendulum();
-      } else if (this.dataDoc.simulationType == "Spring") {
+      } else if (simulationType == "Spring") {
         this.setupSpring();
-      } else if (this.dataDoc.simulationType == "Circular Motion") {
+      } else if (simulationType == "Circular Motion") {
         this.setupCircular(0);
-      } else if (this.dataDoc.simulationType == "Pulley") {
+      } else if (simulationType == "Pulley") {
         this.setupPulley();
-      } else if (this.dataDoc.simulationType == "Suspension") {
+      } else if (simulationType == "Suspension") {
         this.setupSuspension();
       }
-    } else if (this.dataDoc.mode == "Review") {
+    } else if (mode == "Review") {
       this.dataDoc.showComponentForces = (false);
       this.dataDoc.showForceMagnitudes = (true);
       this.dataDoc.showAcceleration = (false);
       this.dataDoc.showVelocity = (false);
       this.dataDoc.showForces= (true);
       // this.generateNewQuestion();
-      if (this.dataDoc.simulationType == "One Weight") {
+      if (simulationType == "One Weight") {
         // TODO - one weight review problems
-      } else if (this.dataDoc.simulationType == "Spring") {
+      } else if (simulationType == "Spring") {
         this.setupSpring();
         // TODO - spring review problems
-      } else if (this.dataDoc.simulationType == "Inclined Plane") {
+      } else if (simulationType == "Inclined Plane") {
         this.dataDoc.updatedForces = ([]);
         this.dataDoc.startForces = ([]);
-      } else if (this.dataDoc.simulationType == "Pendulum") {
+      } else if (simulationType == "Pendulum") {
         this.setupPendulum();
         // TODO - pendulum review problems
-      } else if (this.dataDoc.simulationType == "Circular Motion") {
+      } else if (simulationType == "Circular Motion") {
         this.setupCircular(0);
         // TODO - circular motion review problems
-      } else if (this.dataDoc.simulationType == "Pulley") {
+      } else if (simulationType == "Pulley") {
         this.setupPulley();
         // TODO - pulley tutorial review problems
-      } else if (this.dataDoc.simulationType == "Suspension") {
+      } else if (simulationType == "Suspension") {
         this.setupSuspension();
         // TODO - suspension tutorial review problems
       }
-    } else if (this.dataDoc.mode == "Tutorial") {
+    } else if (mode == "Tutorial") {
       this.dataDoc.showComponentForces = (false);
       this.dataDoc.stepNumber = (0);
       this.dataDoc.showAcceleration = (false);
@@ -1195,10 +1195,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     };
     this.dataDoc.updatedForces = ([gravityForce1, tensionForce1]);
     this.dataDoc.startForces = ([gravityForce1, tensionForce1]);
-    this.dataDoc.startPosY2 = ((this.props.yMax + this.props.yMin) / 2);
-    this.dataDoc.startPosX2 = ((this.props.xMin + this.props.xMax) / 2 + 5);
-    this.dataDoc.positionYDisplay2 = (this.getDisplayYPos((this.props.yMax + this.props.yMin) / 2));
-    this.dataDoc.positionXDisplay2 = ((this.props.xMin + this.props.xMax) / 2 + 5);
+    this.dataDoc.startPosY2 = ((this.yMax + this.yMin) / 2);
+    this.dataDoc.startPosX2 = ((this.xMin + this.xMax) / 2 + 5);
+    this.dataDoc.positionYDisplay2 = (this.getDisplayYPos((this.yMax + this.yMin) / 2));
+    this.dataDoc.positionXDisplay2 = ((this.xMin + this.xMax) / 2 + 5);
     this.dataDoc.updatedForces2 = ([gravityForce2, tensionForce2]);
     this.dataDoc.startForces2 = ([gravityForce2, tensionForce2]);
     this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
@@ -1278,32 +1278,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <LinearProgress />
               </div>
             )}
-            <div
-              style={{
-                position: "fixed",
-                top: 1 + "em",
-                left: this.xMin + 12 + "px",
-              }}
-            >
-              <div className="dropdownMenu">
-                <select
-                  value={this.dataDoc.simulationType}
-                  onChange={(event) => {
-                    this.dataDoc.simulationType = (event.target.value);
-                    this.setupSimulation()
-                  }}
-                  style={{ height: "2em", width: "100%", fontSize: "16px" }}
-                >
-                  <option value="One Weight">Projectile</option>
-                  <option value="Inclined Plane">Inclined Plane</option>
-                  <option value="Pendulum">Pendulum</option>
-                  <option value="Spring">Spring</option>
-                  <option value="Circular Motion">Circular Motion</option>
-                  <option value="Pulley">Pulley</option>
-                  <option value="Suspension">Suspension</option>
-                </select>
-              </div>
-            </div>
           </div>
           <div className="mechanicsSimulationElements">
             <Weight
@@ -1341,7 +1315,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
               springRestLength={this.dataDoc.springRestLength}
               startForces={this.dataDoc.startForces}
               startPosX={this.dataDoc.startPosX}
-              startPosY={this.dataDoc.startPosY}
+              startPosY={this.dataDoc.startPosY ?? 0}
               startVelX={this.dataDoc.startVelX}
               startVelY={this.dataDoc.startVelY}
               timestepSize={0.05}
@@ -1454,11 +1428,29 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             )}
           </Stack>
           <div className="dropdownMenu">
+                <select
+                  value={this.dataDoc.simulationType}
+                  onChange={(event) => {
+                    this.dataDoc.simulationType = (event.target.value);
+                    this.setupSimulation(event.target.value, this.dataDoc.mode)
+                  }}
+                  style={{ height: "2em", width: "100%", fontSize: "16px" }}
+                >
+                  <option value="One Weight">Projectile</option>
+                  <option value="Inclined Plane">Inclined Plane</option>
+                  <option value="Pendulum">Pendulum</option>
+                  <option value="Spring">Spring</option>
+                  <option value="Circular Motion">Circular Motion</option>
+                  <option value="Pulley">Pulley</option>
+                  <option value="Suspension">Suspension</option>
+                </select>
+              </div>
+          <div className="dropdownMenu">
             <select
               value={this.dataDoc.mode}
               onChange={(event) => {
                 this.dataDoc.mode = (event.target.value);
-                this.setupSimulation()
+                this.setupSimulation(this.dataDoc.simulationType, event.target.value)
               }}
               style={{ height: "2em", width: "100%", fontSize: "16px" }}
             >
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 368f35f3c..f78f14704 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -179,7 +179,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
   componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
     // Change pendulum angle from input field
     if (prevProps.adjustPendulumAngle != this.props.adjustPendulumAngle) {
-      console.log('pendulum angle')
       let length = this.props.adjustPendulumAngle.length;
       const x =
         length * Math.cos(((90 - this.props.adjustPendulumAngle.angle) * Math.PI) / 180);
@@ -197,7 +196,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
 
     // When display values updated by user, update real values
     if (prevProps.updateDisplay != this.props.updateDisplay) {
-      console.log('update display')
       if (this.props.updateDisplay.xDisplay != this.state.xPosition) {
         let x = this.props.updateDisplay.xDisplay;
         x = Math.max(0, x);
@@ -232,26 +230,25 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     
     // Prevent bug when switching between sims
     if (prevProps.startForces != this.props.startForces) {
-      console.log('switch sims')
       this.setState({xVelocity: this.props.startVelX})
       this.setState({yVelocity: this.props.startVelY})
       this.setDisplayValues();
     }
 
-    // Make sure weight doesn't go above max height 
-    if (prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) {
-      console.log('max height check')
-      if (this.props.dataDoc['simulationType'] == "One Weight") {
-        let maxYPos = this.state.updatedStartPosY;
-        if (this.props.startVelY != 0) {
-          maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * Math.abs(this.props.gravity));
-        }
-        if (maxYPos < 0) {
-          maxYPos = 0;
-        }
-        this.setState({maxPosYConservation: maxYPos})
-      }
-    }
+    // // Make sure weight doesn't go above max height 
+    // if (prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) {
+    //   console.log('max height check')
+    //   if (this.props.dataDoc['simulationType'] == "One Weight") {
+    //     let maxYPos = this.state.updatedStartPosY;
+    //     if (this.props.startVelY != 0) {
+    //       maxYPos -= (this.props.startVelY * this.props.startVelY) / (2 * Math.abs(this.props.gravity));
+    //     }
+    //     if (maxYPos < 0) {
+    //       maxYPos = 0;
+    //     }
+    //     this.setState({maxPosYConservation: maxYPos})
+    //   }
+    // }
 
     // Check for collisions and update
     if (prevState.timer != this.state.timer) {
@@ -416,8 +413,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
 
     // Update x position when start pos x changes
     if (prevProps.startPosX != this.props.startPosX) {
-      console.log('xpos')
-      if (this.props.paused) {
+      if (this.props.paused && !isNaN(this.props.startPosX)) {
         this.setState({xPosition: this.props.startPosX})
         this.setState({updatedStartPosX: this.props.startPosX})
         this.setXPosDisplay(this.props.startPosX)
@@ -426,11 +422,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
 
     // Update y position when start pos y changes TODO debug
     if (prevProps.startPosY != this.props.startPosY) {
-      console.log('ypos')
-       if (this.props.paused) {
-        // this.setState({yPosition: this.props.startPosY})
-        this.setState({updatedStartPosY: this.props.startPosY})
-        this.setYPosDisplay(this.props.startPosY)
+       if (this.props.paused && !isNaN(this.props.startPosY)) {
+        this.setState({yPosition: this.props.startPosY})
+        this.setState({updatedStartPosY: this.props.startPosY ?? 0})
+        this.setYPosDisplay(this.props.startPosY ?? 0)
       }
     }
 
@@ -1110,7 +1105,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             position: "absolute",
             left: 0,
             top: 0,
-            zIndex: -2,
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
@@ -1133,7 +1127,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             position: "absolute",
             left: 0,
             top: 0,
-            zIndex: -2,
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
@@ -1149,7 +1142,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           <p
             style={{
               position: "absolute",
-              zIndex: 10,
               left: (this.props.xMax + this.props.xMin) / 2 - this.props.radius - this.props.yMin - 200 + 80 + "px",
               top: 10 + "px",
               backgroundColor: this.labelBackgroundColor,
@@ -1178,7 +1170,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             position: "absolute",
             left: 0,
             top: 0,
-            zIndex: -2,
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
@@ -1195,7 +1186,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           <p
             style={{
               position: "absolute",
-              zIndex: 10,
               left: (this.props.xMax + this.props.xMin) / 2 + this.props.yMin + 200 + this.props.radius - 80 + "px",
               top: 10 + "px",
               backgroundColor: this.labelBackgroundColor,
@@ -1226,7 +1216,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             position: "absolute",
             left: 0,
             top: 0,
-            zIndex: -2,
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
@@ -1249,7 +1238,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             position: "absolute",
             left: 0,
             top: 0,
-            zIndex: -2,
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
@@ -1278,7 +1266,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               <p
                 style={{
                   position: "absolute",
-                  zIndex: -1,
                   left: this.props.xMax / 2 + "px",
                   top: 30 + "px",
                   backgroundColor: this.labelBackgroundColor,
@@ -1320,7 +1307,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             style={{
               pointerEvents: "none",
               position: "absolute",
-              zIndex: -1,
               left: 0,
               top: 0,
             }}
@@ -1355,7 +1341,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 position: "absolute",
                 left: this.state.xPosition + this.props.radius + this.state.xAccel * 3 + 25 + "px",
                 top: this.state.yPosition + this.props.radius + this.state.yAccel * 3 + 70 + "px",
-                zIndex: -1,
                 lineHeight: 0.5,
               }}
             >
@@ -1376,7 +1361,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             style={{
               pointerEvents: "none",
               position: "absolute",
-              zIndex: -1,
               left: 0,
               top: 0,
             }}
@@ -1411,7 +1395,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 position: "absolute",
                 left: this.state.xPosition + this.props.radius + this.state.xVelocity * 3 + 25 + "px",
                 top: this.state.yPosition +  this.props.radius + this.state.yVelocity * 3 + "px",
-                zIndex: -1,
                 lineHeight: 0.5,
               }}
             >
@@ -1473,7 +1456,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 style={{
                   pointerEvents: "none",
                   position: "absolute",
-                  zIndex: -1,
                   left: this.props.xMin,
                   top: this.props.yMin,
                 }}
@@ -1526,7 +1508,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   position: "absolute",
                   left: labelLeft + "px",
                   top: labelTop + "px",
-                  // zIndex: -1,
                   lineHeight: 0.5,
                   backgroundColor: this.labelBackgroundColor,
                 }}
@@ -1584,7 +1565,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 style={{
                   pointerEvents: "none",
                   position: "absolute",
-                  zIndex: -1,
                   left: this.props.xMin,
                   top: this.props.yMin,
                 }}