chore: updates to header, footer, tabs, and colors

components/GameTab.vue

@@ -1,7 +1,7 @@
 <template>
   <nuxt-link
-    class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer"
-    :class="[colorClasses, index < 5 && 'mr-px']"
+    class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer rounded-tl-lg rounded-tr-lg"
+    :class="[colorClasses, index < 5 && 'mr-px', active && 'active']"
     :to="tabData.route"
   >
     <template v-if="!tabData.locked">
@@ -39,3 +39,9 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.active {
+  box-shadow: 3px 28px 9px -5px #000, 3px -1px 9px -4px #000;
+}
+</style>

components/TimeHeader.vue

@@ -0,0 +1,72 @@
+<template>
+  <header
+    class="grid flex-row font-semibold h-10 m-auto md:relative rounded-bl-full rounded-br-full px-4"
+    :class="colorClasses"
+  >
+    <div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
+      {{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }}
+    </div>
+
+    <div
+      class="text-center pt-2 pb-1 flex-grow border-r border-gray-600 relative"
+    >
+      <progress
+        class="absolute top-0 left-0 right-0 h-1 w-full"
+        :max="
+          $store.state.playerAgeMax.year * 12 + $store.state.playerAgeMax.month
+        "
+        :value="$store.state.playerAge.year * 12 + $store.state.playerAge.month"
+      />
+      {{ $store.state.playerAge.year }}y{{ $store.state.playerAge.month }}m
+    </div>
+
+    <div class="text-center pt-2 pb-1 flex-grow">
+      {{ $store.state.playerAgeMax.year }}y{{
+        $store.state.playerAgeMax.month
+      }}m max
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  computed: {
+    colorClasses() {
+      const { lightColor, darkColor } = this.$store.getters.activeTab
+
+      return `bg-${darkColor} text-${lightColor}`
+    },
+  },
+}
+</script>
+
+<style scoped>
+header {
+  grid-template-columns: 1fr 1fr 1fr;
+  min-width: 18rem;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  header {
+    width: 32rem;
+  }
+}
+/* progress background for all browsers */
+progress::-webkit-progress-bar {
+  background-color: rgba(255, 255, 255, 0.1);
+  width: 100%;
+}
+progress {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+/* progress value for all browsers */
+progress::-webkit-progress-value {
+  background-color: currentColor;
+}
+progress::-moz-progress-bar {
+  background-color: currentColor;
+}
+progress {
+  color: currentColor;
+}
+</style>

layouts/default.vue

@@ -1,36 +1,7 @@
 <template>
-  <div
-    class="page grid container max-h-full h-full w-full mx-auto bg-gray-300 px-4"
-  >
-    <main class="bg-gray-400 grid w-full h-full overflow-auto relative">
-      <div
-        class="flex flex-row bg-gray-300 border border-gray-600 font-semibold h-10"
-      >
-        <div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
-          {{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }}
-        </div>
-
-        <div
-          class="text-center pt-2 pb-1 flex-grow border-r border-gray-600 relative"
-        >
-          <progress
-            class="absolute top-0 left-0 right-0 h-1 w-full"
-            :max="
-              $store.state.playerAgeMax.year * 12 +
-              $store.state.playerAgeMax.month
-            "
-            :value="
-              $store.state.playerAge.year * 12 + $store.state.playerAge.month
-            "
-          />
-          {{ $store.state.playerAge.year }}y{{ $store.state.playerAge.month }}m
-        </div>
-        <div class="text-center pt-2 pb-1 flex-grow">
-          {{ $store.state.playerAgeMax.year }}y{{
-            $store.state.playerAgeMax.month
-          }}m max
-        </div>
-      </div>
+  <div class="page container max-h-full h-full w-full mx-auto bg-gray-400 px-4">
+    <main class="grid w-full h-full overflow-auto relative bg-gray-300">
+      <time-header />
 
       <div class="units p-8 relative bg-gray-300">
         <div class="units-background absolute top-8 left-0 right-0"></div>
@@ -40,6 +11,7 @@
         >
           <span
             class="spare-time flex flex-row items-center font-bold rounded-2xl"
+            :class="`text-${$store.getters.activeTab.darkColor}`"
           >
             <span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
             <span
@@ -49,7 +21,7 @@
         </div>
       </div>
 
-      <div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
+      <div class="tabs grid w-full text-gray-400 h-10 relative">
         <game-tab
           v-for="(tab, index) in $store.state.tabs"
           :key="index"
@@ -59,7 +31,7 @@
       </div>
 
       <div
-        class="w-full text-2xl text-center pt-1 pb-2"
+        class="w-full text-2xl text-center pt-1 pb-2 relative"
         :class="activeTabColorClasses"
       >
         {{ $store.getters.activeTab.title }}
@@ -72,11 +44,6 @@
         <nuxt />
       </div>
     </main>
-
-    <footer class="text-lg items-center pt-4 pb-2 px-4 hidden md:block">
-      Created by GrapefruitChili, PK, TNNPe, Vice for New Years Incremental Game
-      Jam 2022.
-    </footer>
   </div>
 </template>
 
@@ -136,13 +103,18 @@ html {
 
 <style scoped>
 .page {
-  grid-template-rows: 1fr auto;
+  grid-template-rows: 1fr;
 }
 
 main {
   grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
 }
 
+.tabs {
+  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;

pages/Wisdom.vue

@@ -36,5 +36,10 @@
       <span align="left"><b>Wisdom from other timelines</b></span
       ><span align="right">{{ $store.state.wisdomApplied }}</span>
     </div>
+
+    <hr />
+
+    Created by GrapefruitChili, PK, TNNPe, Vice for New Years Incremental Game
+    Jam 2022.
   </div>
 </template>