From 45fc84b3dbccfdd41fd0e0aaafd901882daa527c Mon Sep 17 00:00:00 2001
From: pskfyi <patrick.keenan.fyi@gmail.com>
Date: Thu, 13 Jan 2022 19:57:35 -0800
Subject: [PATCH] chore: messaging about spare time, energy, and mana

---
 components/KeyArtStage.vue | 16 +++++++++++++---
 layouts/default.vue        |  2 +-
 pages/TimeMachine.vue      |  5 +++++
 pages/TimeMagic.vue        | 10 +++++++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/components/KeyArtStage.vue b/components/KeyArtStage.vue
index ca56733..0f47c44 100644
--- a/components/KeyArtStage.vue
+++ b/components/KeyArtStage.vue
@@ -2,12 +2,12 @@
   <div class="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"
+      class="absolute top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center"
+      :class="`text-${$store.getters.activeTab.darkColor}`"
       @click="click"
     >
       <span
         class="spare-time flex flex-row items-center font-bold rounded-2xl select-none"
-        :class="`text-${$store.getters.activeTab.darkColor}`"
       >
         <span
           class="spare-time-value text-3xl md:text-5xl"
@@ -15,6 +15,10 @@
         />
         <span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" />
       </span>
+      <span class="spare-time-explanation text-sm md:text-lg select-none">
+        Tap to gain
+        <b><span class="fas fa-hourglass-half" /> Spare Time</b>
+      </span>
     </div>
   </div>
 </template>
@@ -54,8 +58,14 @@ export default {
 }
 .spare-time {
   --color: rgba(2555, 255, 255, 0.5);
-  background: var(--color);
   box-shadow: 0px 0px 20px 20px var(--color);
+  background: var(--color);
+  transition: color 2000ms;
+}
+.spare-time-explanation {
+  --color: rgba(2555, 255, 255, 0.2);
+  box-shadow: 0px 0px 10px 10px var(--color);
+  background: var(--color);
   transition: color 2000ms;
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 103887b..498bae2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Roboto+Slab:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Roboto+Slab:wght@600&display=swap');
 
 html,
 body,
diff --git a/pages/TimeMachine.vue b/pages/TimeMachine.vue
index 32f3414..0104f0c 100644
--- a/pages/TimeMachine.vue
+++ b/pages/TimeMachine.vue
@@ -20,6 +20,11 @@
       </span>
     </div>
 
+    <p class="text-lg text-center py-2 border-b-2 border-current">
+      <b><span class="fas fa-bolt text-base" /> Energy</b>
+      is generated over time
+    </p>
+
     <h2 class="text-xl font-semibold text-center pt-8">Upgrades</h2>
 
     <responsive-grid class="pt-2 md:pt-4">
diff --git a/pages/TimeMagic.vue b/pages/TimeMagic.vue
index ff24385..13bfb42 100644
--- a/pages/TimeMagic.vue
+++ b/pages/TimeMagic.vue
@@ -20,9 +20,13 @@
       </span>
     </div>
 
-    <h2 class="font-semibold text-lg text-center pt-4 md:mt-8">
-      Spells coming soon!
-    </h2>
+    <p class="text-lg text-center py-2 border-b-2 border-current">
+      Tapping to gain
+      <b><span class="fas fa-hourglass-half text-base" /> Spare Time</b>
+      <br class="md:hidden" />
+      now also gains
+      <b><span class="fas fa-star text-base" /> Mana</b>
+    </p>
   </div>
 </template>