refactor: use multiple routes

components/FirstTabContent.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="tab-content grid flex-col">
-    <template v-for="(process, index) in $store.state.processes">
-      <button :key="index" class="text-right font-semibold">
-        {{ process.instrument }}
-      </button>
-      <div :key="index" class="progress-bar relative">
-        <progress
-          max="100"
-          :value="process.completion"
-          class="w-full h-full"
-        ></progress>
-        <span
-          class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
-        >
-          {{
-            (process.workerCount * process.workerRate * process.reward) / 100.0
-          }}
-          <span class="fas fa-hourglass-half text-sm" /> / sec
-          <!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
-        </span>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style scoped>
-.tab-content {
-  grid-template-columns: auto 1fr;
-  grid-gap: 1rem 1rem;
-}
-</style>

components/GameTab.vue

@@ -1,8 +1,8 @@
 <template>
-  <div
+  <nuxt-link
     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)"
+    :to="tabData.route"
   >
     <template v-if="!tabData.locked">
       <span :class="tabData.label" />
@@ -10,7 +10,7 @@
     <template v-if="tabData.locked">
       <span class="fas fa-lock" />
     </template>
-  </div>
+  </nuxt-link>
 </template>
 
 <script>
@@ -27,12 +27,14 @@ export default {
   },
   computed: {
     active() {
-      return this.$store.state.activeTabIndex === this.index
+      return this.$route.path === this.tabData.route
     },
     colorClasses() {
+      const { lightColor, darkColor } = this.tabData
+
       return this.active
-        ? this.$store.getters.activeColorClasses(this.index)
-        : this.$store.getters.inactiveColorClasses(this.index)
+        ? `bg-${lightColor} text-${darkColor}`
+        : `bg-${darkColor} text-${lightColor}`
     },
   },
 }

layouts/default.vue

@@ -0,0 +1,158 @@
+<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="units p-8 relative bg-gray-300">
+        <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"
+          >
+            <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>
+
+      <div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
+        <game-tab
+          v-for="(tab, index) in $store.state.tabs"
+          :key="index"
+          :index="index"
+          :tab-data="tab"
+        />
+      </div>
+
+      <div
+        class="w-full text-2xl text-center pt-1 pb-2"
+        :class="activeTabColorClasses"
+      >
+        {{ $store.getters.activeTab.title }}
+      </div>
+
+      <div
+        class="tab-content px-4 w-full overflow-y-scroll"
+        :class="activeTabColorClasses"
+      >
+        <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>
+
+<script>
+export default {
+  name: 'IndexPage',
+  computed: {
+    activeTabColorClasses() {
+      const { lightColor, darkColor } = this.$store.getters.activeTab
+
+      return `bg-${lightColor} text-${darkColor}`
+    },
+  },
+  mounted() {
+    window.setInterval(() => {
+      this.gametick()
+    }, 1000)
+    window.setInterval(() => {
+      this.$store.commit('tickGameDate')
+    }, 100)
+  },
+  methods: {
+    gametick() {
+      for (let i = 0; i < this.$store.state.processes.length; i++) {
+        const p = this.$store.state.processes[i]
+        // const step = 100.0 / (6.0 * (i + 1)) // go at different rates
+        const step = p.workerRate * p.workerCount
+        let newValue = p.completion + step
+        while (newValue >= 100) {
+          newValue = newValue - 100
+          this.$store.commit('addCurrency', p.reward)
+        }
+        this.$store.commit('setProcessCompletion', {
+          processIndex: i,
+          value: newValue,
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style>
+html,
+body,
+#__nuxt,
+#__layout {
+  height: 100%; /* 100vh is broken on mobile. this is the fix. */
+  width: 100vw;
+}
+
+html {
+  background: #e5e7eb;
+  overflow-y: hidden;
+}
+</style>
+
+<style scoped>
+.page {
+  grid-template-rows: 1fr auto;
+}
+
+main {
+  grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
+}
+
+.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;
+}
+</style>

pages/Apprentices.vue

@@ -8,26 +8,22 @@
       @click="$store.commit('purchaseWorker', index)"
     >
       <span class="text-center font-bold pb-2 text-xl">
-        {{ process.workerCount }} {{ process.worker
-        }}<template v-if="process.workerCount != 1">s</template>
+        {{ process.workerCount }} {{ process.worker }}
+        <template v-if="process.workerCount != 1">s</template>
       </span>
       <span class="text-left font-semibold">
         Each <b>{{ process.worker }}</b> makes your
         <b>{{ process.device }}s</b> produce <b>spare time</b> at an increased
         rate.
       </span>
-      <span class="text-center text-md pt-2"
-        >Cost for next {{ process.worker }}: {{ process.nextWorkerCost }}
-        {{ process.buyWorkersWith }}</span
-      >
+      <span class="text-center text-md pt-2">
+        Cost for next {{ process.worker }}: {{ process.nextWorkerCost }}
+        {{ process.buyWorkersWith }}
+      </span>
     </div>
   </div>
 </template>
 
-<script>
-export default {}
-</script>
-
 <style>
 .tab-content {
   grid-template-columns: 1fr;

pages/TimeMachine.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>Tab 4 content</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

pages/TimeMagic.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>Tab 5 content</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

pages/Wisdom.vue

@@ -38,9 +38,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {}
-</script>
-
-<style scoped></style>

pages/index.vue

@@ -1,170 +1,36 @@
 <template>
-  <div
-    class="page grid container max-h-full h-full w-full mx-auto bg-gray-300 px-4"
-  >
-    <header
-      class="text-3xl flex items-center justify-center font-bold bg-gray-600 text-gray-400"
-    >
-      Timekeeper
-    </header>
-
-    <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"
-        >
+  <div class="tab-content grid flex-col">
+    <template v-for="(process, index) in $store.state.processes">
+      <button :key="index" class="text-right font-semibold">
+        {{ process.instrument }}
+      </button>
+      <div :key="index" class="progress-bar 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="units p-8 relative bg-gray-300">
-        <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)"
-        >
+          max="100"
+          :value="process.completion"
+          class="w-full h-full"
+        ></progress>
         <span
-            class="spare-time flex flex-row items-center font-bold rounded-2xl"
+          class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
         >
-            <span class="text-3xl md:text-5xl"
-              >{{ $store.state.currency }}
-            </span>
-            <span
-              class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
-            ></span>
+          {{
+            (process.workerCount * process.workerRate * process.reward) / 100.0
+          }}
+          <span class="fas fa-hourglass-half text-sm" /> / sec
+          <!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
         </span>
       </div>
-      </div>
-
-      <div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
-        <game-tab
-          v-for="(tab, index) in $store.state.tabs"
-          :key="index"
-          :index="index"
-          :tab-data="tab"
-        />
-      </div>
-
-      <div
-        class="w-full text-2xl text-center pt-1 pb-2"
-        :class="$store.getters.activeTabColorClasses"
-      >
-        {{ $store.getters.activeTab.title }}
-      </div>
-
-      <div
-        class="tab-content px-4 w-full overflow-y-scroll"
-        :class="$store.getters.activeTabColorClasses"
-      >
-        <first-tab-content v-if="$store.state.activeTabIndex === 0" />
-        <second-tab-content v-else-if="$store.state.activeTabIndex === 1" />
-        <third-tab-content v-else-if="$store.state.activeTabIndex === 2" />
-
-        <template v-else-if="$store.state.activeTabIndex === 3">
-          Tab 4 content
     </template>
-
-        <template v-else-if="$store.state.activeTabIndex === 4">
-          Tab 5 content
-        </template>
-
-        <sixth-tab-content v-else-if="$store.state.activeTabIndex === 5" />
-      </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.
-    </footer>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'IndexPage',
-  mounted() {
-    window.setInterval(() => {
-      this.gametick()
-    }, 1000)
-    window.setInterval(() => {
-      this.$store.commit('tickGameDate')
-    }, 100)
-  },
-  methods: {
-    gametick() {
-      for (let i = 0; i < this.$store.state.processes.length; i++) {
-        const p = this.$store.state.processes[i]
-        // const step = 100.0 / (6.0 * (i + 1)) // go at different rates
-        const step = p.workerRate * p.workerCount
-        let newValue = p.completion + step
-        while (newValue >= 100) {
-          newValue = newValue - 100
-          this.$store.commit('addCurrency', p.reward)
-        }
-        this.$store.commit('setProcessCompletion', {
-          processIndex: i,
-          value: newValue,
-        })
-      }
-    },
-  },
-}
+export default {}
 </script>
 
-<style>
-html,
-body,
-#__nuxt,
-#__layout {
-  height: 100%; /* 100vh is broken on mobile. this is the fix. */
-  width: 100vw;
-}
-
-html {
-  background: #e5e7eb;
-  overflow-y: hidden;
-}
-</style>
-
 <style scoped>
-.page {
-  grid-template-rows: 0rem 1fr auto;
-}
-
-main {
-  grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
-}
-
-.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;
+.tab-content {
+  grid-template-columns: auto 1fr;
+  grid-gap: 1rem 1rem;
 }
 </style>

store/index.js

@@ -2,7 +2,6 @@ import Decimal from 'break_infinity.js'
 import Vue from 'vue'
 
 export const state = () => ({
-  activeTabIndex: 0,
   tabs: [
     {
       route: '/',
@@ -152,19 +151,11 @@ export const state = () => ({
 })
 
 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)
+  activeTab(state) {
+    return state.tabs.find(
+      // eslint-disable-next-line no-undef
+      (tab) => tab.route === $nuxt.$route.path
+    )
   },
   canTimeTravel: (state) => {
     if (state.playerAge.year < state.playerAgeMax.year) return true