59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import { TheAbstractionEngine, Game } from "../engine";
|
|
import { Miscellaneous } from "../engine/config";
|
|
import { Title } from "./Title";
|
|
|
|
export interface GameCanvasProps {
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export const GameCanvas = ({ width, height }: GameCanvasProps) => {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const [game, setGame] = useState<TheAbstractionEngine>();
|
|
const [ready, setReady] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (canvasRef.current && !game) {
|
|
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();
|
|
canvas.focus();
|
|
|
|
setGame(theAbstractionEngine);
|
|
setLoading(false);
|
|
});
|
|
|
|
return () => theAbstractionEngine.stop();
|
|
}
|
|
}
|
|
}, [canvasRef, ready]);
|
|
|
|
if (ready) {
|
|
return (
|
|
<div className="centered-game">
|
|
<canvas
|
|
id={Miscellaneous.CANVAS_ID}
|
|
tabIndex={1}
|
|
ref={canvasRef}
|
|
width={loading ? 50 : width}
|
|
height={loading ? 50 : height}
|
|
></canvas>
|
|
{loading && <span className="loading">Loading...</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="centered-game">
|
|
<Title setReady={setReady} />
|
|
</div>
|
|
);
|
|
};
|