feat: tab colors from centralized data

components/GameTab.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer"
+    :class="[colorClasses, index < 5 && 'mr-px']"
+    @click="$store.commit('setActiveTab', index)"
+  >
+    {{ tabData.label }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    tabData: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    active() {
+      return this.$store.state.activeTabIndex === this.index
+    },
+    colorClasses() {
+      return this.active
+        ? this.$store.getters.activeColorClasses(this.index)
+        : this.$store.getters.inactiveColorClasses(this.index)
+    },
+  },
+}
+</script>

pages/index.vue

@@ -5,30 +5,58 @@
     >
       Timekeeper
     </header>
+
     <main class="bg-gray-400 grid w-full">
       <div class="units p-8 relative bg-gray-300">
         <div class="units-background absolute top-8 left-0 right-0"></div>
       </div>
+
       <div class="tabs flex flex-row w-full bg-gray-400 text-gray-400">
-        <div
+        <game-tab
-          v-for="(tab, index) in tabs"
+          v-for="(tab, index) in $store.state.tabs"
           :key="index"
-          class="tab flex-grow text-center text-2xl font-semibold py-1 mr-px"
+          :index="index"
-          :class="{
+          :tab-data="tab"
-            'text-gray-600 bg-gray-400 border-gray-600':
+        />
-              activeTabIndex === index,
-            'bg-gray-600 border-gray-600': activeTabIndex !== index,
-          }"
-          @click="activeTabIndex = index"
-        >
-          {{ tab.label }}
-        </div>
       </div>
-      <div class="tab-content p-8">
+
-        Colors and art are purely for example, not recommendations. Background
+      <div
-        colors are used to distinguish individual HTML elements.
+        class="w-full text-2xl text-center py-1"
+        :class="$store.getters.activeTabColorClasses"
+      >
+        {{ $store.getters.activeTab.title }}
+      </div>
+
+      <div
+        class="tab-content p-8"
+        :class="$store.getters.activeTabColorClasses"
+      >
+        <template v-if="$store.state.activeTabIndex === 0">
+          Tab 1 content
+        </template>
+
+        <template v-else-if="$store.state.activeTabIndex === 1">
+          Tab 2 content
+        </template>
+
+        <template v-else-if="$store.state.activeTabIndex === 2">
+          Tab 3 content
+        </template>
+
+        <template v-else-if="$store.state.activeTabIndex === 3">
+          Tab 4 content
+        </template>
+
+        <template v-else-if="$store.state.activeTabIndex === 4">
+          Tab 5 content
+        </template>
+
+        <template v-else-if="$store.state.activeTabIndex === 5">
+          Tab 6 content
+        </template>
       </div>
     </main>
+
     <footer class="text-lg flex items-center pt-4 pb-2 px-4 hidden md:block">
       Created by GrapefruitChili, PK, TNNPe, Vice for New Years Incremental Game
       Jam 2022.
@@ -37,23 +65,10 @@
 </template>
 
 <script>
-const TABS = [
+import GameTab from '~/components/GameTab.vue'
-  { id: 'instruments', label: '1' },
-  { id: 'upgrades', label: '2' },
-  { id: 'fathertime', label: '3' },
-  { id: 'timemachine', label: '4' },
-  { id: 'achievements', label: '5' },
-  { id: 'prestige', label: '6' },
-]
-
 export default {
+  components: { GameTab },
   name: 'IndexPage',
-  data() {
-    return {
-      tabs: TABS,
-      activeTabIndex: 0,
-    }
-  },
 }
 </script>
 
@@ -77,7 +92,7 @@ html {
 }
 
 main {
-  grid-template-rows: 1fr auto 2fr;
+  grid-template-rows: 1fr auto auto 2fr;
 }
 
 .units-background {

store/index.js

@@ -0,0 +1,70 @@
+export const state = () => ({
+  activeTabIndex: 0,
+  tabs: [
+    {
+      id: 'instruments',
+      label: '1',
+      title: 'Tab 1 Title',
+      darkColor: 'yellow-600',
+      lightColor: 'yellow-200',
+    },
+    {
+      id: 'upgrades',
+      label: '2',
+      title: 'Tab 2 Title',
+      darkColor: 'blue-600',
+      lightColor: 'blue-200',
+    },
+    {
+      id: 'fathertime',
+      label: '3',
+      title: 'Tab 3 Title',
+      darkColor: 'violet-600',
+      lightColor: 'violet-200',
+    },
+    {
+      id: 'timemachine',
+      label: '4',
+      title: 'Tab 4 Title',
+      darkColor: 'lime-600',
+      lightColor: 'lime-200',
+    },
+    {
+      id: 'achievements',
+      label: '5',
+      title: 'Tab 5 Title',
+      darkColor: 'orange-600',
+      lightColor: 'orange-200',
+    },
+    {
+      id: 'prestige',
+      label: '6',
+      title: 'Tab 6 Title',
+      darkColor: 'teal-600',
+      lightColor: 'teal-200',
+    },
+  ],
+})
+
+export const getters = {
+  activeTab: (state) => {
+    return state.tabs[state.activeTabIndex]
+  },
+  activeColorClasses: (state) => (index) => {
+    const { darkColor, lightColor } = state.tabs[index]
+    return `bg-${lightColor} text-${darkColor}`
+  },
+  inactiveColorClasses: (state) => (index) => {
+    const { darkColor, lightColor } = state.tabs[index]
+    return `bg-${darkColor} text-${lightColor}`
+  },
+  activeTabColorClasses: (state, getters) => {
+    return getters.activeColorClasses(state.activeTabIndex)
+  },
+}
+
+export const mutations = {
+  setActiveTab: (state, index) => {
+    state.activeTabIndex = index
+  },
+}

tailwind.config.js

@@ -0,0 +1,17 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        ...colors,
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}