error handling

1 files changed, 64 insertions, 50 deletions

diff --git a/resources/js/ui.js b/resources/js/ui.js
index dd287df..089a3c3 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -352,9 +352,9 @@ const UI = {
 
     battleMonsterNode.classList.add('battle__monster--player');
 
-    battleMonsterNode.querySelector('[data-template-slot="sprite"]').addEventListener('click', () => {
+    battleMonsterNode.querySelector('[data-template-slot="sprite"]').addEventListener('click', UI.wrapCallback(() => {
       UI.openStatsMenu(Memory.state.player.activeMonster);
-    });
+    }));
     if (UI.isHighlighting) {
       battleMonsterNode.querySelector('[data-template-slot="sprite"]').classList.add(UI.highlightClassName);
     }
@@ -472,7 +472,7 @@ const UI = {
     const x = UI.battleClickEvent.clientX;
     const y = UI.battleClickEvent.clientY;
 
-    const techniqueAnimationLoop = () => {
+    const techniqueAnimationLoop = UI.wrapCallback(() => {
       UI.elements.battleOpponentAnimation.src = `/modules/tuxemon/mods/tuxemon/animations/technique/${animation}_${("00" + UI.techniqueAnimationNumber).slice(-2)}.png`;
       UI.elements.battleOpponentAnimation.style.top = y - (UI.elements.battleOpponentAnimation.clientHeight / 2) + 'px';
       UI.elements.battleOpponentAnimation.style.left = x - (UI.elements.battleOpponentAnimation.clientWidth / 2) + 'px';
@@ -488,7 +488,7 @@ const UI = {
       }
 
       setTimeout(() => requestAnimationFrame(techniqueAnimationLoop), 1000 / UI.techniqueAnimationFps);
-    };
+    });
 
     requestAnimationFrame(techniqueAnimationLoop);
   },
@@ -673,7 +673,10 @@ const UI = {
 
     UI.elements.battleOpponentSprite.classList.add('damaged');
     clearTimeout(UI.damageHighlightClickTimeout);
-    UI.damageHighlightClickTimeout = setTimeout(() => UI.elements.battleOpponentSprite.classList.remove('damaged'), UI.damageHighlightClickDuration * 1000);
+    UI.damageHighlightClickTimeout = setTimeout(
+      UI.wrapCallback(() => UI.elements.battleOpponentSprite.classList.remove('damaged')),
+      UI.damageHighlightClickDuration * 1000
+    );
   },
 
   /**
@@ -706,7 +709,7 @@ const UI = {
       for (const locationId of Object.keys(currentArea.locations)) {
         const location = currentArea.locations[locationId];
 
-        template.querySelector(`[data-location="${locationId}"]`).addEventListener('click', () => {
+        template.querySelector(`[data-location="${locationId}"]`).addEventListener('click', UI.wrapCallback(() => {
           if (location.type === 'healingCenter') {
             UI.openHealingCenter(location);
           }
@@ -714,7 +717,7 @@ const UI = {
           else if (location.type === 'shop') {
             UI.openShop(location);
           }
-        });
+        }));
       }
     }
 
@@ -731,7 +734,7 @@ const UI = {
     const price = convertToCurrencyBase(healingCenter.price);
     template.querySelector('[data-template-slot="price"]').innerHTML = formatPrice(price);
 
-    template.querySelector('[data-template-slot="heal"]').addEventListener('click', () => {
+    template.querySelector('[data-template-slot="heal"]').addEventListener('click', UI.wrapCallback(() => {
       const applicableMonsters = Memory.state.player.monsters.filter((monster) => {
         return monster.hp < monster.stats.hp || (monster.statusEffect && monster.statusEffect.category === 'negative')
       });
@@ -764,7 +767,7 @@ const UI = {
 
       monsterSelectionPopup.querySelector('.popup').appendChild(monsterSelection);
       UI.drawPopup(monsterSelectionPopup);
-    });
+    }));
 
     popup.querySelector('.popup').appendChild(template);
     UI.drawPopup(popup);
@@ -786,7 +789,7 @@ const UI = {
       itemNode.querySelector('[data-template-slot="name"]').innerHTML = item.name;
       itemNode.querySelector('[data-template-slot="price"]').innerHTML = formatPrice(price);
 
-      itemNode.addEventListener('click', () => {
+      itemNode.addEventListener('click', UI.wrapCallback(() => {
         if (UI.shopSelectionMode === 'buy') {
 
           if (Memory.state.money < price) {
@@ -809,7 +812,7 @@ const UI = {
         else if (UI.shopSelectionMode === 'info') {
           UI.openItemInfo(item);
         }
-      });
+      }));
 
       template.querySelector('[data-template-slot="items"]').appendChild(itemNode);
     }
@@ -821,13 +824,13 @@ const UI = {
         node.setAttribute('selected', true);
       }
 
-      node.addEventListener('click', () => {
+      node.addEventListener('click', UI.wrapCallback(() => {
         selectionModesNode.querySelector(`[data-selection-mode="${UI.shopSelectionMode}"]`).removeAttribute('selected');
 
         UI.shopSelectionMode = node.dataset.selectionMode;
 
         node.setAttribute('selected', true);
-      });
+      }));
     });
 
     popup.querySelector('.popup').appendChild(template);
@@ -855,14 +858,14 @@ const UI = {
     for (const monster of monsters) {
       const monsterNode = UI.createMonsterSelectionMonster(monster);
 
-      monsterNode.addEventListener('monster:selected', (event) => {
+      monsterNode.addEventListener('monster:selected', UI.wrapCallback((event) => {
         template.dispatchEvent(new CustomEvent('monster:selected', {
           detail: {
             node: monsterNode,
             monster: event.detail.monster,
           },
         }));
-      });
+      }));
 
       template.appendChild(monsterNode);
     }
@@ -927,13 +930,13 @@ const UI = {
         node.setAttribute('selected', true);
       }
 
-      node.addEventListener('click', () => {
+      node.addEventListener('click', UI.wrapCallback(() => {
         selectionModesNode.querySelector(`[data-party-selection-mode="${UI.partySelectionMode}"]`).removeAttribute('selected');
 
         UI.partySelectionMode = node.dataset.partySelectionMode;
 
         node.setAttribute('selected', true);
-      });
+      }));
     });
 
     return party;
@@ -1066,14 +1069,14 @@ const UI = {
         connectionNode.setAttribute('disabled', true);
       }
 
-      connectionNode.addEventListener('click', () => {
+      connectionNode.addEventListener('click', UI.wrapCallback(() => {
         if (canGo) {
           Game.goToArea(connectionSlug);
           popup.remove();
         } else {
           alert("Can\'t go there yet!");
         }
-      });
+      }));
 
       template.appendChild(connectionNode);
     }
@@ -1198,13 +1201,13 @@ const UI = {
         node.setAttribute('selected', true);
       }
 
-      node.addEventListener('click', () => {
+      node.addEventListener('click', UI.wrapCallback(() => {
         selectionModesNode.querySelector(`[data-selection-mode="${UI.inventorySelectionMode}"]`).removeAttribute('selected');
 
         UI.inventorySelectionMode = node.dataset.selectionMode;
 
         node.setAttribute('selected', true);
-      });
+      }));
     });
 
     popup.querySelector('.popup').appendChild(inventory);
@@ -1217,11 +1220,11 @@ const UI = {
     const popup = UI.createPopup();
     const journal = UI.createTemplate(Template.menuJournal);
 
-    journal.querySelector('[data-template-slot="save"]').addEventListener('click', UI.createEventListener(() => {
+    journal.querySelector('[data-template-slot="save"]').addEventListener('click', UI.wrapCallback(() => {
       UI.openSaveDialog();
     }));
 
-    journal.querySelector('[data-template-slot="load"]').addEventListener('click', UI.createEventListener(() => {
+    journal.querySelector('[data-template-slot="load"]').addEventListener('click', UI.wrapCallback(() => {
       UI.openLoadDialog();
     }));
 
@@ -1269,7 +1272,7 @@ const UI = {
       languageSelectNode.appendChild(languageOptionNode);
     }
 
-    languageSelectNode.addEventListener('change', async () => {
+    languageSelectNode.addEventListener('change', UI.wrapCallback(async () => {
       const selected = [...languageSelectNode.children].find((node) => node.selected === true);
       Memory.state.Settings.language = selected.value;
 
@@ -1277,7 +1280,7 @@ const UI = {
       applyTranslation();
 
       UI.drawArea();
-    });
+    }));
 
 
     /* Currency */
@@ -1304,7 +1307,7 @@ const UI = {
       currencySelectNode.appendChild(currencyOptionNode);
     }
 
-    currencySelectNode.addEventListener('change', async () => {
+    currencySelectNode.addEventListener('change', UI.wrapCallback(async () => {
       const selected = [...currencySelectNode.children].find((node) => node.selected === true);
       const previousCurrencyCode = Memory.state.Settings.currency;
       const newCurrencyCode = selected.value;
@@ -1320,14 +1323,14 @@ const UI = {
 
       UI.drawArea();
       UI.drawStatus();
-    });
+    }));
 
     template.querySelector('[data-template-slot="currency.lastUpdated"]').textContent = DB.currencies.last_updated;
 
 
     // Highlight
 
-    template.querySelector('[data-template-slot="highlight"]').addEventListener('click', () => {
+    template.querySelector('[data-template-slot="highlight"]').addEventListener('click', UI.wrapCallback(() => {
       UI.isHighlighting = !UI.isHighlighting;
 
       const elements = [
@@ -1360,6 +1363,10 @@ const UI = {
       ];
 
       for (const element of elements) {
+        if (!element) {
+          continue;
+        }
+
         if (UI.isHighlighting) {
           element.classList.add(UI.highlightClassName);
         } else {
@@ -1373,18 +1380,22 @@ const UI = {
         Template.map.content.firstElementChild,
       ];
       for (const element of mapElements) {
+        if (!element) {
+          continue;
+        }
+
         if (UI.isHighlighting) {
           element.classList.add(`${UI.highlightClassName}--map`);
         } else {
           element.classList.remove(`${UI.highlightClassName}--map`);
         }
       }
-    });
+    }));
 
 
     // Clear save data
 
-    template.querySelector('[data-template-slot="clearLocalSaveData"]').addEventListener('click', UI.createEventListener(() => {
+    template.querySelector('[data-template-slot="clearLocalSaveData"]').addEventListener('click', UI.wrapCallback(() => {
       if (confirm(translate('ui:settings:clear_local_save_data:confirm', true))) {
         localStorage.removeItem('state');
         window.location.reload();
@@ -1445,7 +1456,7 @@ const UI = {
     template.querySelector('[data-template-slot="stats.dodge.value"]').textContent = monster.stats.dodge;
     template.querySelector('[data-template-slot="stats.speed.value"]').textContent = monster.stats.speed;
 
-    template.querySelector('[data-template-slot="techniques"]').addEventListener('click', () => UI.openMovesetSelection(monster));
+    template.querySelector('[data-template-slot="techniques"]').addEventListener('click', UI.wrapCallback(() => UI.openMovesetSelection(monster)));
 
     return template;
   },
@@ -1479,7 +1490,7 @@ const UI = {
       }
 
       // clicked
-      movesetItemNode.addEventListener('click', () => {
+      movesetItemNode.addEventListener('click', UI.wrapCallback(() => {
         if (movesetItemNode.getAttribute('disabled')) {
           return false;
         }
@@ -1508,7 +1519,7 @@ const UI = {
           },
         });
         UI.events.dispatchEvent(event);
-      });
+      }));
 
       movesetListNode.appendChild(movesetItemNode);
     }
@@ -1535,7 +1546,7 @@ const UI = {
     const movesetSelection = await UI.createMovesetSelection(monster);
 
     popup.querySelector('.popup').appendChild(movesetSelection);
-    popup.addEventListener('close', () => UI.drawActiveTechniques());
+    popup.addEventListener('close', UI.wrapCallback(() => UI.drawActiveTechniques()));
 
     UI.drawPopup(popup);
   },
@@ -1558,7 +1569,7 @@ const UI = {
     inventoryItemNode.querySelector('[data-template-slot="name"]').textContent = item.name;
     inventoryItemNode.querySelector('[data-template-slot="quantity"]').textContent = item.quantity;
 
-    inventoryItemNode.addEventListener('click', async () => {
+    inventoryItemNode.addEventListener('click', UI.wrapCallback(async () => {
       if (UI.inventorySelectionMode === 'use') {
         if (item.category === 'potion') {
           UI.openItemMonsterSelection(item);
@@ -1580,7 +1591,7 @@ const UI = {
       else if (UI.inventorySelectionMode === 'info') {
         UI.openItemInfo(item);
       }
-    });
+    }));
 
     return inventoryItemNode;
   },
@@ -1686,7 +1697,7 @@ const UI = {
     const saveData = Memory.saveToString();
 
     dialog.querySelector('[data-template-slot="saveData"]').value = saveData;
-    dialog.querySelector('[data-template-slot="saveClipboard"]').addEventListener('click', UI.createEventListener(async () => {
+    dialog.querySelector('[data-template-slot="saveClipboard"]').addEventListener('click', UI.wrapCallback(async () => {
       if (navigator.clipboard) {
         await navigator.clipboard.writeText(saveData);
         alert('Saved to clipboard!');
@@ -1703,7 +1714,7 @@ const UI = {
     const popup = UI.createPopup();
     const dialog = UI.createTemplate(Template.dialogLoad);
 
-    dialog.querySelector('[data-template-slot="load"]').addEventListener('click', UI.createEventListener(() => {
+    dialog.querySelector('[data-template-slot="load"]').addEventListener('click', UI.wrapCallback(() => {
       Memory.loadFromString(
         dialog.querySelector('[data-template-slot="saveData"]').value.trim()
       );
@@ -1719,17 +1730,20 @@ const UI = {
   // Error
 
   /**
-   * @param {Function} listener
+   * @param {Function} callback
    *
    * @returns {Function}
    */
-  createEventListener (listener) {
-    return (event) => {
+  wrapCallback (callback) {
+    return async (...arguments) => {
       try {
-        listener(event);
+        await callback(...arguments);
       } catch (exception) {
         console.log(exception);
-        UI.showErrorMessage(exception);
+        UI.showErrorMessage(
+          `${exception}\n\n${exception.stack}\n` +
+          'Please report at https://gitlab.com/dweipert.de/games/tuxemonclicker!'
+        );
       }
     };
   },
@@ -1743,10 +1757,10 @@ const UI = {
 };
 
 // UI element click bindings
-UI.elements.showMap.addEventListener('click', UI.createEventListener(UI.openMap));
-UI.elements.changeArea.addEventListener('click', UI.createEventListener(UI.createEventListener(UI.openAreaSelection)));
-UI.elements.menuParty.addEventListener('click', UI.createEventListener(UI.openPartyMenu));
-UI.elements.menuInventory.addEventListener('click', UI.createEventListener(UI.openInventoryMenu));
-UI.elements.menuLog.addEventListener('click', UI.createEventListener(UI.toggleLog));
-UI.elements.menuJournal.addEventListener('click', UI.createEventListener(UI.openJournalMenu));
-UI.elements.menuSettings.addEventListener('click', UI.createEventListener(UI.openSettingsMenu));
+UI.elements.showMap.addEventListener('click', UI.wrapCallback(UI.openMap));
+UI.elements.changeArea.addEventListener('click', UI.wrapCallback(UI.openAreaSelection));
+UI.elements.menuParty.addEventListener('click', UI.wrapCallback(UI.openPartyMenu));
+UI.elements.menuInventory.addEventListener('click', UI.wrapCallback(UI.openInventoryMenu));
+UI.elements.menuLog.addEventListener('click', UI.wrapCallback(UI.toggleLog));
+UI.elements.menuJournal.addEventListener('click', UI.wrapCallback(UI.openJournalMenu));
+UI.elements.menuSettings.addEventListener('click', UI.wrapCallback(UI.openSettingsMenu));