Switch to pinia store (#5)

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

@@ -50,9 +50,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent } 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,9 @@ export default defineComponent({
       }
     })
 
-    store.commit('initialiseStore')
-    locale.value = store.state.language
-    
-    const baseFontSize = ref(store.state.baseFontSize)
+    locale.value = state.language
 
-    return { t, locale, baseFontSize, updateServiceWorker }
+    return { t, state, locale, updateServiceWorker }
   },
   data() {
     return {
@@ -102,14 +99,18 @@ export default defineComponent({
       errorMessage: 'Error'
     }
   },
+  computed: {
+    baseFontSize() : number {
+      return this.state.baseFontSize
+    }
+  },
   methods: {
     setLocale(lang: string) {
-      this.$store.commit('language', lang)
-      this.locale = lang;
+      this.locale = lang
+      this.state.language = lang
     },
     zoomFontSize(payload: { baseFontSize: number }) {
-      this.baseFontSize = payload.baseFontSize
-      this.$store.commit('zoomFontSize', this.baseFontSize)
+      this.state.baseFontSize = payload.baseFontSize
     }
   },
   errorCaptured(err : unknown) {

src/components/scoring/FinalScoring.vue

@@ -132,7 +132,7 @@
 </template>
 
 <script lang="ts">
-import { useStore } from '@/store'
+import { useStateStore } from '@/store/state'
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import PlayerColorIcon from '@/components/structure/PlayerColorIcon.vue'
@@ -149,16 +149,16 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    const store = useStore()
+    const state = useStateStore()
 
-    const playerSetup = store.state.setup.playerSetup
+    const playerSetup = state.setup.playerSetup
     const playerCount = playerSetup.playerCount
     const botCount = playerSetup.botCount
     const playerColors = playerSetup.playerColors
 
     const lunaStates : LunaState[] = []
     for (let bot=1; bot<=botCount; bot++) {
-      lunaStates[bot-1] = getLunaState(store.state, 7, MAX_TURN, bot)
+      lunaStates[bot-1] = getLunaState(state, 7, MAX_TURN, bot)
     }
 
     return { t, playerCount, botCount, playerColors, lunaStates }

src/components/setup/DifficultyLevel.vue

@@ -7,36 +7,37 @@
     </div>
     <div class="col-8 col-md-4">
       <input type="range" class="form-range" min="0" max="8" id="difficultyLevel"
-          :value="$store.state.setup.difficultyLevel" @input="updateDifficultyLevel($event)">
+          :value="difficultyLevel" @input="updateDifficultyLevel($event)">
     </div>
     <div class="col-1">
       <label for="difficultyLevel" class="form-label">{{t('setup.difficultyLevel.hard')}}</label>
     </div>
   </div>
   <div class="row">
     <div class="offset-1 col-8 col-md-4 text-muted small">
-      {{t(`difficultyLevel.${$store.state.setup.difficultyLevel}`)}}
+      {{t(`difficultyLevel.${difficultyLevel}`)}}
     </div>
   </div>  
 
 </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'
 
 export default defineComponent({
   name: 'DifficultyLevel',
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
+    const state = useStateStore()
+    const difficultyLevel = ref(state.setup.difficultyLevel)
+    return { t, state, difficultyLevel }
   },
   methods: {
     updateDifficultyLevel(event: Event) {
-      const level = parseInt((event.target as HTMLInputElement).value)
-      this.$store.commit('setupDifficultyLevel', level)
+      this.difficultyLevel = parseInt((event.target as HTMLInputElement).value)
+      this.state.setup.difficultyLevel = this.difficultyLevel
     }
   }
 })

src/components/setup/PlayersSetup.vue

@@ -45,9 +45,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 PlayerColorPicker from './PlayerColorPicker.vue'
 import PlayerColor from '@/services/enum/PlayerColor'
 
@@ -58,15 +58,13 @@ export default defineComponent({
   },
   setup() {
     const { t } = useI18n()
-    useStore()
-    return { t }
-  },
-  data() {
-    return {
-      playerCount: this.$store.state.setup.playerSetup?.playerCount || 1,
-      botCount: this.$store.state.setup.playerSetup?.botCount || 1,
-      playerColors: this.$store.state.setup.playerSetup?.playerColors || [PlayerColor.RED,PlayerColor.ORANGE,PlayerColor.BLUE,PlayerColor.GREEN]
-    }
+    const state = useStateStore()
+
+    const playerCount = ref(state.setup.playerSetup?.playerCount || 1)
+    const botCount = ref(state.setup.playerSetup?.botCount || 1)
+    const playerColors = ref(state.setup.playerSetup?.playerColors || [PlayerColor.RED,PlayerColor.ORANGE,PlayerColor.BLUE,PlayerColor.GREEN])
+
+    return { t, state, playerCount, botCount, playerColors }
   },
   computed: {
     maxPlayerCount() : number {
@@ -104,11 +102,11 @@ export default defineComponent({
   },
   methods: {
     storePlayerSetup() {
-      this.$store.commit('setupPlayer', {
+      this.state.setup.playerSetup =  {
         playerCount: this.playerCount,
         botCount: this.botCount,
         playerColors: this.playerColors
-      })
+      }
     },
     playerColorChanged(index : number, color : PlayerColor) {
       const newPlayerColors = [...this.playerColors]

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('resetGame')
+      this.state.resetGame()
       this.$router.push('/')
     }
   }

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/Card.ts

@@ -1,10 +1,10 @@
-import Action from './enum/Action';
-import CardSelection from './enum/CardSelection';
-import CompanySelection from './enum/CompanySelection';
-import Grade from './enum/Grade';
-import ResearchPlanSelection from './enum/ResearchPlanSelection';
-import SectorSelection from './enum/SectorSelection';
-import Slot from './enum/Slot';
+import Action from './enum/Action'
+import CardSelection from './enum/CardSelection'
+import CompanySelection from './enum/CompanySelection'
+import Grade from './enum/Grade'
+import ResearchPlanSelection from './enum/ResearchPlanSelection'
+import SectorSelection from './enum/SectorSelection'
+import Slot from './enum/Slot'
 
 export default interface Card {
   id: string

src/services/CardDeck.ts

@@ -1,4 +1,4 @@
-import { CardDeckPersistence } from '@/store'
+import { CardDeckPersistence } from '@/store/state'
 import { shuffle, clone } from 'lodash'
 import Card, { CardAction } from './Card'
 import Cards from './Cards'

src/services/CardSlot.ts

@@ -1,5 +1,5 @@
-import Card from './Card';
-import Slot from './enum/Slot';
+import Card from './Card'
+import Slot from './enum/Slot'
 
 export default interface CardSlot {
   slot: Slot

src/services/FirstPlayerDetector.ts

@@ -1,4 +1,4 @@
-import { State } from '@/store'
+import { State } from '@/store/state'
 import getTurnOrder, { TurnOrder } from '@/util/getTurnOrder'
 
 /**

src/services/InitialLunaStates.ts

@@ -1,22 +1,21 @@
 import DifficultyLevel from '@/services/enum/DifficultyLevel'
 import LunaState from '@/services/LunaState'
-import { State } from '@/store'
-import { Store } from 'vuex'
+import { useStateStore } from '@/store/state'
 import getLastTurn from '../util/getLastTurn'
 
 /**
  * Prepares Luna states for new round.
  */
 export default class InitialLunaStates {
 
-  private readonly store : Store<State>
+  private readonly state
   private readonly difficultyLevel : DifficultyLevel
   private readonly botCount : number
 
-  public constructor(store : Store<State>) {
-    this.store = store
-    this.difficultyLevel = store.state.setup.difficultyLevel
-    this.botCount = store.state.setup.playerSetup.botCount
+  public constructor() {
+    this.state = useStateStore()
+    this.difficultyLevel = this.state.setup.difficultyLevel
+    this.botCount = this.state.setup.playerSetup.botCount
   }
 
   /**
@@ -41,7 +40,7 @@ export default class InitialLunaStates {
 
     // store round
     const lunaStatesPersistence = lunaStates.map(item => item.toPersistence())
-    this.store.commit('prepareRound', {round:round, initialLunaStates:lunaStatesPersistence, turns:[]})
+    this.state.prepareRound({round:round, initialLunaStates:lunaStatesPersistence, turns:[]})
   }
 
   /**
@@ -66,7 +65,7 @@ export default class InitialLunaStates {
    */
   private getLunaStatesFromRound(roundNo : number) : LunaState[] {
     const initialLunaStates : LunaState[] = []
-    const roundTurns = this.store.state.rounds.find(item => item.round==roundNo)?.turns ?? []
+    const roundTurns = this.state.rounds.find(item => item.round==roundNo)?.turns ?? []
     for (let bot=1; bot<=this.botCount; bot++) {
       const botTurns = roundTurns.filter(item => item.bot==bot)
       const lastTurn = getLastTurn(botTurns)