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

const img = document.getElementById("img-boton-jugar") as HTMLImageElement

export type State = {
    current: "welcome"
}

function startButton(juego: Juego<State>) {
    const [width, height] = [img.width / 4, img.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(img, btn.x, btn.y, btn.width, btn.height)
}
