salva-la-costanera/src/assets.ts

import botonComenzar from "./assets/Comenzar.png";
import botonSiguiente from "./assets/Siguiente.png";
import botonCompartirPerdiste from "./assets/Comparti_2.png";
import botonCompartirFelicitaciones from "./assets/Comparti_1.png";
import logoFPGFDTBlanco from "./assets/Logo Blanco.png";
import logoSalvaLaCostanera from "./assets/SalvaCostanera.png";
import logoSalvaLaCostaneraCostado from "./assets/Salva2.png";
import instrucciones1 from "./assets/Instrucciones 1.png";
import instrucciones2 from "./assets/Instrucciones 2.png";
import instrucciones3 from "./assets/Instrucciones 3.png";
import placaPerdiste from "./assets/Perdiste_2.png";
import placaFelicitaciones from "./assets/Felicitaciones_2.png";
import flecha from "./assets/flecha.png";
import larreta from "./assets/Larreta.png";
import millonarioMalo from "./assets/Millonario Malo.png";
import cieloRioCalle from "./assets/CieloRioCalle.png";
import cielo from "./assets/Cielo.png";
import rio from "./assets/Rio.png";
import parquePublicoRio from "./assets/Parque publico con rio.png";
import parquePublico from "./assets/Parque publico.png";
import edificios from "./assets/Edificios.png";
import jugadorx from "./assets/ProtagonistaCorriendo_1.png";
import jugadorxPresentando from "./assets/Personaje 1.png";
import baldosa from "./assets/Baldosa.png";
import semilla from "./assets/Semilla.png";
import arbol1 from "./assets/Árbol 1.png";
import arbol2 from "./assets/Árbol 2.png";
import ciudadanx1 from "./assets/Firma 1.png";
import ciudadanx2 from "./assets/Firma 2.png";
import ciudadanx3 from "./assets/Firma 3.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 = {
  botonComenzar,
  botonSiguiente,
  botonCompartirPerdiste,
  botonCompartirFelicitaciones,
  logoFPGFDTBlanco,
  logoSalvaLaCostanera,
  logoSalvaLaCostaneraCostado,
  instrucciones1,
  instrucciones2,
  instrucciones3,
  placaPerdiste,
  placaFelicitaciones,
  flecha,
  larreta,
  millonarioMalo,
  cieloRioCalle,
  cielo,
  rio,
  parquePublicoRio,
  parquePublico,
  edificios,
  jugadorx,
  jugadorxPresentando,
  baldosa,
  semilla,
  arbol1,
  arbol2,
  ciudadanx1,
  ciudadanx2,
  ciudadanx3,
};
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;
}