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>