Switch to pinia store (#7)

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

@@ -55,7 +55,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'
@@ -79,7 +79,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
@@ -93,12 +93,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 {
@@ -109,12 +108,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/setup/ChallengeCards.vue

@@ -37,9 +37,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import AppIcon from '../structure/AppIcon.vue'
 import rollDice from 'brdgm-commons/src/util/random/rollDice'
 import ChallengeCard from '@/services/enum/ChallengeCard'
@@ -51,14 +51,12 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
-  },
-  data() {
-    return {
-      showChallengeCards: this.$store.state.setup.challengeCards.length > 0,
-      selectedIndex: toSelectedIndex(this.$store.state.setup.challengeCards)
-    }
+    const state = useStateStore()
+
+    const showChallengeCards = ref(state.setup.challengeCards.length > 0)
+    const selectedIndex = ref(toSelectedIndex(state.setup.challengeCards))
+
+    return { t, state, showChallengeCards, selectedIndex }
   },
   computed: {
     challengeCards() : ChallengeCard[] {
@@ -98,7 +96,7 @@ export default defineComponent({
   watch: {
     selectedIndex: {
       handler() {
-        this.$store.commit('setup', {challengeCards:this.selectedChallengeCards})
+        this.state.setup = {challengeCards:this.selectedChallengeCards}
       },
       deep: true
     }

src/components/setup/SetupGameInstructions.vue

@@ -66,7 +66,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import AppIcon from '../structure/AppIcon.vue'
 import ChallengeIcon from '../structure/ChallengeIcon.vue'
 import ChallengeCard from '@/services/enum/ChallengeCard'
@@ -89,8 +89,8 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   props: {
     setupCards: {
@@ -109,7 +109,7 @@ export default defineComponent({
   },
   computed: {
     challengeCards() : ChallengeCard[] {
-      return this.$store.state.setup.challengeCards
+      return this.state.setup.challengeCards
     },
     initialChemicals() : Chemical[] {
       const result : Chemical[] = []

src/components/structure/ChooseWeatherBranch.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import Weather from '@/services/enum/Weather';
-import getAllEnumValues from 'brdgm-commons/src/util/enum/getAllEnumValues';
+import Weather from '@/services/enum/Weather'
+import getAllEnumValues from 'brdgm-commons/src/util/enum/getAllEnumValues'
 import { defineComponent, PropType } from 'vue'
-import { useI18n } from 'vue-i18n';
+import { useI18n } from 'vue-i18n'
 import AppIcon from './AppIcon.vue'
 
 export default defineComponent({

src/components/structure/FooterButtons.vue

@@ -6,7 +6,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import CommonsFooterButtons from 'brdgm-commons/src/components/structure/FooterButtons.vue'
 
 export default defineComponent({
@@ -16,8 +16,8 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   props: {
     endGameButtonType: {
@@ -31,7 +31,7 @@ export default defineComponent({
   },
   methods: {
     endGame() {
-      this.$store.commit('endGame')
+      this.state.endGame()
       this.$router.push('/')
     }
   }

src/components/structure/WeatherPriority.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script lang="ts">
-import Weather from '@/services/enum/Weather';
-import getPrioritizedEnumValues from 'brdgm-commons/src/util/enum/getPrioritizedEnumValues';
+import Weather from '@/services/enum/Weather'
+import getPrioritizedEnumValues from 'brdgm-commons/src/util/enum/getPrioritizedEnumValues'
 import { defineComponent, PropType } from 'vue'
 import AppIcon from './AppIcon.vue'
 

src/components/turn/CallSecurityModal.vue

@@ -43,7 +43,6 @@ import AppIcon from '../structure/AppIcon.vue'
 import ModalDialog from 'brdgm-commons/src/components/structure/ModalDialog.vue'
 import Card from '@/services/Card'
 import { CallSecurityAction } from '@/services/CardDeck'
-import { useStore } from '@/store'
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import getAllEnumValues from 'brdgm-commons/src/util/enum/getAllEnumValues'
@@ -62,7 +61,6 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
     return { t }
   },
   props: {

src/components/turn/ClaimInitiativeModal.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import Player from '@/services/enum/Player'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AppIcon from '../structure/AppIcon.vue'
@@ -42,8 +42,8 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   props: {
     round: {
@@ -68,7 +68,7 @@ export default defineComponent({
   methods: {
     claimInitiative() : void {
       this.$emit('claimedInitiative', {player:this.selectedPlayer})
-      this.$store.commit('claimInitiative', {round:this.round, player:this.selectedPlayer})
+      this.state.claimInitiative({round:this.round, player:this.selectedPlayer})
     }
   }
 })

src/components/turn/EndGameConditionsModal.vue

@@ -97,7 +97,7 @@
 
 <script lang="ts">
 import ChallengeCard from '@/services/enum/ChallengeCard'
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AppIcon from '../structure/AppIcon.vue'
@@ -113,12 +113,12 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   computed: {
     challengeCards() : ChallengeCard[] {
-      return this.$store.state.setup.challengeCards
+      return this.state.setup.challengeCards
     },
     nobelLaureate() : boolean {
       return this.challengeCards.includes(ChallengeCard.NOBEL_LAUREATE)
@@ -132,7 +132,7 @@ export default defineComponent({
   },
   methods: {
     goToEndOfGame() : void {
-      this.$router.push("/endOfGame")
+      this.$router.push('/endOfGame')
     }
   }
 })

src/components/turn/TurnSidebar.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { Token, useStore } from '@/store'
+import { Token, useStateStore } from '@/store/state'
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import CallSecurityModal from '@/components/turn/CallSecurityModal.vue'
@@ -118,8 +118,8 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   data() {
     return {
@@ -168,7 +168,7 @@ export default defineComponent({
       return this.player == Player.PLAYER
     },
     challengeCards() : ChallengeCard[] {
-      return this.$store.state.setup.challengeCards
+      return this.state.setup.challengeCards
     },
     endGameConditionChallenge() : boolean {
       return this.challengeCards.includes(ChallengeCard.NOBEL_LAUREATE)

src/components/turn/actions/DiscardResearchTokens.vue

@@ -14,7 +14,7 @@ import AppIcon from '@/components/structure/AppIcon.vue'
 import ResearchTokenIcon from '@/components/structure/ResearchTokenIcon.vue'
 import ActionContextParams from '@/services/ActionContextParams'
 import ActionStep from '@/services/ActionStep'
-import { Token } from '@/store'
+import { Token } from '@/store/state'
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 

src/components/turn/actions/UnlockCitation.vue

@@ -18,6 +18,7 @@ import ActionContextParams from '@/services/ActionContextParams'
 import ActionStep from '@/services/ActionStep'
 import ChallengeCard from '@/services/enum/ChallengeCard'
 import Weather from '@/services/enum/Weather'
+import { useStateStore } from '@/store/state'
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -30,7 +31,8 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    return { t }
+    const state = useStateStore()
+    return { t, state }
   },
   props: {
     actionStep: {
@@ -47,7 +49,7 @@ export default defineComponent({
       return this.actionStep.weatherBranchChosen ?? Weather.RAIN
     },
     challengeCards() : ChallengeCard[] {
-      return this.$store.state.setup.challengeCards
+      return this.state.setup.challengeCards
     },
     challengePublishOrPerish() : boolean {
       return this.challengeCards.includes(ChallengeCard.PUBLISH_OR_PERISH)

src/main.ts

@@ -1,14 +1,18 @@
 import { createApp } from 'vue'
-import { store, key } from './store'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
 import router from './router'
 import i18n from './i18n'
 import App from './App.vue'
 
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap'
 
+const pinia = createPinia()
+  .use(piniaPluginPersistedState)
+
 createApp(App)
-  .use(store, key)
+  .use(pinia)
   .use(router)
   .use(i18n)
-  .mount('#app');
+  .mount('#app')

src/services/ActionContextParams.ts

@@ -1,4 +1,4 @@
-import { Token } from '@/store'
+import { Token } from '@/store/state'
 import SelectionPriority from './enum/SelectionPriority'
 import Weather from './enum/Weather'
 

src/services/CardDeck.ts

@@ -1,4 +1,4 @@
-import { CardDeckPersistence } from '@/store'
+import { CardDeckPersistence } from '@/store/state'
 import MainLocations from '@/util/MainLocations'
 import { shuffle } from 'lodash'
 import Card from './Card'

src/services/Cards.ts

@@ -1,9 +1,9 @@
-import findMandatory from 'brdgm-commons/src/util/map/findMandatory';
-import Card from './Card';
-import Agent from './enum/Agent';
-import Location from './enum/Location';
-import Weather from './enum/Weather';
-import SelectionPriority from './enum/SelectionPriority';
+import findMandatory from 'brdgm-commons/src/util/map/findMandatory'
+import Card from './Card'
+import Agent from './enum/Agent'
+import Location from './enum/Location'
+import Weather from './enum/Weather'
+import SelectionPriority from './enum/SelectionPriority'
 
 const cards = [
   {

src/services/SaboteurActions.ts

@@ -1,4 +1,4 @@
-import { Token } from '@/store'
+import { Token } from '@/store/state'
 import ActionStep from './ActionStep'
 import Action from './enum/Action'
 import ActionSlot from './enum/ActionSlot'

src/services/TokenCollector.ts

@@ -1,5 +1,5 @@
-import { Token } from '@/store'
-import getPrioritizedEnumValues from 'brdgm-commons/src/util/enum/getPrioritizedEnumValues';
+import { Token } from '@/store/state'
+import getPrioritizedEnumValues from 'brdgm-commons/src/util/enum/getPrioritizedEnumValues'
 import MainLocations from '@/util/MainLocations'
 import Location from './enum/Location'
 import Weather from './enum/Weather'