feat: demonstrate animation

components/FirstTabContent.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="tab-content grid flex-col">
-    <template v-for="(process, index) in $store.state.incremental.processes">
+    <template v-for="(process, index) in $store.state.processes">
       <button :key="index" class="text-right font-semibold">
-        {{ process.device }}
+        {{ process.instrument }}
       </button>
       <div :key="index" class="progress-bar relative">
-        <progress max="100" value="50" class="w-full h-full"></progress>
+        <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"
         >

pages/index.vue

@@ -68,6 +68,25 @@ import GameTab from '~/components/GameTab.vue'
 export default {
   name: 'IndexPage',
   components: { GameTab, FirstTabContent },
+  mounted() {
+    window.setInterval(() => {
+      this.gametick()
+    }, 1000)
+  },
+  methods: {
+    gametick() {
+      for (let i = 0; i <= 4; i++) {
+        const currentCompletion = this.$store.state.processes[i].completion
+        const step = 100.0 / (6.0 * (i + 1)) // go at different rates
+        let newValue = currentCompletion + step
+        if (newValue >= 100) newValue = newValue - 100
+        this.$store.commit('setProcessCompletion', {
+          processIndex: i,
+          value: newValue,
+        })
+      }
+    },
+  },
 }
 </script>
 

store/index.js

@@ -1,4 +1,5 @@
 import Decimal from 'break_infinity.js'
+import Vue from 'vue'
 
 export const state = () => ({
   activeTabIndex: 0,
@@ -50,24 +51,27 @@ export const state = () => ({
   currencyTotal: new Decimal(0),
   processes: [
     {
-      device: 'Star Chart',
+      instrument: 'Star Chart',
       worker: 'Shaman',
       deviceCount: new Decimal(0),
       workerCount: 0,
+      completion: 0,
       unlockThreshold: { tech: null, currency: 0 },
     },
     {
-      device: 'Stone Calendar',
+      instrument: 'Stone Calendar',
       worker: 'Stonecarver',
       deviceCount: new Decimal(0),
       workerCount: 0,
+      completion: 0,
       unlockThreshold: { tech: null, currency: 10000 },
     },
     {
-      device: 'Astrolabes',
+      instrument: 'Astrolabes',
       worker: 'Mathematician',
       deviceCount: new Decimal(0),
       workerCount: 0,
+      completion: 0,
       unlockThreshold: { tech: 0, currency: new Decimal(10e5) },
     },
   ],
@@ -110,4 +114,7 @@ export const mutations = {
     value = Decimal.mul(value, -1)
     state.currency = Decimal.add(state.currency, value)
   },
+  setProcessCompletion: (state, { processIndex, value }) => {
+    Vue.set(state.processes[processIndex], 'completion', value)
+  },
 }