From cd41012454d4faa35d3a159e266c61e690451f64 Mon Sep 17 00:00:00 2001
From: Stefan Seifert <stefanseifert@users.noreply.github.com>
Date: Sun, 29 Dec 2024 09:41:52 +0100
Subject: [PATCH] Small Improvements (#2)

- fix card age duration display
- add debug mode
- improve intro, setup and difficulty level descriptions
- persist tech card drafting
---
 src/components/round/DebugInfo.vue     | 71 ++++++++++++++++++++++++++
 src/components/round/TechCard.vue      |  7 ++-
 src/components/round/TechCardDraft.vue | 30 +++++++----
 src/locales/en.json                    | 18 ++++---
 src/store/state.ts                     |  2 +
 src/util/NavigationState.ts            | 32 +++++++++---
 src/views/PhaseADrafting.vue           |  6 ++-
 src/views/PhaseBProsperity.vue         |  6 ++-
 src/views/PhaseCIncome.vue             |  6 ++-
 src/views/PhaseDConstruction.vue       |  6 ++-
 src/views/PhaseEActions.vue            |  6 ++-
 src/views/PhaseFWar.vue                |  9 +++-
 src/views/PhaseGUpkeep.vue             |  6 ++-
 src/views/SetupBot.vue                 |  1 +
 14 files changed, 171 insertions(+), 35 deletions(-)
 create mode 100644 src/components/round/DebugInfo.vue

diff --git a/src/components/round/DebugInfo.vue b/src/components/round/DebugInfo.vue
new file mode 100644
index 0000000..6065c2b
--- /dev/null
+++ b/src/components/round/DebugInfo.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="mt-4" v-if="state.setup.debugMode">
+    <hr/>
+    <p class="debug">
+      <b>draftingRow</b>: <span v-html="getCardDeckInfo(draftingRow)"></span><br/>
+      <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/>
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useStateStore } from '@/store/state'
+import CardDeck from '@/services/CardDeck'
+import Card from '@/services/Card'
+import NavigationState from '@/util/NavigationState'
+import DraftingRowCard from '@/services/DraftingRowCard'
+import DraftingPriorityCard from '@/services/DraftingPriorityCard'
+import ConstructionCard from '@/services/ConstructionCard'
+import WarCard from '@/services/WarCard'
+
+export default defineComponent({
+  name: 'DebugInfo',
+  setup() {
+    const state = useStateStore()
+    return { state }
+  },
+  props: {
+    navigationState: {
+      type: NavigationState,
+      required: true
+    }
+  },
+  computed: {
+    draftingRow() : CardDeck<DraftingRowCard> {
+      return this.navigationState.botCards.draftingRow
+    },
+    draftingPriority() : CardDeck<DraftingPriorityCard> {
+      return this.navigationState.botCards.draftingPriority
+    },
+    construction() : CardDeck<ConstructionCard> {
+      return this.navigationState.botCards.construction
+    },
+    war() : CardDeck<WarCard> {
+      return this.navigationState.botCards.war
+    }
+  },
+  methods: {
+    getCardDeckInfo(deck: CardDeck<Card>) : string {
+      return `<i>pile</i>: ${deck.pile.map(this.getCardInfo)}, <i>discard</i>: ${deck.discard.map(this.getCardInfo)}`
+    },
+    getCardInfo(card: any) : string {  // eslint-disable-line @typescript-eslint/no-explicit-any
+      return '{' + Object.keys(card)
+          .filter(key => key !== 'id')
+          .map(key => `${key}: ${card[key]}`)
+          .join(',') + '}'
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.debug {
+  font-size: small;
+}
+p.debug, ul.debug {
+  margin: 0;
+}
+</style>
diff --git a/src/components/round/TechCard.vue b/src/components/round/TechCard.vue
index 11b6ded..87ce402 100644
--- a/src/components/round/TechCard.vue
+++ b/src/components/round/TechCard.vue
@@ -18,7 +18,7 @@
       <AppIcon name="prosperity-money" class="icon"/>
     </div>
     <div class="durations">
-      <div class="duration" v-for="age of getDuration(tech)" :key="age" :style="{'z-index':100-age}"><div>{{age}}</div></div>
+      <div class="duration" v-for="duration of getDuration(tech)" :key="duration" :style="{'z-index':100-duration}"><div>{{duration + round - 1}}</div></div>
     </div>
   </div>
 </template>
@@ -46,6 +46,11 @@ export default defineComponent({
       required: true
     }
   },
+  computed: {
+    round() : number {
+      return this.navigationState.round
+    }
+  },
   methods: {
     isArmy(tech: Tech) : boolean {
       return tech == Tech.ARMY
diff --git a/src/components/round/TechCardDraft.vue b/src/components/round/TechCardDraft.vue
index 79801d9..07cea92 100644
--- a/src/components/round/TechCardDraft.vue
+++ b/src/components/round/TechCardDraft.vue
@@ -59,9 +59,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Round, useStateStore } from '@/store/state'
+import { useStateStore } from '@/store/state'
 import NavigationState from '@/util/NavigationState'
 import TechCardSelection from '@/services/TechCardSelection'
 import Tech from '@/services/enum/Tech'
@@ -77,10 +77,16 @@ export default defineComponent({
     TechCard,
     AppIcon
   },
-  setup() {
+  setup(props) {
     const { t } = useI18n()
     const state = useStateStore()
-    return { t, state }
+
+    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)
+
+    return { t, state, roundData, botTechs, playerTechs, playerSpecialActions }
   },
   props: {
     navigationState: {
@@ -95,9 +101,6 @@ export default defineComponent({
   data() {
     return {
       removeAnimation: false,
-      botTechs: [] as Tech[],
-      playerTechs: [] as Tech[],
-      playerSpecialActions: 0,
       playerTurn: false
     }
   },
@@ -119,9 +122,6 @@ export default defineComponent({
     },
     playerIncomeLockedTotal() : number {
       return this.playerTechs.map(tech => this.techCardSelection.getIncome(tech)).filter(value => value == 5).reduce((a,b) => a+b, 0)
-    },
-    roundData() : Round {
-      return this.state.rounds.find(item => item.round == this.navigationState.round)!
     }
   },
   methods: {
@@ -143,6 +143,7 @@ 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) {
@@ -197,7 +198,7 @@ export default defineComponent({
       await this.nextTurn()
     },
     async reset() {
-      this.navigationState.techCardSelection.reset()
+      this.techCardSelection.reset()
       this.navigationState.botCards.draftingRow.reset()
       this.navigationState.botCards.draftingPriority.reset()
       this.roundData.nextStartPlayer = undefined
@@ -208,6 +209,7 @@ export default defineComponent({
       this.playerTechs = []
       this.playerSpecialActions = 0
 
+      this.persist()
       await this.nextTurn()
     },
     async next() {
@@ -219,6 +221,12 @@ export default defineComponent({
         this.playerTurn = false
         await this.nextTurn()
       }
+    },
+    persist() : void {
+      this.roundData.techCardSelection = this.techCardSelection.toPersistence()
+      this.roundData.botTechs = this.botTechs
+      this.roundData.playerTechs = this.playerTechs
+      this.roundData.playerSpecialActions = this.playerSpecialActions
     }
   },
   mounted() {
diff --git a/src/locales/en.json b/src/locales/en.json
index b620254..c3b1863 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3,7 +3,7 @@
   "home": {
     "title": "Millennia Solo Helper",
     "play1": "Play Millennia against Automa, the solo opponent.",
-    "play2": "This application replaces the Automa cards, and guides you through the game flow.",
+    "play2": "This application replaces the Automa cards, and guides you through the game flow. Additionally, it automates the tech card drafting and prosperity card selection.",
     "feedback": "Discussion and Feedback:"
   },
   "setup": {
@@ -24,9 +24,10 @@
     "title": "Setup Automa",
     "setup": {
       "gameBoard": "Setup the game the same way as a 2-player game.",
-      "techCards": "The tech cards and blank techs are randomized by the application, you are drafting them in the application against Automa.",
-      "playerColor": "Choose a player color for the automa. The automa only needs 2 track tokens.",
-      "trackTokens": "Place the automa track tokens on the <b>war track</b> and on the <b>VP track</b> (starting with 10 VP).",
+      "prosperityCards": "You do not need to set up the prosperity cards, they are managed and displayed by the application.",
+      "techCards": "The tech cards and blank techs are randomized by the application, you are drafting them in the application against Automa. After each tech drafting phase in the app, pick the cards your drafted from the stack of the corresponding age.",
+      "playerColor": "Choose a player color for the automa. The automa only needs 1 track marker and 1 VP marker.",
+      "trackTokens": "Place the automa markers on the <b>war track</b> and on the <b>VP track</b> (starting with 10 VP).",
       "startPlayer": {
         "player": "<b>You</b> are the start player. Take 10 Gold. Take the first player token.",
         "bot": "<b>Automa</b> is the start player. Give it the first player token."
@@ -41,7 +42,7 @@
       "noGold": "The automa never has or gains any gold.",
       "noActions": "The automa does not perform any actions in the action phase.",
       "onlyWarTrack": "The automa only promotes on the war track and the VP track but on no other tracks.",
-      "noVP": "The automa does not gain or lose any VP other than from the war phase."
+      "noVP": "The automa does not gain any VP other than from the war phase."
     }
   },
   "phaseADrafting": {
@@ -74,7 +75,8 @@
     "advance": "Automa advances {steps} steps on the war track.",
     "outmax": "If the automa maxes out the war track, it gains 1 VP per step beyond 7.",
     "resolve": "Then the war phase is resolved normally.",
-    "trackVP": "Track the VP the automa during the war phase on the VP track. "
+    "resolveLastRound": "<i>Last Round</i>: Do not reduce war power.",
+    "trackVP": "Track the VP the automa gains during the war phase on the VP track. "
   },
   "phaseGUpkeep": {
     "title": "G: Upkeep",
@@ -89,8 +91,8 @@
     "round": "Age {round}"
   },
   "difficultyLevel": {
-    "1": "Normal",
-    "2": "Hard"
+    "1": "Normal - without 5-step war cards",
+    "2": "Hard - all war cards"
   },
   "age": {
     "1": "Bronze age",
diff --git a/src/store/state.ts b/src/store/state.ts
index 401feed..59aaac8 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -50,7 +50,9 @@ export interface Round {
   techCardSelection: TechCardSelectionPersistence
   nextStartPlayer?: Player
   nextArchitectPlayer?: Player
+  botTechs?: Tech[]
   playerTechs?: Tech[]
+  playerSpecialActions?: number
 }
 
 export interface BotCardsPersistence {
diff --git a/src/util/NavigationState.ts b/src/util/NavigationState.ts
index aafcc50..ef0c031 100644
--- a/src/util/NavigationState.ts
+++ b/src/util/NavigationState.ts
@@ -1,4 +1,4 @@
-import { State } from '@/store/state'
+import { Round, State } 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,27 +10,43 @@ import TechCardSelection from '@/services/TechCardSelection'
 export default class NavigationState {
 
   readonly round : number
-
-  readonly startPlayer : Player
-  readonly architectPlayer : Player
   readonly prosperityCards : ProsperityCards
   readonly botCards : BotCards
   readonly rowPlaceholders : RowPlaceholders
   readonly techCardSelection : TechCardSelection
 
+  private readonly roundData : Round
+
   constructor(route: RouteLocation, state: State) {    
     this.round = getIntRouteParam(route, 'round')
 
-    const roundData = state.rounds.find(item => item.round === this.round)
+    let roundData = state.rounds.find(item => item.round === this.round)
     if (!roundData) {
-      throw new Error(`Round ${this.round} not found`)
+      // should never happen
+      const rowPlaceholders = RowPlaceholders.new()
+      roundData = {
+        round: this.round,
+        startPlayer: Player.PLAYER,
+        architectPlayer: Player.BOT,
+        prosperityCards: ProsperityCards.new().toPersistence(),
+        botCards: BotCards.new(state.setup.difficultyLevel).toPersistence(),
+        rowPlaceholders: rowPlaceholders.toPersistence(),
+        techCardSelection: TechCardSelection.new(rowPlaceholders.rows, this.round).toPersistence()
+      }
     }
-    this.startPlayer = roundData.nextStartPlayer ?? roundData.startPlayer
-    this.architectPlayer = roundData.nextArchitectPlayer ?? roundData.architectPlayer
+    this.roundData = roundData
     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)
   }
 
+  public get startPlayer() : Player {
+    return this.roundData.nextStartPlayer ?? this.roundData.startPlayer
+  }
+
+  public get architectPlayer() : Player {
+    return this.roundData.nextArchitectPlayer ?? this.roundData.architectPlayer
+  }
+
 }
diff --git a/src/views/PhaseADrafting.vue b/src/views/PhaseADrafting.vue
index 0d96730..25d1418 100644
--- a/src/views/PhaseADrafting.vue
+++ b/src/views/PhaseADrafting.vue
@@ -5,6 +5,8 @@
 
   <TechCardDraft :navigationState="navigationState" :nextButtonRouteTo="nextButtonRouteTo"/>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -17,13 +19,15 @@ import { useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
 import TechCardDraft from '@/components/round/TechCardDraft.vue'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseADrafting',
   components: {
     FooterButtons,
     SideBar,
-    TechCardDraft
+    TechCardDraft,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/PhaseBProsperity.vue b/src/views/PhaseBProsperity.vue
index 849c5ce..b27f7e9 100644
--- a/src/views/PhaseBProsperity.vue
+++ b/src/views/PhaseBProsperity.vue
@@ -9,6 +9,8 @@
     {{t('action.next')}}
   </button>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -20,12 +22,14 @@ import { useRoute } from 'vue-router'
 import { useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseBProsperity',
   components: {
     FooterButtons,
-    SideBar
+    SideBar,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/PhaseCIncome.vue b/src/views/PhaseCIncome.vue
index ae686b8..0090436 100644
--- a/src/views/PhaseCIncome.vue
+++ b/src/views/PhaseCIncome.vue
@@ -21,6 +21,8 @@
     {{t('action.next')}}
   </button>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -34,13 +36,15 @@ import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
 import Tech from '@/services/enum/Tech'
 import AppIcon from '@/components/structure/AppIcon.vue'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseCIncome',
   components: {
     FooterButtons,
     SideBar,
-    AppIcon
+    AppIcon,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/PhaseDConstruction.vue b/src/views/PhaseDConstruction.vue
index a2383c8..2e80542 100644
--- a/src/views/PhaseDConstruction.vue
+++ b/src/views/PhaseDConstruction.vue
@@ -5,6 +5,8 @@
 
   <ConstructionDraft :navigationState="navigationState" :nextButtonRouteTo="nextButtonRouteTo"/>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -17,13 +19,15 @@ import { useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
 import ConstructionDraft from '@/components/round/ConstructionDraft.vue'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseDConstruction',
   components: {
     FooterButtons,
     SideBar,
-    ConstructionDraft
+    ConstructionDraft,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/PhaseEActions.vue b/src/views/PhaseEActions.vue
index 47b3553..be956fa 100644
--- a/src/views/PhaseEActions.vue
+++ b/src/views/PhaseEActions.vue
@@ -9,6 +9,8 @@
     {{t('action.next')}}
   </button>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -20,12 +22,14 @@ import { useRoute } from 'vue-router'
 import { useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseEActions',
   components: {
     FooterButtons,
-    SideBar
+    SideBar,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/PhaseFWar.vue b/src/views/PhaseFWar.vue
index f89bb96..2812cab 100644
--- a/src/views/PhaseFWar.vue
+++ b/src/views/PhaseFWar.vue
@@ -13,6 +13,9 @@
     <li v-html="t('phaseFWar.advance', {steps:warTrackAdvanceSteps})"></li>
     <li v-html="t('phaseFWar.outmax')"></li>
     <li v-html="t('phaseFWar.resolve')"></li>
+    <ul v-if="round==8">
+      <li v-html="t('phaseFWar.resolveLastRound')"></li>
+    </ul>
     <li v-html="t('phaseFWar.trackVP')"></li>
   </ul>
 
@@ -20,6 +23,8 @@
     {{t('action.next')}}
   </button>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -32,13 +37,15 @@ import { useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
 import AppIcon from '@/components/structure/AppIcon.vue'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseFWar',
   components: {
     FooterButtons,
     SideBar,
-    AppIcon
+    AppIcon,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/PhaseGUpkeep.vue b/src/views/PhaseGUpkeep.vue
index 84ec3c3..ad1985b 100644
--- a/src/views/PhaseGUpkeep.vue
+++ b/src/views/PhaseGUpkeep.vue
@@ -9,6 +9,8 @@
     {{t('action.next')}}
   </button>
 
+  <DebugInfo :navigationState="navigationState"/>
+
   <FooterButtons :backButtonRouteTo="backButtonRouteTo" endGameButtonType="abortGame"/>
 </template>
 
@@ -21,12 +23,14 @@ import { Round, useStateStore } from '@/store/state'
 import SideBar from '@/components/round/SideBar.vue'
 import NavigationState from '@/util/NavigationState'
 import TechCardSelection from '@/services/TechCardSelection'
+import DebugInfo from '@/components/round/DebugInfo.vue'
 
 export default defineComponent({
   name: 'PhaseGUpkeep',
   components: {
     FooterButtons,
-    SideBar
+    SideBar,
+    DebugInfo
   },
   setup() {
     const { t } = useI18n()
diff --git a/src/views/SetupBot.vue b/src/views/SetupBot.vue
index a2e763e..c676843 100644
--- a/src/views/SetupBot.vue
+++ b/src/views/SetupBot.vue
@@ -8,6 +8,7 @@
       <li v-html="t('setupBot.setup.gameBoard')"></li>
       <ul>
         <li v-html="t('setupBot.setup.techCards')"></li>
+        <li v-html="t('setupBot.setup.prosperityCards')"></li>
       </ul>
       <li v-html="t('setupBot.setup.playerColor')"></li>
       <li v-html="t('setupBot.setup.trackTokens')"></li>