37 lines
985 B
TypeScript
Raw Normal View History

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>
);
};