feat: issue #40, connect time readouts to vuex state

pages/index.vue

@@ -13,19 +13,28 @@
         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">
-          Dec. 1990
+          {{ $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="100"
-            value="50"
+            :max="
+              $store.state.playerAgeMax.year * 12 +
+              $store.state.playerAgeMax.month
+            "
+            :value="
+              $store.state.playerAge.year * 12 + $store.state.playerAge.month
+            "
           />
-          34y4m
+          {{ $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 class="text-center pt-2 pb-1 flex-grow">80y max</div>
       </div>
 
       <div class="units p-8 relative bg-gray-300">
@@ -99,6 +108,9 @@ export default {
     window.setInterval(() => {
       this.gametick()
     }, 1000)
+    window.setInterval(() => {
+      this.$store.commit('tickGameDate')
+    }, 100)
   },
   methods: {
     gametick() {

store/index.js

@@ -170,6 +170,22 @@ export const getters = {
     if (state.playerAge.year > state.playerAgeMax.year) return false
     return state.playerAge.month < state.playerAgeMax.month
   },
+  gameMonth: (state) => {
+    return {
+      1: 'Jan.',
+      2: 'Feb.',
+      3: 'Mar.',
+      4: 'Apr.',
+      5: 'May.',
+      6: 'Jun.',
+      7: 'Jul.',
+      8: 'Aug.',
+      9: 'Sep.',
+      10: 'Oct.',
+      11: 'Nov.',
+      12: 'Dec.',
+    }[state.gameDate.month]
+  },
 }
 
 export const mutations = {
@@ -211,6 +227,7 @@ export const mutations = {
   tickGameDate: (state) => {
     let gameYear = state.gameDate.year
     let gameMonth = state.gameDate.month + 1
+    // Intentional: Months are 1 through 12, ages are 0 through 11.
     if (gameMonth > 12) {
       gameMonth = 1
       gameYear = gameYear + 1
@@ -218,8 +235,8 @@ export const mutations = {
     let ageYear = state.playerAge.year
     let ageMonth = state.playerAge.month + 1
     let wisdomGained = 0
-    if (ageMonth > 12) {
-      ageMonth = 1
+    if (ageMonth >= 12) {
+      ageMonth = 0
       ageYear = ageYear + 1
       wisdomGained += 1
     }