keep switching to class components

2 files changed, 282 insertions, 286 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationApp.tsx b/src/client/views/nodes/PhysicsSimulationApp.tsx
index 2277c7875..bd218f63b 100644
--- a/src/client/views/nodes/PhysicsSimulationApp.tsx
+++ b/src/client/views/nodes/PhysicsSimulationApp.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import "./PhysicsSimulationBox.scss";
-import Weight  from "./PhysicsSimulationWeight";
+import Weight, { IForce }  from "./PhysicsSimulationWeight";
 import Wall  from "./PhysicsSimulationWall"
 import Wedge from "./PhysicsSimulationWedge"
 import { props, any } from 'bluebird';
diff --git a/src/client/views/nodes/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsSimulationWeight.tsx
index d234c1395..fb040c850 100644
--- a/src/client/views/nodes/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWeight.tsx
@@ -57,6 +57,8 @@ export interface IWeightProps {
 }
 
 interface IState {
+  clickPositionX: number,
+  clickPositionY: number,
   dragging: boolean,
   kineticFriction: boolean,
   updatedStartPosX: number,
@@ -71,6 +73,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
   constructor(props: any) {
     super(props)
     this.state = {
+      clickPositionX: 0,
+      clickPositionY: 0,
       dragging: false,
       kineticFriction: false,
       updatedStartPosX: this.props.startPosX,
@@ -96,29 +100,29 @@ export default class Weight extends React.Component<IWeightProps, IState> {
   yMin = 0;
 
   // Helper function to go between display and real values
-  const getDisplayYPos = (yPos: number) => {
+  getDisplayYPos = (yPos: number) => {
     return this.yMax - yPos - 2 * this.props.radius + 5;
   };
-  const getYPosFromDisplay = (yDisplay: number) => {
+  getYPosFromDisplay = (yDisplay: number) => {
     return this.yMax - yDisplay - 2 * this.props.radius + 5;
   };
 
   // Set display values based on real values
-  const setYPosDisplay = (yPos: number) => {
+  setYPosDisplay = (yPos: number) => {
     const displayPos = this.getDisplayYPos(yPos);
     this.props.setDisplayYPosition(Math.round(displayPos * 100) / 100)
   };
-  const setXPosDisplay = (xPos: number) => {
+  setXPosDisplay = (xPos: number) => {
     this.props.setDisplayXPosition(Math.round(xPos * 100) / 100);
   };
-  const setYVelDisplay = (yVel: number) => {
+  setYVelDisplay = (yVel: number) => {
     this.props.setDisplayYVelocity((-1 * Math.round(yVel * 100)) / 100);
   };
-  const setXVelDisplay = (xVel: number) => {
+  setXVelDisplay = (xVel: number) => {
     this.props.setDisplayXVelocity(Math.round(xVel * 100) / 100);
   };
 
-  const setDisplayValues = (
+  setDisplayValues = (
     xPos: number = this.state.xPosition,
     yPos: number = this.state.yPosition,
     xVel: number = this.state.xVelocity,
@@ -129,10 +133,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     this.setYVelDisplay(yVel);
     this.setXVelDisplay(xVel);
     this.props.setDisplayYAcceleration(
-      (-1 * Math.round(getNewAccelerationY(this.props.updatedForces) * 100)) / 100
+      (-1 * Math.round(this.getNewAccelerationY(this.props.updatedForces) * 100)) / 100
     );
     this.props.setDisplayXAcceleration(
-      Math.round(getNewAccelerationX(this.props.updatedForces) * 100) / 100
+      Math.round(this.getNewAccelerationX(this.props.updatedForces) * 100) / 100
     );
   };
 
@@ -170,62 +174,59 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.props.setDisplayXVelocity(y);
       }
     }
-  }
-
-  // Check for collisions and update
-  useEffect(() => {
-    if (!paused && !noMovement) {
-      let collisions = false;
-      if (!pendulum) {
-        const collisionsWithGround = checkForCollisionsWithGround();
-        const collisionsWithWalls = checkForCollisionsWithWall();
-        collisions = collisionsWithGround || collisionsWithWalls;
-      }
-      if (!collisions) {
-        update();
+    // Update sim
+    if (this.props.incrementTime != prevProps.incrementTime) {
+      if (!this.props.paused) {
+        let collisions = false;
+        if (!this.props.pendulum) {
+          const collisionsWithGround = this.checkForCollisionsWithGround();
+          const collisionsWithWalls = this.checkForCollisionsWithWall();
+          collisions = collisionsWithGround || collisionsWithWalls;
+        }
+        if (!collisions) {
+          this.update();
+        }
+        this.setDisplayValues();
       }
-      setDisplayValues();
     }
-  }, [incrementTime]);
-
-  useEffect(() => {
-    resetEverything();
-  }, [reset]);
-
-  useEffect(() => {
-    setXVelocity(startVelX ?? 0);
-    setYVelocity(startVelY ?? 0);
-    setDisplayValues();
-  }, [startForces]);
-
-  const resetEverything = () => {
-    setKineticFriction(false);
-    setXPosition(updatedStartPosX);
-    setYPosition(updatedStartPosY);
-    setXVelocity(startVelX ?? 0);
-    setYVelocity(startVelY ?? 0);
-    setUpdatedForces(startForces);
-    setDisplayValues();
+    if (this.props.reset != prevProps.reset) {
+      this.resetEverything();
+    }
+    if (this.props.startForces != prevProps.startForces) {
+      this.setState({xVelocity: this.props.startVelX ?? 0})
+      this.setState({yVelocity: this.props.startVelY ?? 0})
+      this.setDisplayValues();
+    }
+  }
+
+  resetEverything = () => {
+    this.setState({kineticFriction: false})
+    this.setState({xPosition: this.state.updatedStartPosX})
+    this.setState({yPosition: this.state.updatedStartPosY})
+    this.setState({xVelocity: this.props.startVelX ?? 0})
+    this.setState({yVelocity: this.props.startVelY ?? 0})
+    this.props.setUpdatedForces(this.props.startForces)
+    this.setDisplayValues();
   };
 
-  // Change pendulum angle based on input field
-  useEffect(() => {
-    let length = adjustPendulumAngle.length;
-    const x =
-      length * Math.cos(((90 - adjustPendulumAngle.angle) * Math.PI) / 180);
-    const y =
-      length * Math.sin(((90 - adjustPendulumAngle.angle) * Math.PI) / 180);
-    const xPos = xMax / 2 - x - radius;
-    const yPos = y - radius - 5;
-    setXPosition(xPos);
-    setYPosition(yPos);
-    setUpdatedStartPosX(xPos);
-    setUpdatedStartPosY(yPos);
-    setPendulumAngle(adjustPendulumAngle.angle);
-    setPendulumLength(adjustPendulumAngle.length);
-  }, [adjustPendulumAngle]);
-
-  const getNewAccelerationX = (forceList: IForce[]) => {
+  // // Change pendulum angle based on input field
+  // useEffect(() => {
+  //   let length = adjustPendulumAngle.length;
+  //   const x =
+  //     length * Math.cos(((90 - adjustPendulumAngle.angle) * Math.PI) / 180);
+  //   const y =
+  //     length * Math.sin(((90 - adjustPendulumAngle.angle) * Math.PI) / 180);
+  //   const xPos = xMax / 2 - x - radius;
+  //   const yPos = y - radius - 5;
+  //   setXPosition(xPos);
+  //   setYPosition(yPos);
+  //   setUpdatedStartPosX(xPos);
+  //   setUpdatedStartPosY(yPos);
+  //   setPendulumAngle(adjustPendulumAngle.angle);
+  //   setPendulumLength(adjustPendulumAngle.length);
+  // }, [adjustPendulumAngle]);
+
+  getNewAccelerationX = (forceList: IForce[]) => {
     let newXAcc = 0;
     forceList.forEach((force) => {
       newXAcc +=
@@ -236,7 +237,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     return newXAcc;
   };
 
-  const getNewAccelerationY = (forceList: IForce[]) => {
+  getNewAccelerationY = (forceList: IForce[]) => {
     let newYAcc = 0;
     forceList.forEach((force) => {
       newYAcc +=
@@ -248,14 +249,14 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     return newYAcc;
   };
 
-  const getNewForces = (
+  getNewForces = (
     xPos: number,
     yPos: number,
     xVel: number,
     yVel: number
   ) => {
     if (!this.props.pendulum) {
-      return this.state.updatedForces;
+      return this.props.updatedForces;
     }
     const x = this.xMax / 2 - xPos - this.props.radius;
     const y = yPos + this.props.radius + 5;
@@ -269,8 +270,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     }
 
     const pendulumLength = Math.sqrt(x * x + y * y);
-    setPendulumAngle(oppositeAngle);
-    setPendulumLength(Math.sqrt(x * x + y * y));
+    this.props.setPendulumAngle(oppositeAngle);
+    this.props.setPendulumLength(Math.sqrt(x * x + y * y));
 
     const mag =
       this.props.mass * 9.81 * Math.cos((oppositeAngle * Math.PI) / 180) +
@@ -285,74 +286,74 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     return [this.forceOfGravity, forceOfTension];
   };
 
-  const getNewPosition = (pos: number, vel: number) => {
+  getNewPosition = (pos: number, vel: number) => {
     return pos + vel * this.props.timestepSize;
   };
 
-  const getNewVelocity = (vel: number, acc: number) => {
+  getNewVelocity = (vel: number, acc: number) => {
     return vel + acc * this.props.timestepSize;
   };
 
-  const checkForCollisionsWithWall = () => {
+  // const checkForCollisionsWithWall = () => {
+  //   let collision = false;
+  //   const minX = this.state.xPosition;
+  //   const maxX = this.state.xPosition + 2 * this.props.radius;
+  //   const containerWidth = window.innerWidth;
+  //   if (this.state.xVelocity != 0) {
+  //     this.props.walls.forEach((wall) => {
+  //       if (wall.angleInDegrees == 90) {
+  //         const wallX = (wall.xPos / 100) * window.innerWidth;
+  //         if (wall.xPos < 0.35) {
+  //           if (minX <= wallX) {
+  //             if (elasticCollisions) {
+  //               setXVelocity(-xVelocity);
+  //             } else {
+  //               setXVelocity(0);
+  //               setXPosition(wallX + 5);
+  //             }
+  //             collision = true;
+  //           }
+  //         } else {
+  //           if (maxX >= wallX) {
+  //             if (elasticCollisions) {
+  //               setXVelocity(-xVelocity);
+  //             } else {
+  //               setXVelocity(0);
+  //               setXPosition(wallX - 2 * radius + 5);
+  //             }
+  //             collision = true;
+  //           }
+  //         }
+  //       }
+  //     });
+  //   }
+  //   return collision;
+  // };
+
+  checkForCollisionsWithGround = () => {
     let collision = false;
-    const minX = this.state.xPosition;
-    const maxX = this.state.xPosition + 2 * this.props.radius;
-    const containerWidth = window.innerWidth;
-    if (this.state.xVelocity != 0) {
+    const maxY = this.state.yPosition + 2 * this.props.radius;
+    if (this.state.yVelocity > 0) {
       this.props.walls.forEach((wall) => {
-        if (wall.angleInDegrees == 90) {
-          const wallX = (wall.xPos / 100) * window.innerWidth;
-          if (wall.xPos < 0.35) {
-            if (minX <= wallX) {
-              if (elasticCollisions) {
-                setXVelocity(-xVelocity);
-              } else {
-                setXVelocity(0);
-                setXPosition(wallX + 5);
-              }
-              collision = true;
-            }
-          } else {
-            if (maxX >= wallX) {
-              if (elasticCollisions) {
-                setXVelocity(-xVelocity);
-              } else {
-                setXVelocity(0);
-                setXPosition(wallX - 2 * radius + 5);
-              }
-              collision = true;
-            }
-          }
-        }
-      });
-    }
-    return collision;
-  };
-
-  const checkForCollisionsWithGround = () => {
-    let collision = false;
-    const maxY = yPosition + 2 * radius;
-    if (yVelocity > 0) {
-      walls.forEach((wall) => {
         if (wall.angleInDegrees == 0) {
           const groundY = (wall.yPos / 100) * window.innerHeight;
           if (maxY >= groundY) {
-            if (elasticCollisions) {
-              setYVelocity(-yVelocity);
+            if (this.props.elasticCollisions) {
+              this.setState({yVelocity: -this.state.yVelocity})
             } else {
-              setYVelocity(0);
-              setYPosition(groundY - 2 * radius + 5);
+              this.setState({yVelocity: 0})
+              this.setState({yPosition: groundY - 2 * this.props.radius + 5})
               const forceOfGravity: IForce = {
                 description: "Gravity",
-                magnitude: 9.81 * mass,
+                magnitude: 9.81 * this.props.mass,
                 directionInDegrees: 270,
               };
               const normalForce: IForce = {
                 description: "Normal force",
-                magnitude: 9.81 * mass,
+                magnitude: 9.81 * this.props.mass,
                 directionInDegrees: wall.angleInDegrees + 90,
               };
-              setUpdatedForces([forceOfGravity, normalForce]);
+              this.props.setUpdatedForces([forceOfGravity, normalForce]);
             }
             collision = true;
           }
@@ -362,152 +363,147 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     return collision;
   };
 
-  useEffect(() => {
-    if (wedge && xVelocity != 0 && mode != "Review" && !kineticFriction) {
-      setKineticFriction(true);
-      //switch from static to kinetic friction
-      const normalForce: IForce = {
-        description: "Normal Force",
-        magnitude:
-          forceOfGravity.magnitude *
-          Math.cos(Math.atan(wedgeHeight / wedgeWidth)),
-        directionInDegrees:
-          180 - 90 - (Math.atan(wedgeHeight / wedgeWidth) * 180) / Math.PI,
-      };
-      let frictionForce: IForce = {
-        description: "Kinetic Friction Force",
-        magnitude:
-          coefficientOfKineticFriction *
-          forceOfGravity.magnitude *
-          Math.cos(Math.atan(wedgeHeight / wedgeWidth)),
-        directionInDegrees:
-          180 - (Math.atan(wedgeHeight / wedgeWidth) * 180) / Math.PI,
-      };
-      // reduce magnitude of friction force if necessary such that block cannot slide up plane
-      let yForce = -forceOfGravity.magnitude;
-      yForce +=
-        normalForce.magnitude *
-        Math.sin((normalForce.directionInDegrees * Math.PI) / 180);
-      yForce +=
-        frictionForce.magnitude *
-        Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
-      if (yForce > 0) {
-        frictionForce.magnitude =
-          (-normalForce.magnitude *
-            Math.sin((normalForce.directionInDegrees * Math.PI) / 180) +
-            forceOfGravity.magnitude) /
-          Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
-      }
-      if (coefficientOfKineticFriction != 0) {
-        setUpdatedForces([forceOfGravity, normalForce, frictionForce]);
-      } else {
-        setUpdatedForces([forceOfGravity, normalForce]);
-      }
-    }
-  }, [xVelocity]);
-
-  const update = () => {
-    // RK4 update
-    let xPos = xPosition;
-    let yPos = yPosition;
-    let xVel = xVelocity;
-    let yVel = yVelocity;
-    for (let i = 0; i < 60; i++) {
-      let forces1 = getNewForces(xPos, yPos, xVel, yVel);
-      const xAcc1 = getNewAccelerationX(forces1);
-      const yAcc1 = getNewAccelerationY(forces1);
-      const xVel1 = getNewVelocity(xVel, xAcc1);
-      const yVel1 = getNewVelocity(yVel, yAcc1);
-
-      let xVel2 = getNewVelocity(xVel, xAcc1 / 2);
-      let yVel2 = getNewVelocity(yVel, yAcc1 / 2);
-      let xPos2 = getNewPosition(xPos, xVel1 / 2);
-      let yPos2 = getNewPosition(yPos, yVel1 / 2);
-      const forces2 = getNewForces(xPos2, yPos2, xVel2, yVel2);
-      const xAcc2 = getNewAccelerationX(forces2);
-      const yAcc2 = getNewAccelerationY(forces2);
-      xVel2 = getNewVelocity(xVel2, xAcc2);
-      yVel2 = getNewVelocity(yVel2, yAcc2);
-      xPos2 = getNewPosition(xPos2, xVel2);
-      yPos2 = getNewPosition(yPos2, yVel2);
-
-      let xVel3 = getNewVelocity(xVel, xAcc2 / 2);
-      let yVel3 = getNewVelocity(yVel, yAcc2 / 2);
-      let xPos3 = getNewPosition(xPos, xVel2 / 2);
-      let yPos3 = getNewPosition(yPos, yVel2 / 2);
-      const forces3 = getNewForces(xPos3, yPos3, xVel3, yVel3);
-      const xAcc3 = getNewAccelerationX(forces3);
-      const yAcc3 = getNewAccelerationY(forces3);
-      xVel3 = getNewVelocity(xVel3, xAcc3);
-      yVel3 = getNewVelocity(yVel3, yAcc3);
-      xPos3 = getNewPosition(xPos3, xVel3);
-      yPos3 = getNewPosition(yPos3, yVel3);
-
-      let xVel4 = getNewVelocity(xVel, xAcc3);
-      let yVel4 = getNewVelocity(yVel, yAcc3);
-      let xPos4 = getNewPosition(xPos, xVel3);
-      let yPos4 = getNewPosition(yPos, yVel3);
-      const forces4 = getNewForces(xPos4, yPos4, xVel4, yVel4);
-      const xAcc4 = getNewAccelerationX(forces4);
-      const yAcc4 = getNewAccelerationY(forces4);
-      xVel4 = getNewVelocity(xVel4, xAcc4);
-      yVel4 = getNewVelocity(yVel4, yAcc4);
-      xPos4 = getNewPosition(xPos4, xVel4);
-      yPos4 = getNewPosition(yPos4, yVel4);
-
-      xVel +=
-        timestepSize * (xAcc1 / 6.0 + xAcc2 / 3.0 + xAcc3 / 3.0 + xAcc4 / 6.0);
-      yVel +=
-        timestepSize * (yAcc1 / 6.0 + yAcc2 / 3.0 + yAcc3 / 3.0 + yAcc4 / 6.0);
-      xPos +=
-        timestepSize * (xVel1 / 6.0 + xVel2 / 3.0 + xVel3 / 3.0 + xVel4 / 6.0);
-      yPos +=
-        timestepSize * (yVel1 / 6.0 + yVel2 / 3.0 + yVel3 / 3.0 + yVel4 / 6.0);
-    }
-
-    setXVelocity(xVel);
-    setYVelocity(yVel);
-    setXPosition(xPos);
-    setYPosition(yPos);
-    setUpdatedForces(getNewForces(xPos, yPos, xVel, yVel));
-  };
-
-  let weightStyle = {
-    backgroundColor: color,
+  // useEffect(() => {
+  //   if (wedge && xVelocity != 0 && mode != "Review" && !kineticFriction) {
+  //     setKineticFriction(true);
+  //     //switch from static to kinetic friction
+  //     const normalForce: IForce = {
+  //       description: "Normal Force",
+  //       magnitude:
+  //         forceOfGravity.magnitude *
+  //         Math.cos(Math.atan(wedgeHeight / wedgeWidth)),
+  //       directionInDegrees:
+  //         180 - 90 - (Math.atan(wedgeHeight / wedgeWidth) * 180) / Math.PI,
+  //     };
+  //     let frictionForce: IForce = {
+  //       description: "Kinetic Friction Force",
+  //       magnitude:
+  //         coefficientOfKineticFriction *
+  //         forceOfGravity.magnitude *
+  //         Math.cos(Math.atan(wedgeHeight / wedgeWidth)),
+  //       directionInDegrees:
+  //         180 - (Math.atan(wedgeHeight / wedgeWidth) * 180) / Math.PI,
+  //     };
+  //     // reduce magnitude of friction force if necessary such that block cannot slide up plane
+  //     let yForce = -forceOfGravity.magnitude;
+  //     yForce +=
+  //       normalForce.magnitude *
+  //       Math.sin((normalForce.directionInDegrees * Math.PI) / 180);
+  //     yForce +=
+  //       frictionForce.magnitude *
+  //       Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+  //     if (yForce > 0) {
+  //       frictionForce.magnitude =
+  //         (-normalForce.magnitude *
+  //           Math.sin((normalForce.directionInDegrees * Math.PI) / 180) +
+  //           forceOfGravity.magnitude) /
+  //         Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
+  //     }
+  //     if (coefficientOfKineticFriction != 0) {
+  //       this.props.setUpdatedForces([forceOfGravity, normalForce, frictionForce]);
+  //     } else {
+  //       this.props.setUpdatedForces([forceOfGravity, normalForce]);
+  //     }
+  //   }
+  // }, [xVelocity]);
+
+  // const update = () => {
+  //   // RK4 update
+  //   let xPos = xPosition;
+  //   let yPos = yPosition;
+  //   let xVel = xVelocity;
+  //   let yVel = yVelocity;
+  //   for (let i = 0; i < 60; i++) {
+  //     let forces1 = this.getNewForces(xPos, yPos, xVel, yVel);
+  //     const xAcc1 = this.getNewAccelerationX(forces1);
+  //     const yAcc1 = this.getNewAccelerationY(forces1);
+  //     const xVel1 = this.getNewVelocity(xVel, xAcc1);
+  //     const yVel1 = this.getNewVelocity(yVel, yAcc1);
+
+  //     let xVel2 = getNewVelocity(xVel, xAcc1 / 2);
+  //     let yVel2 = getNewVelocity(yVel, yAcc1 / 2);
+  //     let xPos2 = getNewPosition(xPos, xVel1 / 2);
+  //     let yPos2 = getNewPosition(yPos, yVel1 / 2);
+  //     const forces2 = this.getNewForces(xPos2, yPos2, xVel2, yVel2);
+  //     const xAcc2 = this.getNewAccelerationX(forces2);
+  //     const yAcc2 = this.getNewAccelerationY(forces2);
+  //     xVel2 = this.getNewVelocity(xVel2, xAcc2);
+  //     yVel2 = this.getNewVelocity(yVel2, yAcc2);
+  //     xPos2 = this.getNewPosition(xPos2, xVel2);
+  //     yPos2 = this.getNewPosition(yPos2, yVel2);
+
+  //     let xVel3 = this.getNewVelocity(xVel, xAcc2 / 2);
+  //     let yVel3 = this.getNewVelocity(yVel, yAcc2 / 2);
+  //     let xPos3 = this.getNewPosition(xPos, xVel2 / 2);
+  //     let yPos3 = this.getNewPosition(yPos, yVel2 / 2);
+  //     const forces3 = this.getNewForces(xPos3, yPos3, xVel3, yVel3);
+  //     const xAcc3 = this.getNewAccelerationX(forces3);
+  //     const yAcc3 = this.getNewAccelerationY(forces3);
+  //     xVel3 = this.getNewVelocity(xVel3, xAcc3);
+  //     yVel3 = this.getNewVelocity(yVel3, yAcc3);
+  //     xPos3 = this.getNewPosition(xPos3, xVel3);
+  //     yPos3 = this.getNewPosition(yPos3, yVel3);
+
+  //     let xVel4 = this.getNewVelocity(xVel, xAcc3);
+  //     let yVel4 = this.getNewVelocity(yVel, yAcc3);
+  //     let xPos4 = this.getNewPosition(xPos, xVel3);
+  //     let yPos4 = this.getNewPosition(yPos, yVel3);
+  //     const forces4 = this.getNewForces(xPos4, yPos4, xVel4, yVel4);
+  //     const xAcc4 = this.getNewAccelerationX(forces4);
+  //     const yAcc4 = this.getNewAccelerationY(forces4);
+  //     xVel4 = this.getNewVelocity(xVel4, xAcc4);
+  //     yVel4 = this.getNewVelocity(yVel4, yAcc4);
+  //     xPos4 = this.getNewPosition(xPos4, xVel4);
+  //     yPos4 = this.getNewPosition(yPos4, yVel4);
+
+  //     xVel +=
+  //       timestepSize * (xAcc1 / 6.0 + xAcc2 / 3.0 + xAcc3 / 3.0 + xAcc4 / 6.0);
+  //     yVel +=
+  //       timestepSize * (yAcc1 / 6.0 + yAcc2 / 3.0 + yAcc3 / 3.0 + yAcc4 / 6.0);
+  //     xPos +=
+  //       timestepSize * (xVel1 / 6.0 + xVel2 / 3.0 + xVel3 / 3.0 + xVel4 / 6.0);
+  //     yPos +=
+  //       timestepSize * (yVel1 / 6.0 + yVel2 / 3.0 + yVel3 / 3.0 + yVel4 / 6.0);
+  //   }
+
+  //   setXVelocity(xVel);
+  //   setYVelocity(yVel);
+  //   setXPosition(xPos);
+  //   setYPosition(yPos);
+  //   this.props.setUpdatedForces(getNewForces(xPos, yPos, xVel, yVel));
+  // };
+
+  weightStyle = {
+    backgroundColor: this.props.color,
     borderStyle: "solid",
-    borderColor: "black",
+    borderColor: this.state.dragging ? "lightblue" : "black",
     position: "absolute" as "absolute",
-    left: xPosition + "px",
-    top: yPosition + "px",
-    width: 2 * radius + "px",
-    height: 2 * radius + "px",
+    left: this.state.xPosition + "px",
+    top: this.state.yPosition + "px",
+    width: 2 * this.props.radius + "px",
+    height: 2 * this.props.radius + "px",
     borderRadius: 50 + "%",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     touchAction: "none",
   };
-  if (dragging) {
-    weightStyle.borderColor = "lightblue";
-  }
 
-  const [clickPositionX, setClickPositionX] = useState(0);
-  const [clickPositionY, setClickPositionY] = useState(0);
-  const labelBackgroundColor = `rgba(255,255,255,0.5)`;
+  labelBackgroundColor = `rgba(255,255,255,0.5)`;
 
-  // Update x start position
-  useEffect(() => {
-    setUpdatedStartPosX(startPosX);
-    setXPosition(startPosX);
-    setXPosDisplay(startPosX);
-  }, [startPosX]);
+  // // Update x start position
+  // useEffect(() => {
+  //   setUpdatedStartPosX(startPosX);
+  //   setXPosition(startPosX);
+  //   setXPosDisplay(startPosX);
+  // }, [startPosX]);
 
-  // Update y start position
-  useEffect(() => {
-    setUpdatedStartPosY(startPosY);
-    setYPosition(startPosY);
-    setYPosDisplay(startPosY);
-  }, [startPosY]);
+  // // Update y start position
+  // useEffect(() => {
+  //   setUpdatedStartPosY(startPosY);
+  //   setYPosition(startPosY);
+  //   setYPosDisplay(startPosY);
+  // }, [startPosY]);
 
   render () {
     return (
@@ -515,23 +511,23 @@ export default class Weight extends React.Component<IWeightProps, IState> {
       <div
         className="weightContainer"
         onPointerDown={(e) => {
-          if (this.props.draggable) {
+          if (this.draggable) {
             e.preventDefault();
             this.props.setPaused(true);
             this.setState({dragging: true});
-            setClickPositionX(e.clientX);
-            setClickPositionY(e.clientY);
+            this.setState({clickPositionX: e.clientX})
+            this.setState({clickPositionY: e.clientY})
           }
         }}
         onPointerMove={(e) => {
           e.preventDefault();
           if (this.state.dragging) {
-            let newY = this.state.yPosition + e.clientY - clickPositionY;
+            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
             if (newY > this.yMax - 2 * this.props.radius) {
               newY = this.yMax - 2 * this.props.radius;
             }
 
-            let newX = this.state.xPosition + e.clientX - clickPositionX;
+            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
             if (newX > this.xMax - 2 * this.props.radius) {
               newX = this.xMax - 2 * this.props.radius;
             } else if (newX < 0) {
@@ -541,31 +537,31 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             this.setState({yPosition: newY})
             this.setState({updatedStartPosX: newX})
             this.setState({updatedStartPosY: newY})
-            this.setState({displayYPosition: Math.round((yMax - 2 * radius - newY + 5) * 100) / 100})
-            setClickPositionX(e.clientX);
-            setClickPositionY(e.clientY);
-            setDisplayValues();
+            this.props.setDisplayYPosition(Math.round((this.yMax - 2 * this.props.radius - newY + 5) * 100) / 100)
+            this.setState({clickPositionX: e.clientX})
+            this.setState({clickPositionY: e.clientY})
+            this.setDisplayValues();
           }
         }}
         onPointerUp={(e) => {
-          if (dragging) {
+          if (this.state.dragging) {
             e.preventDefault();
-            if (!pendulum) {
-              resetEverything();
+            if (!this.props.pendulum) {
+              this.resetEverything();
             }
-            setDragging(false);
-            let newY = this.state.yPosition + e.clientY - clickPositionY;
+            this.setState({dragging: false});
+            let newY = this.state.yPosition + e.clientY - this.state.clickPositionY;
             if (newY > this.yMax - 2 * this.props.radius) {
               newY = this.yMax - 2 * this.props.radius;
             }
 
-            let newX = xPosition + e.clientX - clickPositionX;
+            let newX = this.state.xPosition + e.clientX - this.state.clickPositionX;
             if (newX > this.xMax - 2 * this.props.radius) {
               newX = this.xMax - 2 * this.props.radius;
             } else if (newX < 0) {
               newX = 0;
             }
-            if (this.state.pendulum) {
+            if (this.props.pendulum) {
               const x = this.xMax / 2 - newX - this.props.radius;
               const y = newY + this.props.radius + 5;
               let angle = (Math.atan(y / x) * 180) / Math.PI;
@@ -587,19 +583,19 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 directionInDegrees: angle,
               };
               this.setState({kineticFriction: false})
-              this.setState({xVelocity: startVelX ?? 0})
-              this.setState({yVelocity: startVelY ?? 0})
-              setDisplayValues();
-              this.setState({updatedForces :[forceOfGravity, forceOfTension]});
+              this.setState({xVelocity: this.props.startVelX ?? 0})
+              this.setState({yVelocity: this.props.startVelY ?? 0})
+              this.setDisplayValues();
+              this.props.setUpdatedForces([this.forceOfGravity, forceOfTension]);
             }
           }
         }}
       >
-        <div className="weight" style={weightStyle}>
-          <p className="weightLabel">{mass} kg</p>
+        <div className="weight" style={this.weightStyle}>
+          <p className="weightLabel">{this.props.mass} kg</p>
         </div>
       </div>
-      {this.state.pendulum && (
+      {this.props.pendulum && (
         <div
           className="rod"
           style={{
@@ -628,7 +624,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   zIndex: 5,
                   left: this.state.xPosition + "px",
                   top: this.state.yPosition - 70 + "px",
-                  backgroundColor: labelBackgroundColor,
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
                 {Math.round(this.props.pendulumLength)} m
@@ -639,7 +635,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   zIndex: -1,
                   left: this.xMax / 2 + "px",
                   top: 30 + "px",
-                  backgroundColor: labelBackgroundColor,
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
                 {Math.round(this.props.pendulumAngle * 100) / 100}°
@@ -676,8 +672,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               <line
                 x1={this.state.xPosition + this.props.radius}
                 y1={this.state.yPosition + this.props.radius}
-                x2={this.state.xPosition + this.props.radius + getNewAccelerationX(this.state.updatedForces) * 5}
-                y2={this.state.yPosition + this.props.radius + getNewAccelerationY(this.state.updatedForces) * 5}
+                x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.updatedForces) * 5}
+                y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.updatedForces) * 5}
                 stroke={"green"}
                 strokeWidth="5"
                 markerEnd="url(#accArrow)"
@@ -690,13 +686,13 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 left:
                   this.state.xPosition +
                   this.props.radius +
-                  getNewAccelerationX(this.state.updatedForces) * 5 +
+                  this.getNewAccelerationX(this.props.updatedForces) * 5 +
                   25 +
                   "px",
                 top:
                   this.state.yPosition +
                   this.props.radius +
-                  getNewAccelerationY(this.state.updatedForces) * 5 +
+                  this.getNewAccelerationY(this.props.updatedForces) * 5 +
                   25 +
                   "px",
                 zIndex: -1,
@@ -707,8 +703,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 {Math.round(
                   100 *
                     Math.sqrt(
-                      Math.pow(getNewAccelerationX(this.state.updatedForces) * 3, 2) +
-                        Math.pow(getNewAccelerationY(this.state.updatedForces) * 3, 2)
+                      Math.pow(this.getNewAccelerationX(this.props.updatedForces) * 3, 2) +
+                        Math.pow(this.getNewAccelerationY(this.props.updatedForces) * 3, 2)
                     )
                 ) / 100}{" "}
                 m/s<sup>2</sup>
@@ -817,12 +813,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   pointerEvents: "none",
                   position: "absolute",
                   zIndex: -1,
-                  left: xMin,
-                  top: yMin,
+                  left: this.xMin,
+                  top: this.yMin,
                 }}
               >
                 <svg
-                  width={xMax - xMin + "px"}
+                  width={this.xMax - this.xMin + "px"}
                   height={window.innerHeight + "px"}
                 >
                   <defs>
@@ -857,12 +853,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                   top: labelTop + "px",
                   // zIndex: -1,
                   lineHeight: 0.5,
-                  backgroundColor: labelBackgroundColor,
+                  backgroundColor: this.labelBackgroundColor,
                 }}
               >
                 {force.description && <p>{force.description}</p>}
                 {!force.description && <p>Force</p>}
-                {showForceMagnitudes && (
+                {this.props.showForceMagnitudes && (
                   <p>{Math.round(100 * force.magnitude) / 100} N</p>
                 )}
               </div>