2024-03-01 18:56:58 -07:00
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
|
|
import { TheAbstractionEngine, Game } from "../engine";
|
2024-03-01 16:31:27 -07:00
|
|
|
|
|
|
|
export interface GameCanvasProps {
|
|
|
|
width: number;
|
|
|
|
height: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const GameCanvas = ({ width, height }: GameCanvasProps) => {
|
|
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
2024-03-01 18:56:58 -07:00
|
|
|
const [_game, setGame] = useState<TheAbstractionEngine>();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (canvasRef.current) {
|
|
|
|
const canvas = canvasRef.current;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
if (ctx) {
|
|
|
|
const game = new Game();
|
|
|
|
const theAbstractionEngine = new TheAbstractionEngine(game, ctx);
|
|
|
|
|
|
|
|
theAbstractionEngine.init().then(() => {
|
|
|
|
theAbstractionEngine.play();
|
|
|
|
setGame(theAbstractionEngine);
|
|
|
|
});
|
|
|
|
|
|
|
|
return () => theAbstractionEngine.stop();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [canvasRef]);
|
2024-03-01 16:31:27 -07:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="centered-game">
|
|
|
|
<canvas ref={canvasRef} width={width} height={height}></canvas>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|