From 60a31b659cc0ca2eb1c4a80890a444205d1ac0fd Mon Sep 17 00:00:00 2001
From: pskfyi <patrick.keenan.fyi@gmail.com>
Date: Sun, 9 Jan 2022 23:11:55 -0800
Subject: [PATCH] refactor: componentize key art section; move title to tab
 area

---
 components/KeyArtStage.vue | 35 +++++++++++++++++++++++++++++
 layouts/default.vue        | 46 ++++++--------------------------------
 2 files changed, 42 insertions(+), 39 deletions(-)
 create mode 100644 components/KeyArtStage.vue

diff --git a/components/KeyArtStage.vue b/components/KeyArtStage.vue
new file mode 100644
index 0000000..ab634eb
--- /dev/null
+++ b/components/KeyArtStage.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="key-art-stage p-8 relative">
+    <div class="key-art absolute top-8 left-0 right-0" />
+    <div
+      class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
+      @click="$store.commit('addCurrency', 1)"
+    >
+      <span
+        class="spare-time flex flex-row items-center font-bold rounded-2xl p-2"
+        :class="`text-${$store.getters.activeTab.darkColor}`"
+      >
+        <span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
+        <span
+          class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.key-art {
+  background: url('https://freesvg.org/img/johnny_automatic_hourglass.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.4;
+  height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
+}
+.spare-time {
+  background: rgba(2555, 255, 255, 0.6);
+  box-shadow: 0px 0px 21px 3px #fff;
+  transition: color 2000ms;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 90b3e33..faf9be8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,23 +6,7 @@
     >
       <time-header />
 
-      <div class="units p-8 relative">
-        <div class="units-background absolute top-8 left-0 right-0"></div>
-        <div
-          class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
-          @click="$store.commit('addCurrency', 1)"
-        >
-          <span
-            class="spare-time flex flex-row items-center font-bold rounded-2xl p-2"
-            :class="`text-${$store.getters.activeTab.darkColor}`"
-          >
-            <span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
-            <span
-              class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
-            />
-          </span>
-        </div>
-      </div>
+      <key-art-stage />
 
       <div class="tabs grid w-full text-gray-400 h-10 relative">
         <game-tab
@@ -34,16 +18,14 @@
       </div>
 
       <div
-        class="w-full text-2xl text-center pt-1 pb-2 relative"
+        class="tab-content px-4 w-full relative overflow-y-scroll"
         :class="activeTabColorClasses"
       >
-        {{ $store.getters.activeTab.title }}
-      </div>
+        <div
+          class="w-full text-2xl text-center pt-1 pb-2"
+          v-text="$store.getters.activeTab.title"
+        />
 
-      <div
-        class="tab-content px-4 w-full overflow-y-scroll"
-        :class="activeTabColorClasses"
-      >
         <nuxt />
       </div>
     </main>
@@ -110,7 +92,7 @@ html {
 }
 
 main {
-  grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
+  grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
   transition: background-color 2000ms;
 }
 
@@ -118,18 +100,4 @@ main {
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 0.25rem;
 }
-
-.units-background {
-  background: url('https://freesvg.org/img/johnny_automatic_hourglass.png');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  opacity: 0.4;
-  height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
-}
-.spare-time {
-  background: rgba(2555, 255, 255, 0.6);
-  box-shadow: 0px 0px 21px 3px #fff;
-  transition: color 2000ms;
-}
 </style>