1 files changed, 83 insertions, 0 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWedge.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWedge.tsx
new file mode 100644
index 000000000..6134a6bc0
--- /dev/null
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWedge.tsx
@@ -0,0 +1,83 @@
+import React = require('react');
+import "./PhysicsSimulationBox.scss";
+
+export interface IWedgeProps {
+  startHeight: number;
+  startWidth: number;
+  startLeft: number;
+  xMax: number;
+  yMax: number;
+}
+
+interface IState {
+  angleInRadians: number, 
+  left: number,
+  coordinates: string,
+}
+
+export default class Wedge extends React.Component<IWedgeProps, IState> {
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth),
+      left: this.props.startLeft,
+      coordinates: "",
+    }
+  }
+
+  color = "#deb887";
+
+  updateCoordinates() {
+    const coordinatePair1 =
+      Math.round(this.state.left) + "," + Math.round(this.props.yMax) + " ";
+    const coordinatePair2 =
+      Math.round(this.state.left + this.props.startWidth) +
+      "," +
+      Math.round(this.props.yMax) +
+      " ";
+    const coordinatePair3 =
+      Math.round(this.state.left) +
+      "," +
+      Math.round(this.props.yMax - this.props.startHeight);
+    const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
+    this.setState({coordinates: coord}); 
+  }
+
+  componentDidMount() {
+    this.updateCoordinates()
+  }
+
+  componentDidUpdate(prevProps: Readonly<IWedgeProps>, prevState: Readonly<IState>, snapshot?: any): void {
+    if (prevProps.startHeight != this.props.startHeight || prevProps.startWidth != this.props.startWidth) {
+      this.setState({angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth)});
+      this.updateCoordinates();
+    } 
+  }
+  
+  render() {
+    return (
+      <div>
+        <div style={{ position: "absolute", left: "0", top: "0" }}>
+          <svg
+            width={this.props.xMax + "px"}
+            height={this.props.yMax + "px"}
+          >
+            <polygon points={this.state.coordinates} style={{ fill: "burlywood" }} />
+          </svg>
+        </div>
+
+        <p
+          style={{
+            position: "absolute",
+            zIndex: 500,
+            left: Math.round(this.state.left + this.props.startWidth - 80) + "px",
+            top: Math.round(this.props.yMax - 40) + "px",
+          }}
+        >
+          {Math.round(((this.state.angleInRadians * 180) / Math.PI) * 100) / 100}°
+        </p>
+      </div>
+    );
+  }
+};