import botonJugarImg from "./assets/boton_jugar.png"
import larretaImg from "./assets/Millonario Malo.png"
import fondoImg from "./assets/CieloRioCalle.png"
import edificiosImg from "./assets/Edificios.png"
import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png"
import baldosaImg from "./assets/Baldosa.png"
import semillaImg from "./assets/Semilla.png"
import arbol1Img from "./assets/Árbol 1.png"
import arbol2Img from "./assets/Árbol 2.png"

function loadImage(url: string): Promise<HTMLImageElement> {
	return new Promise((resolve, reject) => {
		let img = new Image()
		img.onload = () => resolve(img)
		img.onerror = e => reject(e)
		img.src = url
	})
}

export const assetUrls = {
	botonJugar: botonJugarImg,
	larreta: larretaImg,
	fondo: fondoImg,
	edificios: edificiosImg,
	jugadorx: jugadorxImg,
	baldosa: baldosaImg,
	semilla: semillaImg,
	arbol1: arbol1Img,
	arbol2: arbol2Img,
}
export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement }

const assets = Object.fromEntries(Object.entries(assetUrls).map(([name, url]) => [name, loadImage(url)]))

export async function loadAssets() {
	const imgs = await Promise.all(Object.values(assets))
	return Object.fromEntries(imgs.map((img, i) => [Object.keys(assetUrls)[i], img])) as Assets
}