implement back button

Author: stefanseifert

.vscode/settings.json

@@ -1 +1,5 @@
-{}
+{
+  "i18n-ally.localesPaths": [
+    "src/locales"
+  ]
+}

src/components/round/DebugInfo.vue

@@ -6,6 +6,7 @@
       <b>draftingPriority</b>: <span v-html="getCardDeckInfo(draftingPriority)"></span><br/>
       <b>construction</b>: <span v-html="getCardDeckInfo(construction)"></span><br/>
       <b>war</b>: <span v-html="getCardDeckInfo(war)"></span><br/>
+      <b>lastDraftStep</b>: {{navigationState.lastDraftStep}}<br/>
     </p>
   </div>
 </template>

src/components/round/TechCardDraft.vue

@@ -32,9 +32,6 @@
   <button class="btn btn-primary btn-lg me-3 mt-2" @click="next()">
     {{t('action.next')}}
   </button>
-  <button class="btn btn-outline-secondary btn-sm mt-2" @click="reset()">
-    {{t('action.reset')}}
-  </button>
 
   <div class="draftedCards">
     <div v-if="playerTechs.length > 0" class="mt-3">
@@ -50,13 +47,12 @@
       </div>
     </div>
   </div>
-
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStateStore } from '@/store/state'
+import { TechDraftStep, useStateStore } from '@/store/state'
 import NavigationState from '@/util/NavigationState'
 import TechCardSelection from '@/services/TechCardSelection'
 import Tech from '@/services/enum/Tech'
@@ -67,6 +63,7 @@ import TechCard from './TechCard.vue'
 import AppIcon from '../structure/AppIcon.vue'
 import TechCardsPlayerDraft from './TechCardsPlayerDraft.vue'
 import { useRouter } from 'vue-router'
+import { cloneDeep } from 'lodash'
 
 export default defineComponent({
   name: 'TechCardDraft',
@@ -81,11 +78,21 @@ export default defineComponent({
     const router = useRouter()
 
     const roundData = state.rounds.find(item => item.round == props.navigationState.round)!
-    const botTechs = ref(roundData.botTechs ?? [])
-    const playerTechs = ref(roundData.playerTechs ?? [])
-    const playerSpecialActions = ref(roundData.playerSpecialActions ?? 0)
+    const lastTechDraftStep = roundData.techDraftSteps?.find(item => item.step == props.navigationState.draftingStep - 1)
+    const botTechs = ref(lastTechDraftStep?.botTechs ?? [])
+    const playerTechs = ref(lastTechDraftStep?.playerTechs ?? [])
+    const playerSpecialActions = ref(lastTechDraftStep?.playerSpecialActions ?? 0)
+    const techDraftStep = ref({
+      round: props.navigationState.round,
+      step: props.navigationState.draftingStep,
+      nextStartPlayer: lastTechDraftStep?.nextStartPlayer,
+      nextArchitectPlayer: lastTechDraftStep?.nextArchitectPlayer,
+      botTechs: cloneDeep(lastTechDraftStep?.botTechs ?? []),
+      playerTechs: cloneDeep(lastTechDraftStep?.playerTechs ?? []),
+      playerSpecialActions: lastTechDraftStep?.playerSpecialActions ?? 0
+    } as TechDraftStep)
 
-    return { t, state, router, roundData, botTechs, playerTechs, playerSpecialActions }
+    return { t, state, router, roundData, techDraftStep, botTechs, playerTechs, playerSpecialActions }
   },
   props: {
     navigationState: {
@@ -145,21 +152,22 @@ export default defineComponent({
       await new Promise(resolve => setTimeout(resolve, 400))
       this.removeAnimation = false
       this.navigationState.techCardSelection.remove(tech)
-      this.persist()
     },
     async nextTurn() {
       if (this.draftingCompleted) {
         return
       }
       if (this.botMarkerPlaced < this.playerMarkerPlaced) {
         await this.nextTurnBot()
+        await this.nextTurn()
       }
       else if (this.playerMarkerPlaced < this.botMarkerPlaced) {
         await this.nextTurnPlayer()
       }
       else if (this.roundData.startPlayer == Player.BOT) {
         await this.nextTurnBot()
-      }
+        await this.nextTurn()
+    }
       else {
         await this.nextTurnPlayer()
       }
@@ -171,13 +179,12 @@ export default defineComponent({
       const tech = techCardSelection.determineTech(draftingRowCard, draftingPriorityCard, prosperityCards.current.flat())
       this.botTechs.push(tech)
       if (tech == Tech.ARMY) {
-        this.roundData.nextStartPlayer = Player.BOT
+        this.techDraftStep.nextStartPlayer = Player.BOT
       }
       if (tech == Tech.ENGINEERING) {
-        this.roundData.nextArchitectPlayer = Player.BOT
+        this.techDraftStep.nextArchitectPlayer = Player.BOT
       }
       await this.remove(tech)
-      await this.nextTurn()
     },
     async nextTurnPlayer() {
       this.playerTurn = true
@@ -192,30 +199,15 @@ export default defineComponent({
       }
       this.playerTurn = false
       this.playerTechs.push(t)
-      this.roundData.playerTechs = this.playerTechs
+      this.techDraftStep.playerTechs = this.playerTechs
       if (t == Tech.ARMY) {
-        this.roundData.nextStartPlayer = Player.PLAYER
+        this.techDraftStep.nextStartPlayer = Player.PLAYER
       }
       if (t == Tech.ENGINEERING) {
-        this.roundData.nextArchitectPlayer = Player.PLAYER
+        this.techDraftStep.nextArchitectPlayer = Player.PLAYER
       }
       await this.remove(t)
-      await this.nextTurn()
-    },
-    async reset() {
-      this.techCardSelection.reset()
-      this.navigationState.botCards.draftingRow.reset()
-      this.navigationState.botCards.draftingPriority.reset()
-      this.roundData.nextStartPlayer = undefined
-      this.roundData.nextArchitectPlayer = undefined
-      this.roundData.playerTechs = undefined
-
-      this.botTechs = []
-      this.playerTechs = []
-      this.playerSpecialActions = 0
-
-      this.persist()
-      await this.nextTurn()
+      await this.playerTurnCompleted()
     },
     async next() {
       if (this.draftingCompleted) {
@@ -224,15 +216,23 @@ export default defineComponent({
       else {
         this.playerSpecialActions++
         this.playerTurn = false
-        this.persist()
-        await this.nextTurn()
+        await this.playerTurnCompleted()
+      }
+    },
+    async playerTurnCompleted() {
+      // if player was first player, execute bot turn before going to next step
+      if (this.roundData.startPlayer == Player.PLAYER) {
+        await this.nextTurnBot()
       }
+      this.persistAndNextStep()
     },
-    persist() : void {
-      this.roundData.techCardSelection = this.techCardSelection.toPersistence()
-      this.roundData.botTechs = this.botTechs
-      this.roundData.playerTechs = this.playerTechs
-      this.roundData.playerSpecialActions = this.playerSpecialActions
+    persistAndNextStep() : void {
+      this.techDraftStep.techCardSelection = this.techCardSelection.toPersistence()
+      this.techDraftStep.botTechs = this.botTechs
+      this.techDraftStep.playerTechs = this.playerTechs
+      this.techDraftStep.playerSpecialActions = this.playerSpecialActions
+      this.state.storeTechDraftStep(this.techDraftStep)
+      this.router.push(`/round/${this.navigationState.round}/drafting/${this.techDraftStep.step+1}`)
     }
   },
   mounted() {

src/locales/de.json

@@ -130,8 +130,7 @@
     "backToHome": "Zurück zum Anfang",
     "back": "Zurück",
     "close": "Schließen",
-    "ok": "OK",
-    "reset": "Zurücksetzen"
+    "ok": "OK"
   },
   "footer": {
     "credits": "Credits"

src/locales/en.json

@@ -130,8 +130,7 @@
     "backToHome": "Back to Home",
     "back": "Back",
     "close": "Close",
-    "ok": "OK",
-    "reset": "Reset"
+    "ok": "OK"
   },
   "footer": {
     "credits": "Credits"

src/router/index.ts

@@ -35,12 +35,12 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/round/:round/drafting',
-    name: 'PhaseADrafting',
-    component: PhaseADrafting
+    // redirect to step 1 of drafting phase (route is kept for backward compatibility)
+    redirect: (to) => ({ name: 'PhaseADrafting', params: { round: to.params.round, step: '1' } })
   },
   {
     path: '/round/:round/drafting/:step',
-    name: 'PhaseADraftingStep',
+    name: 'PhaseADrafting',
     component: PhaseADrafting
   },
   {

src/services/TechCardSelection.ts

@@ -105,13 +105,6 @@ export default class TechCardSelection {
     throw new Error('Tech card not found.')
   }
 
-  /**
-   * Resets the removed tech cards.
-   */
-  public reset() : void {
-    this._removedTechs.value = []
-  }
-
   /**
    * Creates a selection of techs in 4 ros respecting the placeholder rows.
    */

src/store/state.ts

@@ -25,6 +25,13 @@ export const useStateStore = defineStore(`${name}.state`, {
     storeRound(round : Round) {
       this.rounds = this.rounds.filter(item => item.round < round.round)
       this.rounds.push(round)
+    },
+    storeTechDraftStep(techDraftStep : TechDraftStep) {
+      const round = this.rounds.find(item => item.round == techDraftStep.round)
+      if (round) {
+        round.techDraftSteps = (round.techDraftSteps ?? []).filter(item => item.step < techDraftStep.step)
+        round.techDraftSteps.push(techDraftStep)
+      }
     }
   },
   persist: true
@@ -51,24 +58,26 @@ export interface Round {
   prosperityCards: ProsperityCardsPersistence
   botCards: BotCardsPersistence
   rowPlaceholders: RowPlaceholdersPersistence
-  techCardSelection: TechCardSelectionPersistence
+  initialTechCardSelection?: TechCardSelectionPersistence
   techDraftSteps?: TechDraftStep[]
-  // the following fields are deprecated, latest implementation uses the techDraftSteps field instead
+  // the following fields are deprecated, latest implementation uses the initialTechCardSelection and techDraftSteps fields instead
   nextStartPlayer?: Player
   nextArchitectPlayer?: Player
   botTechs?: Tech[]
   playerTechs?: Tech[]
   playerSpecialActions?: number
+  techCardSelection?: TechCardSelectionPersistence
 }
 
 export interface TechDraftStep {
+  round: number
   step: number
-  player: Player
+  techCardSelection: TechCardSelectionPersistence
   nextStartPlayer?: Player
   nextArchitectPlayer?: Player
-  botTechs?: Tech[]
-  playerTechs?: Tech[]
-  playerSpecialActions?: number
+  botTechs: Tech[]
+  playerTechs: Tech[]
+  playerSpecialActions: number
 }
 
 export interface BotCardsPersistence {

src/util/NavigationState.ts

@@ -1,4 +1,4 @@
-import { Round, State, TechDraftStep } from '@/store/state'
+import { Round, State, TechCardSelectionPersistence, TechDraftStep } from '@/store/state'
 import { RouteLocation } from 'vue-router'
 import getIntRouteParam from '@brdgm/brdgm-commons/src/util/router/getIntRouteParam'
 import Player from '@/services/enum/Player'
@@ -17,6 +17,7 @@ export default class NavigationState {
   readonly techCardSelection : TechCardSelection
 
   private readonly roundData : Round
+  readonly lastDraftStep? : TechDraftStep
 
   constructor(route: RouteLocation, state: State) {    
     this.round = getIntRouteParam(route, 'round')
@@ -33,14 +34,14 @@ export default class NavigationState {
         prosperityCards: ProsperityCards.new().toPersistence(),
         botCards: BotCards.new(state.setup.difficultyLevel).toPersistence(),
         rowPlaceholders: rowPlaceholders.toPersistence(),
-        techCardSelection: TechCardSelection.new(rowPlaceholders.rows, this.round).toPersistence()
       }
     }
     this.roundData = roundData
+    this.lastDraftStep = this.getLastDraftStep()
     this.prosperityCards = ProsperityCards.fromPersistence(roundData.prosperityCards)
     this.botCards = BotCards.fromPersistence(roundData.botCards)
     this.rowPlaceholders = RowPlaceholders.fromPersistence(roundData.rowPlaceholders)
-    this.techCardSelection = TechCardSelection.fromPersistence(roundData.techCardSelection, this.round)
+    this.techCardSelection = TechCardSelection.fromPersistence(this.getTechCardSelectionPersistence(), this.round)
   }
 
   public get startPlayer() : Player {
@@ -51,10 +52,25 @@ export default class NavigationState {
     return this.lastDraftStep?.nextArchitectPlayer ?? this.roundData.nextArchitectPlayer ?? this.roundData.architectPlayer
   }
 
-  private get lastDraftStep() : TechDraftStep|undefined {
-    if (this.roundData.techDraftSteps) {
-      return this.roundData.techDraftSteps.toSorted((a, b) => a.step - b.step)[this.roundData.techDraftSteps.length - 1]
+  private getLastDraftStep() : TechDraftStep | undefined {
+    const techDraftSteps = (this.roundData.techDraftSteps?.toSorted((a, b) => a.step - b.step) ?? [])
+        .filter(item => item.step < this.draftingStep || this.draftingStep == 0)
+    return techDraftSteps[techDraftSteps.length - 1]
+  }
+
+  private getTechCardSelectionPersistence() : TechCardSelectionPersistence {
+    if (this.lastDraftStep?.techCardSelection) {
+      return this.lastDraftStep?.techCardSelection
+    }
+    if (this.roundData.initialTechCardSelection) {
+      return this.roundData.initialTechCardSelection
+    }
+    if (this.roundData.techCardSelection) {
+      // backward compatibility with old implementation; reset selection to restart draft
+      return { techs: this.roundData.techCardSelection.techs, removedTechs: [] }
     }
+    // should never happen
+    return TechCardSelection.new(this.rowPlaceholders.rows, this.round).toPersistence()
   }
 
 }

src/views/PhaseADrafting.vue

@@ -35,15 +35,18 @@ export default defineComponent({
     const state = useStateStore()
 
     const navigationState = new NavigationState(route, state)
-    const { round } = navigationState
+    const { round, draftingStep } = navigationState
 
-    return { t, state, navigationState, round }
+    return { t, state, navigationState, round, draftingStep, route }
   },
   computed: {
     nextButtonRouteTo() : string {
       return `/round/${this.round}/prosperity`
     },
     backButtonRouteTo() : string {
+      if (this.draftingStep > 1) {
+        return `/round/${this.round}/drafting/${this.draftingStep-1}`
+      }
       if (this.round > 1) {
         return `/round/${this.round-1}/upkeep`
       }