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