| 4 | import { pad } from "../game/padding"; |
| 5 | |
| 6 | export function Simulation() { |
| 7 | const canvasRef = useRef<any>(); |
| 8 | let [outputs, setOutputs] = useState<{ [key: number]: number[] }>({ |
| 9 | 0: [], |
| 10 | 1: [], |
| 11 | 2: [], |
| 12 | 3: [], |
| 13 | 4: [], |
| 14 | 5: [], |
| 15 | 6: [], |
| 16 | 7: [], |
| 17 | 8: [], |
| 18 | 9: [], |
| 19 | 10: [], |
| 20 | 11: [], |
| 21 | 12: [], |
| 22 | 13: [], |
| 23 | 14: [], |
| 24 | 15: [], |
| 25 | 16: [], |
| 26 | 17: [], |
| 27 | }); |
| 28 | |
| 29 | async function simulate(ballManager: BallManager) { |
| 30 | let i = 0; |
| 31 | while (1) { |
| 32 | i++; |
| 33 | ballManager.addBall(pad(WIDTH / 2 + 20 * (Math.random() - 0.5))); |
| 34 | await new Promise((resolve) => setTimeout(resolve, 1000)); |
| 35 | } |
| 36 | } |
| 37 | |
| 38 | useEffect(() => { |
| 39 | if (canvasRef.current) { |
| 40 | const ballManager = new BallManager( |
| 41 | canvasRef.current as unknown as HTMLCanvasElement, |
| 42 | (index: number, startX?: number) => { |
| 43 | setOutputs((outputs: any) => { |
| 44 | return { |
| 45 | ...outputs, |
| 46 | [index]: [...(outputs[index] as number[]), startX], |
| 47 | }; |
| 48 | }); |
| 49 | } |
| 50 | ); |
| 51 | simulate(ballManager); |
| 52 | |
| 53 | return () => { |
| 54 | ballManager.stop(); |
| 55 | }; |
| 56 | } |
| 57 | }, [canvasRef]); |
| 58 | |
| 59 | return ( |
| 60 | <div className="flex flex-col lg:flex-row items-center justify-between h-screen"> |
| 61 | <div className="flex mx-16 flex-col justify-center pt-10"> |
| 62 | {JSON.stringify(outputs, null, 2)} |
| 63 | </div> |