the-abstraction-engine/src/components/GameCanvas.tsx

import { useState, useEffect, useRef } from "react";
import { TheAbstractionEngine, Game } from "../engine";
import { Miscellaneous } from "../engine/config";

export interface GameCanvasProps {
  width: number;
  height: number;
}

export const GameCanvas = ({ width, height }: GameCanvasProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [game, setGame] = useState<TheAbstractionEngine>();

  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();
          setGame(theAbstractionEngine);

          canvas.focus();
        });

        return () => theAbstractionEngine.stop();
      }
    }
  }, [canvasRef]);

  return (
    <div className="centered-game">
      <canvas
        id={Miscellaneous.CANVAS_ID}
        tabIndex={1}
        ref={canvasRef}
        width={width}
        height={height}
      ></canvas>
    </div>
  );
};