From ad08aeab049a227e2dc65a99ef3d0517932894a1 Mon Sep 17 00:00:00 2001
From: Hyun Ahn <codepawn@icloud.com>
Date: Wed, 29 Nov 2023 20:30:54 +0900
Subject: [PATCH] add loading screen prototype

---
 src/battle-scene.ts  | 230 +++++--------------------------
 src/loading-scene.ts | 322 ++++++++++++++++++++++++++++++++++---------
 2 files changed, 293 insertions(+), 259 deletions(-)

diff --git a/src/battle-scene.ts b/src/battle-scene.ts
index 7f0cc4771e3..27ffbbf05b7 100644
--- a/src/battle-scene.ts
+++ b/src/battle-scene.ts
@@ -23,7 +23,6 @@ import Battle, { BattleType, FixedBattleConfig, fixedBattles } from './battle';
 import { GameMode } from './game-mode';
 import SpritePipeline from './pipelines/sprite';
 import PartyExpBar from './ui/party-exp-bar';
-import { TrainerType, trainerConfigs } from './data/trainer-type';
 import Trainer from './trainer';
 import TrainerData from './system/trainer-data';
 import SoundFade from 'phaser3-rex-plugins/plugins/soundfade';
@@ -140,205 +139,50 @@ export default class BattleScene extends Phaser.Scene {
 		this.phaseQueuePrependSpliceIndex = -1;
 	}
 
-	loadImage(key: string, folder: string, filename?: string) {
-		if (!filename)
-			filename = `${key}.png`;
-		this.load.image(key, `images/${folder}/${filename}`);
-	}
+	loadSe(key: string, folder?: string, filenames?: string | string[]) {
+    if (!filenames) filenames = `${key}.wav`;
+    if (!folder) folder = "";
+    else folder += "/";
+    if (!Array.isArray(filenames)) filenames = [filenames];
+    for (let f of filenames as string[]) {
+      this.load.audio(key, `audio/se/${folder}${f}`);
+    }
+  }
 
 	loadAtlas(key: string, folder: string, filenameRoot?: string) {
-		if (!filenameRoot)
-			filenameRoot = key;
-		if (folder)
-			folder += '/';
-		this.load.atlas(key, `images/${folder}${filenameRoot}.png`, `images/${folder}/${filenameRoot}.json`);
-	}
-
-	loadSpritesheet(key: string, folder: string, size: integer, filename?: string) {
-		if (!filename)
-			filename = `${key}.png`;
-		this.load.spritesheet(key, `images/${folder}/${filename}`, { frameWidth: size, frameHeight: size });
-	}
-
-	loadSe(key: string, folder?: string, filenames?: string | string[]) {
-		if (!filenames)
-			filenames = `${key}.wav`;
-		if (!folder)
-			folder = '';
-		else
-			folder += '/';
-		if (!Array.isArray(filenames))
-			filenames = [ filenames ];
-		for (let f of filenames as string[]) {
-			this.load.audio(key, `audio/se/${folder}${f}`);
-		}
-	}
+    if (!filenameRoot) filenameRoot = key;
+    if (folder) folder += "/";
+    this.load.atlas(
+      key,
+      `images/${folder}${filenameRoot}.png`,
+      `images/${folder}/${filenameRoot}.json`
+    );
+  }
 
 	loadBgm(key: string, filename?: string) {
-		if (!filename)
-			filename = `${key}.mp3`;
-		this.load.audio(key, `audio/bgm/${filename}`);
-	}
+    if (!filename) filename = `${key}.mp3`;
+    this.load.audio(key, `audio/bgm/${filename}`);
+  }
 
-	preload() {
-		// Load menu images
-		this.loadImage('bg', 'ui');
-		this.loadImage('bg_command', 'ui');
-		this.loadImage('bg_fight', 'ui');
-		this.loadAtlas('prompt', 'ui');
-		this.loadImage('cursor', 'ui');
-		this.loadImage('window', 'ui');
-		this.loadImage('namebox', 'ui');
-		this.loadImage('pbinfo_player', 'ui');
-		this.loadImage('pbinfo_player_mini', 'ui');
-		this.loadImage('pbinfo_enemy_mini', 'ui');
-		this.loadImage('overlay_lv', 'ui');
-		this.loadAtlas('numbers', 'ui');
-		this.loadAtlas('numbers_red', 'ui');
-		this.loadAtlas('overlay_hp', 'ui');
-		this.loadImage('overlay_exp', 'ui');
-		this.loadImage('icon_owned', 'ui');
-		this.loadImage('ability_bar', 'ui');
-		this.loadImage('party_exp_bar', 'ui');
-		this.loadImage('achv_bar', 'ui');
-		this.loadImage('achv_bar_2', 'ui');
-		this.loadImage('achv_bar_3', 'ui');
-		this.loadImage('achv_bar_4', 'ui');
-		this.loadImage('shiny_star', 'ui', 'shiny.png');
-		this.loadImage('icon_spliced', 'ui');
+	loadSpritesheet(
+    key: string,
+    folder: string,
+    size: integer,
+    filename?: string
+  ) {
+    if (!filename) filename = `${key}.png`;
+    this.load.spritesheet(key, `images/${folder}/${filename}`, {
+      frameWidth: size,
+      frameHeight: size,
+    });
+  }
 
-		this.loadImage('pb_tray_overlay_player', 'ui');
-		this.loadImage('pb_tray_overlay_enemy', 'ui');
-		this.loadAtlas('pb_tray_ball', 'ui');
+	loadImage(key: string, folder: string, filename?: string) {
+    if (!filename) filename = `${key}.png`;
+    this.load.image(key, `images/${folder}/${filename}`);
+  }
 
-		this.loadImage('party_bg', 'ui');
-		this.loadImage('party_bg_double', 'ui');
-		this.loadAtlas('party_slot_main', 'ui');
-		this.loadAtlas('party_slot', 'ui');
-		this.loadImage('party_slot_overlay_lv', 'ui');
-		this.loadImage('party_slot_hp_bar', 'ui');
-		this.loadAtlas('party_slot_hp_overlay', 'ui');
-		this.loadAtlas('party_pb', 'ui');
-		this.loadImage('party_message', 'ui');
-		this.loadImage('party_message_large', 'ui');
-		this.loadImage('party_message_options', 'ui');
-		this.loadImage('party_message_options_wide', 'ui');
-		this.loadAtlas('party_cancel', 'ui');
-
-		this.loadImage('summary_bg', 'ui');
-		this.loadImage('summary_overlay_shiny', 'ui');
-		this.loadImage('summary_profile', 'ui');
-		this.loadImage('summary_status', 'ui');
-		this.loadImage('summary_stats', 'ui');
-		this.loadImage('summary_stats_overlay_exp', 'ui');
-		this.loadImage('summary_moves', 'ui');
-		this.loadImage('summary_moves_effect', 'ui');
-		this.loadImage('summary_moves_overlay_row', 'ui');
-		this.loadImage('summary_moves_overlay_pp', 'ui');
-		this.loadAtlas('summary_moves_cursor', 'ui');
-		for (let t = 1; t <= 3; t++)
-			this.loadImage(`summary_tabs_${t}`, 'ui');
-
-		for (let o = 1; o <= 3; o++)
-			this.loadImage(`option_select_window_${o}`, 'ui');
-
-		this.loadImage('starter_select_bg', 'ui');
-		this.loadImage('starter_select_message', 'ui');
-		this.loadImage('starter_select_cursor', 'ui');
-		this.loadImage('starter_select_cursor_highlight', 'ui');
-		this.loadImage('starter_select_cursor_pokerus', 'ui');
-		this.loadImage('starter_select_gen_cursor', 'ui');
-		this.loadImage('starter_select_gen_cursor_highlight', 'ui');
-
-		this.loadImage('default_bg', 'arenas');
-
-		// Load arena images
-		Utils.getEnumValues(Biome).map(bt => {
-			const btKey = Biome[bt].toLowerCase();
-			this.loadImage(`${btKey}_bg`, 'arenas');
-			this.loadImage(`${btKey}_a`, 'arenas');
-			this.loadImage(`${btKey}_b`, 'arenas');
-			if (getBiomeHasProps(bt)) {
-				for (let p = 1; p <= 3; p++)
-					this.loadImage(`${btKey}_b_${p}`, 'arenas')
-			}
-		});
-
-		// Load trainer images
-		this.loadImage('trainer_m', 'trainer');
-		this.loadAtlas('trainer_m_pb', 'trainer');
-
-		Utils.getEnumValues(TrainerType).map(tt => {
-			const config = trainerConfigs[tt];
-			this.loadAtlas(config.getKey(), 'trainer');
-			if (config.isDouble)
-				this.loadAtlas(config.getKey(true), 'trainer');
-		});
-
-		// Load pokemon-related images
-		this.loadImage(`pkmn__back__sub`, 'pokemon/back', 'sub.png');
-		this.loadImage(`pkmn__sub`, 'pokemon', 'sub.png');
-		this.loadAtlas('battle_stats', 'effects');
-		this.loadAtlas('shiny', 'effects');
-		this.loadImage('evo_sparkle', 'effects');
-		this.load.video('evo_bg', 'images/effects/evo_bg.mp4', true);
-
-		this.loadAtlas('pb', '');
-		this.loadAtlas('items', '');
-		this.loadAtlas('types', '');
-		this.loadAtlas('statuses', '');
-		this.loadAtlas('categories', '');
-
-		for (let i = 0; i < 7; i++)
-			this.loadAtlas(`pokemon_icons_${i}`, 'ui');
-
-		this.loadSe('select');
-		this.loadSe('menu_open');
-		this.loadSe('hit');
-		this.loadSe('hit_strong');
-		this.loadSe('hit_weak');
-		this.loadSe('stat_up');
-		this.loadSe('stat_down');
-		this.loadSe('faint');
-		this.loadSe('flee');
-		this.loadSe('low_hp');
-		this.loadSe('exp');
-		this.loadSe('level_up');
-		this.loadSe('sparkle');
-		this.loadSe('restore');
-		this.loadSe('shine');
-		this.loadSe('charge');
-		this.loadSe('beam');
-		this.loadSe('upgrade');
-		this.loadSe('buy');
-		this.loadSe('achv');
-		this.loadSe('error');
-
-		this.loadSe('pb_rel');
-		this.loadSe('pb_throw');
-		this.loadSe('pb_bounce_1');
-		this.loadSe('pb_bounce_2');
-		this.loadSe('pb_move');
-		this.loadSe('pb_catch');
-		this.loadSe('pb_lock');
-
-		this.loadSe('pb_tray_enter');
-		this.loadSe('pb_tray_ball');
-		this.loadSe('pb_tray_empty');
-
-		this.loadSe('PRSFX- Transform', 'battle_anims');
-
-		this.loadBgm('menu');
-
-		this.loadBgm('level_up_fanfare', 'bw/level_up_fanfare.mp3');
-		this.loadBgm('item_fanfare', 'bw/item_fanfare.mp3');
-		this.loadBgm('heal', 'bw/heal.mp3');
-		this.loadBgm('victory_trainer', 'bw/victory_trainer.mp3');
-		this.loadBgm('victory_gym', 'bw/victory_gym.mp3');
-		this.loadBgm('victory_champion', 'bw/victory_champion.mp3');
-		this.loadBgm('evolution', 'bw/evolution.mp3');
-		this.loadBgm('evolution_fanfare', 'bw/evolution_fanfare.mp3');
-		
+	preload() {	
 		populateAnims();
 	}
 
diff --git a/src/loading-scene.ts b/src/loading-scene.ts
index 80653ed6690..11737b8eee1 100644
--- a/src/loading-scene.ts
+++ b/src/loading-scene.ts
@@ -1,9 +1,200 @@
+import * as Utils from "./utils";
+import { Biome } from "./data/biome";
+import { getBiomeHasProps } from "./arena";
+import { TrainerType, trainerConfigs } from "./data/trainer-type";
+
 class LoadingScene extends Phaser.Scene {
   constructor() {
     super("LoadingScene");
   }
 
+  loadAtlas(key: string, folder: string, filenameRoot?: string) {
+    if (!filenameRoot) filenameRoot = key;
+    if (folder) folder += "/";
+    this.load.atlas(
+      key,
+      `images/${folder}${filenameRoot}.png`,
+      `images/${folder}/${filenameRoot}.json`
+    );
+  }
+  
+  loadSe(key: string, folder?: string, filenames?: string | string[]) {
+    if (!filenames) filenames = `${key}.wav`;
+    if (!folder) folder = "";
+    else folder += "/";
+    if (!Array.isArray(filenames)) filenames = [filenames];
+    for (let f of filenames as string[]) {
+      this.load.audio(key, `audio/se/${folder}${f}`);
+    }
+  }
+
+  loadImage(key: string, folder: string, filename?: string) {
+    if (!filename) filename = `${key}.png`;
+    this.load.image(key, `images/${folder}/${filename}`);
+  }
+
+  loadBgm(key: string, filename?: string) {
+    if (!filename) filename = `${key}.mp3`;
+    this.load.audio(key, `audio/bgm/${filename}`);
+  }
+
   preload() {
+    // Load menu images
+    this.loadImage("bg", "ui");
+    this.loadImage("bg_command", "ui");
+    this.loadImage("bg_fight", "ui");
+    this.loadAtlas("prompt", "ui");
+    this.loadImage("cursor", "ui");
+    this.loadImage("window", "ui");
+    this.loadImage("namebox", "ui");
+    this.loadImage("pbinfo_player", "ui");
+    this.loadImage("pbinfo_player_mini", "ui");
+    this.loadImage("pbinfo_enemy_mini", "ui");
+    this.loadImage("overlay_lv", "ui");
+    this.loadAtlas("numbers", "ui");
+    this.loadAtlas("numbers_red", "ui");
+    this.loadAtlas("overlay_hp", "ui");
+    this.loadImage("overlay_exp", "ui");
+    this.loadImage("icon_owned", "ui");
+    this.loadImage("ability_bar", "ui");
+    this.loadImage("party_exp_bar", "ui");
+    this.loadImage("achv_bar", "ui");
+    this.loadImage("achv_bar_2", "ui");
+    this.loadImage("achv_bar_3", "ui");
+    this.loadImage("achv_bar_4", "ui");
+    this.loadImage("shiny_star", "ui", "shiny.png");
+    this.loadImage("icon_spliced", "ui");
+
+    this.loadImage("pb_tray_overlay_player", "ui");
+    this.loadImage("pb_tray_overlay_enemy", "ui");
+    this.loadAtlas("pb_tray_ball", "ui");
+
+    this.loadImage("party_bg", "ui");
+    this.loadImage("party_bg_double", "ui");
+    this.loadAtlas("party_slot_main", "ui");
+    this.loadAtlas("party_slot", "ui");
+    this.loadImage("party_slot_overlay_lv", "ui");
+    this.loadImage("party_slot_hp_bar", "ui");
+    this.loadAtlas("party_slot_hp_overlay", "ui");
+    this.loadAtlas("party_pb", "ui");
+    this.loadImage("party_message", "ui");
+    this.loadImage("party_message_large", "ui");
+    this.loadImage("party_message_options", "ui");
+    this.loadImage("party_message_options_wide", "ui");
+    this.loadAtlas("party_cancel", "ui");
+
+    this.loadImage("summary_bg", "ui");
+    this.loadImage("summary_overlay_shiny", "ui");
+    this.loadImage("summary_profile", "ui");
+    this.loadImage("summary_status", "ui");
+    this.loadImage("summary_stats", "ui");
+    this.loadImage("summary_stats_overlay_exp", "ui");
+    this.loadImage("summary_moves", "ui");
+    this.loadImage("summary_moves_effect", "ui");
+    this.loadImage("summary_moves_overlay_row", "ui");
+    this.loadImage("summary_moves_overlay_pp", "ui");
+    this.loadAtlas("summary_moves_cursor", "ui");
+
+    for (let t = 1; t <= 3; t++) this.loadImage(`summary_tabs_${t}`, "ui");
+
+    for (let o = 1; o <= 3; o++)
+      this.loadImage(`option_select_window_${o}`, "ui");
+
+    this.loadImage("starter_select_bg", "ui");
+    this.loadImage("starter_select_message", "ui");
+    this.loadImage("starter_select_cursor", "ui");
+    this.loadImage("starter_select_cursor_highlight", "ui");
+    this.loadImage("starter_select_cursor_pokerus", "ui");
+    this.loadImage("starter_select_gen_cursor", "ui");
+    this.loadImage("starter_select_gen_cursor_highlight", "ui");
+
+    this.loadImage("default_bg", "arenas");
+
+    // Load arena images
+    Utils.getEnumValues(Biome).map((bt) => {
+      const btKey = Biome[bt].toLowerCase();
+      this.loadImage(`${btKey}_bg`, "arenas");
+      this.loadImage(`${btKey}_a`, "arenas");
+      this.loadImage(`${btKey}_b`, "arenas");
+      if (getBiomeHasProps(bt)) {
+        for (let p = 1; p <= 3; p++)
+          this.loadImage(`${btKey}_b_${p}`, "arenas");
+      }
+    });
+
+    // Load trainer images
+    this.loadImage("trainer_m", "trainer");
+    this.loadAtlas("trainer_m_pb", "trainer");
+
+    Utils.getEnumValues(TrainerType).map((tt) => {
+      const config = trainerConfigs[tt];
+      this.loadAtlas(config.getKey(), "trainer");
+      if (config.isDouble) this.loadAtlas(config.getKey(true), "trainer");
+    });
+
+    // Load pokemon-related images
+    this.loadImage(`pkmn__back__sub`, "pokemon/back", "sub.png");
+    this.loadImage(`pkmn__sub`, "pokemon", "sub.png");
+    this.loadAtlas("battle_stats", "effects");
+    this.loadAtlas("shiny", "effects");
+    this.loadImage("evo_sparkle", "effects");
+    this.load.video("evo_bg", "images/effects/evo_bg.mp4", true);
+
+    this.loadAtlas("pb", "");
+    this.loadAtlas("items", "");
+    this.loadAtlas("types", "");
+    this.loadAtlas("statuses", "");
+    this.loadAtlas("categories", "");
+
+    for (let i = 0; i < 7; i++) this.loadAtlas(`pokemon_icons_${i}`, "ui");
+
+    this.loadSe("select");
+    this.loadSe("menu_open");
+    this.loadSe("hit");
+    this.loadSe("hit_strong");
+    this.loadSe("hit_weak");
+    this.loadSe("stat_up");
+    this.loadSe("stat_down");
+    this.loadSe("faint");
+    this.loadSe("flee");
+    this.loadSe("low_hp");
+    this.loadSe("exp");
+    this.loadSe("level_up");
+    this.loadSe("sparkle");
+    this.loadSe("restore");
+    this.loadSe("shine");
+    this.loadSe("charge");
+    this.loadSe("beam");
+    this.loadSe("upgrade");
+    this.loadSe("buy");
+    this.loadSe("achv");
+    this.loadSe("error");
+
+    this.loadSe("pb_rel");
+    this.loadSe("pb_throw");
+    this.loadSe("pb_bounce_1");
+    this.loadSe("pb_bounce_2");
+    this.loadSe("pb_move");
+    this.loadSe("pb_catch");
+    this.loadSe("pb_lock");
+
+    this.loadSe("pb_tray_enter");
+    this.loadSe("pb_tray_ball");
+    this.loadSe("pb_tray_empty");
+
+    this.loadSe("PRSFX- Transform", "battle_anims");
+
+    this.loadBgm("menu");
+
+    this.loadBgm("level_up_fanfare", "bw/level_up_fanfare.mp3");
+    this.loadBgm("item_fanfare", "bw/item_fanfare.mp3");
+    this.loadBgm("heal", "bw/heal.mp3");
+    this.loadBgm("victory_trainer", "bw/victory_trainer.mp3");
+    this.loadBgm("victory_gym", "bw/victory_gym.mp3");
+    this.loadBgm("victory_champion", "bw/victory_champion.mp3");
+    this.loadBgm("evolution", "bw/evolution.mp3");
+    this.loadBgm("evolution_fanfare", "bw/evolution_fanfare.mp3");
+
     this.loadLoadingScreen();
   }
 
@@ -12,89 +203,88 @@ class LoadingScene extends Phaser.Scene {
 
     graphics.lineStyle(4, 0xff00ff, 1).setDepth(10);
 
-    // let progressBar = this.add.graphics();
-    // let progressBox = this.add.graphics();
-    // progressBox.lineStyle(5, 0xff00ff, 1.0);
-    // progressBox.fillStyle(0x222222, 0.8);
+    let progressBar = this.add.graphics();
+    let progressBox = this.add.graphics();
+    progressBox.lineStyle(5, 0xff00ff, 1.0);
+    progressBox.fillStyle(0x222222, 0.8);
 
-    // let width = this.cameras.main.width;
-    // let height = this.cameras.main.height;
+    let width = this.cameras.main.width;
+    let height = this.cameras.main.height;
 
-    // let loadingText = this.make.text({
-    //   x: width / 2,
-    //   y: height / 2 - 50,
-    //   text: "Loading game...",
-    //   style: {
-    //     font: "23px emerald",
-    //     color: "#ffffff",
-    //   },
-    // });
-    // loadingText.setOrigin(0.5, 0.5);
+    let loadingText = this.make.text({
+      x: width / 2,
+      y: height / 2 - 50,
+      text: "Loading game...",
+      style: {
+        font: "33px emerald",
+        color: "#ffffff",
+      },
+    });
+    loadingText.setOrigin(0.5, 0.5);
 
-    // let percentText = this.make.text({
-    //   x: width / 2,
-    //   y: height / 2,
-    //   text: "0%",
-    //   style: {
-    //     font: "18px emerald",
-    //     color: "#ffffff",
-    //   },
-    // });
-    // percentText.setOrigin(0.5, 0.5);
+    let percentText = this.make.text({
+      x: width / 2,
+      y: height / 2,
+      text: "0%",
+      style: {
+        font: "28px emerald",
+        color: "#ffffff",
+      },
+    });
+    percentText.setOrigin(0.5, 0.5);
 
-    // let assetText = this.make.text({
-    //   x: width / 2,
-    //   y: height / 2 + 50,
-    //   text: "",
-    //   style: {
-    //     font: "18px emerald",
-    //     color: "#ffffff",
-    //   },
-    // });
-    // assetText.setOrigin(0.5, 0.5);
+    let assetText = this.make.text({
+      x: width / 2,
+      y: height / 2 + 50,
+      text: "",
+      style: {
+        font: "28px emerald",
+        color: "#ffffff",
+      },
+    });
+    assetText.setOrigin(0.5, 0.5);
 
-    // this.load.on("progress", (value: string) => {
-    //   const parsedValue = parseInt(value);
-    //   percentText.setText(parsedValue * 100 + "%");
-    //   progressBar.clear();
-    //   progressBar.fillStyle(0xffffff, 0.8);
-    //   progressBar.fillRect(width / 2 - 160, 280, 300 * parsedValue, 30);
-    // });
+    this.load.on("progress", (value: string) => {
+      const parsedValue = parseInt(value);
+      percentText.setText(parsedValue * 100 + "%");
+      progressBar.clear();
+      progressBar.fillStyle(0xffffff, 0.8);
+      progressBar.fillRect(width / 2 - 160, 280, 300 * parsedValue, 30);
+    });
 
-    // this.load.on("fileprogress", (file) => {
-    //   assetText.setText("Loading asset: " + file.key);
-    // });
+    this.load.on("fileprogress", (file) => {
+      assetText.setText("Loading asset: " + file.key);
+    });
 
-    // this.load.on("complete", () => {
-    //   progressBar.destroy();
-    //   progressBox.destroy();
-    //   loadingText.destroy();
-    //   percentText.destroy();
-    //   assetText.destroy();
-    // });
+    this.load.on("complete", () => {
+      progressBar.destroy();
+      progressBox.destroy();
+      loadingText.destroy();
+      percentText.destroy();
+      assetText.destroy();
+    });
   }
 
-  // isLocal() {
-  //   return location.hostname === "localhost" ||
-  //     location.hostname === "127.0.0.1"
-  //     ? true
-  //     : false;
-  // }
+  isLocal() {
+    return location.hostname === "localhost" ||
+      location.hostname === "127.0.0.1"
+      ? true
+      : false;
+  }
 
-  // get gameHeight() {
-  //   return this.game.config.height as number;
-  // }
+  get gameHeight() {
+    return this.game.config.height as number;
+  }
 
-  // get gameWidth() {
-  //   return this.game.config.width as number;
-  // }
+  get gameWidth() {
+    return this.game.config.width as number;
+  }
 
   async create() {
     // const logoExposeSetting: number = this.isLocal() ? 500 : 2000;
 
     // this.cameras.main.fadeIn(1000, 255, 255, 255);
 
-
     setTimeout(() => {
       this.scene.start("battle");
     }, 500);