Support Back Button in Tech Draft phase (instead of Reset button)

Author: stefanseifert

src/router/index.ts

@@ -38,6 +38,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'PhaseADrafting',
     component: PhaseADrafting
   },
+  {
+    path: '/round/:round/drafting/:step',
+    name: 'PhaseADraftingStep',
+    component: PhaseADrafting
+  },
   {
     path: '/round/:round/prosperity',
     name: 'PhaseBProsperity',

src/store/state.ts

@@ -52,6 +52,18 @@ export interface Round {
   botCards: BotCardsPersistence
   rowPlaceholders: RowPlaceholdersPersistence
   techCardSelection: TechCardSelectionPersistence
+  techDraftSteps?: TechDraftStep[]
+  // the following fields are deprecated, latest implementation uses the techDraftSteps field instead
+  nextStartPlayer?: Player
+  nextArchitectPlayer?: Player
+  botTechs?: Tech[]
+  playerTechs?: Tech[]
+  playerSpecialActions?: number
+}
+
+export interface TechDraftStep {
+  step: number
+  player: Player
   nextStartPlayer?: Player
   nextArchitectPlayer?: Player
   botTechs?: Tech[]

src/util/NavigationState.ts

@@ -1,4 +1,4 @@
-import { Round, State } from '@/store/state'
+import { Round, State, 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'
@@ -10,6 +10,7 @@ import TechCardSelection from '@/services/TechCardSelection'
 export default class NavigationState {
 
   readonly round : number
+  readonly draftingStep: number
   readonly prosperityCards : ProsperityCards
   readonly botCards : BotCards
   readonly rowPlaceholders : RowPlaceholders
@@ -19,6 +20,7 @@ export default class NavigationState {
 
   constructor(route: RouteLocation, state: State) {    
     this.round = getIntRouteParam(route, 'round')
+    this.draftingStep = getIntRouteParam(route, 'step')
 
     let roundData = state.rounds.find(item => item.round === this.round)
     if (!roundData) {
@@ -42,11 +44,17 @@ export default class NavigationState {
   }
 
   public get startPlayer() : Player {
-    return this.roundData.nextStartPlayer ?? this.roundData.startPlayer
+    return this.lastDraftStep?.nextStartPlayer ?? this.roundData.nextStartPlayer ?? this.roundData.startPlayer
   }
 
   public get architectPlayer() : Player {
-    return this.roundData.nextArchitectPlayer ?? this.roundData.architectPlayer
+    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]
+    }
   }
 
 }

tests/unit/helper/mockRound.ts

@@ -1,5 +1,5 @@
 import Player from '@/services/enum/Player'
-import { BotCardsPersistence, ProsperityCardsPersistence, Round, RowPlaceholdersPersistence, TechCardSelectionPersistence } from '@/store/state'
+import { BotCardsPersistence, ProsperityCardsPersistence, Round, RowPlaceholdersPersistence, TechCardSelectionPersistence, TechDraftStep } from '@/store/state'
 
 export default function mockRound(params?: MockRoundParams) : Round {
   const round : Round = {
@@ -15,6 +15,7 @@ export default function mockRound(params?: MockRoundParams) : Round {
     },
     rowPlaceholders: params?.rowPlaceholders ?? { rows: [] },
     techCardSelection: params?.techCardSelection ?? { techs: [], removedTechs: [] },
+    techDraftSteps: params?.techDraftSteps,
     nextStartPlayer: params?.nextStartPlayer,
     nextArchitectPlayer: params?.nextArchitectPlayer
   }
@@ -29,6 +30,8 @@ export interface MockRoundParams {
   botCards?: BotCardsPersistence
   rowPlaceholders?: RowPlaceholdersPersistence
   techCardSelection?: TechCardSelectionPersistence
+  techDraftSteps?: TechDraftStep[]
+  // deprecated fields, latest implementation uses the techDraftSteps field instead
   nextStartPlayer?: Player,
   nextArchitectPlayer?: Player,
 }

tests/unit/util/NavigationState.spec.ts

@@ -19,6 +19,23 @@ describe('util/NavigationState', () => {
   })
 
   it('nextStartArchitectPlayer', () => {
+    const route = mockRouteLocation({params:{round:'1',turn:'3'}})
+    const state = mockState({startPlayer:Player.BOT,rounds:[
+      mockRound({round:1,startPlayer:Player.BOT,architectPlayer:Player.PLAYER,
+        techDraftSteps:[  
+          { step: 0, player: Player.BOT },
+          { step: 1, player: Player.PLAYER, nextStartPlayer: Player.PLAYER },
+          { step: 2, player: Player.PLAYER, nextStartPlayer: Player.PLAYER, nextArchitectPlayer: Player.BOT },
+        ]})
+    ]})
+    const navigationState = new NavigationState(route, state)
+
+    expect(navigationState.round).to.eq(1)
+    expect(navigationState.startPlayer).to.eq(Player.PLAYER)
+    expect(navigationState.architectPlayer).to.eq(Player.BOT)
+  })
+
+  it('nextStartArchitectPlayer_oldPersistence', () => {
     const route = mockRouteLocation({params:{round:'1',turn:'3'}})
     const state = mockState({startPlayer:Player.BOT,rounds:[
       mockRound({round:1,startPlayer:Player.BOT,architectPlayer:Player.PLAYER,