Enable clicking on stage images to view them full size

src/css/_modifiers.scss

@@ -32,6 +32,10 @@
     }
 }
 
+.hand {
+    cursor: pointer;
+}
+
 .title-color {
     color: $title-color;
 }

src/js/components/Stage.vue

@@ -1,13 +1,33 @@
 <template>
-    <div class="stage-image" :style="style">
-        <figure class=" image is-16by9"></figure>
+    <div class="stage-image hand" :style="style" @click="isOpen = true">
+        <figure class="image is-16by9"></figure>
         <span class="stage-title">{{ stage.name }}</span>
+
+        <div class="modal is-active" v-if="isOpen" v-portal>
+            <div class="modal-background" @click="isOpen = false"></div>
+                <div class="modal-content">
+                    <p class="image is-16by9">
+                        <img :src="image" />
+                    </p>
+                    <p class="has-text-centered">
+                        <span class="font-splatoon2">
+                            {{ stage.name }}
+                        </span>
+                    </p>
+                </div>
+            <button class="modal-close is-large" @click="isOpen = false"></button>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     props: ['stage'],
+    data() {
+        return {
+            isOpen: false,
+        };
+    },
     computed: {
         image() {
             if (this.stage)

src/js/main.js

@@ -1,4 +1,10 @@
 import Vue from 'vue';
 import App from './components/App.vue';
 
+Vue.directive('portal', {
+    inserted(el) {
+        document.body.appendChild(el);
+    }
+});
+
 new Vue(App).$mount('#app');