feat: first tab draft 2; adjust tick and worker mechanics

components/TimekeepingInstrument.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="relative rounded-lg overflow-hidden border"
+    :class="`border-${$store.getters.activeTab.darkColor}`"
+  >
+    <div
+      class="progress-wrapper absolute top-0 left-0 right-0 w-full h-5"
+      :class="`text-${$store.getters.activeTab.color}`"
+    >
+      <progress
+        class="w-full h-5 border-b"
+        :class="`border-${$store.getters.activeTab.darkColor}`"
+        :max="process.completionRequired"
+        :value="process.completion"
+      />
+      <span
+        class="absolute top-0 left-0 right-0 w-full text-center text-sm h-5"
+        :class="`text-${$store.getters.activeTab.darkColor}`"
+      >
+        {{ reward }} <span class="fas fa-hourglass-half" /> every
+        {{ interval }} seconds
+      </span>
+    </div>
+    <img
+      src="https://freesvg.org/img/johnny_automatic_hourglass.png"
+      class="pt-8 pb-3"
+    />
+    <p
+      class="text-center text-sm font-semibold h-5 border-t"
+      :class="`border-${$store.getters.activeTab.darkColor}`"
+    >
+      {{ process.instrument }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    process: { type: Object, required: true },
+  },
+  computed: {
+    reward() {
+      return this.process.baseReward * (1 + this.process.workerLevel)
+    },
+    interval() {
+      return this.process.completionRequired / 10 /* in seconds */
+    },
+  },
+}
+</script>
+
+<style scoped>
+img {
+  aspect-ratio: 1/1;
+}
+/* progress 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);
+  color: currentColor;
+}
+progress::-webkit-progress-value {
+  background-color: currentColor;
+}
+progress::-moz-progress-bar {
+  background-color: currentColor;
+}
+</style>

layouts/default.vue

@@ -1,18 +1,17 @@
 <template>
-  <div class="page container max-h-full h-full w-full mx-auto bg-gray-400 px-4">
+  <div class="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"
-      :class="`bg-${$store.getters.activeTab.color}`"
+      :class="`bg-${activeTab.color}`"
     >
       <time-header />
 
       <key-art-stage />
 
-      <div class="tabs grid w-full text-gray-400 h-10 relative">
+      <div class="grid grid-cols-6 gap-1 w-full h-10 relative">
         <game-tab
-          v-for="(tab, index) in $store.state.tabs"
+          v-for="tab in $store.state.tabs"
-          :key="index"
+          :key="tab.route"
-          :index="index"
           :tab-data="tab"
         />
       </div>
@@ -23,7 +22,7 @@
       >
         <div
           class="w-full text-2xl text-center pt-1 pb-2"
-          v-text="$store.getters.activeTab.title"
+          v-text="activeTab.title"
         />
 
         <nuxt />
@@ -33,39 +32,41 @@
 </template>
 
 <script>
-export default {
+import { mapGetters } from 'vuex'
-  name: 'IndexPage',
-  computed: {
-    activeTabColorClasses() {
-      const { lightColor, darkColor } = this.$store.getters.activeTab
 
-      return `bg-${lightColor} text-${darkColor}`
+export default {
+  computed: {
+    ...mapGetters(['activeTab']),
+    activeTabColorClasses() {
+      return `bg-${this.activeTab.lightColor} text-${this.activeTab.darkColor}`
     },
   },
   mounted() {
     window.setInterval(() => {
       this.gametick()
-    }, 1000)
+    }, 100)
     window.setInterval(() => {
       this.$store.commit('tickGameDate')
     }, 1000)
   },
   methods: {
     gametick() {
-      for (let i = 0; i < this.$store.state.processes.length; i++) {
+      this.$store.state.processes
-        const p = this.$store.state.processes[i]
+        .filter((p) => p.created)
-        // const step = 100.0 / (6.0 * (i + 1)) // go at different rates
+        .forEach((process, index) => {
-        const step = p.workerRate * p.workerCount
+          if (process.completion >= process.completionRequired) {
-        let newValue = p.completion + step
+            this.$store.commit('addCurrency', process.baseReward)
-        while (newValue >= 100) {
+            this.$store.commit('setProcessCompletion', {
-          newValue = newValue - 100
+              index,
-          this.$store.commit('addCurrency', p.reward)
+              value: 0,
-        }
+            })
-        this.$store.commit('setProcessCompletion', {
+          }
-          processIndex: i,
+
-          value: newValue,
+          this.$store.commit('setProcessCompletion', {
+            index,
+            value: process.completion + 1,
+          })
         })
-      }
     },
   },
 }
@@ -87,17 +88,8 @@ html {
 </style>
 
 <style scoped>
-.page {
-  grid-template-rows: 1fr;
-}
-
 main {
   grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
   transition: background-color 2000ms;
 }
-
-.tabs {
-  grid-template-columns: repeat(6, 1fr);
-  grid-gap: 0.25rem;
-}
 </style>

pages/index.vue

@@ -1,36 +1,40 @@
 <template>
-  <div class="tab-content grid flex-col">
+  <div>
-    <template v-for="(process, index) in $store.state.processes">
+    <responsive-grid class="mb-4">
-      <button :key="process.instrument" class="text-right font-semibold">
+      <progress-button
-        {{ process.instrument }}
+        v-for="(process, index) in uncreated"
-      </button>
+        :key="index"
-      <div :key="index" class="progress-bar relative">
+        :label="process.instrument"
-        <progress
+        :max="process.cost"
-          max="100"
+        :value="$store.state.currency"
-          :value="process.completion"
+        @click="create(process.instrument)"
-          class="w-full h-full"
+      />
-        ></progress>
+    </responsive-grid>
-        <span
+
-          class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
+    <responsive-grid min="2" mid="4" max="8">
-        >
+      <timekeeping-instrument
-          {{
+        v-for="(process, index) in created"
-            (process.workerCount * process.workerRate * process.reward) / 100.0
+        :key="index"
-          }}
+        :process="process"
-          <span class="fas fa-hourglass-half text-sm" /> / sec
+      />
-          <!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
+    </responsive-grid>
-        </span>
-      </div>
-    </template>
   </div>
 </template>
 
 <script>
-export default {}
+export default {
-</script>
+  computed: {
-
+    created() {
-<style scoped>
+      return this.$store.state.processes.filter((p) => p.created)
-.tab-content {
+    },
-  grid-template-columns: auto 1fr;
+    uncreated() {
-  grid-gap: 1rem 1rem;
+      return this.$store.state.processes.filter((p) => !p.created)
+    },
+  },
+  methods: {
+    create(instrument) {
+      this.$store.commit('createInstrument', instrument)
+    },
+  },
 }
-</style>
+</script>

store/index.js

@@ -62,39 +62,54 @@ export const state = () => ({
   currencyTotal: new Decimal(0),
   processes: [
     {
-      instrument: 'Star Chart',
+      instrument: 'Mechanical Clock',
-      worker: 'Shaman',
+      worker: 'Engineer',
-      deviceCount: new Decimal(0),
+
-      workerCount: 0,
+      cost: 10,
-      completion: 0,
+      created: false,
-      workerRate: 6.0, // amount added to "completion" (100=full bar) per worker
+
-      reward: 8, // currency added when the bar is completed
+      completion: 0, // how close it is to giving currency. 10 gained per second.
-      nextWorkerCost: 15, // currency cost of next worker
+      completionRequired: 10, // should be divisible by 10
-      nextWorkerFactor: 1.4, // worker cost *= this factor after each purchase
+      baseReward: 5, // currency added when the bar is completed
+
+      workerLevel: 0, // 0 = not hired; 1+ = hired
+      nextWorkerCost: 25, // currency cost of next worker
+      nextWorkerFactor: 1.5, // worker cost *= this factor after each purchase
+
       unlockThreshold: { tech: null, currency: 0 },
     },
     {
-      instrument: 'Stone Calendar',
+      instrument: 'Hourglass',
-      worker: 'Stonecarver',
+      worker: 'Glassblower',
-      deviceCount: new Decimal(0),
+
-      workerCount: 0,
+      cost: 100,
+      created: false,
+
       completion: 0,
-      workerRate: 4.0,
+      completionRequired: 20,
-      reward: 35,
+      baseReward: 35,
-      nextWorkerCost: 60,
+
+      workerLevel: 0,
+      nextWorkerCost: 200,
       nextWorkerFactor: 1.6,
+
       unlockThreshold: { tech: null, currency: 10000 },
     },
     {
-      instrument: 'Astrolabes',
+      instrument: 'Pocket Watch',
-      worker: 'Mathematician',
+      worker: 'Miniaturist',
-      deviceCount: new Decimal(0),
+
-      workerCount: 0,
+      cost: 1000,
+      created: false,
+
       completion: 0,
-      workerRate: 1.5,
+      completionRequired: 30,
-      reward: 80,
+      baseReward: 80,
-      nextWorkerCost: 90,
+
+      workerLevel: 0,
+      nextWorkerCost: 2000,
       nextWorkerFactor: 1.8,
+
       unlockThreshold: { tech: 0, currency: new Decimal(10e5) },
     },
   ],
@@ -190,10 +205,6 @@ export const getters = {
 }
 
 export const mutations = {
-  setActiveTab: (state, index) => {
-    if (state.tabs[index].locked) return
-    state.activeTabIndex = index
-  },
   addCurrency: (state, value) => {
     state.currency = Decimal.add(state.currency, value)
     state.currencyTotal = Decimal.add(state.currencyTotal, value)
@@ -202,8 +213,12 @@ export const mutations = {
     value = Decimal.mul(value, -1)
     state.currency = Decimal.add(state.currency, value)
   },
-  setProcessCompletion: (state, { processIndex, value }) => {
+  createInstrument: (state, instrument) => {
-    Vue.set(state.processes[processIndex], 'completion', value)
+    const index = state.processes.findIndex((p) => p.instrument === instrument)
+    Vue.set(state.processes[index], 'created', true)
+  },
+  setProcessCompletion: (state, { index, value }) => {
+    Vue.set(state.processes[index], 'completion', value)
   },
   setMissionAvailable: (state, missionIndex) => {
     Vue.set(state.missions[missionIndex], 'available', true)
@@ -214,15 +229,17 @@ export const mutations = {
   completeMission: (state, missionIndex) => {
     state.missions[missionIndex].complete = true
   },
-  purchaseWorker: (state, processIndex) => {
+  levelUpApprentice: (state, process) => {
-    const p = state.processes[processIndex]
+    if (process.nextWorkerCost > state.currency) {
-    if (p.nextWorkerCost > state.currency) return
+      return
-    state.currency = Decimal.subtract(state.currency, p.nextWorkerCost)
+    }
-    Vue.set(state.processes[processIndex], 'workerCount', p.workerCount + 1)
+    const index = state.processes.findIndex((p) => p.worker === process.worker)
+    state.currency = Decimal.subtract(state.currency, process.nextWorkerCost)
+    Vue.set(state.processes[index], 'workerLevel', process.workerLevel + 1)
     Vue.set(
-      state.processes[processIndex],
+      state.processes[index],
       'nextWorkerCost',
-      Math.floor(p.nextWorkerCost * p.nextWorkerFactor)
+      Math.floor(process.nextWorkerCost * process.nextWorkerFactor)
     )
   },
   tickGameDate: (state) => {