"incremental.js" vuex store for shared state. See InfinityTester component for examples on how to modify the store; arbitarily many currencies can be controlled.

components/InfinityTester.vue

@@ -1,50 +1,64 @@
 <template>
   <div>
     <button @click="add"> add {{addIncrement}} </button>
-    <button @click="stepup">add to the adding</button>
+    <button @click="stepup"> {{mulIncrement}}x addition per step </button>
-    <div>big value = {{ bigvalue }}</div>
+    <button @click="jumpup"> 10x more multiplication per step</button>
+    <button @click="toggletimer">Tick automatically</button>
   </div>
 </template>
 
 <script>
-// import Decimal from "break_infinity.js";
+
+import Decimal from "break_infinity.js";
 
 export default {
   name: 'InfinityTester',
   data() {
     return {
-      addIncrement: 0,
+      addIncrement: new Decimal(100),
-      bigvalue: 0,
+      mulIncrement: new Decimal(10),
+      bigValue: new Decimal(0),
+      timerRunning: false
     }
   },
+  beforeMount () {
+        window.setInterval(() => {
+                this.gametick();
+            },250);
+  },
   methods: {
         add () {
-      // eslint-disable-next-line no-console
+            // this.bigValue = Decimal.add(this.bigValue, this.addIncrement);
-      console.log('!')
+            this.$store.commit("incremental/add", 
-      this.bigvalue = 0
+                {key: "energy", value: this.addIncrement}
+            )
         },
 
         stepup () {
-      this.addIncrement += 100
+            this.addIncrement = Decimal.mul(this.addIncrement, this.mulIncrement);
         },
+
+        jumpup() {
+            this.mulIncrement = Decimal.mul(this.mulIncrement, 10.0);
         },
+
+        gametick() {
+            if (this.timerRunning) {
+                this.$store.commit("incremental/add", 
+                    {key: "energy", value: this.addIncrement}
+                )
+            }
+        },
+
+        toggletimer() {
+            this.timerRunning = !(this.timerRunning)
+        }
+  }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only 
 <style scoped>
-h1, h2 {
+button {
-  font-weight: normal;
+  background-color: #42b983;
 }
-ul {
+</style>
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>-->

components/TabNav.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
+    <div>Energy: {{ $store.state.incremental.currency.energy }}</div>
+    <div>Time: {{ timecurrency }}</div>
     <nav class="flex flex-col sm:flex-row">
       <button
         id="tab1"
@@ -36,10 +38,15 @@
 </template>
 
 <script>
+import Decimal from "break_infinity.js"
+
 export default {
   name: 'TabNav',
   data() {
-    return {}
+    return {
+        energycurrency: new Decimal(0),
+        timecurrency: new Decimal(0)
+    }
   },
   methods: {
     tabclicked(tabnumber) {
@@ -60,6 +67,10 @@ export default {
         }
       }
     },
+    increaseCurrency (energy, time) {
+        this.energycurrency = Decimal.add(this.energycurrency, energy)
+        this.timecurrency = Decimal.add(this.timecurrency, time)
+    },
   },
 }
 </script>

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/pwa": "^3.3.5",
+    "break_infinity.js": "^2.0.0",
     "core-js": "^3.19.3",
     "nuxt": "^2.15.8",
     "vue": "^2.6.14",

store/incremental.js

@@ -0,0 +1,24 @@
+import Decimal from "break_infinity.js"
+
+export const state = () => ({
+    currency: {
+        energy: new Decimal(0),
+        // if it hasn't been your
+        days: new Decimal(0),
+        weeks: new Decimal(0),
+        months: new Decimal(0),
+        // or even your
+        years: new Decimal(0)
+    }
+})
+
+export const mutations = {
+    add(state, { key, value }) {
+        state.currency[key] = Decimal.add(state.currency[key], value)
+    },
+
+    set(state, { key, value }) {
+        state.currency[key] = value
+    }
+}
+

yarn.lock

@@ -2283,6 +2283,13 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+break_infinity.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/break_infinity.js/-/break_infinity.js-2.0.0.tgz#3c7b0a4eff54b2ee16829a9c8233eb63d806b5dd"
+  integrity sha512-/7fy8+rA12V57DMPSWA90mBs4xPxHKpj79w/oBXTqyQS07oIHsWaB62pO43C/GRUkteVokhJ+G+UD8+OhHaz5g==
+  dependencies:
+    pad-end "^1.0.2"
+
 brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -6483,6 +6490,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pad-end@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pad-end/-/pad-end-1.0.2.tgz#6b41a42fdb7effa55858bb77dade52eee388e6cc"
+  integrity sha1-a0GkL9t+/6VYWLt32t5S7uOI5sw=
+
 pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"