Enhance merchandises.json with original gear data when possible

Previously this was included as part of the site JS bundle, but it makes more sense to add it to the merchandises.json file. This reduces the site bundle size and makes the data more easily accessible to other sites/apps/etc. that want the data.

src/js/components/splatoon/MerchandiseBox.vue

@@ -29,25 +29,25 @@
             {{ merchandise.gear.name }}
 
             <div class="info-overlay">
-                <div class="info-overlay-container original-gear" v-if="originalGear">
+                <div class="info-overlay-container original-gear" v-if="merchandise.original_gear">
                     <div class="is-size-7">Original Gear</div>
 
                     <div class="level" style="margin: 0 3px">
                         <div class="level-left">
                             <div class="level-item">
                                 <div class="skill-img-bg strikethrough">
-                                    <img :src="originalGear.skill.image | localSplatNetImageUrl" :title="originalGear.skill.name" />
+                                    <img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="merchandise.original_gear.skill.name" />
                                 </div>
-                                <div class="sub" v-for="i in originalGear.rarity + 1">
+                                <div class="sub" v-for="i in merchandise.original_gear.rarity + 1">
                                     <img src="~@/img/blank-skill-slot.png" />
                                 </div>
                             </div>
                         </div>
-                        <div class="level-right" v-if="originalGear.price">
+                        <div class="level-right" v-if="merchandise.original_gear.price">
                             <div class="level-item">
                                 <div>
                                     <img class="cash" src="~@/img/cash.png" />
-                                    <span class="strikethrough">{{ originalGear.price }}</span>
+                                    <span class="strikethrough">{{ merchandise.original_gear.price }}</span>
                                 </div>
                             </div>
                         </div>
@@ -74,14 +74,7 @@
 </template>
 
 <script>
-import { getOriginalGear } from '@/js/splatoon';
-
 export default {
     props: ['merchandise', 'now'],
-    computed: {
-        originalGear() {
-            return getOriginalGear(this.merchandise.gear);
-        },
-    },
 }
 </script>

src/js/splatoon.js

@@ -1,3 +1,4 @@
+const brands = require('./data/brands');
 const skills = require('./data/skills');
 const inkipediaGear = require('./data/inkipediaGear');
 
@@ -10,9 +11,15 @@ function getOriginalGear(gear) {
     let originalGear = inkipediaGear[gear.kind].find(ig => ig.name.toLowerCase() == name);
 
     if (!originalGear)
-        return;
+        return null;
 
-    return Object.assign({}, originalGear, { skill: skills[originalGear.skill] });
+    let brand = brands[originalGear.brand];
+    brand.frequent_skill = skills[brand.frequent_skill];
+
+    return Object.assign({}, originalGear, {
+        brand,
+        skill: skills[originalGear.skill],
+    });
 }
 
 module.exports = {

src/updater/update.js

@@ -3,6 +3,7 @@ require('./bootstrap');
 const Updater = require('./updaters/Updater');
 const OriginalGearImageUpdater = require('./updaters/OriginalGearImageUpdater');
 const FestivalsUpdater = require('./updaters/FestivalsUpdater');
+const MerchandisesUpdater = require('./updaters/MerchandisesUpdater');
 
 const updaters = [
     // Original gear images
@@ -49,18 +50,7 @@ const updaters = [
     new FestivalsUpdater,
 
     // Merchandises
-    new Updater({
-        name: 'Merchandises',
-        filename: 'merchandises.json',
-        request: (splatnet) => splatnet.getMerchandises(),
-        rootKeys: ['merchandises'],
-        imagePaths: [
-            '$..gear.image',
-            '$..gear.brand.image',
-            '$..gear.brand.frequent_skill.image',
-            '$..skill.image',
-        ],
-    }),
+    new MerchandisesUpdater,
 ];
 
 async function updateAll() {

src/updater/updaters/MerchandisesUpdater.js

@@ -0,0 +1,29 @@
+const Updater = require('./Updater');
+const SplatNet = require('../splatnet');
+const { getOriginalGear } = require('../../js/splatoon');
+
+class MerchandisesUpdater extends Updater {
+    constructor() {
+        super({
+            name: 'Merchandises',
+            filename: 'merchandises.json',
+            request: (splatnet) => splatnet.getMerchandises(),
+            rootKeys: ['merchandises'],
+            imagePaths: [
+                '$..gear.image',
+                '$..gear.brand.image',
+                '$..gear.brand.frequent_skill.image',
+                '$..skill.image',
+            ],
+        });
+    }
+
+    processData(data) {
+        for (let merchandise of data.merchandises)
+            merchandise.original_gear = getOriginalGear(merchandise.gear);
+
+        return data;
+    }
+}
+
+module.exports = MerchandisesUpdater;

src/updater/updaters/Updater.js

@@ -22,6 +22,9 @@ class Updater {
         // Filter the root keys if necessary
         data = this.filterRootKeys(data);
 
+        // Apply any other processing
+        data = this.processData(data);
+
         // Convert the data to a JSON string
         let dataString = JSON.stringify(data);
 
@@ -40,6 +43,10 @@ class Updater {
         return this.options.request(splatnet);
     }
 
+    processData(data) {
+        return data;
+    }
+
     async handleRequest(request) {
         try {
             return await request;