Add larger stage images

These are displayed in the modal popup when you click on each stage.

src/js/components/splatoon/Stage.vue

@@ -4,9 +4,9 @@
         <span class="stage-title">{{ stage.name }}</span>
 
         <Modal v-if="isOpen" @close="isOpen = false">
-            <div class="modal-content tilt-right-slight">
+            <div class="modal-content tilt-right-slight is-wide">
                 <p class="image is-16by9">
-                    <img :src="image" />
+                    <img :src="largeImage" />
                 </p>
                 <p class="has-text-centered">
                     <span class="font-splatoon2">
@@ -18,8 +18,15 @@
     </div>
 </template>
 
+<style>
+.modal-content.is-wide {
+    width: 1200px;
+}
+</style>
+
 <script>
 import Modal from '@/js/components/Modal.vue';
+import SplatoonStages from '@/js/splatoonStages';
 
 export default {
     components: { Modal },
@@ -36,6 +43,16 @@ export default {
                 return `/assets/img/splatnet/${filename}`;
             }
         },
+        largeImage() {
+            if (this.stage) {
+                let stage = SplatoonStages.find(stage => stage.id === this.stage.id);
+
+                if (stage && stage.largeImage)
+                    return stage.largeImage;
+
+                return this.image;
+            }
+        },
         style() {
             return {
                 'background-image': `url(${this.image})`,

src/js/splatoonStages.js

@@ -0,0 +1,50 @@
+export default [
+    {
+        id: '0',
+        name: 'The Reef',
+        image: '/images/stage/98baf21c0366ce6e03299e2326fe6d27a7582dce.png',
+        largeImage: require('@/img/stages/turf-wars-stage-1_2x.jpg'),
+    },
+    {
+        id: '1',
+        name: 'Musselforge Fitness',
+        image: '/images/stage/83acec875a5bb19418d7b87d5df4ba1e38ceac66.png',
+        largeImage: require('@/img/stages/turf-wars-stage-2_2x.jpg'),
+    },
+    {
+        id: '2',
+        name: 'Starfish Mainstage',
+        image: '/images/stage/187987856bf575c4155d021cb511034931d06d24.png',
+        largeImage: require('@/img/stages/turf-wars-stage-3_2x.jpg'),
+    },
+    {
+        id: '3',
+        name: 'Sturgeon Shipyard',
+        image: '/images/stage/bc794e337900afd763f8a88359f83df5679ddf12.png',
+        largeImage: require('@/img/stages/turf-wars-stage-7_2x.jpg'),
+    },
+    {
+        id: '4',
+        name: 'Inkblot Art Academy',
+        image: '/images/stage/5c030a505ee57c889d3e5268a4b10c1f1f37880a.png',
+        largeImage: require('@/img/stages/turf-wars-stage-9_2x.jpg'),
+    },
+    {
+        id: '5',
+        name: 'Humpback Pump Track',
+        image: '/images/stage/fc23fedca2dfbbd8707a14606d719a4004403d13.png',
+        largeImage: require('@/img/stages/turf-wars-stage-4_2x.jpg'),
+    },
+    {
+        id: '7',
+        name: 'Port Mackerel',
+        image: '/images/stage/0907fc7dc325836a94d385919fe01dc13848612a.png',
+        largeImage: require('@/img/stages/turf-wars-stage-6_2x.jpg'),
+    },
+    {
+        id: '8',
+        name: 'Moray Towers',
+        image: '/images/stage/96fd8c0492331a30e60a217c94fd1d4c73a966cc.png',
+        largeImage: require('@/img/stages/turf-wars-stage-8_2x.jpg'),
+    },
+]