alternative mode for named cards (if query "?n" instead of "?c")

Mottokrosh · Mar 19, 2024 · 0f2f5a0 · 0f2f5a0
1 parent ff9bfb4
commit 0f2f5a0
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/src/components/card.vue b/src/components/card.vue
@@ -148,7 +148,7 @@
             powerLevel(newVal, oldVal) {
                 if (newVal !== oldVal) {
                     this.$parent.cards[this.index].powerLevel = newVal;
-                    this.$parent.setCardIDsIntoURL();
+                    this.$parent.persistCardsToURL();
                 }
             },
         },

diff --git a/src/components/symbook.vue b/src/components/symbook.vue
@@ -38,6 +38,19 @@
     return { id: Number(id), level: level };
   }
 
+  function powerAtLevel(item) {
+    let [_, name, __, level] = /^([^(]+)(\(([^)]+)\))?$/.exec(item);
+    return { name: normalizeName(name), level: level };
+  }
+
+  function normalizeName(name) {
+    return name.toLowerCase().replaceAll(/\s|-/g, '').replaceAll(/é/g, 'e');
+  }
+
+  function isMonstrousTraitLevel(x) {
+    return ["I","II","III"].includes(x);
+  }
+
   export default {
     components: {
       SbHeader, Card, SocialIcon,
@@ -90,14 +103,41 @@
         history.pushState(null, '', '/');
       },
 
+      isNamesURL() {
+        return new URLSearchParams(window.location.search).get('n');
+      },
+
+      getPowersAtLevelFromURL() {
+        const urlParams = new URLSearchParams(window.location.search)
+        return urlParams.get('n').split(/;|,/).map(powerAtLevel)
+      },
+
+      setPowersAtLevelIntoURL() {
+        const names = this.cards.filter(c => !!c.id)
+          .map(card => card.name + (card.powerLevel ? `(${card.powerLevel})` : '')).join(',');
+        if (names) {
+          history.pushState(null, '', `/?n=${names}`);
+          return;
+        }
+        history.pushState(null, '', '/');
+      },
+
+      persistCardsToURL() {
+        if (this.isNamesURL()) {
+          this.setPowersAtLevelIntoURL();
+        } else {
+          this.setCardIDsIntoURL();
+        }
+      },
+
       cardChange(newCard, index) {
         this.cards.splice(index, 1, newCard);
       },
     },
 
     watch: {
       cards() {
-        this.setCardIDsIntoURL();
+        this.persistCardsToURL();
       },
     },
 
@@ -113,16 +153,28 @@
 
           this.options = options;
 
-          const idsAtLevel = this.getCardIDsFromURL();
-          if (idsAtLevel) {
-            this.cards = this.options.flatMap(opt => {
-              const id = idsAtLevel.find(id => id.id == opt.id);
-              if (id) {
-                opt.powerLevel = id.level;
-                return [opt];
-              }
-              return [];
-            })
+          if (this.isNamesURL()) {
+            const powersAtLevel = this.getPowersAtLevelFromURL();
+            if (powersAtLevel) {
+              this.cards = powersAtLevel.map(power => {
+                const card = this.options.find(opt => normalizeName(opt.name) == power.name
+                  && (!isMonstrousTraitLevel() || opt.type == 'Monstrous Trait'));
+                card.powerLevel = power.level;
+                return card;
+              });
+            }
+          } else {
+            const idsAtLevel = this.getCardIDsFromURL();
+            if (idsAtLevel) {
+              this.cards = this.options.flatMap(opt => {
+                const id = idsAtLevel.find(id => id.id == opt.id);
+                if (id) {
+                  opt.powerLevel = id.level;
+                  return [opt];
+                }
+                return [];
+              })
+            }
           }
         })
       ;