import { posInBox } from "./utils";
import { createJugandoState } from "./jugando";
import { Juego } from "./main";

export type State = {
  current: "welcome";
};

function startButton(juego: Juego<State>) {
  const [width, height] = [
    juego.assets.botonJugar.width / 4,
    juego.assets.botonJugar.height / 4,
  ];
  return {
    x: juego.canvas.width - width - 30,
    y: juego.canvas.height - height - 30,
    width,
    height,
  };
}

export function update(juego: Juego<State>, dt: number) {
  const btn = startButton(juego);
  if (juego.mouse.down && posInBox(btn, juego.mouse)) {
    (juego as Juego<any>).state = createJugandoState();
  }
}

export function draw(juego: Juego<State>, timestamp: number) {
  const btn = startButton(juego);
  juego.ctx.drawImage(
    juego.assets.botonJugar,
    btn.x,
    btn.y,
    btn.width,
    btn.height
  );
}