translations

11 files changed, 182 insertions, 21 deletions

diff --git a/resources/css/battle.css b/resources/css/battle.css
index 57f5417..2c09e5a 100644
--- a/resources/css/battle.css
+++ b/resources/css/battle.css
@@ -217,13 +217,18 @@
 }
 
 
-.damage {
+.action-feedback {
   position: absolute;
   z-index: 11;
 
   animation: float-up-and-disappear;
 }
 
+.action-feedback.recharge {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.25);
+}
+
 @keyframes float-up-and-disappear {
   from {
     opacity: 1;
diff --git a/resources/js/classes/InventoryItem.js b/resources/js/classes/InventoryItem.js
index 2e9b764..d6eb311 100644
--- a/resources/js/classes/InventoryItem.js
+++ b/resources/js/classes/InventoryItem.js
@@ -26,6 +26,10 @@ class InventoryItem {
     return this.item.name;
   }
 
+  get description () {
+    return this.item.description;
+  }
+
   get category () {
     return this.item.category;
   }
diff --git a/resources/js/classes/Item.js b/resources/js/classes/Item.js
index 8a12b9a..9da6a92 100644
--- a/resources/js/classes/Item.js
+++ b/resources/js/classes/Item.js
@@ -4,7 +4,11 @@ class Item {
   }
 
   get name () {
-    return slugToName(this.slug);
+    return translate(this.slug) || slugToName(this.slug);
+  }
+
+  get description () {
+    return translate(`${this.slug}_description`) || 'ITEM_DESCRIPTION_MISSING';
   }
 
   get category () {
diff --git a/resources/js/classes/Monster.js b/resources/js/classes/Monster.js
index 9023f32..5c930f8 100644
--- a/resources/js/classes/Monster.js
+++ b/resources/js/classes/Monster.js
@@ -70,6 +70,9 @@ class Monster {
     return DB.monsters[this.slug].moveset;
   }
 
+  /**
+   * @returns {DB_Evolution[]}
+   */
   get evolutions () {
     return DB.monsters[this.slug].evolutions;
   }
@@ -102,7 +105,7 @@ class Monster {
   }
 
   get name () {
-    return slugToName(this.slug);
+    return translate(this.slug) || slugToName(this.slug);
   }
 
   getLearnableTechniques () {
@@ -126,18 +129,36 @@ class Monster {
     );
   }
 
-  getPossibleEvolutions () {
-    // return this.evolutions.filter((evolution) => this.level >= evolution.at_level && (!evolution.item || this.heldItem === evolution.item));
-    return this.evolutions.filter((evolution) => evolution.path === 'standard' && this.level >= evolution.at_level);
-  }
+  /**
+   * @param {EvolutionPathType} path
+   */
+  getPossibleEvolutions (path) {
+    return this.evolutions.filter((evolution) => {
+      if (evolution.path !== path) {
+        return false;
+      }
+
+      if (evolution.path === EvolutionPathType.standard) {
+        return this.level >= evolution.at_level;
+      }
 
-  canEvolve () {
-    return this.getPossibleEvolutions().length > 0;
+      else if  (evolution.path === EvolutionPathType.item) {
+        return true;
+      }
+    });
   }
 
-  evolve () {
-    const evolution = this.getPossibleEvolutions()[0];
+  /**
+   * @param {EvolutionPathType} path
+   */
+  canEvolve (path) {
+    return this.getPossibleEvolutions(path).length > 0;
+  }
 
+  /**
+   * @param {DB_Evolution} evolution
+   */
+  evolve (evolution) {
     const statsPreEvolve = this.stats;
     const hpPreEvolve = this.hp;
 
diff --git a/resources/js/classes/State.js b/resources/js/classes/State.js
index 99a642c..44afa96 100644
--- a/resources/js/classes/State.js
+++ b/resources/js/classes/State.js
@@ -1,5 +1,10 @@
 class State {
   /**
+   * @type {string}
+   */
+  language = 'ja';
+
+  /**
    * @type {number}
    */
   turn = 0;
diff --git a/resources/js/classes/Technique.js b/resources/js/classes/Technique.js
index 74783a2..5f01e64 100644
--- a/resources/js/classes/Technique.js
+++ b/resources/js/classes/Technique.js
@@ -14,7 +14,11 @@ class Technique {
   }
 
   get name () {
-    return slugToName(this.slug);
+    return translate(this.slug) || slugToName(this.slug);
+  }
+
+  get description () {
+    return translate(`${this.slug}_description`) || 'TECHNIQUE_DESCRIPTION_MISSING';
   }
 
   get types () {
diff --git a/resources/js/db.js b/resources/js/db.js
index 64b2e9b..648c54c 100644
--- a/resources/js/db.js
+++ b/resources/js/db.js
@@ -1,13 +1,74 @@
+/**
+ * @typedef {Object} DB_Evolution
+ * @property {string} path
+ * @property {string} monster_slug
+ * @property {string} at_level
+ * @property {string} item
+ */
+
+//
+
 const DB = {
+  /**
+   * @type {string[]}
+   */
   allMonsters: [],
+
+  /**
+   * @typedef {Object.<string, string[]>} DB_Animation
+   *
+   * @type {DB_Animation}
+   */
   allAnimations: {},
+
+  /**
+   * @type {string[]}
+   */
   allItems: [],
+
+  /**
+   * @typedef {Object} DB_Monster
+   *
+   * @type {Object.<MonsterSlug, DB_Monster>}
+   */
   monsters: {},
+
+  /**
+   * @typedef {Object} DB_Shape
+   *
+   * @type {Object.<string, DB_Shape>}
+   */
   shapes: {},
+
+  /**
+   * @typedef {Object} DB_Element
+   *
+   * @type {Object.<ElementType, DB_Element>}
+   */
   elements: {},
+
+  /**
+   * @typedef {Object} DB_Technique
+   *
+   * @type {Object.<TechniqueSlug, DB_Technique>}
+   */
   techniques: {},
+
+  /**
+   * @typedef {Object} DB_StatusEffect
+   *
+   * @type {Object.<string, DB_StatusEffect>}
+   */
   statusEffects: {},
+
+  /**
+   * @typedef {Object} DB_Item
+   *
+   * @type {Object.<string, DB_Item>}
+   */
   items: {},
+
+  translations: {},
 };
 
 async function initializeDB () {
@@ -20,6 +81,8 @@ async function initializeDB () {
   for (const element of Object.keys(ElementType)) {
     DB.elements[element] = await fetch(`/modules/tuxemon/mods/tuxemon/db/element/${element}.json`).then((response) => response.json());
   }
+
+  await fetchTranslation(Memory.state.language);
 }
 
 /**
@@ -67,7 +130,7 @@ async function fetchStatusEffect (slug) {
 /**
  * @param {string} slug
  *
- * @returns {Promise<StatusEffect>}
+ * @returns {Promise<Item>}
  */
 async function fetchItem (slug) {
   if (! DB.items[slug]) {
@@ -76,3 +139,16 @@ async function fetchItem (slug) {
 
   return new Item(slug);
 }
+
+/**
+ * @param {string} locale
+ *
+ * @returns {Promise<Object>}
+ */
+async function fetchTranslation (locale) {
+  if (! DB.translations[locale]) {
+    DB.translations[locale] = await fetch(`/db/i18n/${locale}.json`).then((response) => response.json());
+  }
+
+  return DB.translations[locale];
+}
diff --git a/resources/js/definitions.js b/resources/js/definitions.js
index 22dac16..338fdf7 100644
--- a/resources/js/definitions.js
+++ b/resources/js/definitions.js
@@ -5,6 +5,9 @@
 
 //
 
+/**
+ * @enum
+ */
 const ElementType = {
   aether: 'aether',
   wood: 'wood',
@@ -141,3 +144,12 @@ const StatusEffectTypeColor = {
   [StatusEffectType.poison]: 'purple',
   [StatusEffectType.recover]: 'white',
 };
+
+
+/**
+ * @enum
+ */
+const EvolutionPathType = {
+  standard: 'standard',
+  item: 'item',
+};
diff --git a/resources/js/game.js b/resources/js/game.js
index 833265e..1a95ce4 100644
--- a/resources/js/game.js
+++ b/resources/js/game.js
@@ -38,8 +38,7 @@ const Game = {
         Memory.state.player.activeMonster.levelUp();
       }
       if (Memory.state.player.activeMonster.canEvolve()) {
-        await fetchMonster(Memory.state.player.activeMonster.evolutions[0].monster_slug);
-        Memory.state.player.activeMonster.evolve();
+        await Game.evolveMonster(Memory.state.player.activeMonster);
       }
 
       await Game.spawnOpponentMonster();
@@ -63,6 +62,7 @@ const Game = {
     // recharge
     if (technique.isRecharging()) {
       const feedbackNode = UI.createActionFeedback('recharge');
+      feedbackNode.classList.add('recharge');
       UI.drawActionFeedback(feedbackNode);
 
       canUse = false;
@@ -300,6 +300,14 @@ const Game = {
     });
   },
 
+  /**
+   * @param {Monster} monster
+   */
+  async evolveMonster (monster) {
+    await fetchMonster(monster.evolutions[0].monster_slug);
+    monster.evolve(monster.evolutions[0]);
+  },
+
   async spawnOpponentMonster () {
     Memory.state.opponent.activeMonster = await fetchMonster(DB.allMonsters[Math.floor(Math.random() * DB.allMonsters.length)]);
     Memory.state.opponent.activeMonster.level = Math.ceil(Math.random() * Memory.state.player.activeMonster.level);
diff --git a/resources/js/helpers.js b/resources/js/helpers.js
index 1622eb2..53a5c87 100644
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -50,3 +50,10 @@ function mixColors(...colors) {
 function randomString () {
   return (Math.random() + 1).toString(36).substring(2);
 }
+
+/**
+ * @param {string} msgid
+ */
+function translate (msgid) {
+  return DB.translations[Memory.state.language][msgid];
+}
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 6c077b7..f6c490f 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -9,7 +9,7 @@ const Template = {
   battleMonster: document.querySelector('#tpl___battle__monster'),
   battleHpBar: document.querySelector('#tpl___battle__hp-bar'),
   battleExpBar: document.querySelector('#tpl___battle__exp-bar'),
-  battleDamage: document.querySelector('#tpl___battle__damage'),
+  battleActionFeedback: document.querySelector('#tpl___battle__action-feedback'),
 
   techniques: document.querySelector('#tpl___techniques'),
   technique: document.querySelector('#tpl___technique'),
@@ -244,7 +244,7 @@ const UI = {
   createElementTypeIcon (type) {
     const img = document.createElement('img');
     img.src = `/modules/tuxemon/mods/tuxemon/gfx/ui/icons/element/${type}_type.png`;
-    img.title = slugToName(type);
+    img.title = translate(type) || slugToName(type);
 
     return img;
   },
@@ -425,7 +425,7 @@ const UI = {
   },
 
 
-  /* Battle - Damage */
+  /* Battle - Action Feedback */
 
   /**
    * @type {MouseEvent}
@@ -442,7 +442,7 @@ const UI = {
    * @returns {HTMLElement}
    */
   createActionFeedback (feedback) {
-    const feedbackNode = UI.createTemplate(Template.battleDamage);
+    const feedbackNode = UI.createTemplate(Template.battleActionFeedback);
     feedbackNode.innerHTML = feedback;
 
     feedbackNode.style.top = UI.battleClickEvent.pageY - UI.elements.battleOpponent.offsetTop + (Math.random() * 40 - 20) + 'px';
@@ -644,12 +644,25 @@ const UI = {
     for (const item of Memory.state.player.inventory) {
       const inventoryItemNode = UI.createTemplate(Template.inventoryItem);
 
+      inventoryItemNode.title = item.description;
+
       inventoryItemNode.querySelector('[data-template-slot="sprite"]').src = `/modules/tuxemon/mods/tuxemon/${item.sprite}`;
       inventoryItemNode.querySelector('[data-template-slot="name"]').textContent = item.name;
       inventoryItemNode.querySelector('[data-template-slot="quantity"]').textContent = item.quantity;
 
-      inventoryItemNode.addEventListener('click', () => {
-        alert(item.conditions + item.effects);
+      inventoryItemNode.addEventListener('click', async () => {
+        for (const itemEffectCode of item.effects) {
+          const itemEffect = new ItemEffect(itemEffectCode);
+
+          if (itemEffect.type === 'evolve') {
+            const evolution = Memory.state.player.activeMonster.getPossibleEvolutions('item')[0];
+            if (evolution) {
+              await fetchMonster(evolution.monster_slug);
+              Memory.state.player.activeMonster.evolve(evolution);
+              UI.drawActiveMonster();
+            }
+          }
+        }
       });
 
       if (['potion', 'revive'].includes(item.category)) {
@@ -784,6 +797,8 @@ const UI = {
       const technique = await fetchTechnique(move.technique);
       const movesetItemNode = UI.createTemplate(Template.movesetItem);
 
+      movesetItemNode.title = technique.description;
+
       movesetItemNode.querySelector('[data-template-slot="name"]').textContent = technique.name;
       movesetItemNode.querySelector('[data-template-slot="types"]').innerHTML = technique.types.map((type) => UI.createElementTypeIcon(type).outerHTML).join('');
       movesetItemNode.querySelector('[data-template-slot="power"]').textContent = technique.power;