feat: continued iteration of first two tabs

components/FirstTabContent.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab-content grid flex-col">
+    <template v-for="(process, index) in $store.state.incremental.processes">
+      <button :key="index" class="text-right font-semibold">
+        {{ process.device }}
+      </button>
+      <div :key="index" class="progress-bar relative">
+        <progress max="100" value="50" class="w-full h-full"></progress>
+        <span
+          class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
+        >
+          1.3 <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/SecondTabContent.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tab-content grid flex-col">
+    <div
+      v-for="(process, index) in $store.state.incremental.processes"
+      :key="index"
+      class="flex flex-col mb-4 p-4 rounded border"
+      :class="`border-${$store.getters.activeTab.darkColor}`"
+    >
+      <span class="text-center font-bold pb-2 text-xl">
+        {{ process.workerCount }} {{ process.worker }}s
+      </span>
+      <span class="text-left font-semibold">
+        Each <b>{{ process.worker }}</b> makes your
+        <b>{{ process.device }}s</b> produce <b>{{ process.produces }}</b> at an
+        increased rate.
+      </span>
+      <span class="text-center text-md pt-2"
+        >Cost for next {{ process.worker }}: 4
+        {{ process.buyWorkersWith }}</span
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.tab-content {
+  grid-template-columns: 1fr;
+}
+</style>

pages/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="page grid container h-full w-full mx-auto bg-gray-300 px-4">
+  <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">
+    <main class="bg-gray-400 grid w-full h-full overflow-auto">
       <div class="units p-8 relative bg-gray-300">
         <div class="units-background absolute top-8 left-0 right-0"></div>
       </div>
@@ -21,23 +23,18 @@
       </div>
 
       <div
-        class="w-full text-2xl text-center py-1"
+        class="w-full text-2xl text-center pt-1 pb-2"
         :class="$store.getters.activeTabColorClasses"
       >
         {{ $store.getters.activeTab.title }}
       </div>
 
       <div
-        class="tab-content p-8"
+        class="tab-content px-4 w-full overflow-y-scroll"
         :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>
+        <first-tab-content v-if="$store.state.activeTabIndex === 0" />
+        <second-tab-content v-else-if="$store.state.activeTabIndex === 1" />
 
         <template v-else-if="$store.state.activeTabIndex === 2">
           Tab 3 content
@@ -65,10 +62,12 @@
 </template>
 
 <script>
+import FirstTabContent from '~/components/FirstTabContent.vue'
 import GameTab from '~/components/GameTab.vue'
+
 export default {
-  components: { GameTab },
   name: 'IndexPage',
+  components: { GameTab, FirstTabContent },
 }
 </script>
 
@@ -83,6 +82,7 @@ body,
 
 html {
   background: #e5e7eb;
+  overflow-y: hidden;
 }
 </style>
 
@@ -92,7 +92,7 @@ html {
 }
 
 main {
-  grid-template-rows: 1fr auto auto 2fr;
+  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 2fr);
 }
 
 .units-background {
@@ -103,7 +103,4 @@ main {
   opacity: 0.4;
   height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
 }
-
-.tabs {
-}
 </style>

store/incremental.js

@@ -14,6 +14,7 @@ export const state = () => ({
       worker: 'Shaman',
       boughtWith: null,
       produces: currencies.seasons,
+      buyWorkersWith: currencies.months,
       deviceCount: new Decimal(0),
       workerCount: new Decimal(0),
       unlockThreshold: { [currencies.seasons]: 0, tech: null },
@@ -23,6 +24,7 @@ export const state = () => ({
       worker: 'Stonecarver',
       boughtWith: currencies.seasons,
       produces: currencies.months,
+      buyWorkersWith: currencies.days,
       deviceCount: new Decimal(0),
       workerCount: new Decimal(0),
       unlockThreshold: { [currencies.seasons]: 1, tech: null },
@@ -31,6 +33,7 @@ export const state = () => ({
       device: 'Astrolabes',
       worker: 'Mathematician',
       boughtWith: currencies.months,
+      buyWorkersWith: currencies.hours,
       produces: currencies.days,
       deviceCount: new Decimal(0),
       workerCount: new Decimal(0),