From 4db4b5791cd1359519933871ab65412acafb71d7 Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Mon, 27 Feb 2023 22:35:28 +0100 Subject: v1.1.0 Refactor of loading screen Faster loading time by concurently awaiting all promises Minor bug fix Added litle help menu at the start of the game --- src/Images.ts | 65 ++++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 53 insertions(+), 12 deletions(-) (limited to 'src/Images.ts') diff --git a/src/Images.ts b/src/Images.ts index 3721ac0..f67ef30 100644 --- a/src/Images.ts +++ b/src/Images.ts @@ -153,17 +153,36 @@ export const IMGS = { selector: {} as HTMLImageElement, empty: {} as HTMLImageElement, }; -export const URL = "/maks/szkola/apkKli/1942/" +export const URL = "" // window.IMGS = IMGS; -export default async function loadAllImages() { +export async function loadAllImages() { + const prImgs = [] for (const key in IMGS) { if (["empty", "font", "start"].includes(key)) continue; - IMGS[key as keyof typeof IMGS] = await asyncImageLoader(URL + "src/imgs/" + toKebabCase(key) + ".png") as any + + prImgs.push(asyncImageLoader(URL + "src/imgs/" + toKebabCase(key) + ".png")) + // IMGS[key as keyof typeof IMGS] = await asyncImageLoader(URL + "src/imgs/" + toKebabCase(key) + ".png") as any + } + const imgs = await Promise.all(prImgs) + for (const [i, key] of Object.keys(IMGS).entries()) { + if (["empty", "font", "start"].includes(key)) continue; + IMGS[key as keyof typeof IMGS] = imgs[i] } + + const prLetters = {} as { [key: string]: Promise[] } + const letters = {} as { [key: string]: HTMLImageElement[] } for (const color of ['yellow', 'white', 'blue', 'red', 'green', 'purple']) { // for (const color of ['white', 'yellow']) { + prLetters[color] = [] as Promise[] for (const char of allChars) { - (((IMGS.font as any)[color] as any)[char]) = await asyncImageLoader(URL + "src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any + prLetters[color].push(asyncImageLoader(URL + "src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any) + // (((IMGS.font as any)[color] as any)[char]) = await asyncImageLoader(URL + "src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any + } + } + for (const color in prLetters) { + letters[color] = await Promise.all(prLetters[color]) + for (const [i, char] of allChars.entries()) { + IMGS.font[color as keyof typeof IMGS.font][char] = letters[color][i] } } IMGS.font[' '] = await asyncImageLoader(URL + "src/imgs/font/ .png") @@ -175,12 +194,20 @@ export default async function loadAllImages() { IMGS.font.red[' '] = await asyncImageLoader(URL + "src/imgs/font/ .png") IMGS.font.green[' '] = await asyncImageLoader(URL + "src/imgs/font/ .png") IMGS.font.purple[' '] = await asyncImageLoader(URL + "src/imgs/font/ .png") + // Only numbers for (const c of allChars.filter(ch => !alphabet.includes(ch))) { IMGS.font.small.white[c] = await asyncImageLoader(URL + "src/imgs/font/small/white/" + c + ".png"); } - for (let i = 1; i <= 215; i++) - IMGS.start[i] = await asyncImageLoader(URL + "src/imgs/start/" + i + ".png"); + + const prBg = [] + for (let i = 1; i <= 215; i++) { + prBg.push(asyncImageLoader(URL + "src/imgs/start/" + i + ".png")); + } + const bg = await Promise.all(prBg) + for (let i = 1; i <= 215; i++) { + IMGS.start[i] = bg[i]; + } } async function asyncImageLoader(url: string): Promise { return new Promise((resolve, reject) => { @@ -190,11 +217,11 @@ async function asyncImageLoader(url: string): Promise { image.onerror = () => { console.log("img did not load", url); reject() } }) } -async function asyncSoundLoader(url: string): Promise { +async function asyncSoundLoader(url: string): Promise { return new Promise((resolve, reject) => { const image = new Audio(url) image.src = url - image.oncanplaythrough = () => resolve(image) + image.oncanplaythrough = () => resolve(image as Sound) image.onerror = () => { console.log("img did not load", url); reject() } }) } @@ -214,12 +241,26 @@ export const SOUNDS = { rvCheck: {} as Sound, } export async function loadAllSounds() { + const sounds = [] for (const key in SOUNDS) { - const toBeSound = await asyncSoundLoader(URL + "src/audios/" + toKebabCase(key) + ".mp3") as Sound - toBeSound.playFromBegin = function() { this.currentTime = 0; this.play() } - if (["mainTheme", "win", "name"].includes(key)) toBeSound.loop = true; - SOUNDS[key as keyof typeof SOUNDS] = toBeSound; + sounds.push(asyncSoundLoader(URL + "src/audios/" + toKebabCase(key) + ".mp3")) + } + const responses = await Promise.all(sounds) + for (const [i, key] of Object.keys(SOUNDS).entries()) { + let sound = responses[i] + sound.playFromBegin = function() { this.currentTime = 0; this.play() } + if (["mainTheme", "win", "name"].includes(key)) sound.loop = true; + SOUNDS[key as keyof typeof SOUNDS] = sound; } + // for (const sound of sounds) { + + // } + //for (const key in SOUNDS) { + // const toBeSound = await asyncSoundLoader(URL + "src/audios/" + toKebabCase(key) + ".mp3") as Sound + // toBeSound.playFromBegin = function() { this.currentTime = 0; this.play() } + // if (["mainTheme", "win", "name"].includes(key)) toBeSound.loop = true; + // SOUNDS[key as keyof typeof SOUNDS] = toBeSound; + //} } export function getSmallDeathAnim(t: Enemy) { -- cgit v1.3.1