display claimed milestones

Author: stefanseifert

src/components/round/BotClaimMilestones.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="row" v-for="milestone of milestones" :key="milestone">
+    <div class="col alert alert-danger">
+      {{t('botClaimMilestones.botClaim')}} <b>{{isFifthFloor(milestone) ? t('botClaimMilestones.fifthFloor') : t(`season.${milestone}`)}}</b>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Milestone from '@/services/enum/Milestone'
+
+export default defineComponent({
+  name: 'BotClaimMilestones',
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  props: {
+    milestones: {
+      type: Array as () => Milestone[],
+      required: true
+    }
+  },
+  methods: {
+    isFifthFloor(milestone: Milestone) : boolean {
+      return milestone === Milestone.FIFTH_FLOOR
+    }
+  }
+})
+</script>

src/locales/en.json

@@ -64,6 +64,10 @@
   "roundTurnBot": {
     "bonusActions": "Bonus Actions"
   },
+  "botClaimMilestones": {
+    "botClaim": "Lady Pei claims a milestone:",
+    "fifthFloor": "Fifth Floor"
+  },
   "sideBar": {
     "round": "Year {round}",
     "marketPrice": {

src/views/RoundTurnBot.vue

@@ -6,6 +6,8 @@
     <template v-else>{{navigationState.botTurn}} / {{navigationState.botTurns}}</template>
   </h1>
 
+  <BotClaimMilestones :milestones="navigationState.botClaimMilestones" v-if="navigationState.botClaimMilestones.length"/>
+
   <p>{{actions}}</p>
 
   <button class="btn btn-primary btn-lg mt-4" @click="next">
@@ -29,12 +31,14 @@ import DebugInfo from '@/components/round/DebugInfo.vue'
 import { CardAction } from '@/services/Card'
 import Player from '@/services/enum/Player'
 import Action from '@/services/enum/Action'
+import BotClaimMilestones from '@/components/round/BotClaimMilestones.vue'
 
 export default defineComponent({
   name: 'RoundTurnBot',
   components: {
     FooterButtons,
     SideBar,
+    BotClaimMilestones,
     DebugInfo
   },
   setup() {

src/views/RoundTurnPlayer.vue

@@ -2,6 +2,8 @@
   <SideBar :navigationState="navigationState"/>
   <h1>{{t('player.player')}}: {{navigationState.playerTurn}}</h1>
 
+  <BotClaimMilestones :milestones="navigationState.botClaimMilestones" v-if="navigationState.botClaimMilestones.length"/>
+
   <p class="mt-4" v-html="t('roundTurnPlayer.selectAction')"/>
 
   <div class="actions">
@@ -51,6 +53,7 @@ import PlayerBuyFlowerModal from '@/components/round/PlayerBuyFlowerModal.vue'
 import getSoloBoardPassAction, { SoloBoardPassAction } from '@/util/getSoloBoardPassAction'
 import SoloBoardPassActionInfo from '@/components/round/SoloBoardPassActionInfo.vue'
 import Player from '@/services/enum/Player'
+import BotClaimMilestones from '@/components/round/BotClaimMilestones.vue'
 
 export default defineComponent({
   name: 'RoundTurnPlayer',
@@ -60,6 +63,7 @@ export default defineComponent({
     SoloBoardPassActionInfo,
     PlayerBuyFlowerModal,
     PlayerPassSellFlowerModal,
+    BotClaimMilestones,
     DebugInfo
   },
   setup() {