Switch to pinia store (#6)

package.json

@@ -21,10 +21,11 @@
     "brdgm-commons": "github:brdgm/brdgm-commons#1.6.1",
     "core-js": "~3.36.1",
     "lodash": "~4.17.21",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "~3.4.21",
     "vue-i18n": "~9.11.1",
-    "vue-router": "~4.2.5",
-    "vuex": "~4.1.0"
+    "vue-router": "~4.2.5"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",

src/App.vue

@@ -52,7 +52,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import AppHeader from 'brdgm-commons/src/components/structure/AppHeader.vue'
 import AppFooter from 'brdgm-commons/src/components/structure/AppFooter.vue'
 import ModalDialog from 'brdgm-commons/src/components/structure/ModalDialog.vue'
@@ -74,7 +74,7 @@ export default defineComponent({
       inheritLocale: true,
       useScope: 'global'
     })
-    const store = useStore()
+    const state = useStateStore()
 
     // handle PWA updates with prompt if a new version is detected, check regularly for a new version
     const checkForNewVersionsIntervalSeconds = 1 * 60 * 60
@@ -88,12 +88,11 @@ export default defineComponent({
       }
     })
 
-    store.commit('initialiseStore')
-    locale.value = store.state.language
+    locale.value = state.language
     
-    const baseFontSize = ref(store.state.baseFontSize)
+    const baseFontSize = ref(state.baseFontSize)
 
-    return { t, locale, baseFontSize, updateServiceWorker }
+    return { t, state, locale, baseFontSize, updateServiceWorker }
   },
   data() {
     return {
@@ -104,12 +103,12 @@ export default defineComponent({
   },
   methods: {
     setLocale(lang: string) {
-      this.$store.commit('language', lang)
+      this.state.language = lang
       this.locale = lang;
     },
     zoomFontSize(payload: { baseFontSize: number }) {
       this.baseFontSize = payload.baseFontSize
-      this.$store.commit('zoomFontSize', this.baseFontSize)
+      this.state.baseFontSize = this.baseFontSize
     }
   },
   errorCaptured(err : unknown) {

src/components/round/BotActions.vue

@@ -94,7 +94,7 @@ import { groupBy, Dictionary } from 'lodash'
 import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import Bot from '@/services/Bot'
 import ActionText from './ActionText.vue'
 import GoldInfo from './GoldInfo.vue'
@@ -117,36 +117,36 @@ export default defineComponent({
   setup() {
     const { t } = useI18n()
     const route = useRoute()
-    const store = useStore()
+    const state = useStateStore()
 
-    const navigationState = new NavigationState(route, store.state)
+    const navigationState = new NavigationState(route, state)
     const round = navigationState.round
     const botIndex = navigationState.botIndex
     const botCount = navigationState.botCount
     const civilizationName = navigationState.civilizationName as string
 
-    const botPersistence = store.state.rounds[round-1]?.bots[botIndex-1]
+    const botPersistence = state.rounds[round-1]?.bots[botIndex-1]
     let bot
     if (botPersistence) {
       bot = Bot.fromPersistence(botPersistence)
     }
     else if (round > 1) {
-      const previousRoundBotPersistence = store.state.rounds[round-2]?.bots[botIndex-1]
+      const previousRoundBotPersistence = state.rounds[round-2]?.bots[botIndex-1]
       if (previousRoundBotPersistence) {
         bot = Bot.fromPersistenceStartNewRound(previousRoundBotPersistence)
         bot.startRound()
-        store.commit('roundBot', { round: round, botIndex: botIndex, bot: bot.toPersistence() })
+        state.roundBot({ round: round, botIndex: botIndex, bot: bot.toPersistence() })
       }
     }
     if (!bot) {
-      bot = Bot.new(store.state.setup.difficultyLevel, civilizationName as CivilizationName, 2)
+      bot = Bot.new(state.setup.difficultyLevel, civilizationName as CivilizationName, 2)
       bot.startRound()
-      store.commit('roundBot', { round: round, botIndex: botIndex, bot: bot.toPersistence() })
+      state.roundBot({ round: round, botIndex: botIndex, bot: bot.toPersistence() })
     }
 
     const nextActionIndex = ref(bot.getNextActionIndex())
 
-    return { t, round, botIndex, botCount, civilizationName, bot, nextActionIndex }
+    return { t, state, round, botIndex, botCount, civilizationName, bot, nextActionIndex }
   },
   data() {
     return {
@@ -199,7 +199,7 @@ export default defineComponent({
     },
     updateAndPersist() : void {
       this.nextActionIndex = this.bot.getNextActionIndex()
-      this.$store.commit('roundBot', { round: this.round, botIndex: this.botIndex, bot: this.bot.toPersistence() })
+      this.state.roundBot({ round: this.round, botIndex: this.botIndex, bot: this.bot.toPersistence() })
     },
     isChooseAction(action : BotCardAction) {
       return action.action == Action.CHOOSE_ACTION

src/components/scoring/CivilizationScoring.vue

@@ -95,7 +95,7 @@
 import { fill, max } from 'lodash'
 import { computed, defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import CivilizationIconName from '@/components/structure/CivilizationIconName.vue'
 import tdScore from './ScoreCell.vue'
 import Bot from '@/services/Bot'
@@ -108,22 +108,22 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    const store = useStore()
+    const state = useStateStore()
 
-    const playerCivilization = store.state.setup.civilizations.playerCivilization
-    const playerCount = store.state.setup.civilizations.playerCivilization.length
-    const botCivilization = store.state.setup.civilizations.botCivilization
-    const botCount = store.state.setup.civilizations.botCivilization.length
-    const roundCount = store.state.rounds.length
+    const playerCivilization = state.setup.civilizations.playerCivilization
+    const playerCount = state.setup.civilizations.playerCivilization.length
+    const botCivilization = state.setup.civilizations.botCivilization
+    const botCount = state.setup.civilizations.botCivilization.length
+    const roundCount = state.rounds.length
 
     // get gold and cultural policies from bots
     const botGold : number[] = []
     const botCulturalPolicies : number[] = []
     for (let i=0; i<botCount; i++) {
       botGold[i] = 0
       botCulturalPolicies[i] = 0
-      for (let roundIndex=store.state.rounds.length-1; roundIndex>=0; roundIndex--) {
-        const round = store.state.rounds[roundIndex]
+      for (let roundIndex=state.rounds.length-1; roundIndex>=0; roundIndex--) {
+        const round = state.rounds[roundIndex]
         if (i < round.bots.length) {
           const bot = Bot.fromPersistence(round.bots[i])
           botGold[i] = bot.goldTotal
@@ -133,7 +133,7 @@ export default defineComponent({
       }
     }
 
-    const scoring = store.state.scoring
+    const scoring = state.scoring
     const knowledgeCardCount = ref(scoring?.knowledgeCardCount ?? fill(Array(playerCount+botCount),0))
     const wonderCardCount = ref(scoring?.wonderCardCount ?? fill(Array(playerCount+botCount),0))
     const culturalPolicyCount = ref([...scoring?.culturalPolicyCountPlayer ?? fill(Array(playerCount),0), ...botCulturalPolicies])
@@ -192,7 +192,7 @@ export default defineComponent({
       set: (v) => v
     })
 
-    return { t, playerCivilization, playerCount, botCivilization, botCount, roundCount,
+    return { t, state, playerCivilization, playerCount, botCivilization, botCount, roundCount,
       knowledgeCardCount, knowledgeCardVP, knowledgeCardDominanceVP,
       wonderCardCount, wonderCardVP, wonderCardDominanceVP,
       culturalPolicyCount, culturalPolicyVP, culturalPolicyDominanceVP,
@@ -203,13 +203,13 @@ export default defineComponent({
   },
   methods: {
     persist() {
-      this.$store.commit('scoring', {
+      this.state.scoring = {
         knowledgeCardCount: this.knowledgeCardCount,
         wonderCardCount: this.wonderCardCount,
         culturalPolicyCountPlayer: this.culturalPolicyCount.slice(0, this.playerCount),
         provinceCount: this.provinceCount,
         monsterCountPlayer: this.monsterCount.slice(0, this.playerCount)
-      })
+      }
     },
     inputSelectAll(event: Event) : void {
       const input = event.target as HTMLInputElement

src/components/setup/DifficultyLevel.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="col-8 col-md-4">
       <input type="range" class="form-range" min="0" max="4" id="difficultyLevel"
-          :value="$store.state.setup.difficultyLevel" @input="updateDifficultyLevel($event)">
+          :value="state.setup.difficultyLevel" @input="updateDifficultyLevel($event)">
     </div>
     <div class="col-1">
       <label for="difficultyLevel" class="form-label">{{t('setup.difficultyLevel.hard')}}</label>
@@ -16,7 +16,7 @@
   <div class="row">
     <div class="offset-1 col-10">
       <p class="text-muted">
-        {{t('setup.difficultyLevel.useCards', { count: $store.state.setup.difficultyLevel }, $store.state.setup.difficultyLevel)}}<br/>
+        {{t('setup.difficultyLevel.useCards', { count: state.setup.difficultyLevel }, state.setup.difficultyLevel)}}<br/>
         {{t('setup.difficultyLevel.infoModules')}}
       </p>
     </div>
@@ -27,19 +27,19 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 
 export default defineComponent({
   name: 'DifficultyLevel',
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   methods: {
     updateDifficultyLevel(event: Event) {
       const level = parseInt((event.target as HTMLInputElement).value)
-      this.$store.commit('setupDifficultyLevel', level)
+      this.state.setup.difficultyLevel = level
     }
   }
 })

src/components/setup/SelectCivilization.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import CivilizationIconName from '../structure/CivilizationIconName.vue'
 import CivilizationName from '@/services/enum/CivilizationName'
 import Civilization from '@/services/Civilization'
@@ -38,8 +38,8 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   props: {
     modelValue: {
@@ -67,7 +67,7 @@ export default defineComponent({
     civilizationExpansions() : (Expansion | undefined)[] {
       return [
         undefined,
-        ...this.$store.state.setup.expansions
+        ...this.state.setup.expansions
       ]
     },
   },

src/components/setup/SelectCivilizations.vue

@@ -50,9 +50,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { CivilizationSetup, useStore } from '@/store'
+import { CivilizationSetup, useStateStore } from '@/store/state'
 import SelectCivilization from './SelectCivilization.vue'
 import Expansion from '@/services/enum/Expansion'
 import CivilizationName from '@/services/enum/CivilizationName'
@@ -65,8 +65,14 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    const store = useStore()
-    return { t, store }
+    const state = useStateStore()
+
+    const numberPlayers = ref(state.setup.civilizations.numberPlayers)
+    const numberHumanPlayers = ref(state.setup.civilizations.numberHumanPlayers)
+    const playerCivilization = ref([...state.setup.civilizations.playerCivilization])
+    const botCivilization = ref([...state.setup.civilizations.botCivilization])
+
+    return { t, state, numberPlayers, numberHumanPlayers, playerCivilization, botCivilization }
   },
   emits: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -76,19 +82,15 @@ export default defineComponent({
   },
   data() {
     return {
-      numberPlayers: this.$store.state.setup.civilizations.numberPlayers,
-      numberHumanPlayers: this.$store.state.setup.civilizations.numberHumanPlayers,
-      playerCivilization: [...this.$store.state.setup.civilizations.playerCivilization],
-      botCivilization: [...this.$store.state.setup.civilizations.botCivilization],
       valid: false
     }
   },
   computed: {
     hasLostKingdoms() : boolean {
-      return this.$store.state.setup.expansions.includes(Expansion.LOST_KINGDOMS)
+      return this.state.setup.expansions.includes(Expansion.LOST_KINGDOMS)
     },
     hasAfricanEmpires() : boolean {
-      return this.$store.state.setup.expansions.includes(Expansion.AFRICAN_EMPIRES)
+      return this.state.setup.expansions.includes(Expansion.AFRICAN_EMPIRES)
     },
     hasFivePlayers() : boolean {
       return this.hasLostKingdoms || this.hasAfricanEmpires
@@ -146,7 +148,7 @@ export default defineComponent({
           playerCivilization: this.playerCivilization.slice(0, this.numberHumanPlayers),
           botCivilization: this.botCivilization.slice(0, this.numberPlayers - this.numberHumanPlayers)
         }
-        this.$store.commit('setupCivilizations', civilizations)
+        this.state.setup.civilizations = civilizations
       }
 
       this.valid = valid
@@ -160,7 +162,7 @@ export default defineComponent({
       if (!civ) {
         return false;
       }
-      if (civ.expansion != undefined && !this.$store.state.setup.expansions.includes(civ.expansion)) {
+      if (civ.expansion != undefined && !this.state.setup.expansions.includes(civ.expansion)) {
         return false
       }
       return true

src/components/setup/SelectExpansion.vue

@@ -40,30 +40,30 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import Expansion from '@/services/enum/Expansion'
 
 export default defineComponent({
   name: 'SelectExpansion',
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   computed: {
     hasLostKingdoms() : boolean {
-      return this.$store.state.setup.expansions.includes(Expansion.LOST_KINGDOMS)
+      return this.state.setup.expansions.includes(Expansion.LOST_KINGDOMS)
     },
     hasAfricanEmpires() : boolean {
-      return this.$store.state.setup.expansions.includes(Expansion.AFRICAN_EMPIRES)
+      return this.state.setup.expansions.includes(Expansion.AFRICAN_EMPIRES)
     }
   },
   methods: {
     toggleLostKingdoms() {
-      this.$store.commit('setupToggleExpansionLostKingdoms')
+      this.state.setupToggleExpansionLostKingdoms()
     },
     toggleAfricanEmpires() {
-      this.$store.commit('setupToggleExpansionAfricanEmpires')
+      this.state.setupToggleExpansionAfricanEmpires()
     }
   }
 })