1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import { useState, useEffect, useCallback } from "react";
import "./PhysicsSimulationBox.scss";
export interface IWedgeProps {
startHeight: number;
startWidth: number;
startLeft: number;
}
export const Wedge = (props: IWedgeProps) => {
const { startHeight, startWidth, startLeft } = props;
const [angleInRadians, setAngleInRadians] = useState(
Math.atan(startHeight / startWidth)
);
const [left, setLeft] = useState(startLeft);
const [coordinates, setCoordinates] = useState("");
const color = "#deb887";
useEffect(() => {
const coordinatePair1 =
Math.round(left) + "," + Math.round(window.innerHeight * 0.8) + " ";
const coordinatePair2 =
Math.round(left + startWidth) +
"," +
Math.round(window.innerHeight * 0.8) +
" ";
const coordinatePair3 =
Math.round(left) +
"," +
Math.round(window.innerHeight * 0.8 - startHeight);
const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
setCoordinates(coord);
}, [left, startWidth, startHeight]);
useEffect(() => {
setAngleInRadians(Math.atan(startHeight / startWidth));
}, [startWidth, startHeight]);
return (
<div>
<div style={{ position: "absolute", left: "0", top: "0", zIndex: -5 }}>
<svg
width={window.innerWidth * 0.7 + "px"}
height={window.innerHeight * 0.8 + "px"}
>
<polygon points={coordinates} style={{ fill: "burlywood" }} />
</svg>
</div>
<p
style={{
position: "absolute",
zIndex: 500,
left: Math.round(left + startWidth - 80) + "px",
top: Math.round(window.innerHeight * 0.8 - 40) + "px",
}}
>
{Math.round(((angleInRadians * 180) / Math.PI) * 100) / 100}°
</p>
</div>
);
};
|
