show loading progress

4 files changed, 119 insertions, 50 deletions

diff --git a/resources/css/menu.css b/resources/css/menu.css
index 9b0919f..56e2525 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -396,6 +396,33 @@
 
 
 
+.load-popup {
+  padding: 1rem;
+  min-width: 50vw;
+  z-index: 420;
+}
+
+.load-popup__title {
+  margin: 0;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.load-popup__bar {
+  width: 100%;
+  height: 1rem;
+
+  appearance: none;
+  border-radius: 0.25rem;
+}
+
+.load-popup__text {
+  text-align: center;
+}
+
+
+
+
 .story__popup {
   padding: 1rem;
   max-width: 300px;
diff --git a/resources/js/game.js b/resources/js/game.js
index 0841729..fb25ea4 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -798,7 +798,6 @@ const Game = {
     for (const itemConditionCode of item.conditions) {
       const itemCondition = new ItemCondition(itemConditionCode);
       let conditionIsApplicable = true;
-      console.log(monster.evolutions);
 
       if (itemCondition.what === 'current_hp') {
         const value = parseInt(itemCondition.value) * monster.stats.hp;
diff --git a/resources/js/memory.js b/resources/js/memory.js
index 972dac7..f8d8a82 100644
--- a/resources/js/memory.js
+++ b/resources/js/memory.js
@@ -187,57 +187,76 @@ const Memory = {
      */
     const loadedState = saveData;
 
-    Memory.state.Settings.name = loadedState.Settings.name;
-    Memory.state.Settings.language = loadedState.Settings.language;
-    await fetchTranslation(Memory.state.Settings.language);
-    applyTranslation();
-    Memory.state.Settings.currency = loadedState.Settings.currency;
-    Memory.state.Settings.logMaxLength = loadedState.Settings.logMaxLength;
-
-    if (loadedState.Game) { // backwards compat: TODO: remove check later
-      Memory.state.Game.isInBattle = loadedState.Game.isInBattle;
-    }
+    const loadActions = [
+      async () => Memory.state.Settings.name = loadedState.Settings.name,
+      async () => Memory.state.Settings.language = loadedState.Settings.language,
+      async () => {
+        await fetchTranslation(Memory.state.Settings.language);
+        applyTranslation();
+      },
+      async () => Memory.state.Settings.currency = loadedState.Settings.currency,
+      async () => Memory.state.Settings.logMaxLength = loadedState.Settings.logMaxLength,
+
+
+      async () => {
+        if (loadedState.Game) { // backwards compat: TODO: remove check later
+          Memory.state.Game.isInBattle = loadedState.Game.isInBattle;
+        }
+      },
+
+
+      ...Object.keys(loadedState.areaProgress).map((areaSlug) => async () => {
+          const areaData = loadedState.areaProgress[areaSlug];
+          Memory.state.areaProgress[areaSlug] = await loadArea(areaData);
+      }),
+      async () => Memory.state.currentArea = await loadArea(loadedState.currentArea),
+      async () => Memory.state.lastVisitedTown = loadedState.lastVisitedTown,
+      async () => Memory.state.storyProgress = loadedState.storyProgress || {}, // backwards compat: TODO: remove check later
+      async () => Memory.state.currentStory = loadedState.currentStory || '', // backwards compat: TODO: remove check later
+
+
+      async () => Memory.state.turn = loadedState.turn,
+      async () => Memory.state.money = loadedState.money,
+
+
+      async () => Memory.state.monsters = [],
+      ...loadedState.monsters.map((monsterData) => async () => Memory.state.monsters.push(await loadMonster(monsterData))),
+      async () => Memory.state.player = await loadTrainer(loadedState.player),
+      ...loadedState.player.monsters.map((monsterData) => async () => Memory.state.player.monsters.push(await loadMonster(monsterData))),
+      ...loadedState.player.inventory.map((itemData) => async () => Memory.state.player.inventory.push(await loadInventoryItem(itemData))),
+      async () => Memory.state.player.activeMonster = Memory.state.player.monsters[loadedState.player.activeMonsterIdx],
+      async () => Memory.state.opponent = await loadTrainer(loadedState.opponent),
+      ...loadedState.opponent.monsters.map((monsterData) => async () => Memory.state.opponent.monsters.push(await loadMonster(monsterData))),
+      ...loadedState.opponent.inventory.map((itemData) => async () => Memory.state.opponent.inventory.push(await loadInventoryItem(itemData))),
+      async () => Memory.state.opponent.activeMonster = Memory.state.opponent.monsters[loadedState.opponent.activeMonsterIdx],
+      async () => Memory.state.rivalMonster = loadedState.rivalMonster,
+      async () => Memory.state.activeTechnique = await loadTechnique(loadedState.activeTechnique),
+
+      async () => {
+        if (typeof loadedState.activeBall === 'string') { // backwards compat: TODO: remove check later
+          Memory.state.activeBall = loadedState.activeBall;
+        } else {
+          Memory.state.activeBall = loadedState.activeBall && loadedState.activeBall.slug;
+        }
+      },
 
-    for (const areaSlug of Object.keys(loadedState.areaProgress)) {
-      const areaData = loadedState.areaProgress[areaSlug];
-      Memory.state.areaProgress[areaSlug] = await loadArea(areaData);
-    }
-    Memory.state.currentArea = await loadArea(loadedState.currentArea);
-    Memory.state.lastVisitedTown = loadedState.lastVisitedTown;
-    Memory.state.storyProgress = loadedState.storyProgress || {}; // backwards compat: TODO: remove check later
-    Memory.state.currentStory = loadedState.currentStory || ''; // backwards compat: TODO: remove check later
-
-    Memory.state.turn = loadedState.turn;
-    Memory.state.money = loadedState.money;
-    Memory.state.monsters = await Promise.all(loadedState.monsters.map(async (monsterData) => await loadMonster(monsterData)));
-    Memory.state.player = await loadTrainer(loadedState.player);
-    Memory.state.player.monsters = await Promise.all(loadedState.player.monsters.map(async (monsterData) => await loadMonster(monsterData)));
-    Memory.state.player.inventory = await Promise.all(loadedState.player.inventory.map(async (itemData) => await loadInventoryItem(itemData)));
-    Memory.state.player.activeMonster = Memory.state.player.monsters[loadedState.player.activeMonsterIdx];
-    Memory.state.opponent = await loadTrainer(loadedState.opponent);
-    Memory.state.opponent.monsters = await Promise.all(loadedState.opponent.monsters.map(async (monsterData) => await loadMonster(monsterData)));
-    Memory.state.opponent.inventory = await Promise.all(loadedState.opponent.inventory.map(async (itemData) => await loadInventoryItem(itemData)));
-    Memory.state.opponent.activeMonster = Memory.state.opponent.monsters[loadedState.opponent.activeMonsterIdx];
-    Memory.state.rivalMonster = loadedState.rivalMonster;
-    Memory.state.activeTechnique = await loadTechnique(loadedState.activeTechnique);
-
-    if (typeof loadedState.activeBall === 'string') { // backwards compat: TODO: remove check later
-      Memory.state.activeBall = loadedState.activeBall;
-    } else {
-      Memory.state.activeBall = loadedState.activeBall && loadedState.activeBall.slug;
-    }
 
-    // draw game
-    if (!Game.isTown(Memory.state.currentArea)) {
-      UI.drawOpponentMonster();
-      UI.drawActiveMonster();
-      UI.drawActiveTechniques();
-    }
-    UI.drawArea();
-    UI.drawStatus();
-    UI.closeAllPopups();
+      // draw game
+      async () => {
+        if (!Game.isTown(Memory.state.currentArea)) {
+          UI.drawOpponentMonster();
+          UI.drawActiveMonster();
+          UI.drawActiveTechniques();
+        }
+        UI.drawArea();
+        UI.drawStatus();
+      },
+
+
+      async () => Story.progress(Memory.state.currentStory),
+    ];
 
-    Story.progress(Memory.state.currentStory);
+    await UI.showLoading(loadActions);
   },
 
   /**
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 2d34a2a..6884e14 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -40,6 +40,8 @@ const Template = {
 
   menuSettings: document.querySelector('#tpl___menu__settings'),
 
+  loadPopup: document.querySelector('#tpl___load-popup'),
+
   storyPopup: document.querySelector('#tpl___story__popup'),
 };
 
@@ -1366,6 +1368,7 @@ const UI = {
 
   openJournalMenu () {
     const popup = UI.createPopup();
+    popup.id = 'popup___journal';
     const journal = UI.createTemplate(Template.menuJournal);
 
     journal.querySelector('[data-template-slot="save"]').addEventListener('click', UI.wrapCallback(() => {
@@ -1392,6 +1395,26 @@ const UI = {
     UI.drawPopup(popup);
   },
 
+  /**
+   * @param {Function[]} loadActions
+   */
+  async showLoading (loadActions) {
+    const popup = UI.createPopup();
+    const template = UI.createTemplate(Template.loadPopup);
+    popup.querySelector('[data-template-slot="content"]').append(template);
+    UI.drawPopup(popup);
+
+    for (const idx in loadActions) {
+      await loadActions[idx]();
+      const percent = ((parseInt(idx) + 1) / loadActions.length) * 100;
+
+      template.querySelector('[data-template-slot="progress"]').value = percent;
+      template.querySelector('[data-template-slot="progress.text"]').textContent = `${percent.toFixed(2)}%`;
+    }
+
+    popup.remove();
+  },
+
 
   /* Menu - Party */
 
@@ -1707,7 +1730,8 @@ const UI = {
         dialog.querySelector('[data-template-slot="saveData"]').value.trim()
       );
 
-      document.querySelectorAll('.popup__overlay').forEach((element) => element.remove())
+      popup.remove();
+      document.querySelector('#popup___journal').remove();
     }));
 
     popup.querySelector('.popup').appendChild(dialog);