4 files changed, 45 insertions, 50 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationApp.tsx b/src/client/views/nodes/PhysicsSimulationApp.tsx
index 1dfa04a31..608a38f1a 100644
--- a/src/client/views/nodes/PhysicsSimulationApp.tsx
+++ b/src/client/views/nodes/PhysicsSimulationApp.tsx
@@ -96,7 +96,7 @@ export default class App extends React.Component<{}, IState> {
           showForceMagnitudes: false,
           showForces: false,
           showVelocity: false,
-          simulationPaused: false,
+          simulationPaused: true,
           simulationReset: false,
           simulationType: "Inclined Plane",
           sketching: false,
@@ -307,6 +307,9 @@ export default class App extends React.Component<{}, IState> {
 
   
   componentDidMount() {
+    // Add weight
+    this.addWeight()
+
     // Add listener for SHIFT key, which determines if sketch force arrow will be edited or deleted on click
     document.addEventListener("keydown", (e) => {
       if (e.shiftKey) {
diff --git a/src/client/views/nodes/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsSimulationBox.scss
index 1db758540..cfe2ee6ca 100644
--- a/src/client/views/nodes/PhysicsSimulationBox.scss
+++ b/src/client/views/nodes/PhysicsSimulationBox.scss
@@ -4,33 +4,20 @@
 }
 
 .mechanicsSimulationContainer {
- height: 100vh;
- width: 100vw;
+ background-color: white;
+ height: 100%;
+ width: 100%;
  display: flex;
 
- .mechanicsSimulationContentContainer {
-   width: 70%;
-
-   .mechanicsSimulationButtons {
-     display: flex;
-     justify-content: space-between;
-   }
- }
-
  .mechanicsSimulationEquationContainer {
-   width: 30%;
+   position: fixed;
+   left: 70%;
    padding: 1em;
-   display: flex;
-   flex-direction: column;
 
    .mechanicsSimulationControls {
      display: flex;
      justify-content: space-between;
    }
-
-   .slider {
-     margin-top: 0.5em;
-   }
  }
 }
 
@@ -56,18 +43,6 @@ button {
  z-index: 5000;
 }
 
-.wordProblemBox {
- border-style: solid;
- border-color: black;
- border-width: 1px;
- margin-top: 10px;
- padding: 10px;
-}
-
-.answer-inactive {
- pointer-events: none;
-}
-
 .angleLabel {
  font-weight: bold;
  font-size: 20px;
diff --git a/src/client/views/nodes/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsSimulationWall.tsx
index e1f753179..d502c066a 100644
--- a/src/client/views/nodes/PhysicsSimulationWall.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWall.tsx
@@ -18,8 +18,8 @@ export default class App extends React.Component<IWallProps> {
   }
 
   wallStyle = {
-    width: this.props.angleInDegrees == 0 ? this.props.length + "%" : 0.5 + "vw",
-    height: this.props.angleInDegrees == 0 ? 0.5 + "vw" : this.props.length + "%",
+    width: this.props.angleInDegrees == 0 ? this.props.length + "%" : "5px",
+    height: this.props.angleInDegrees == 0 ? "5px" : this.props.length + "%",
     position: "absolute" as "absolute",
     left: this.props.xPos + "%",
     top: this.props.yPos + "%",
diff --git a/src/client/views/nodes/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsSimulationWeight.tsx
index 9ce740ae9..07ab84bd8 100644
--- a/src/client/views/nodes/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsSimulationWeight.tsx
@@ -97,6 +97,23 @@ export default class Weight extends React.Component<IWeightProps, IState> {
   yMax = 300;
   yMin = 0;
 
+  // Var
+  weightStyle = {
+    backgroundColor: this.props.color,
+    borderStyle: "solid",
+    borderColor: "black",
+    position: "absolute" as "absolute",
+    left: this.props.startPosX + "px",
+    top: this.props.startPosY + "px",
+    width: 2 * this.props.radius + "px",
+    height: 2 * this.props.radius + "px",
+    borderRadius: 50 + "%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    touchAction: "none",
+  };
+
   // Helper function to go between display and real values
   getDisplayYPos = (yPos: number) => {
     return this.yMax - yPos - 2 * this.props.radius + 5;
@@ -138,8 +155,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     );
   };
 
-  // When display values updated by user, update real values
   componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
+    // When display values updated by user, update real values
     if (this.props.updateDisplay != prevProps.updateDisplay) {
       if (this.props.updateDisplay.xDisplay != this.state.xPosition) {
         let x = this.props.updateDisplay.xDisplay;
@@ -187,6 +204,22 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.setDisplayValues();
       }
     }
+    this.weightStyle = {
+      backgroundColor: this.props.color,
+      borderStyle: "solid",
+      borderColor: this.state.dragging ? "lightblue" : "black",
+      position: "absolute" as "absolute",
+      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 (this.props.reset != prevProps.reset) {
       this.resetEverything();
     }
@@ -481,22 +514,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     this.props.setUpdatedForces(this.getNewForces(xPos, yPos, xVel, yVel));
   };
 
-  weightStyle = {
-    backgroundColor: this.props.color,
-    borderStyle: "solid",
-    borderColor: this.state.dragging ? "lightblue" : "black",
-    position: "absolute" as "absolute",
-    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",
-  };
-
   labelBackgroundColor = `rgba(255,255,255,0.5)`;
 
   render () {