convert to class

1 files changed, 49 insertions, 50 deletions

diff --git a/src/client/views/nodes/PhysicsSimulationApp.tsx b/src/client/views/nodes/PhysicsSimulationApp.tsx
index bd218f63b..0536d0679 100644
--- a/src/client/views/nodes/PhysicsSimulationApp.tsx
+++ b/src/client/views/nodes/PhysicsSimulationApp.tsx
@@ -1,7 +1,7 @@
 import React = require('react');
 import "./PhysicsSimulationBox.scss";
 import Weight, { IForce }  from "./PhysicsSimulationWeight";
-import Wall  from "./PhysicsSimulationWall"
+import Wall, { IWallProps }  from "./PhysicsSimulationWall"
 import Wedge from "./PhysicsSimulationWedge"
 import { props, any } from 'bluebird';
 import { render } from 'react-dom';
@@ -153,7 +153,7 @@ export default class App extends React.Component<{}, IState> {
     let angle = 50;
     let x = length * Math.cos(((90 - angle) * Math.PI) / 180);
     let y = length * Math.sin(((90 - angle) * Math.PI) / 180);
-    let xPos = xMax / 2 - x - 50;
+    let xPos = this.xMax / 2 - x - 50;
     let yPos = y - 50 - 5;
     this.addPendulum();
     this.setState({startPosX: xPos})
@@ -461,52 +461,50 @@ export default class App extends React.Component<{}, IState> {
                     </div>
                   );
                 })} */}
-              {/* {weight && (
+              {/* {this.state.weight && (
                 <Weight
-                  adjustPendulumAngle={adjustPendulumAngle}
+                  adjustPendulumAngle={this.state.adjustPendulumAngle}
                   color={"red"}
-                  displayXPosition={positionXDisplay}
-                  displayXVelocity={velocityXDisplay}
-                  displayYPosition={positionYDisplay}
-                  displayYVelocity={velocityYDisplay}
-                  elasticCollisions={elasticCollisions}
-                  incrementTime={timer}
+                  displayXPosition={this.state.positionXDisplay}
+                  displayXVelocity={this.state.velocityXDisplay}
+                  displayYPosition={this.state.positionYDisplay}
+                  displayYVelocity={this.state.velocityYDisplay}
+                  elasticCollisions={this.state.elasticCollisions}
+                  incrementTime={this.state.timer}
                   mass={1}
-                  paused={simulationPaused}
-                  pendulum={pendulum}
-                  pendulumAngle={pendulumAngle}
-                  pendulumLength={pendulumLength}
+                  paused={this.state.simulationPaused}
+                  pendulum={this.state.pendulum}
+                  pendulumAngle={this.state.pendulumAngle}
+                  pendulumLength={this.state.pendulumLength}
                   radius={50}
-                  reset={simulationReset}
-                  showForceMagnitudes={showForceMagnitudes}
-                  setSketching={setSketching}
-                  setDisplayXAcceleration={setAccelerationXDisplay}
-                  setDisplayXPosition={setPositionXDisplay}
-                  setDisplayXVelocity={setVelocityXDisplay}
-                  setDisplayYAcceleration={setAccelerationYDisplay}
-                  setDisplayYPosition={setPositionYDisplay}
-                  setDisplayYVelocity={setVelocityYDisplay}
-                  setPaused={setSimulationPaused}
-                  setPendulumAngle={setPendulumAngle}
-                  setPendulumLength={setPendulumLength}
-                  setStartPendulumAngle={setStartPendulumAngle}
-                  setUpdatedForces={setUpdatedForces}
-                  showAcceleration={showAcceleration}
-                  showForces={showForces}
-                  showVelocity={showVelocity}
-                  startForces={startForces}
-                  startPosX={startPosX}
-                  startPosY={startPosY}
+                  reset={this.state.simulationReset}
+                  showForceMagnitudes={this.state.showForceMagnitudes}
+                  setSketching={(val: boolean) => {this.setState({sketching: val})}}
+                  setDisplayXAcceleration={(val: number) => {this.setState({accelerationXDisplay: val})}}
+                  setDisplayXPosition={(val: number) => {this.setState({positionXDisplay: val})}}
+                  setDisplayXVelocity={(val: number) => {this.setState({velocityXDisplay: val})}}
+                  setDisplayYAcceleration={(val: number) => {this.setState({accelerationYDisplay: val})}}
+                  setDisplayYPosition={(val: number) => {this.setState({positionYDisplay: val})}}
+                  setDisplayYVelocity={(val: number) => {this.setState({velocityYDisplay: val})}}
+                  setPaused={(val: boolean) => {this.setState({simulationPaused: val})}}
+                  setPendulumAngle={(val: number) => {this.setState({pendulumAngle: val})}}
+                  setPendulumLength={(val: number) => {this.setState({pendulumLength: val})}}
+                  setStartPendulumAngle={(val: number) => {this.setState({startPendulumAngle: val})}}
+                  setUpdatedForces={(val: IForce[]) => {this.setState({updatedForces: val})}}
+                  showAcceleration={this.state.showAcceleration}
+                  showForces={this.state.showForces}
+                  showVelocity={this.state.showVelocity}
+                  startForces={this.state.startForces}
+                  startPosX={this.state.startPosX}
+                  startPosY={this.state.startPosY}
                   timestepSize={0.002}
-                  updateDisplay={displayChange}
-                  updatedForces={updatedForces}
-                  walls={wallPositions}
-                  wedge={wedge}
-                  wedgeHeight={wedgeHeight}
-                  wedgeWidth={wedgeWidth}
-                  coefficientOfKineticFriction={Number(
-                    coefficientOfKineticFriction
-                  )}
+                  updateDisplay={this.state.displayChange}
+                  updatedForces={this.state.updatedForces}
+                  walls={this.state.wallPositions}
+                  wedge={this.state.wedge}
+                  wedgeHeight={this.state.wedgeHeight}
+                  wedgeWidth={this.state.wedgeWidth}
+                  coefficientOfKineticFriction={this.state.coefficientOfKineticFriction}
                 />
               )} */}
               {this.state.wedge && (
@@ -520,13 +518,14 @@ export default class App extends React.Component<{}, IState> {
             <div>
               {this.state.wallPositions.map((element, index) => {
                 return (
-                  <Wall
-                    key={index}
-                    length={element.length}
-                    xPos={element.xPos}
-                    yPos={element.yPos}
-                    angleInDegrees={element.angleInDegrees}
-                  />
+                  <div key={index}>
+                    <Wall
+                      length={element.length}
+                      xPos={element.xPos}
+                      yPos={element.yPos}
+                      angleInDegrees={element.angleInDegrees}
+                    />
+                  </div>
                 );
               })}
             </div>