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)
}