From 079f4b083a2d9f5b084df6bd939bc6be536ec8ea Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Thu, 3 Aug 2017 21:48:26 -0700
Subject: [PATCH] Enable clicking on stage images to view them full size

---
 src/css/_modifiers.scss     |  4 ++++
 src/js/components/Stage.vue | 24 ++++++++++++++++++++++--
 src/js/main.js              |  6 ++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/css/_modifiers.scss b/src/css/_modifiers.scss
index 865f1af..f50360a 100644
--- a/src/css/_modifiers.scss
+++ b/src/css/_modifiers.scss
@@ -32,6 +32,10 @@
     }
 }
 
+.hand {
+    cursor: pointer;
+}
+
 .title-color {
     color: $title-color;
 }
diff --git a/src/js/components/Stage.vue b/src/js/components/Stage.vue
index 37959bd..35b55da 100644
--- a/src/js/components/Stage.vue
+++ b/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)
diff --git a/src/js/main.js b/src/js/main.js
index 4bb2767..83b433f 100644
--- a/src/js/main.js
+++ b/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');