From 3ca511f885b8cdcd1a3099e2f54179f5513aed92 Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 17:52:05 -0400
Subject: install material ui dependencies

---
 .../PhysicsBox/PhysicsSimulationInputField.tsx     | 184 +++++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
new file mode 100644
index 000000000..91b0ad84c
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -0,0 +1,184 @@
+import { useState, useEffect } from "react";
+import { TextField, InputAdornment } from "@mui/material";
+
+import TaskAltIcon from "@mui/icons-material/TaskAlt";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+export interface IInputProps {
+  label?: JSX.Element;
+  lowerBound: number;
+  changeValue: (val: number) => any;
+  step: number;
+  unit: string;
+  upperBound: number;
+  value: number | string | Array<number | string>;
+  correctValue?: number;
+  showIcon?: boolean;
+  effect?: (val: number) => any;
+  radianEquivalent?: boolean;
+  small?: boolean;
+  mode?: string;
+  update?: boolean;
+  labelWidth?: string;
+}
+
+export const InputField = (props: IInputProps) => {
+  const {
+    changeValue,
+    correctValue,
+    effect,
+    label,
+    lowerBound,
+    mode,
+    radianEquivalent,
+    showIcon,
+    small,
+    step,
+    unit,
+    upperBound,
+    value,
+    update,
+    labelWidth,
+  } = props;
+  let epsilon: number = 0.01;
+
+  let width = small ? "6em" : "7em";
+  let margin = small ? "0px" : "10px";
+
+  const [tempValue, setTempValue] = useState<any>(
+    mode != "Freeform" && !showIcon ? 0 : value
+  );
+
+  const [tempRadianValue, setTempRadianValue] = useState(
+    mode != "Freeform" && !showIcon ? 0 : (Number(value) * Math.PI) / 180
+  );
+
+  useEffect(() => {
+    if (mode == "Freeform") {
+      if (Math.abs(tempValue - Number(value)) > 1) {
+        setTempValue(Number(value));
+      }
+    }
+  }, [value]);
+
+  const externalUpdate = () => {
+    changeValue(Number(value));
+    setTempValue(Number(value));
+    setTempRadianValue((Number(value) * Math.PI) / 180);
+  };
+
+  useEffect(() => {
+    externalUpdate();
+  }, [update]);
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    let value = event.target.value == "" ? 0 : Number(event.target.value);
+    if (value > upperBound) {
+      value = upperBound;
+    } else if (value < lowerBound) {
+      value = lowerBound;
+    }
+    changeValue(value);
+    setTempValue(event.target.value == "" ? event.target.value : value);
+    setTempRadianValue((value * Math.PI) / 180);
+    if (effect) {
+      effect(value);
+    }
+  };
+
+  const onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    let value = event.target.value === "" ? 0 : Number(event.target.value);
+    if (value > 2 * Math.PI) {
+      value = 2 * Math.PI;
+    } else if (value < 0) {
+      value = 0;
+    }
+    changeValue((value * 180) / Math.PI);
+    setTempValue((value * 180) / Math.PI);
+    setTempRadianValue(value);
+    if (effect) {
+      effect((value * 180) / Math.PI);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        lineHeight: "1.5",
+        textAlign: "right",
+        alignItems: "center",
+      }}
+    >
+      {label && (
+        <div
+          style={{
+            marginTop: "0.3em",
+            marginBottom: "-0.5em",
+            width: labelWidth ?? "2em",
+          }}
+        >
+          {label}
+        </div>
+      )}
+      <TextField
+        type="number"
+        variant="standard"
+        value={tempValue}
+        onChange={onChange}
+        sx={{
+          height: "1em",
+          width: { width },
+          marginLeft: { margin },
+          zIndex: "modal",
+        }}
+        inputProps={{
+          step: step,
+          min: lowerBound,
+          max: upperBound,
+          type: "number",
+        }}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              {Math.abs(Number(value) - (correctValue ?? 0)) < epsilon &&
+                showIcon && <TaskAltIcon color={"success"} />}
+              {Math.abs(Number(value) - (correctValue ?? 0)) >= epsilon &&
+                showIcon && <ErrorOutlineIcon color={"error"} />}
+            </InputAdornment>
+          ),
+          endAdornment: <InputAdornment position="end">{unit}</InputAdornment>,
+        }}
+      />
+      {radianEquivalent && (
+        <div
+          style={{ marginTop: "0.3em", marginBottom: "-0.5em", width: "1em" }}
+        >
+          <p>≈</p>
+        </div>
+      )}
+      {radianEquivalent && (
+        <TextField
+          type="number"
+          variant="standard"
+          value={tempRadianValue}
+          onChange={onChangeRadianValue}
+          sx={{
+            height: "1em",
+            width: { width },
+            marginLeft: { margin },
+            zIndex: "modal",
+          }}
+          inputProps={{
+            step: Math.PI / 8,
+            min: 0,
+            max: 2 * Math.PI,
+            type: "number",
+          }}
+          InputProps={{
+            endAdornment: <InputAdornment position="end">rad</InputAdornment>,
+          }}
+        />
+      )}
+    </div>
+  );
+};
-- 
cgit v1.2.3-70-g09d2


From a2a72e177ef74bd2e81890e002635e67978ecfb3 Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 18:08:11 -0400
Subject: start refactor input

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 15 ++--
 .../PhysicsBox/PhysicsSimulationInputField.tsx     | 80 +++++++++++-----------
 .../nodes/PhysicsBox/PhysicsSimulationWall.tsx     |  2 +-
 .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx   |  2 +-
 4 files changed, 49 insertions(+), 50 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 5b9d8f415..1e817a22d 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -1,11 +1,11 @@
 import "./PhysicsSimulationBox.scss";
-import { FieldView, FieldViewProps } from './FieldView';
+import { FieldView, FieldViewProps } from './../FieldView';
 import React = require('react');
-import { ViewBoxAnnotatableComponent } from '../DocComponent';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
 import { observer } from 'mobx-react';
 import "./PhysicsSimulationBox.scss";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { CheckBox } from "../search/CheckBox";
+import { CheckBox } from "../../search/CheckBox";
 import PauseIcon from "@mui/icons-material/Pause";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import ReplayIcon from "@mui/icons-material/Replay";
@@ -31,12 +31,12 @@ import {
   Stack,
 } from "@mui/material";
 import Typography from "@mui/material/Typography";
-import "./App.scss";
+import "./PhysicsSimulationBox.scss";
 import { InputField } from "./PhysicsSimulationInputField";
 import questions from "./PhysicsSimulationQuestions.json";
 import tutorials from "./PhysicsSimulationTutorial.json";
-import { IWallProps, Wall } from "./Wall";
-import { IForce, Weight } from "./Weight";
+import { IWallProps, Wall } from "./PhysicsSimulationWall";
+import { IForce, Weight } from "./PhysicsSimulationWeight";
 interface VectorTemplate {
   top: number;
   left: number;
@@ -2471,4 +2471,5 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       </p>
     </div>
   </div>
-  }
\ No newline at end of file
+  }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 91b0ad84c..aa2d1c2cc 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -1,12 +1,13 @@
-import { useState, useEffect } from "react";
 import { TextField, InputAdornment } from "@mui/material";
-
+import { Doc } from '../../../../fields/Doc';
+import React = require('react');
 import TaskAltIcon from "@mui/icons-material/TaskAlt";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 export interface IInputProps {
   label?: JSX.Element;
   lowerBound: number;
-  changeValue: (val: number) => any;
+  dataDoc: doc;
+  prop: string;
   step: number;
   unit: string;
   upperBound: number;
@@ -21,36 +22,34 @@ export interface IInputProps {
   labelWidth?: string;
 }
 
-export const InputField = (props: IInputProps) => {
-  const {
-    changeValue,
-    correctValue,
-    effect,
-    label,
-    lowerBound,
-    mode,
-    radianEquivalent,
-    showIcon,
-    small,
-    step,
-    unit,
-    upperBound,
-    value,
-    update,
-    labelWidth,
-  } = props;
-  let epsilon: number = 0.01;
+interface IState {
+  tempValue: number,
+  tempRadianValue: number,
+}
 
-  let width = small ? "6em" : "7em";
-  let margin = small ? "0px" : "10px";
+export default class InputField extends React.Component<IInputProps, , IState> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      tempValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : this.props.value,
+      tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180
+    }
+  }
+
+  epsilon: number = 0;
+  width: string = "6em";
+  margin: string = "6em";
+  componentDidMount() {
+    this.epsilon = 0.01;
+    this.width = this.props.small ? "6em" : "7em";
+    this.margin = this.props.small ? "0px" : "10px";
+  }
+
+
+  componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
+  }
 
-  const [tempValue, setTempValue] = useState<any>(
-    mode != "Freeform" && !showIcon ? 0 : value
-  );
 
-  const [tempRadianValue, setTempRadianValue] = useState(
-    mode != "Freeform" && !showIcon ? 0 : (Number(value) * Math.PI) / 180
-  );
 
   useEffect(() => {
     if (mode == "Freeform") {
@@ -60,24 +59,23 @@ export const InputField = (props: IInputProps) => {
     }
   }, [value]);
 
-  const externalUpdate = () => {
-    changeValue(Number(value));
+  externalUpdate = () => {
     setTempValue(Number(value));
     setTempRadianValue((Number(value) * Math.PI) / 180);
   };
 
   useEffect(() => {
-    externalUpdate();
+    this.externalUpdate();
   }, [update]);
 
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let value = event.target.value == "" ? 0 : Number(event.target.value);
-    if (value > upperBound) {
-      value = upperBound;
-    } else if (value < lowerBound) {
-      value = lowerBound;
+    if (value > this.props.upperBound) {
+      value = this.props.upperBound;
+    } else if (value < this.props.lowerBound) {
+      value = this.props.lowerBound;
     }
-    changeValue(value);
+    this.props.dataDoc[this.props.prop] = value
     setTempValue(event.target.value == "" ? event.target.value : value);
     setTempRadianValue((value * Math.PI) / 180);
     if (effect) {
@@ -85,14 +83,14 @@ export const InputField = (props: IInputProps) => {
     }
   };
 
-  const onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => {
     let value = event.target.value === "" ? 0 : Number(event.target.value);
     if (value > 2 * Math.PI) {
       value = 2 * Math.PI;
     } else if (value < 0) {
       value = 0;
     }
-    changeValue((value * 180) / Math.PI);
+    this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
     setTempValue((value * 180) / Math.PI);
     setTempRadianValue(value);
     if (effect) {
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
index 9283e8d46..6e60ad85c 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
@@ -11,7 +11,7 @@ export interface IWallProps {
   angleInDegrees: number;
 }
 
-export default class App extends React.Component<IWallProps> {
+export default class Wall extends React.Component<IWallProps> {
 
   constructor(props: any) {
     super(props)
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 3feec1ecb..deecb03de 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1,7 +1,7 @@
 import { Doc } from '../../../../fields/Doc';
 import React = require('react');
 import { IWallProps } from "./PhysicsSimulationWall";
-import "./PhysicsSimulationWeight.scss";
+import "./PhysicsSimulationBox.scss";
 
 export interface IForce {
   description: string;
-- 
cgit v1.2.3-70-g09d2


From c1705ae269f482384fdfa2fb5d7addefc1cba3fe Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 18:15:08 -0400
Subject: refactor input

---
 .../PhysicsBox/PhysicsSimulationInputField.tsx     | 90 +++++++++++-----------
 1 file changed, 43 insertions(+), 47 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index aa2d1c2cc..645c1995e 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -6,7 +6,7 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 export interface IInputProps {
   label?: JSX.Element;
   lowerBound: number;
-  dataDoc: doc;
+  dataDoc: Doc;
   prop: string;
   step: number;
   unit: string;
@@ -47,27 +47,23 @@ export default class InputField extends React.Component<IInputProps, , IState> {
 
 
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
-  }
-
-
-
-  useEffect(() => {
-    if (mode == "Freeform") {
-      if (Math.abs(tempValue - Number(value)) > 1) {
-        setTempValue(Number(value));
+    if (prevProps.value != this.props.value) {
+      if (this.props.mode == "Freeform") {
+        if (Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
+          this.setState({tempValue: Number(this.props.value)})
+        }
       }
     }
-  }, [value]);
+    if (prevProps.update != this.props.update) {
+      this.externalUpdate();
+    }
+  }
 
   externalUpdate = () => {
-    setTempValue(Number(value));
-    setTempRadianValue((Number(value) * Math.PI) / 180);
+    this.setState({tempValue: Number(this.props.value)})
+    this.setState({tempRadianValue: Number(this.props.value) * Math.PI / 180})
   };
 
-  useEffect(() => {
-    this.externalUpdate();
-  }, [update]);
-
   onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let value = event.target.value == "" ? 0 : Number(event.target.value);
     if (value > this.props.upperBound) {
@@ -76,10 +72,10 @@ export default class InputField extends React.Component<IInputProps, , IState> {
       value = this.props.lowerBound;
     }
     this.props.dataDoc[this.props.prop] = value
-    setTempValue(event.target.value == "" ? event.target.value : value);
-    setTempRadianValue((value * Math.PI) / 180);
-    if (effect) {
-      effect(value);
+    this.setState({tempValue: event.target.value == "" ? event.target.value : value})
+    this.setState({tempRadianValue: (value * Math.PI) / 180})
+    if (this.props.effect) {
+      this.props.effect(value);
     }
   };
 
@@ -91,14 +87,14 @@ export default class InputField extends React.Component<IInputProps, , IState> {
       value = 0;
     }
     this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
-    setTempValue((value * 180) / Math.PI);
-    setTempRadianValue(value);
-    if (effect) {
-      effect((value * 180) / Math.PI);
+    this.setState({tempValue: (value * 180) / Math.PI})
+    this.setState({tempRadianValue: value})
+    if (this.props.effect) {
+      this.props.effect((value * 180) / Math.PI);
     }
   };
 
-  return (
+  render () { 
     <div
       style={{
         display: "flex",
@@ -107,63 +103,63 @@ export default class InputField extends React.Component<IInputProps, , IState> {
         alignItems: "center",
       }}
     >
-      {label && (
+      {this.props.label && (
         <div
           style={{
             marginTop: "0.3em",
             marginBottom: "-0.5em",
-            width: labelWidth ?? "2em",
+            width: this.props.labelWidth ?? "2em",
           }}
         >
-          {label}
+          {this.props.label}
         </div>
       )}
       <TextField
         type="number"
         variant="standard"
-        value={tempValue}
-        onChange={onChange}
+        value={this.state.tempValue}
+        onChange={this.onChange}
         sx={{
           height: "1em",
-          width: { width },
-          marginLeft: { margin },
+          width: { this.width },
+          marginLeft: { this.margin },
           zIndex: "modal",
         }}
         inputProps={{
-          step: step,
-          min: lowerBound,
-          max: upperBound,
+          step: this.props.step,
+          min: this.props.lowerBound,
+          max: this.props.upperBound,
           type: "number",
         }}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              {Math.abs(Number(value) - (correctValue ?? 0)) < epsilon &&
-                showIcon && <TaskAltIcon color={"success"} />}
-              {Math.abs(Number(value) - (correctValue ?? 0)) >= epsilon &&
-                showIcon && <ErrorOutlineIcon color={"error"} />}
+              {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) < this.epsilon &&
+                this.props.showIcon && <TaskAltIcon color={"success"} />}
+              {Math.abs(Number(this.props.value) - (this.props.correctValue ?? 0)) >= this.epsilon &&
+                this.props.showIcon && <ErrorOutlineIcon color={"error"} />}
             </InputAdornment>
           ),
-          endAdornment: <InputAdornment position="end">{unit}</InputAdornment>,
+          endAdornment: <InputAdornment position="end">{this.props.unit}</InputAdornment>,
         }}
       />
-      {radianEquivalent && (
+      {this.props.radianEquivalent && (
         <div
           style={{ marginTop: "0.3em", marginBottom: "-0.5em", width: "1em" }}
         >
           <p>≈</p>
         </div>
       )}
-      {radianEquivalent && (
+      {this.props.radianEquivalent && (
         <TextField
           type="number"
           variant="standard"
-          value={tempRadianValue}
-          onChange={onChangeRadianValue}
+          value={this.state.tempRadianValue}
+          onChange={this.onChangeRadianValue}
           sx={{
             height: "1em",
-            width: { width },
-            marginLeft: { margin },
+            width: { this.width },
+            marginLeft: { this.margin },
             zIndex: "modal",
           }}
           inputProps={{
@@ -178,5 +174,5 @@ export default class InputField extends React.Component<IInputProps, , IState> {
         />
       )}
     </div>
-  );
+  }
 };
-- 
cgit v1.2.3-70-g09d2


From e680ef59016b5574d765327cabaf5b5acd961adb Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 18:32:02 -0400
Subject: debugging

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 96 +++++++++++-----------
 .../PhysicsBox/PhysicsSimulationInputField.tsx     |  1 -
 .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx   |  1 +
 3 files changed, 50 insertions(+), 48 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 1e817a22d..b7bc81f38 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -35,8 +35,10 @@ import "./PhysicsSimulationBox.scss";
 import { InputField } from "./PhysicsSimulationInputField";
 import questions from "./PhysicsSimulationQuestions.json";
 import tutorials from "./PhysicsSimulationTutorial.json";
-import { IWallProps, Wall } from "./PhysicsSimulationWall";
-import { IForce, Weight } from "./PhysicsSimulationWeight";
+import Wall from "./PhysicsSimulationWall";
+import IWall from "./PhysicsSimulationWall";
+import Weight from "./PhysicsSimulationWeight";
+import IForce from "./PhysicsSimulationWeight";
 interface VectorTemplate {
   top: number;
   left: number;
@@ -99,9 +101,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.wallPositions.push({ length: 80, xPos: 69.5, yPos: 0, angleInDegrees: 90 });
 
     // Used throughout sims
-    this.xMax = this.layoutDoc._width*0.08;
-    this.yMax = this.layoutDoc._height*0.08;
-    this.radius = 0.1*this.layoutDoc._height;
+    this.xMax = this.layoutDoc._width*0.08 ?? 500;
+    this.yMax = this.layoutDoc._height*0.08 ?? 500;
+    this.radius = 0.1*this.layoutDoc._height ?? 50;
     this.dataDoc.reviewCoefficient = this.dataDoc.reviewCoefficient ?? 0;
     this.dataDoc.questionVariables = this.dataDoc.questionVariables ?? [];
     this.dataDoc.accelerationXDisplay = this.dataDoc.accelerationXDisplay ?? 0;
@@ -280,7 +282,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       this.dataDoc.showAcceleration = (false);
       if (this.dataDoc.simulationType != "Circular Motion") {
         this.dataDoc.velocityXDisplay = (0);
-        setVelocityYDisplay = (0);
+        this.dataDoc.velocityYDisplay = (0);
         this.dataDoc.showVelocity = (false);
       } else {
         this.dataDoc.velocityXDisplay = (20);
@@ -334,7 +336,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
         this.dataDoc.selectedTutorial = (tutorials.circular);
         this.dataDoc.startForces = (this.getForceFromJSON(tutorials.circular.steps[0].forces));
         this.dataDoc.showForceMagnitudes = (tutorials.circular.steps[0].showMagnitude);
-      } else if (simulationType == "Pulley") {
+      } else if (this.dataDoc.simulationType == "Pulley") {
         this.dataDoc.showForces = (true);
         this.setupPulley();
         this.dataDoc.selectedTutorial = (tutorials.pulley);
@@ -352,9 +354,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   }
 
   componentDidUpdate() {
-    this.xMax = this.layoutDoc._width*0.08;
-    this.yMax = this.layoutDoc._height*0.08;
-    this.radius = 0.1*this.layoutDoc._height;
+    this.xMax = this.layoutDoc._width*0.08 ?? 500;
+    this.yMax = this.layoutDoc._height*0.08 ?? 500;
+    this.radius = 0.1*this.layoutDoc._height ?? 50;
   }
 
   // Helper function to go between display and real values
@@ -368,12 +370,12 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   // Update forces when coefficient of static friction changes in freeform mode
   updateForcesWithFriction = (
     coefficient: number,
-    width: number = this.wedgeWidth,
-    height: number = this.wedgeHeight
+    width: number = this.dataDoc.wedgeWidth,
+    height: number = this.dataDoc.wedgeHeight
   ) => {
     const normalForce: IForce = {
       description: "Normal Force",
-      magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass,
+      magnitude: Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)) * this.dataDoc.mass,
       directionInDegrees:
         180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
       component: false,
@@ -382,14 +384,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       description: "Static Friction Force",
       magnitude:
         coefficient *
-        Math.abs(this.gravity) *
+        Math.abs(this.dataDoc.gravity) *
         Math.cos(Math.atan(height / width)) *
-        this.mass,
+        this.dataDoc.mass,
       directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI,
       component: false,
     };
     // reduce magnitude or friction force if necessary such that block cannot slide up plane
-    let yForce = -Math.abs(this.gravity) * this.mass;
+    let yForce = -Math.abs(this.dataDoc.gravity) * this.dataDoc.mass;
     yForce +=
       normalForce.magnitude *
       Math.sin((normalForce.directionInDegrees * Math.PI) / 180);
@@ -400,19 +402,19 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       frictionForce.magnitude =
         (-normalForce.magnitude *
           Math.sin((normalForce.directionInDegrees * Math.PI) / 180) +
-          Math.abs(this.gravity) * this.mass) /
+          Math.abs(this.dataDoc.gravity) * this.dataDoc.mass) /
         Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
     }
     const frictionForceComponent: IForce = {
       description: "Static Friction Force",
       magnitude:
-        coefficient * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
+        coefficient * Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)),
       directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI,
       component: true,
     };
     const normalForceComponent: IForce = {
       description: "Normal Force",
-      magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
+      magnitude: Math.abs(this.dataDoc.gravity) * Math.cos(Math.atan(height / width)),
       directionInDegrees:
         180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
       component: true,
@@ -420,8 +422,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     const gravityParallel: IForce = {
       description: "Gravity Parallel Component",
       magnitude:
-      this.mass *
-        Math.abs(this.gravity) *
+      this.dataDoc.mass *
+        Math.abs(this.dataDoc.gravity) *
         Math.sin(Math.PI / 2 - Math.atan(height / width)),
       directionInDegrees:
         180 - 90 - (Math.atan(height / width) * 180) / Math.PI + 180,
@@ -430,15 +432,15 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     const gravityPerpendicular: IForce = {
       description: "Gravity Perpendicular Component",
       magnitude:
-      this.mass *
-        Math.abs(this.gravity) *
+      this.dataDoc.mass *
+        Math.abs(this.dataDoc.gravity) *
         Math.cos(Math.PI / 2 - Math.atan(height / width)),
       directionInDegrees: 360 - (Math.atan(height / width) * 180) / Math.PI,
       component: true,
     };
     const gravityForce: IForce = {
       description: "Gravity",
-      magnitude: this.mass * Math.abs(this.gravity),
+      magnitude: this.dataDoc.mass * Math.abs(this.dataDoc.gravity),
       directionInDegrees: 270,
       component: false,
     };
@@ -767,7 +769,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       if (this.dataDoc.questionNumber == questions.inclinePlane.length - 1) {
         this.dataDoc.questionNumber = (0);
       } else {
-        this.dataDoc.questionNumber =(questionNumber + 1);
+        this.dataDoc.questionNumber =(this.dataDoc.questionNumber + 1);
       }
       question = questions.inclinePlane[this.dataDoc.questionNumber];
 
@@ -1104,7 +1106,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     let yPos = this.yMin + 200;
     this.dataDoc.startPosY = (yPos);
     this.dataDoc.startPosX = (xPos);
-    this.dataDoc.positionYDisplay = (getDisplayYPos(yPos));
+    this.dataDoc.positionYDisplay = (this.getDisplayYPos(yPos));
     this.dataDoc.positionXDisplay = (xPos);
     let tensionMag = (this.dataDoc.mass * Math.abs(this.dataDoc.gravity)) / (2 * Math.sin(Math.PI / 4));
     const tensionForce1: IForce = {
@@ -1135,9 +1137,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.showComponentForces = (false);
     this.dataDoc.startPosY = ((this.yMax + this.yMin) / 2);
     this.dataDoc.startPosX = ((this.xMin + this.xMax) / 2 - 105);
-    this.dataDoc.positionYDisplay = (getDisplayYPos((this.yMax + this.yMin) / 2));
+    this.dataDoc.positionYDisplay = (this.getDisplayYPos((this.yMax + this.yMin) / 2));
     this.dataDoc.positionXDisplay = ((this.xMin + this.xMax) / 2 - 105);
-    let a = (-1 * ((mass - mass2) * Math.abs(gravity))) / (mass + mass2);
+    let a = (-1 * ((this.dataDoc.mass - this.dataDoc.mass2) * Math.abs(this.dataDoc.gravity))) / (this.dataDoc.mass + this.dataDoc.mass2);
     const gravityForce1: IForce = {
       description: "Gravity",
       magnitude: this.dataDoc.mass * Math.abs(this.dataDoc.gravity),
@@ -1165,10 +1167,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     };
     this.dataDoc.updatedForces = ([gravityForce1, tensionForce1]);
     this.dataDoc.startForces = ([gravityForce1, tensionForce1]);
-    this.dataDoc.startPosY2 = ((yMax + yMin) / 2);
-    this.dataDoc.startPosX2 = ((xMin + xMax) / 2 + 5);
-    this.dataDoc.positionYDisplay2 = (getDisplayYPos((yMax + yMin) / 2));
-    this.dataDoc.positionXDisplay2 = ((xMin + xMax) / 2 + 5);
+    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.updatedForces2 = ([gravityForce2, tensionForce2]);
     this.dataDoc.startForces2 = ([gravityForce2, tensionForce2]);
     this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
@@ -1229,7 +1231,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   }
 
   render () { 
-    <div className="physicsSimApp">
+    return <div className="physicsSimApp">
     <div className="mechanicsSimulationContainer">
       <div
         className="mechanicsSimulationContentContainer"
@@ -1533,16 +1535,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     this.dataDoc.selectedTutorial.steps[step].showMagnitude
                   );
                 }}
-                disabled={stepNumber == 0}
+                disabled={this.dataDoc.stepNumber == 0}
               >
                 <ArrowLeftIcon />
               </IconButton>
               <div>
                 <h3>
                   Step {this.dataDoc.stepNumber + 1}:{" "}
-                  {this.dataDoc.selectedTutorial.steps[stepNumber].description}
+                  {this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].description}
                 </h3>
-                <p>{this.dataDoc.selectedTutorial.steps[stepNumber].content}</p>
+                <p>{this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].content}</p>
               </div>
               <IconButton
                 onClick={() => {
@@ -1849,7 +1851,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   step={1}
                   unit={"N/m"}
                   upperBound={500}
-                  value={springConstant}
+                  value={this.dataDoc.springConstant}
                   effect={(val: number) => {
                     this.dataDoc.simulationReset(!this.dataDoc.simulationReset);
                   }}
@@ -1986,9 +1988,9 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   value={this.dataDoc.pendulumAngle}
                   effect={(value) => {
                     this.dataDoc.startPendulumAngle = (value);
-                    if (simulationType == "Pendulum") {
+                    if (this.dataDoc.simulationType == "Pendulum") {
                       const mag =
-                        mass *
+                      this.dataDoc.mass *
                         Math.abs(this.dataDoc.gravity) *
                         Math.cos((value * Math.PI) / 180);
 
@@ -2027,8 +2029,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                         length * Math.cos(((90 - value) * Math.PI) / 180);
                       const y =
                         length * Math.sin(((90 - value) * Math.PI) / 180);
-                      const xPos = this.xMax / 2 - x - radius;
-                      const yPos = y - radius - 5;
+                      const xPos = this.xMax / 2 - x - this.dataDoc.radius;
+                      const yPos = y - this.dataDoc.radius - 5;
                       this.dataDoc.startPosX = (xPos);
                       this.dataDoc.startPosY= (yPos);
 
@@ -2057,7 +2059,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       ]);
                       this.dataDoc.adjustPendulumAngle = ({
                         angle: value,
-                        length: pendulumLength,
+                        length: this.dataDoc.pendulumLength,
                       });
                       this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
                     }
@@ -2075,7 +2077,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   upperBound={400}
                   value={Math.round(this.dataDoc.pendulumLength)}
                   effect={(value) => {
-                    if (simulationType == "Pendulum") {
+                    if (this.dataDoc.simulationType == "Pendulum") {
                       this.dataDoc.adjustPendulumAngle = ({
                         angle: this.dataDoc.pendulumAngle,
                         length: value,
@@ -2413,7 +2415,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     <div
       style={{
         position: "fixed",
-        top: this.layoutDoc._height - 120 + 20 + "px",
+        top: this.layoutDoc._height ?? 500 - 120 + 20 + "px",
         left: this.xMin + 90 - 80 + "px",
         zIndex: -10000,
       }}
@@ -2454,16 +2456,16 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       <p
         style={{
           position: "fixed",
-          top: this.layoutDoc._height - 120 + 40 + "px",
+          top: this.layoutDoc._height?? 500 - 120 + 40 + "px",
           left: this.xMin + 90 - 80 + "px",
         }}
       >
-        {simulationType == "Circular Motion" ? "Z" : "Y"}
+        {this.dataDoc.simulationType == "Circular Motion" ? "Z" : "Y"}
       </p>
       <p
         style={{
           position: "fixed",
-          top: this.layoutDoc._height - 120 + 80 + "px",
+          top: this.layoutDoc._height ?? 500- 120 + 80 + "px",
           left: this.xMin + 90 - 40 + "px",
         }}
       >
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 645c1995e..75bc28919 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -45,7 +45,6 @@ export default class InputField extends React.Component<IInputProps, , IState> {
     this.margin = this.props.small ? "0px" : "10px";
   }
 
-
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
     if (prevProps.value != this.props.value) {
       if (this.props.mode == "Freeform") {
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index deecb03de..89bdae0a0 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -891,6 +891,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
 
   // Render weight, spring, rod(s), vectors
   render () { 
+    return
     <div style={{ zIndex: -1000 }}>
       <div
         className="weightContainer"
-- 
cgit v1.2.3-70-g09d2


From 2845498ef0aa41b7a21866062b3d6583d760879e Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 19:38:04 -0400
Subject: debugging

---
 .../nodes/PhysicsBox/PhysicsSimulationInputField.tsx  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 75bc28919..f3491fbd6 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -25,6 +25,8 @@ export interface IInputProps {
 interface IState {
   tempValue: number,
   tempRadianValue: number,
+  width: string;
+  margin: string;
 }
 
 export default class InputField extends React.Component<IInputProps, , IState> {
@@ -32,17 +34,16 @@ export default class InputField extends React.Component<IInputProps, , IState> {
     super(props)
     this.state = {
       tempValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : this.props.value,
-      tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180
+      tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180,
+      width: this.props.small ? "6em" : "7em",
+      margin: this.props.small ? "0px" : "10px"
+
     }
   }
 
   epsilon: number = 0;
-  width: string = "6em";
-  margin: string = "6em";
   componentDidMount() {
     this.epsilon = 0.01;
-    this.width = this.props.small ? "6em" : "7em";
-    this.margin = this.props.small ? "0px" : "10px";
   }
 
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
@@ -120,8 +121,8 @@ export default class InputField extends React.Component<IInputProps, , IState> {
         onChange={this.onChange}
         sx={{
           height: "1em",
-          width: { this.width },
-          marginLeft: { this.margin },
+          width: this.state.width,
+          marginLeft: this.state.margin,
           zIndex: "modal",
         }}
         inputProps={{
@@ -157,8 +158,8 @@ export default class InputField extends React.Component<IInputProps, , IState> {
           onChange={this.onChangeRadianValue}
           sx={{
             height: "1em",
-            width: { this.width },
-            marginLeft: { this.margin },
+            width: this.state.width,
+            marginLeft: this.state.margin,
             zIndex: "modal",
           }}
           inputProps={{
-- 
cgit v1.2.3-70-g09d2


From c4239e9bb5fb6389e3ceac281af8c8c683019a0c Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 19:53:29 -0400
Subject: debugging

---
 .../views/nodes/PhysicsBox/PhysicsSimulationBox.tsx  | 20 ++++++++++----------
 .../nodes/PhysicsBox/PhysicsSimulationInputField.tsx |  2 +-
 .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx     |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index b7bc81f38..671466261 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -32,7 +32,7 @@ import {
 } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import "./PhysicsSimulationBox.scss";
-import { InputField } from "./PhysicsSimulationInputField";
+import InputField from "./PhysicsSimulationInputField";
 import questions from "./PhysicsSimulationQuestions.json";
 import tutorials from "./PhysicsSimulationTutorial.json";
 import Wall from "./PhysicsSimulationWall";
@@ -86,13 +86,13 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   }
 
   // Constants
-  const xMin = 0;
-  const yMin = 0;
-  const xMax = 100;
-  const yMax = 100;
-  const color = `rgba(0,0,0,0.5)`;
-  const radius = 50;
-  const wallPositions: IWallProps[] = [];
+  xMin = 0;
+  yMin = 0;
+  xMax = 100;
+  yMax = 100;
+  color = `rgba(0,0,0,0.5)`;
+  radius = 50;
+  wallPositions: IWallProps[] = [];
 
   componentDidMount() {
     this.wallPositions.push({ length: 70, xPos: 0, yPos: 0, angleInDegrees: 0 });
@@ -1254,7 +1254,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
               style={{
                 position: "fixed",
                 top: 1 + "em",
-                left: xMin + 12 + "px",
+                left: this.xMin + 12 + "px",
               }}
             >
               <div className="dropdownMenu">
@@ -1427,7 +1427,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
           </Stack>
           <div className="dropdownMenu">
             <select
-              value={mode}
+              value={this.dataDoc.mode}
               onChange={(event) => {
                 this.dataDoc.mode = (event.target.value);
 
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index f3491fbd6..1125e6020 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -29,7 +29,7 @@ interface IState {
   margin: string;
 }
 
-export default class InputField extends React.Component<IInputProps, , IState> {
+export default class InputField extends React.Component<IInputProps, IState> {
   constructor(props: any) {
     super(props)
     this.state = {
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 06db9b4ce..8b7d4ed30 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -891,7 +891,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
 
   // Render weight, spring, rod(s), vectors
   render () { 
-    return
+    return (
     <div style={{ zIndex: -1000 }}>
       <div
         className="weightContainer"
@@ -1628,5 +1628,5 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           );
         })}
     </div>
-  }
+  )}
 };
-- 
cgit v1.2.3-70-g09d2


From c93e1dc281c831ab08cf0ce29420df845323b0be Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Mon, 1 May 2023 20:05:49 -0400
Subject: debugging

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 86 +++++++++++++++-------
 .../PhysicsBox/PhysicsSimulationInputField.tsx     | 11 ++-
 .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx   |  2 +-
 3 files changed, 68 insertions(+), 31 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 671466261..56c61c4f1 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -38,7 +38,13 @@ import tutorials from "./PhysicsSimulationTutorial.json";
 import Wall from "./PhysicsSimulationWall";
 import IWall from "./PhysicsSimulationWall";
 import Weight from "./PhysicsSimulationWeight";
-import IForce from "./PhysicsSimulationWeight";
+
+interface IForce {
+  description: string;
+  magnitude: number;
+  directionInDegrees: number;
+  component: boolean;
+}
 interface VectorTemplate {
   top: number;
   left: number;
@@ -833,7 +839,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<p>Gravity magnitude</p>}
               lowerBound={0}
-              changeValue={this.dataDoc.reviewGravityMagnitude}
+              dataDoc={this.dataDoc}
+              prop={'reviewGravityMagnitude'}
               step={0.1}
               unit={"N"}
               upperBound={50}
@@ -851,7 +858,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<p>Gravity angle</p>}
               lowerBound={0}
-              changeValue={this.dataDoc.reviewGravityAngle}
+              dataDoc={this.dataDoc}
+              prop={'reviewGravityAngle'}
               step={1}
               unit={"°"}
               upperBound={360}
@@ -870,7 +878,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<p>Normal force magnitude</p>}
               lowerBound={0}
-              changeValue={this.dataDoc.reviewNormalMagnitude}
+              dataDoc={this.dataDoc}
+              prop={'reviewNormalMagnitude'}
               step={0.1}
               unit={"N"}
               upperBound={50}
@@ -888,7 +897,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<p>Normal force angle</p>}
               lowerBound={0}
-              changeValue={this.dataDoc.reviewNormalAngle}
+              dataDoc={this.dataDoc}
+              prop={'reviewNormalAngle'}
               step={1}
               unit={"°"}
               upperBound={360}
@@ -907,7 +917,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<p>Static friction magnitude</p>}
               lowerBound={0}
-              changeValue={this.dataDoc.reviewStaticMagnitude}
+              dataDoc={this.dataDoc}
+              prop={'reviewStaticMagnitude'}
               step={0.1}
               unit={"N"}
               upperBound={50}
@@ -925,7 +936,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<p>Static friction angle</p>}
               lowerBound={0}
-              changeValue={this.dataDoc.reviewStaticAngle}
+              dataDoc={this.dataDoc}
+              prop={'reviewStaticAngle'}
               step={1}
               unit={"°"}
               upperBound={360}
@@ -948,7 +960,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 </Box>
               }
               lowerBound={0}
-              changeValue={this.dataDoc.coefficientOfStaticFriction}
+              dataDoc={this.dataDoc}
+              prop={'coefficientOfStaticFriction'}
               step={0.1}
               unit={""}
               upperBound={1}
@@ -966,7 +979,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
             <InputField
               label={<Box>&theta;</Box>}
               lowerBound={0}
-              changeValue={this.dataDoc.qedgeAngle}
+              dataDoc={this.dataDoc}
+              prop={'wedgeAngle'}
               step={1}
               unit={"°"}
               upperBound={49}
@@ -1756,7 +1770,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Box>Speed</Box>}
                   lowerBound={1}
-                  changeValue={this.dataDoc.simulationSpeed} //TODO - deal with input field change value now that datadoc is being used!
+                  dataDoc={this.dataDoc}
+                  prop={'simulationSpeed'}
                   step={1}
                   unit={"x"}
                   upperBound={10}
@@ -1767,7 +1782,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   <InputField
                     label={<Box>Gravity</Box>}
                     lowerBound={-30}
-                    changeValue={this.dataDoc.gravity}
+                    dataDoc={this.dataDoc}
+                    prop={'gravity'}
                     step={0.01}
                     unit={"m/s2"}
                     upperBound={0}
@@ -1782,7 +1798,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   <InputField
                     label={<Box>Mass</Box>}
                     lowerBound={1}
-                    changeValue={this.dataDoc.mass}
+                    dataDoc={this.dataDoc}
+                    prop={'mass'}
                     step={0.1}
                     unit={"kg"}
                     upperBound={5}
@@ -1797,7 +1814,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   <InputField
                     label={<Box>Red mass</Box>}
                     lowerBound={1}
-                    changeValue={this.dataDoc.mass}
+                    dataDoc={this.dataDoc}
+                    prop={'mass'}
                     step={0.1}
                     unit={"kg"}
                     upperBound={5}
@@ -1812,7 +1830,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   <InputField
                     label={<Box>Blue mass</Box>}
                     lowerBound={1}
-                    changeValue={this.dataDoc.mass2}
+                    dataDoc={this.dataDoc}
+                    prop={'mass2'}
                     step={0.1}
                     unit={"kg"}
                     upperBound={5}
@@ -1827,7 +1846,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                   <InputField
                     label={<Box>Rod length</Box>}
                     lowerBound={100}
-                    changeValue={this.dataDoc.circularMotionRadius}
+                    dataDoc={this.dataDoc}
+                    prop={'circularMotionRadius'}
                     step={5}
                     unit={"kg"}
                     upperBound={250}
@@ -1847,7 +1867,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     <Typography color="inherit">Spring stiffness</Typography>
                   }
                   lowerBound={0.1}
-                  changeValue={this.dataDoc.springConstant}
+                  dataDoc={this.dataDoc}
+                  prop={'springConstant'}
                   step={1}
                   unit={"N/m"}
                   upperBound={500}
@@ -1862,7 +1883,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Typography color="inherit">Rest length</Typography>}
                   lowerBound={10}
-                  changeValue={this.dataDoc.springRestLength}
+                  dataDoc={this.dataDoc}
+                  prop={'springRestLength'}
                   step={100}
                   unit={""}
                   upperBound={500}
@@ -1881,7 +1903,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     </Typography>
                   }
                   lowerBound={-(this.dataDoc.springRestLength - 10)}
-                  changeValue={(val: number) => {}}
+                  dataDoc={this.dataDoc}
+                  prop={""}
                   step={10}
                   unit={""}
                   upperBound={this.dataDoc.springRestLength}
@@ -1902,7 +1925,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Box>&theta;</Box>}
                   lowerBound={0}
-                  changeValue={this.dataDoc.wedgeAngle}
+                  dataDoc={this.dataDoc}
+                  prop={'wedgeAngle'}
                   step={1}
                   unit={"°"}
                   upperBound={49}
@@ -1922,7 +1946,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     </Box>
                   }
                   lowerBound={0}
-                  changeValue={this.dataDoc.coefficientOfStaticFriction}
+                  dataDoc={this.dataDoc}
+                  prop={'coefficientOfStaticFriction'}
                   step={0.1}
                   unit={""}
                   upperBound={1}
@@ -1944,7 +1969,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     </Box>
                   }
                   lowerBound={0}
-                  changeValue={this.dataDoc.coefficientOfKineticFriction}
+                  dataDoc={this.dataDoc}
+                  prop={'coefficientOfKineticFriction'}
                   step={0.1}
                   unit={""}
                   upperBound={Number(this.dataDoc.coefficientOfStaticFriction)}
@@ -1981,7 +2007,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Box>Angle</Box>}
                   lowerBound={0}
-                  changeValue={this.dataDoc.pendulumAngle}
+                  dataDoc={this.dataDoc}
+                  prop={'pendulumAngle'}
                   step={1}
                   unit={"°"}
                   upperBound={59}
@@ -2071,7 +2098,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <InputField
                   label={<Box>Rod length</Box>}
                   lowerBound={0}
-                  changeValue={this.dataDoc.pendulumLength}
+                  dataDoc={this.dataDoc}
+                  prop={'pendulumLength'}
                   step={1}
                   unit={"m"}
                   upperBound={400}
@@ -2134,7 +2162,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       >
                         <InputField
                           lowerBound={0}
-                          changeValue={this.dataDoc.positionXDisplay}
+                          dataDoc={this.dataDoc}
+                          prop={'positionXDisplay'}
                           step={1}
                           unit={"m"}
                           upperBound={this.xMax - 110}
@@ -2171,7 +2200,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       >
                         <InputField
                           lowerBound={0}
-                          changeValue={this.dataDoc.positionYDisplay}
+                          dataDoc={this.dataDoc}
+                          prop={'positionYDisplay'}
                           step={1}
                           unit={"m"}
                           upperBound={this.yMax - 110}
@@ -2216,7 +2246,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                       >
                         <InputField
                           lowerBound={-50}
-                          changeValue={this.dataDoc.velocityXDisplay}
+                          dataDoc={this.dataDoc}
+                          prop={'velocityXDisplay'}
                           step={1}
                           unit={"m/s"}
                           upperBound={50}
@@ -2243,7 +2274,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     >
                       <InputField
                         lowerBound={-50}
-                        changeValue={this.dataDoc.velocityYDisplay}
+                        dataDoc={this.dataDoc}
+                        prop={'velocityYDisplay'}
                         step={1}
                         unit={"m/s"}
                         upperBound={50}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 1125e6020..cd55453ea 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -23,7 +23,7 @@ export interface IInputProps {
 }
 
 interface IState {
-  tempValue: number,
+  tempValue: string | number | (string|number)[],
   tempRadianValue: number,
   width: string;
   margin: string;
@@ -71,7 +71,9 @@ export default class InputField extends React.Component<IInputProps, IState> {
     } else if (value < this.props.lowerBound) {
       value = this.props.lowerBound;
     }
-    this.props.dataDoc[this.props.prop] = value
+    if (this.props.prop != "") {
+      this.props.dataDoc[this.props.prop] = value
+    }
     this.setState({tempValue: event.target.value == "" ? event.target.value : value})
     this.setState({tempRadianValue: (value * Math.PI) / 180})
     if (this.props.effect) {
@@ -85,8 +87,9 @@ export default class InputField extends React.Component<IInputProps, IState> {
       value = 2 * Math.PI;
     } else if (value < 0) {
       value = 0;
+    }if (this.props.prop != "") {
+      this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
     }
-    this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI
     this.setState({tempValue: (value * 180) / Math.PI})
     this.setState({tempRadianValue: value})
     if (this.props.effect) {
@@ -95,6 +98,7 @@ export default class InputField extends React.Component<IInputProps, IState> {
   };
 
   render () { 
+    return (
     <div
       style={{
         display: "flex",
@@ -174,5 +178,6 @@ export default class InputField extends React.Component<IInputProps, IState> {
         />
       )}
     </div>
+    )
   }
 };
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 8b7d4ed30..ed219652a 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -3,7 +3,7 @@ import React = require('react');
 import { IWallProps } from "./PhysicsSimulationWall";
 import "./PhysicsSimulationBox.scss";
 
-export interface IForce {
+interface IForce {
   description: string;
   magnitude: number;
   directionInDegrees: number;
-- 
cgit v1.2.3-70-g09d2


From d46f6bd5e4d0c3ad7d483de85538f86965f635b7 Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Thu, 4 May 2023 00:24:43 -0400
Subject: start debugging pulley

---
 .../nodes/PhysicsBox/PhysicsSimulationInputField.tsx      |  6 ++----
 .../views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx    | 15 ++++++++-------
 2 files changed, 10 insertions(+), 11 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index cd55453ea..85c20760e 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -41,15 +41,13 @@ export default class InputField extends React.Component<IInputProps, IState> {
     }
   }
 
-  epsilon: number = 0;
-  componentDidMount() {
-    this.epsilon = 0.01;
-  }
+  epsilon: number = 0.01;
 
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
     if (prevProps.value != this.props.value) {
       if (this.props.mode == "Freeform") {
         if (Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
+          console.log('update temp value')
           this.setState({tempValue: Number(this.props.value)})
         }
       }
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 7407d6fa6..785e40057 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -95,12 +95,12 @@ export default class Weight extends React.Component<IWeightProps, IState> {
       kineticFriction: false,
       maxPosYConservation: 0,
       timer: 0,
-      updatedStartPosX: this.props.dataDoc['startPosX'] ?? 0,
-      updatedStartPosY: this.props.dataDoc['startPosY'] ?? 0,
+      updatedStartPosX: this.props.startPosX ?? 0,
+      updatedStartPosY: this.props.startPosY ?? 0,
       walls: [],
-      xPosition: this.props.dataDoc['startPosX'] ?? 0,
+      xPosition: this.props.startPosX ?? 0,
       xVelocity: this.props.startVelX ? this.props.startVelX: 0,
-      yPosition: this.props.dataDoc['startPosY'] ?? 0,
+      yPosition: this.props.startPosY ?? 0,
       yVelocity: this.props.startVelY ? this.props.startVelY: 0,
       xAccel: 0,
       yAccel: 0,
@@ -175,10 +175,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     this.setYVelDisplay(yVel);
     this.setXVelDisplay(xVel);
     this.props.dataDoc['accelerationYDisplay'] = 
-      (-1 * Math.round(this.getNewAccelerationY(this.props.dataDoc['updatedForces']) * 100)) / 100
+      (-1 * Math.round(this.getNewAccelerationY(this.props.updatedForces) * 100)) / 100
     ;
     this.props.dataDoc['accelerationXDisplay'] = 
-      Math.round(this.getNewAccelerationX(this.props.dataDoc['updatedForces']) * 100) / 100
+      Math.round(this.getNewAccelerationX(this.props.dataDoc.updatedForces) * 100) / 100
     ;
   };
 
@@ -468,6 +468,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     this.setState({yVelocity: this.props.startVelY ?? 0})
     this.props.dataDoc['pendulumAngle'] = this.props.dataDoc['startPendulumAngle']
     this.props.dataDoc['updatedForces'] = (this.props.dataDoc['startForces'])
+    this.props.dataDoc['updatedForces2'] = (this.props.dataDoc['startForces2'])
     this.props.dataDoc['accelerationXDisplay'] = 0
     this.props.dataDoc['accelerationYDisplay'] = 0
     this.props.dataDoc['positionXDisplay'] = this.state.updatedStartPosX
@@ -722,7 +723,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
     const newYVel = currentYVel + deltaYVel * dt;
     const newDeltaXPos = newXVel;
     const newDeltaYPos = newYVel;
-    let forces = this.props.dataDoc['updatedForces'];
+    let forces = this.props.updatedForces;
     if (this.props.dataDoc['simulationType'] == "Pendulum") {
       forces = this.getNewPendulumForces(newXPos, newYPos, newXVel, newYVel);
     } else if (this.props.dataDoc['simulationType'] == "Spring") {
-- 
cgit v1.2.3-70-g09d2


From 6c1143b27293f22ef4c21ac53c6bdbda381ee09d Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Thu, 4 May 2023 10:39:00 -0400
Subject: debugging change size

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 95 +++++++---------------
 .../PhysicsBox/PhysicsSimulationInputField.tsx     |  4 +-
 2 files changed, 33 insertions(+), 66 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 7efb8b73a..53e1cd15f 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -111,7 +111,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.layoutDoc._height = 800;
     this.xMax = this.layoutDoc._width*0.6;
     this.yMax = this.layoutDoc._height*0.9;
-    this.radius = 60;
     this.dataDoc.reviewCoefficient = this.dataDoc.reviewCoefficient ?? 0;
     this.dataDoc.questionVariables = this.dataDoc.questionVariables ?? [];
     this.dataDoc.accelerationXDisplay = this.dataDoc.accelerationXDisplay ?? 0;
@@ -137,7 +136,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.startForces = this.dataDoc.startForces ?? [];
     this.dataDoc.startPosX = this.dataDoc.startPosX ?? Math.round((this.xMax * 0.5 - 200) * 10) / 10;
     this.dataDoc.startPosY = this.dataDoc.startPosY ?? this.getDisplayYPos(
-      (400 - this.radius) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)
+      (400 - (0.08*this.layoutDoc._height)) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)
     );
     this.dataDoc.startVelX = this.dataDoc.startVelX ?? 0;
     this.dataDoc.startVelY = this.dataDoc.startVelY ?? 0;
@@ -187,8 +186,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.coefficientOfKineticFriction = this.dataDoc.coefficientOfKineticFriction ?? 0;
     this.dataDoc.coefficientOfStaticFriction = this.dataDoc.coefficientOfStaticFriction ?? 0;
     this.dataDoc.wedgeAngle = this.dataDoc.wedgeAngle ?? 26;
-    this.dataDoc.wedgeHeight = this.dataDoc.wedgeHeight ?? Math.tan((26 * Math.PI) / 180) * 400;
-    this.dataDoc.wedgeWidth = this.dataDoc.wedgeWidth ?? 400;
+    this.dataDoc.wedgeHeight = this.dataDoc.wedgeHeight ?? Math.tan((26 * Math.PI) / 180) * this.xMax*0.5;
+    this.dataDoc.wedgeWidth = this.dataDoc.wedgeWidth ?? this.xMax*0.5;
 
     // Used for pulley simulation
     this.dataDoc.positionXDisplay2 = this.dataDoc.positionXDisplay2 ?? 0;
@@ -220,9 +219,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     if (this.xMax != this.layoutDoc._width*0.6 || this.yMax != this.layoutDoc._height*0.9) {
       this.xMax = this.layoutDoc._width*0.6;
       this.yMax = this.layoutDoc._height*0.9;
-      this.radius = 0.08*this.layoutDoc._height ?? 60;
-      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+      this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+      console.log('reset sim')
     }
+    console.log('update')
   }
 
   setupSimulation = (simulationType: string, mode: string) => {
@@ -237,10 +237,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       this.dataDoc.showForceMagnitudes = (true);
       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);
-        this.dataDoc.positionYDisplay = (this.getDisplayYPos(this.yMin + this.radius));
-        this.dataDoc.positionXDisplay = ((this.xMax + this.xMin) / 2 - this.radius);
+        this.dataDoc.startPosY = (this.yMin + (0.08*this.layoutDoc._height));
+        this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - (0.08*this.layoutDoc._height));
+        this.dataDoc.positionYDisplay = (this.getDisplayYPos(this.yMin + (0.08*this.layoutDoc._height)));
+        this.dataDoc.positionXDisplay = ((this.xMax + this.xMin) / 2 - (0.08*this.layoutDoc._height));
         this.dataDoc.updatedForces = ([
           {
             description: "Gravity",
@@ -325,7 +325,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       if (this.dataDoc.simulationType == "One Weight") {
         this.dataDoc.showForces = (true);
         this.dataDoc.startPosY = (this.yMax - 100);
-        this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - this.radius);
+        this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - (0.08*this.layoutDoc._height));
         this.dataDoc.selectedTutorial = (tutorials.freeWeight);
         this.dataDoc.startForces = (this.getForceFromJSON(tutorials.freeWeight.steps[0].forces));
         this.dataDoc.showForceMagnitudes = (tutorials.freeWeight.steps[0].showMagnitude);
@@ -333,7 +333,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
         this.dataDoc.showForces = (true);
         this.setupSpring();
         this.dataDoc.startPosY = (this.yMin + 200 + 19.62);
-        this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - this.radius);
+        this.dataDoc.startPosX = ((this.xMax + this.xMin) / 2 - (0.08*this.layoutDoc._height));
         this.dataDoc.selectedTutorial = (tutorials.spring);
         this.dataDoc.startForces = (this.getForceFromJSON(tutorials.spring.steps[0].forces));
         this.dataDoc.showForceMagnitudes = (tutorials.spring.steps[0].showMagnitude);
@@ -343,8 +343,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
         const angle = 30;
         const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
         const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
-        const xPos = this.xMax / 2 - x - this.radius;
-        const yPos = y - this.radius - 5;
+        const xPos = this.xMax / 2 - x - (0.08*this.layoutDoc._height);
+        const yPos = y - (0.08*this.layoutDoc._height) - 5;
         this.dataDoc.startPosX = (xPos);
         this.dataDoc.startPosY = (yPos);
         this.dataDoc.selectedTutorial = (tutorials.pendulum);
@@ -387,10 +387,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
 
   // Helper function to go between display and real values
   getDisplayYPos = (yPos: number) => {
-    return this.yMax - yPos - 2 * this.radius + 5;
+    return this.yMax - yPos - 2 * (0.08*this.layoutDoc._height) + 5;
   };
   getYPosFromDisplay = (yDisplay: number) => {
-    return this.yMax - yDisplay - 2 * this.radius + 5;
+    return this.yMax - yDisplay - 2 * (0.08*this.layoutDoc._height) + 5;
   };
 
   // Update forces when coefficient of static friction changes in freeform mode
@@ -492,49 +492,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
 
   // Change wedge height and width and weight position to match new wedge angle
   changeWedgeBasedOnNewAngle = (angle: number) => {
-    let width = 0;
-    let height = 0;
-    if (angle < 50) {
-      width = 400;
-      height = Math.tan((angle * Math.PI) / 180) * 400;
-      this.dataDoc.wedgeWidth = width;
-      this.dataDoc.wedgeHeight = height;
-    } else if (angle < 70) {
-      width = 200;
-      height = Math.tan((angle * Math.PI) / 180) * 200;
-      this.dataDoc.wedgeWidth = width;
-      this.dataDoc.wedgeHeight = height;
-    } else {
-      width = 100;
-      height = Math.tan((angle * Math.PI) / 180) * 100;
-      this.dataDoc.wedgeWidth = width;
-      this.dataDoc.wedgeHeight = height;
-    }
+    this.dataDoc.wedgeWidth = this.xMax*0.5;
+    this.dataDoc.wedgeHeight = Math.tan((angle * Math.PI) / 180) * this.xMax*0.5;
 
     // update weight position based on updated wedge width/height
-    let yPos = (width - this.radius) * Math.tan((angle * Math.PI) / 180);
-    if (angle < 40) {
-      yPos += Math.sqrt(angle);
-    } else if (angle < 58) {
-      yPos += angle / 2;
-    } else if (angle < 68) {
-      yPos += angle;
-    } else if (angle < 70) {
-      yPos += angle * 1.3;
-    } else if (angle < 75) {
-      yPos += angle * 1.5;
-    } else if (angle < 78) {
-      yPos += angle * 2;
-    } else if (angle < 79) {
-      yPos += angle * 2.25;
-    } else if (angle < 80) {
-      yPos += angle * 2.6;
-    } else {
-      yPos += angle * 3;
-    }
-
+    let yPos = this.yMax - (0.08*this.layoutDoc._height) - Math.tan((angle * Math.PI) / 180) * this.xMax*0.5;
+    
     this.dataDoc.startPosX = Math.round((this.xMax * 0.5 - 200) * 10) / 10;
-    this.dataDoc.startPosY = this.getDisplayYPos(yPos);
+    this.dataDoc.startPosY = yPos;
     if (this.dataDoc.mode == "Freeform") {
       this.updateForcesWithFriction(
         Number(this.dataDoc.coefficientOfStaticFriction),
@@ -1032,8 +997,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.showComponentForces = (false);
     this.dataDoc.startVelY = (0);
     this.dataDoc.startVelX = (value);
-    let xPos = (this.xMax + this.xMin) / 2 - this.radius;
-    let yPos = (this.yMax + this.yMin) / 2 + this.dataDoc.circularMotionRadius - this.radius;
+    let xPos = (this.xMax + this.xMin) / 2 - (0.08*this.layoutDoc._height);
+    let yPos = (this.yMax + this.yMin) / 2 + this.dataDoc.circularMotionRadius - (0.08*this.layoutDoc._height);
     this.dataDoc.startPosY = (yPos);
     this.dataDoc.startPosX = (xPos);
     const tensionForce: IForce = {
@@ -1053,8 +1018,8 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     const angle = 30;
     const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
     const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
-    const xPos = this.xMax / 2 - x - this.radius;
-    const yPos = y - this.radius - 5;
+    const xPos = this.xMax / 2 - x - (0.08*this.layoutDoc._height);
+    const yPos = y - (0.08*this.layoutDoc._height) - 5;
     this.dataDoc.startPosX = (xPos);
     this.dataDoc.startPosY = (yPos);
     const mag = this.dataDoc.mass * Math.abs(this.dataDoc.gravity) * Math.sin((60 * Math.PI) / 180);
@@ -1126,7 +1091,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     };
     this.dataDoc.updatedForces = ([gravityForce]);
     this.dataDoc.startForces = ([gravityForce]);
-    this.dataDoc.startPosX = (this.xMax / 2 - this.radius);
+    this.dataDoc.startPosX = (this.xMax / 2 - (0.08*this.layoutDoc._height));
     this.dataDoc.startPosY = (200);
     this.dataDoc.springConstant = (0.5);
     this.dataDoc.springRestLength = (200);
@@ -1136,7 +1101,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
 
   // Default setup for suspension simulation
   setupSuspension = () => {
-    let xPos = (this.xMax + this.xMin) / 2 - this.radius;
+    let xPos = (this.xMax + this.xMin) / 2 - (0.08*this.layoutDoc._height);
     let yPos = this.yMin + 200;
     this.dataDoc.startPosY = (yPos);
     this.dataDoc.startPosX = (xPos);
@@ -1199,6 +1164,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       directionInDegrees: 90,
       component: false,
     };
+
     this.dataDoc.updatedForces = ([gravityForce1, tensionForce1]);
     this.dataDoc.startForces = ([gravityForce1, tensionForce1]);
     this.dataDoc.startPosY2 = ((this.yMax + this.yMin) / 2);
@@ -1207,6 +1173,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     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);
   };
 
@@ -1308,7 +1275,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
               paused={this.dataDoc.simulationPaused}
               pendulumAngle={this.dataDoc.pendulumAngle}
               pendulumLength={this.dataDoc.pendulumLength}
-              radius={this.radius}
+              radius={(0.08*this.layoutDoc._height)}
               reset={this.dataDoc.simulationReset}
               simulationSpeed={this.dataDoc.simulationSpeed}
               startPendulumAngle={this.dataDoc.startPendulumAngle}
@@ -1358,7 +1325,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 paused={this.dataDoc.simulationPaused}
                 pendulumAngle={this.dataDoc.pendulumAngle}
                 pendulumLength={this.dataDoc.pendulumLength}
-                radius={this.radius}
+                radius={(0.08*this.layoutDoc._height)}
                 reset={this.dataDoc.simulationReset}
                 simulationSpeed={this.dataDoc.simulationSpeed}
                 startPendulumAngle={this.dataDoc.startPendulumAngle}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 85c20760e..3386bfd1c 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -44,10 +44,10 @@ export default class InputField extends React.Component<IInputProps, IState> {
   epsilon: number = 0.01;
 
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
-    if (prevProps.value != this.props.value) {
+    if (prevProps.value != this.props.value && !isNaN(this.props.value)) {
       if (this.props.mode == "Freeform") {
         if (Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
-          console.log('update temp value')
+          console.log('update temp value', Number(this.props.value))
           this.setState({tempValue: Number(this.props.value)})
         }
       }
-- 
cgit v1.2.3-70-g09d2


From 09f61f8d1e10de81f6f5d18ff372744715aa62c4 Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Thu, 4 May 2023 21:16:36 -0400
Subject: debug wrong start values for input fields

---
 .../PhysicsBox/PhysicsSimulationInputField.tsx     |  5 ++-
 .../nodes/PhysicsBox/PhysicsSimulationWeight.tsx   | 45 +++++++++++-----------
 2 files changed, 27 insertions(+), 23 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 3386bfd1c..353b386a6 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -37,12 +37,15 @@ export default class InputField extends React.Component<IInputProps, IState> {
       tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180,
       width: this.props.small ? "6em" : "7em",
       margin: this.props.small ? "0px" : "10px"
-
     }
   }
 
   epsilon: number = 0.01;
 
+  componentDidMount(): void {
+    this.setState({tempValue: Number(this.props.value)})
+  }
+
   componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void {
     if (prevProps.value != this.props.value && !isNaN(this.props.value)) {
       if (this.props.mode == "Freeform") {
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 30c78cd94..a571f03f7 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1130,9 +1130,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           </svg>
         </div>
       )}
+      
       {this.props.dataDoc['simulationType'] == "Pulley" && (
         <div
-          className="wheel"
+          className="rod"
           style={{
             pointerEvents: "none",
             position: "absolute",
@@ -1141,18 +1142,20 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
-            <circle
-              cx={(this.props.xMax + this.props.xMin) / 2}
-              cy={this.props.radius}
-              r={this.props.radius * 1.5}
-              fill={"#808080"}
+            <line
+              x1={this.state.xPosition + this.props.radius}
+              y1={this.state.yPosition + this.props.radius}
+              x2={this.state.xPosition + this.props.radius}
+              y2={this.props.yMin}
+              stroke={"#deb887"}
+              strokeWidth="10"
             />
           </svg>
         </div>
       )}
       {this.props.dataDoc['simulationType'] == "Pulley" && (
         <div
-          className="rod"
+          className="wheel"
           style={{
             pointerEvents: "none",
             position: "absolute",
@@ -1161,13 +1164,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
           }}
         >
           <svg width={this.props.xMax + "px"} height={this.props.layoutDoc._height + "px"}>
-            <line
-              x1={this.state.xPosition + this.props.radius}
-              y1={this.state.yPosition + this.props.radius}
-              x2={this.state.xPosition + this.props.radius}
-              y2={this.props.yMin}
-              stroke={"#deb887"}
-              strokeWidth="10"
+            <circle
+              cx={(this.props.xMax + this.props.xMin) / 2}
+              cy={this.props.radius}
+              r={this.props.radius * 1.5}
+              fill={"#808080"}
             />
           </svg>
         </div>
@@ -1369,8 +1370,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 + this.getNewAccelerationX(this.props.updatedForces) * 7}
-                y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.updatedForces) * 7}
+                x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.updatedForces) * 15}
+                y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.updatedForces) * 15}
                 stroke={"green"}
                 strokeWidth="5"
                 markerEnd="url(#accArrow)"
@@ -1380,8 +1381,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               style={{
                 pointerEvents: "none",
                 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",
+                left: this.state.xPosition + this.props.radius + this.state.xAccel * 15 + 25 + "px",
+                top: this.state.yPosition + this.props.radius + this.state.yAccel * 15 + 70 + "px",
                 lineHeight: 1,
               }}
             >
@@ -1423,8 +1424,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 + this.state.xVelocity * 3}
-                y2={this.state.yPosition + this.props.radius + this.state.yVelocity * 3}
+                x2={this.state.xPosition + this.props.radius + this.state.xVelocity * 7}
+                y2={this.state.yPosition + this.props.radius + this.state.yVelocity * 7}
                 stroke={"blue"}
                 strokeWidth="5"
                 markerEnd="url(#velArrow)"
@@ -1434,8 +1435,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
               style={{
                 pointerEvents: "none",
                 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",
+                left: this.state.xPosition + this.props.radius + this.state.xVelocity * 7 + 25 + "px",
+                top: this.state.yPosition +  this.props.radius + this.state.yVelocity * 7 + "px",
                 lineHeight: 1,
               }}
             >
-- 
cgit v1.2.3-70-g09d2


From 697c2bd76fc6c6c7cfe78b4a5d4d84f23b884d8c Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Sat, 6 May 2023 15:23:50 -0400
Subject: refactor answer inputs

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 332 +++++++++------------
 .../PhysicsBox/PhysicsSimulationInputField.tsx     |   1 -
 2 files changed, 139 insertions(+), 194 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 695b0733d..340004cef 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -145,10 +145,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.velocityYDisplay = this.dataDoc.velocityYDisplay ?? 0;
 
     // Used for review mode
-    this.dataDoc.answerInputFields = this.dataDoc.answerInputFields ?? <div></div>;
     // this.dataDoc.currentForceSketch = this.dataDoc.currentForceSketch ?? null;
     // this.dataDoc.deleteMode = this.dataDoc.deleteMode ?? false;
     // this.dataDoc.forceSketches = this.dataDoc.forceSketches ?? [];
+    this.dataDoc.answers = [];
     this.dataDoc.hintDialogueOpen = this.dataDoc.hintDialogueOpen ?? false;
     this.dataDoc.noMovement = this.dataDoc.noMovement ?? false;
     this.dataDoc.questionNumber = this.dataDoc.questionNumber ?? 0;
@@ -285,7 +285,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       this.dataDoc.showAcceleration = (false);
       this.dataDoc.showVelocity = (false);
       this.dataDoc.showForces= (true);
-      // this.generateNewQuestion();
+      this.generateNewQuestion();
       if (simulationType == "One Weight") {
         // TODO - one weight review problems
       } else if (simulationType == "Spring") {
@@ -767,7 +767,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.reviewStaticAngle = (0);
     this.dataDoc.coefficientOfKineticFriction = (0);
     this.dataDoc.simulationPaused = (true);
-    this.dataDoc.answerInputFields = (<div></div>);
   };
 
   // In review mode, reset problem variables and generate a new question
@@ -824,195 +823,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.selectedQuestion = (question);
     this.dataDoc.questionPartOne = (q);
     this.dataDoc.questionPartTwo = (question.question);
-    const answers = this.getAnswersToQuestion(question, vars);
-    this.generateInputFieldsForQuestion(false, question, answers);
-    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+    this.dataDoc.answers = this.getAnswersToQuestion(question, vars);
+    //this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
   };
 
-  // Generate answerInputFields for new review question
-  generateInputFieldsForQuestion = (
-    showIcon: boolean = false,
-    question: QuestionTemplate = this.dataDoc.selectedQuestion,
-    answers: number[] = this.dataDoc.selectedSolutions
-  ) => {
-    let answerInput = [];
-    const d = new Date();
-    for (let i = 0; i < question.answerParts.length; i++) {
-      if (question.answerParts[i] == "force of gravity") {
-        this.dataDoc.reviewGravityMagnitude = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Gravity magnitude</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewGravityMagnitude'}
-              step={0.1}
-              unit={"N"}
-              upperBound={50}
-              value={this.dataDoc.reviewGravityMagnitude}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "angle of gravity") {
-        this.dataDoc.reviewGravityAngle = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Gravity angle</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewGravityAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={360}
-              value={this.dataDoc.reviewGravityAngle}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "normal force") {
-        this.dataDoc.reviewNormalMagnitude = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Normal force magnitude</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewNormalMagnitude'}
-              step={0.1}
-              unit={"N"}
-              upperBound={50}
-              value={this.dataDoc.reviewNormalMagnitude}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "angle of normal force") {
-        this.dataDoc.reviewNormalAngle = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Normal force angle</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewNormalAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={360}
-              value={this.dataDoc.reviewNormalAngle}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "force of static friction") {
-        this.dataDoc.reviewStaticMagnitude = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Static friction magnitude</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewStaticMagnitude'}
-              step={0.1}
-              unit={"N"}
-              upperBound={50}
-              value={this.dataDoc.reviewStaticMagnitude}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "angle of static friction") {
-        this.dataDoc.reviewStaticAngle = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Static friction angle</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewStaticAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={360}
-              value={this.dataDoc.reviewStaticAngle}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "coefficient of static friction") {
-        this.updateReviewForcesBasedOnCoefficient(0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={
-                <Box>
-                  &mu;<sub>s</sub>
-                </Box>
-              }
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'coefficientOfStaticFriction'}
-              step={0.1}
-              unit={""}
-              upperBound={1}
-              value={this.dataDoc.coefficientOfStaticFriction}
-              effect={this.updateReviewForcesBasedOnCoefficient}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "wedge angle") {
-        this.updateReviewForcesBasedOnAngle(0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<Box>&theta;</Box>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'wedgeAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={49}
-              value={this.dataDoc.wedgeAngle ?? 26}
-              effect={(val: number) => {
-                this.changeWedgeBasedOnNewAngle(val);
-                this.updateReviewForcesBasedOnAngle(val);
-              }}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-            />
-          </div>
-        );
-      }
-    }
-
-    this.dataDoc.answerInputFields = (
-      <div
-        style={{ display: "flex", flexDirection: "column", alignItems: "left" }}
-      >
-        {answerInput}
-      </div>
-    );
-  };
-  
   // Default setup for uniform circular motion simulation
   setupCircular = (value: number) => {
     this.dataDoc.showComponentForces = (false);
@@ -1459,6 +1273,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
         {this.dataDoc.mode == "Review" && this.dataDoc.simulationType != "Inclined Plane" && (
           <div className="wordProblemBox">
             <p>{this.dataDoc.simulationType} review problems in progress!</p>
+            <hr/>
           </div>
         )}
         {this.dataDoc.mode == "Review" && this.dataDoc.simulationType == "Inclined Plane" && (
@@ -1517,9 +1332,140 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <p>{this.dataDoc.questionPartOne}</p>
                 <p>{this.dataDoc.questionPartTwo}</p>
               </div>
-              <div className="answer">{this.dataDoc.answerInputFields}</div>
-            </div>
-          </div>
+              <div className="answers">
+                {this.dataDoc.selectedQuestion.answerParts.includes("force of gravity") &&
+                  (<InputField
+                    label={<p>Gravity magnitude</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewGravityMagnitude'}
+                    step={0.1}
+                    unit={"N"}
+                    upperBound={50}
+                    value={this.dataDoc.reviewGravityMagnitude}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("force of gravity")]}
+                    labelWidth={"7em"}
+                  />)
+                }
+                {this.dataDoc.selectedQuestion.answerParts.includes("angle of gravity") && (
+                  <InputField
+                    label={<p>Gravity angle</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewGravityAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={360}
+                    value={this.dataDoc.reviewGravityAngle}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of gravity")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("normal force") && (
+                  <InputField
+                    label={<p>Normal force magnitude</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewNormalMagnitude'}
+                    step={0.1}
+                    unit={"N"}
+                    upperBound={50}
+                    value={this.dataDoc.reviewNormalMagnitude}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("normal force")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("angle of normal force") && (
+                  <InputField
+                    label={<p>Normal force angle</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewNormalAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={360}
+                    value={this.dataDoc.reviewNormalAngle}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of normal force")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("force of static friction") && (
+                <InputField
+                  label={<p>Static friction magnitude</p>}
+                  lowerBound={0}
+                  dataDoc={this.dataDoc}
+                  prop={'reviewStaticMagnitude'}
+                  step={0.1}
+                  unit={"N"}
+                  upperBound={50}
+                  value={this.dataDoc.reviewStaticMagnitude}
+                  showIcon={false}
+                  correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("force of static friction")]}
+                  labelWidth={"7em"}
+                />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("angle of static friction") && (
+                  <InputField
+                    label={<p>Static friction angle</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewStaticAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={360}
+                    value={this.dataDoc.reviewStaticAngle}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of static friction")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("coefficient of static friction") && (
+                  <InputField
+                    label={
+                      <Box>
+                        &mu;<sub>s</sub>
+                      </Box>
+                    }
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'coefficientOfStaticFriction'}
+                    step={0.1}
+                    unit={""}
+                    upperBound={1}
+                    value={this.dataDoc.coefficientOfStaticFriction}
+                    effect={this.updateReviewForcesBasedOnCoefficient}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("coefficient of static friction")]}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("wedge angle") && (
+                  <InputField
+                    label={<Box>&theta;</Box>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'wedgeAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={49}
+                    value={this.dataDoc.wedgeAngle ?? 26}
+                    effect={(val: number) => {
+                      this.changeWedgeBasedOnNewAngle(val);
+                      this.updateReviewForcesBasedOnAngle(val);
+                    }}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]}
+                  />
+                )}
+              </div>
+           </div>
         )}
         {this.dataDoc.mode == "Tutorial" && (
           <div className="wordProblemBox">
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 353b386a6..5e5a60edd 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -50,7 +50,6 @@ export default class InputField extends React.Component<IInputProps, IState> {
     if (prevProps.value != this.props.value && !isNaN(this.props.value)) {
       if (this.props.mode == "Freeform") {
         if (Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
-          console.log('update temp value', Number(this.props.value))
           this.setState({tempValue: Number(this.props.value)})
         }
       }
-- 
cgit v1.2.3-70-g09d2

