import './style.css'
import {pollAndTouch} from "./screen.ts";
import {getClock} from "./clock.ts";
import {game} from "./game.ts";
import {getInput, setupInput} from "./input.ts";
// import typescriptLogo from './typescript.svg'
// import viteLogo from '/vite.svg'
// import { setupCounter } from './counter.ts'

// import {AlignX, mainFont} from "./font.ts";


function setupGame() {
  let gameCanvas = document.getElementById("game") as HTMLCanvasElement;
  setupInput(gameCanvas);
  onFrame(undefined);  // start on-frame draw loop, set up screen
}

function onFrame(timestamp: number | undefined) {
  let gameCanvas = document.getElementById("game") as HTMLCanvasElement;
  requestAnimationFrame(onFrame);

  if (timestamp) {
    getClock().recordTimestamp(timestamp);
  }
  onFrameFixScreen(gameCanvas);

  while (getClock().popUpdate()) {
    game.update();
    getInput().update();
  }

  game.draw();

  /*
  let ctx = getScreen().canvas.getContext("2d")!;
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);

  // ctx.drawImage(getAssets().getImage(font), 0, frame % (getScreen().h + 256) - 128);
  // console.log(mainFont.measureText({text: "a!\nb\n"}));
  mainFont.drawText({
    ctx: ctx,
    text: "Hello, world!\nI wish you luck!",
    x: gameCanvas.width,
    y: 0,
    color: "#f00",
    alignX: AlignX.Right,
  });
  mainFont.drawText({
    ctx: ctx,
    text: "^._.^",
    x: gameCanvas.width/2,
    y: 32,
    color: "#0ff",
    alignX: AlignX.Center,
  });
   */
}

function onFrameFixScreen(canvas: HTMLCanvasElement) {
  pollAndTouch(canvas);
}

setupGame();

/*
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
 */