120 lines
3.7 KiB
TypeScript
120 lines
3.7 KiB
TypeScript
import { Howl } from "howler";
|
|
|
|
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 instagram from "./assets/240px-Instagram_simple_icon.svg.png";
|
|
import facebook from "./assets/Font_Awesome_5_brands_facebook-square.png";
|
|
import twitter from "./assets/240px-Font_Awesome_5_brands_Twitter.svg.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 dialogoFirma from "./assets/Firmá_2.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";
|
|
import fondo from "./assets/fondo.mp3";
|
|
|
|
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;
|
|
});
|
|
}
|
|
function loadAudio(url: string): Promise<Howl> {
|
|
return new Promise((resolve, reject) => {
|
|
const sound = new Howl({
|
|
src: [url],
|
|
loop: true,
|
|
});
|
|
|
|
sound.once("load", () => resolve(sound));
|
|
sound.once("loaderror", (e) => reject(e));
|
|
sound.load();
|
|
});
|
|
}
|
|
|
|
export const imageAssetUrls = {
|
|
botonComenzar,
|
|
botonSiguiente,
|
|
botonCompartirPerdiste,
|
|
botonCompartirFelicitaciones,
|
|
facebook,
|
|
instagram,
|
|
twitter,
|
|
logoFPGFDTBlanco,
|
|
logoSalvaLaCostanera,
|
|
logoSalvaLaCostaneraCostado,
|
|
instrucciones1,
|
|
instrucciones2,
|
|
instrucciones3,
|
|
placaPerdiste,
|
|
placaFelicitaciones,
|
|
flecha,
|
|
dialogoFirma,
|
|
larreta,
|
|
millonarioMalo,
|
|
cieloRioCalle,
|
|
cielo,
|
|
rio,
|
|
parquePublicoRio,
|
|
parquePublico,
|
|
edificios,
|
|
jugadorx,
|
|
jugadorxPresentando,
|
|
baldosa,
|
|
semilla,
|
|
arbol1,
|
|
arbol2,
|
|
ciudadanx1,
|
|
ciudadanx2,
|
|
ciudadanx3,
|
|
};
|
|
export const audioAssetUrls = {
|
|
fondo,
|
|
};
|
|
|
|
export type Assets = {
|
|
[key in keyof typeof imageAssetUrls]: HTMLImageElement;
|
|
} &
|
|
{ [key in keyof typeof audioAssetUrls]: Howl };
|
|
|
|
const imageAssets = Object.fromEntries(
|
|
Object.entries(imageAssetUrls).map(([name, url]) => [name, loadImage(url)])
|
|
);
|
|
const audioAssets = Object.fromEntries(
|
|
Object.entries(audioAssetUrls).map(([name, url]) => [name, loadAudio(url)])
|
|
);
|
|
|
|
export async function loadAssets() {
|
|
const imgs = await Promise.all(Object.values(imageAssets));
|
|
const audios = await Promise.all(Object.values(audioAssets));
|
|
return Object.fromEntries([
|
|
...imgs.map((img, i) => [Object.keys(imageAssetUrls)[i], img]),
|
|
...audios.map((audio, i) => [Object.keys(audioAssetUrls)[i], audio]),
|
|
]) as Assets;
|
|
}
|