feat: quest progress

Author: feildmaster

src/base/game/questProgress.js

@@ -0,0 +1,66 @@
+import Quest from '../../structures/quests/Quest.js'; // eslint-disable-line no-unused-vars
+import { toast } from '../../utils/2.toasts.js';
+import * as settings from '../../utils/settings/index.js';
+import onPage from '../../utils/onPage.js';
+import eventManager from '../../utils/eventManager.js';
+import { fetch } from '../../utils/quests.js';
+
+const setting = settings.register({
+  name: 'Disable Quest Toast',
+  key: 'underscript.disable.questNotifications',
+  page: 'Game',
+  category: 'Notifications',
+});
+
+onPage('Game', () => {
+  if (setting.value()) return;
+
+  /**
+   * @param {Quest[]} results
+   */
+  function setup(results) {
+    const cache = new Map(results.map((q) => [q.id, q.clone()]));
+
+    eventManager.once('questProgress', updateQuests);
+
+    /**
+     * @param {Quest[]} quests
+     */
+    function updateQuests(quests) {
+      const changes = quests.filter((quest) => {
+        if (quest.claimed) return false;
+
+        const previous = cache.get(quest.id);
+        return previous && quest.progress.compare(previous.progress);
+      }).sort((a, b) => b.claimable - a.claimable);
+
+      if (!changes.length) return;
+
+      const message = (() => {
+        const lines = [];
+        let completed = true;
+        changes.forEach((e, i) => {
+          if (!i && e.claimable) {
+            lines.push('### Completed');
+          } else if (completed && !e.claimable) {
+            completed = false;
+            if (i) lines.push('\n'); // Separate completed from progress
+            lines.push('### Progression');
+          }
+          lines.push(`- ${e.name} (+${e.progress.compare(cache.get(e.id).progress)})`);
+        });
+        return lines.join('\n');
+      })();
+
+      toast({
+        title: 'Quest Progress!',
+        text: `${message}Click to go to Quests page`,
+        onClose: () => {
+          location.href = '/Quests';
+        },
+      });
+    }
+  }
+
+  fetch(({ quests }) => quests && setup(quests), false);
+});

src/base/vanilla/quest.highlight.js

@@ -1,71 +1,49 @@
-import axios from 'axios';
 import eventManager from '../../utils/eventManager.js';
 import * as settings from '../../utils/settings/index.js';
 import wrap from '../../utils/2.pokemon.js';
-import { toast } from '../../utils/2.toasts.js';
 import onPage from '../../utils/onPage.js';
-import translate from '../../utils/translate.js';
 import style from '../../utils/style.js';
 import $el from '../../utils/elementHelper.js';
-import { noop } from '../../utils/1.variables.js';
+import { fetch } from '../../utils/quests.js';
 
 wrap(() => {
   const setting = settings.register({
-    name: 'Disable Quest Completed Notifications',
+    name: 'Disable Quest Highlight',
     key: 'underscript.disable.questHighlight',
   });
 
-  if (setting.value()) return; // TODO: Split into a setting to disable just the toast and a setting to disable highlighting.
+  if (setting.value()) return;
   const questSelector = 'input[type="submit"][value="Claim"]:not(:disabled)';
 
   eventManager.on(':loaded', () => $el.removeClass(document.querySelectorAll('.yellowLink[href="Quests"]'), 'yellowLink'));
   style.add('a.highlightQuest {color: gold !important;}');
 
   function highlightQuest() {
-    if (localStorage.getItem('underscript.quest.clear')) {
-      $('a[href="Quests"]').addClass('highlightQuest');
-    }
+    $('a[href="Quests"]').toggleClass('highlightQuest', localStorage.getItem('underscript.quest.clear') !== null);
   }
 
   function clearHighlight() {
     localStorage.removeItem('underscript.quest.clear');
   }
 
-  function checkHighlight() {
-    axios.get('/Quests').then((response) => {
-      const data = $(response.data);
-      const quests = data.find(questSelector);
-      if (quests.length) {
-        localStorage.setItem('underscript.quest.clear', true);
-        if (onPage('Game')) {
-          let questsCleared = '';
-          quests.each((i, e) => {
-            questsCleared += `- ${translate($(e).parentsUntil('tbody', 'tr').find('span[data-i18n-custom]:first')).text()}\n`;
-          });
-          toast({
-            title: 'Quest Completed!',
-            text: `${questsCleared}Click to go to Quests page`,
-            onClose: () => {
-              location.href = '/Quests';
-            },
-          });
-        } else {
-          highlightQuest();
-        }
-      } else {
-        // Perhaps another tab found a quest at some point...?
-        clearHighlight();
-      }
-    }).catch(noop);
+  function updateQuests(quests) {
+    const completed = quests.filter((q) => q.claimable);
+    if (completed.length) {
+      localStorage.setItem('underscript.quest.clear', true);
+    } else {
+      clearHighlight();
+    }
+    highlightQuest();
   }
 
   if (!localStorage.getItem('underscript.quest.clear')) {
     if (!localStorage.getItem('underscript.quest.skip')) { // TODO: If logged in
-      onPage('', checkHighlight);
+      onPage('', () => fetch(({ quests }) => quests && updateQuests(quests), false));
     }
-    eventManager.on('getVictory getDefeat', checkHighlight);
   }
 
+  eventManager.on('questProgress', updateQuests);
+
   eventManager.on('logout', clearHighlight);
 
   eventManager.on('jQuery', function questHighlight() {

src/structures/quests/Progress.js

@@ -0,0 +1,37 @@
+export default class Progress {
+  #max;
+  #value;
+
+  constructor({
+    max = 0,
+    value = 0,
+  } = {}) {
+    this.#max = max;
+    this.#value = value;
+  }
+
+  get max() {
+    return this.#max;
+  }
+
+  get value() {
+    return this.#value;
+  }
+
+  get complete() {
+    return this.max === this.value;
+  }
+
+  compare(other) {
+    if (!(other instanceof Progress)) throw new Error('invalid object');
+    return Math.abs(this.value - other.value);
+  }
+
+  toJSON() {
+    return {
+      complete: this.complete,
+      max: this.max,
+      value: this.value,
+    };
+  }
+}

src/structures/quests/Quest.js

@@ -0,0 +1,93 @@
+import Reward from './Reward.js';
+import Progress from './Progress.js';
+import { translateText } from '../../utils/translate.js';
+import Base from '../base.js';
+
+export default class Quest extends Base {
+  #args;
+  #claimable = false;
+  #key;
+  #progress = new Progress();
+  #reward = new Reward();
+
+  constructor(data) {
+    const id = isQuest(data) ? data.id : getId(data);
+    super({ id });
+    if (isQuest(data)) {
+      this.#args = data.#args;
+      this.#key = data.key;
+    } else if (data instanceof Element) {
+      const el = data.querySelector('[data-i18n-custom^="quest"]');
+      if (!el) throw new Error('Malformed quest');
+      this.#args = el.dataset.i18nArgs?.split(',') || [];
+      this.#key = el.dataset.i18nCustom;
+    }
+    this.update(data);
+  }
+
+  update(data) {
+    if (data instanceof Element) {
+      this.#claimable = data.querySelector('input[type="submit"][value="Claim"]:not(:disabled)') !== null;
+      this.#progress = new Progress(data.querySelector('progress.xpBar'));
+      this.#reward = new Reward(data.querySelector('td:nth-last-child(2)'));
+    } else if (isQuest(data)) {
+      this.#claimable = data.claimable;
+      this.#progress = data.progress;
+      this.#reward = data.reward;
+    }
+  }
+
+  get name() {
+    return translateText(this.key, {
+      args: this.#args,
+    });
+  }
+
+  get key() {
+    return this.#key;
+  }
+
+  get reward() {
+    return this.#reward;
+  }
+
+  get progress() {
+    return this.#progress;
+  }
+
+  get claimable() {
+    return this.#claimable;
+  }
+
+  get claimed() {
+    return !this.claimable && this.progress.complete;
+  }
+
+  clone() {
+    return new Quest(this);
+  }
+
+  toJSON() {
+    return {
+      id: this.id,
+      key: this.key,
+      name: this.name,
+      reward: this.reward,
+      progress: this.progress,
+      claimable: this.claimable,
+      claimed: this.claimed,
+    };
+  }
+}
+
+/**
+ * @param {*} data
+ * @returns {data is Quest}
+ */
+function isQuest(data) {
+  return data instanceof Quest;
+}
+
+export function getId(element) {
+  return element.querySelector('[name="questId"]')?.value ?? element.querySelector('[data-i18n-custom^="quest"]')?.dataset.i18nCustom;
+}