pass info

Author: stefanseifert

src/components/round/DebugInfo.vue

@@ -4,6 +4,7 @@
     <p class="debug">
       <b>Card Deck</b>: {{ navigationState.cardDeck.toPersistence() }}<br/>
       <b>Bot Garden</b>: {{ navigationState.botGarden.toPersistence() }}<br/>
+      <b>Player Turns:</b> {{ navigationState.playerTurns }}, <b>Delivery Floor:</b> {{ navigationState.playerDeliveryFloor }}<br/>
     </p>
   </div>
 </template>

src/components/round/SideBar.vue

@@ -146,10 +146,10 @@ export default defineComponent({
   margin-bottom: 0.25rem;
   .price {
     &.buy {
-      color: darkgreen;
+      color: darkred;
     }
     &.sell {
-      color: red;
+      color: darkgreen;
     }
     .value {
       font-weight: bold;

src/components/round/SoloBoardPassActionInfo.vue

@@ -0,0 +1,92 @@
+<template>
+  <span v-if="income || actions || burnCardCount">: </span>
+  <span v-if="income"><span class="income">$<span class="value">{{income}}</span></span></span>
+  <div class="actions">
+    <template v-for="action of actions" :key="action">
+      <span v-if="isBillboardAction(action)" class="billboard">{{t('roundTurnPlayer.passInfo.billboard', {floor})}}</span>
+      <AppIcon v-else type="action" :name="action" class="icon" :class="{small}"/>
+    </template>
+  </div>
+  <div class="burnCards" v-if="burnCardCount">
+    {{ burnCardCount }}✕
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStateStore } from '@/store/state'
+import getSoloBoardPassAction from '@/util/getSoloBoardPassAction'
+import Action from '@/services/enum/Action'
+import AppIcon from '../structure/AppIcon.vue'
+
+export default defineComponent({
+  name: 'SoloBoardPassActionInfo',
+  components: {
+    AppIcon
+  },
+  setup() {
+    const { t } = useI18n()
+    const state = useStateStore()
+    return { t, state }
+  },
+  props: {
+    soloBoardPassAction: {
+      type: Object as () => ReturnType<typeof getSoloBoardPassAction>,
+      required: true
+    },
+    small: {
+      type: Boolean,
+      required: false
+    }
+  },
+  computed: {
+    income() : number|undefined {
+      return this.soloBoardPassAction.income == 0 ? undefined : this.soloBoardPassAction.income
+    },
+    actions() : Action[]|undefined {
+      return this.soloBoardPassAction.action.length == 0 ? undefined : this.soloBoardPassAction.action
+    },
+    burnCardCount() : number|undefined {
+      return this.soloBoardPassAction.botBurnCardCount == 0 ? undefined : this.soloBoardPassAction.botBurnCardCount
+    },
+    floor() : number {
+      return this.soloBoardPassAction.floor
+    }
+  },
+  methods: {
+    isBillboardAction(action : Action) : boolean {
+      return action == Action.BILLBOARD
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.income {
+  margin-left: 0.25rem;
+  color: darkgreen;
+  .value {
+    font-weight: bold;
+  }
+}
+.actions {
+  display: inline-flex;
+  margin-left: 0.5rem;
+  gap: 0.25rem;
+  .icon {
+    height: 1.25rem;
+    &.small {
+      height: 1rem;
+    }
+  }
+  .billboard {
+    font-weight: bold;
+    color: #000;
+  }
+}
+.burnCards {
+  margin-left: 0.5rem;
+  color: #000;
+}
+</style>

src/locales/en.json

@@ -32,6 +32,12 @@
       "validationHint": "Please select the flower colors you planted in your garden."
     }
   },
+  "roundTurnPlayer": {
+    "passInfo": {
+      "nextTurn": "Pass next turn",
+      "billboard": "M{floor}"
+    }
+  },
   "sideBar": {
     "round": "Year {round}",
     "turn": "Turn {turn}",

src/services/SoloBoard.ts

@@ -1,7 +1,8 @@
 import Action from './enum/Action'
+import BotMode from './enum/BotMode'
 
 export default interface SoloBoard {
-  id: string
+  id: BotMode
   floorActions: FloorActions[]
   // index = number of actions taken by user
   botCardCount: number[]

src/services/SoloBoards.ts

@@ -1,13 +1,14 @@
 import findMandatory from '@brdgm/brdgm-commons/src/util/map/findMandatory'
 import SoloBoard from './SoloBoard'
 import Action from './enum/Action'
+import BotMode from './enum/BotMode'
 
 /**
  * Solo boards
  */
 const soloBoards : SoloBoard[] = [
   {
-    id: 'base',
+    id: BotMode.BASE,
     floorActions: [
       {
         floor: 5,
@@ -68,7 +69,7 @@ const soloBoards : SoloBoard[] = [
     botCardCount: [2, 3, 4, 4, 5, 5]
   },
   {
-    id: 'advanced',
+    id: BotMode.ADVANCED,
     floorActions: [
       {
         floor: 5,
@@ -130,7 +131,7 @@ const soloBoards : SoloBoard[] = [
   }
 ]
 
-const soloBoardsMap = new Map<string,SoloBoard>()
+const soloBoardsMap = new Map<BotMode,SoloBoard>()
 for (const soloBoard of soloBoards) {
   soloBoardsMap.set(soloBoard.id, soloBoard)
 }
@@ -142,7 +143,7 @@ export default {
    * @param id ID
    * @returns Solo board
    */
-  get(id: string) : SoloBoard {
+  get(id: BotMode) : SoloBoard {
     return findMandatory(soloBoardsMap, id)
   },
 

src/util/NavigationState.ts

@@ -7,25 +7,36 @@ import BotGarden from '@/services/BotGarden'
 import getAllEnumValues from '@brdgm/brdgm-commons/src/util/enum/getAllEnumValues'
 import Flower from '@/services/enum/Flower'
 import MarketPrices from '@/services/MarketPrices'
+import Player from '@/services/enum/Player'
+import SoloBoard from '@/services/SoloBoard'
+import SoloBoards from '@/services/SoloBoards'
 
 export default class NavigationState {
 
   readonly round : number
   readonly turn : number
   readonly season : Season
 
+  readonly playerTurns: number
+  readonly playerDeliveryFloor: number
+
   readonly marketPrices : MarketPrices
   readonly cardDeck : CardDeck
   readonly botGarden : BotGarden
+  readonly soloBoard : SoloBoard
 
   constructor(route: RouteLocation, state: State) {    
     this.round = getIntRouteParam(route, 'round')
     this.season = getSeason(this.round, state)
     this.turn = getIntRouteParam(route, 'turn')
 
+    this.playerTurns = getPlayerTurns(this.round, this.turn, state)
+    this.playerDeliveryFloor = getPlayerDeliveryFloor(this.round, this.turn, state)
+
     this.marketPrices = MarketPrices.fromPersistence(getFlowerPrices(this.round, this.turn, state))
     this.cardDeck = CardDeck.fromPersistence(getBotPersistence(this.round, this.turn, state).cardDeck)
     this.botGarden = BotGarden.fromPersistence(getBotPersistence(this.round, this.turn, state).garden, this.marketPrices.flowerOrder)
+    this.soloBoard = SoloBoards.get(state.setup.botMode)
   }
 
 }
@@ -35,6 +46,14 @@ function getSeason(round: number, state: State) : Season {
   return roundData ? roundData.season : Season.AUTUMN
 }
 
+function getPlayerTurns(round: number, turn: number, state: State) : number {
+  return getTurns(round, turn, state).filter(t => t.player == Player.PLAYER).length
+}
+
+function getPlayerDeliveryFloor(round: number, turn: number, state: State) : number {
+  return getTurns(round, turn, state).find(t => t.player == Player.PLAYER)?.playerDeliveryFloor ?? 1
+}
+
 function getFlowerPrices(round: number, turn: number, state: State) : FlowerPrice[] {
   const prices = getTurns(round, turn, state).find(t => t.botPersistence)?.marketPrices
   if (prices) {

src/util/getSoloBoardPassAction.ts

@@ -0,0 +1,37 @@
+import Action from '@/services/enum/Action'
+import SoloBoard from '@/services/SoloBoard'
+
+/**
+ * Get bot actions, income and bot card count from solo board when player passes.
+ */
+export default function getSoloBoardPassAction(soloBoard: SoloBoard, playerTurns: number, playerDeliveryFloor: number) : SoloBoardPassAction {
+  let turnsUpTo5 = playerTurns
+  let turnsBeyond5 = 0
+  if (playerTurns > 5) {
+    turnsUpTo5 = 5
+    turnsBeyond5 = playerTurns - 5
+  }
+
+  const floorActions = soloBoard.floorActions.find(floorAction => floorAction.floor === playerDeliveryFloor)
+  const income = floorActions?.floorAction[turnsUpTo5]?.income ?? 0
+  const action = floorActions?.floorAction[turnsUpTo5]?.action ?? []
+  const botCardCount = soloBoard.botCardCount[turnsUpTo5] ?? 0
+  const botBurnCardCount = turnsBeyond5 * 3
+  const floor = playerDeliveryFloor
+
+  return {
+    income,
+    action,
+    botCardCount,
+    botBurnCardCount,
+    floor
+  }
+}
+
+export interface SoloBoardPassAction {
+  income: number
+  action: Action[]
+  botCardCount: number
+  botBurnCardCount: number
+  floor: number
+}

src/views/RoundTurnPlayer.vue

@@ -2,14 +2,31 @@
   <SideBar :navigationState="navigationState"/>
   <h1>{{t('player.player')}}</h1>
 
-  <p class="mt-4" v-html="t('roundTurnPlayer.execute')"></p>
+  <p class="mt-4">Select your action:</p>
+
+  <div class="actions">
+    <button class="btn btn-primary btn-lg" @click="next">
+      Make Delivery
+    </button>
+    <button class="btn btn-primary btn-lg" @click="next">
+      Buy Flower
+    </button>
+    <button class="btn btn-primary btn-lg" @click="next">
+      Other Action
+    </button>
+    <div>
+      <button class="btn btn-outline-danger btn-lg w-100 d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#passModal">
+        {{t('action.pass')}}<SoloBoardPassActionInfo :soloBoardPassAction="soloBoardPassAction"/>
+      </button>
+      <div class="small mt-1 fst-italic d-flex align-items-center">
+        <span>{{t('roundTurnPlayer.passInfo.nextTurn')}}</span><SoloBoardPassActionInfo :soloBoardPassAction="soloBoardPassActionNextTurn" :small="true"/>
+      </div>
+    </div>
+  </div>
 
   <button class="btn btn-primary btn-lg mt-4" @click="next">
     {{t('action.next')}}
   </button>
-  <button class="btn btn-outline-danger btn-lg mt-4 ms-2" data-bs-toggle="modal" data-bs-target="#passModal">
-    {{t('action.pass')}}
-  </button>
 
   <ModalDialog id="passModal" :title="t('action.pass')">
     <template #body>
@@ -27,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import NavigationState from '@/util/NavigationState'
@@ -36,13 +53,17 @@ import { useStateStore } from '@/store/state'
 import ModalDialog from '@brdgm/brdgm-commons/src/components/structure/ModalDialog.vue'
 import SideBar from '@/components/round/SideBar.vue'
 import DebugInfo from '@/components/round/DebugInfo.vue'
+import getSoloBoardPassAction, { SoloBoardPassAction } from '@/util/getSoloBoardPassAction'
+import SoloBoardPassActionInfo from '@/components/round/SoloBoardPassActionInfo.vue'
+import Player from '@/services/enum/Player'
 
 export default defineComponent({
   name: 'RoundTurnPlayer',
   components: {
     FooterButtons,
     ModalDialog,
     SideBar,
+    SoloBoardPassActionInfo,
     DebugInfo
   },
   setup() {
@@ -53,15 +74,24 @@ export default defineComponent({
 
     const navigationState = new NavigationState(route, state)
     const { round, turn } = navigationState
+    const playerDeliveryFloor = ref(navigationState.playerDeliveryFloor)
 
-    return { t, router, navigationState, state, round, turn }
+    return { t, router, navigationState, state, round, turn, playerDeliveryFloor }
   },
   computed: {
     backButtonRouteTo() : string {
       if (this.turn > 1) {
         return `/round/${this.round}/turn/${this.turn - 1}/player`
       }
       return ''
+    },
+    soloBoardPassAction() : SoloBoardPassAction {
+      const { soloBoard, playerTurns, playerDeliveryFloor } = this.navigationState
+      return getSoloBoardPassAction(soloBoard, playerTurns, playerDeliveryFloor)
+    },
+    soloBoardPassActionNextTurn() : SoloBoardPassAction {
+      const { soloBoard, playerTurns, playerDeliveryFloor } = this.navigationState
+      return getSoloBoardPassAction(soloBoard, playerTurns + 1, playerDeliveryFloor)
     }
   },
   methods: {
@@ -72,6 +102,13 @@ export default defineComponent({
       this.nextWithPassed(true)
     },
     nextWithPassed(passed : boolean) {
+      this.state.storeRoundTurn({
+        round: this.round,
+        turn: this.turn,
+        player: Player.PLAYER,
+        marketPrices: this.navigationState.marketPrices.toPersistence(),
+        playerDeliveryFloor: this.playerDeliveryFloor
+      })
       if (passed) {
         this.router.push(`/round/${this.round}/turn/${this.turn + 1}/bot`)
       }
@@ -82,3 +119,12 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 15rem;
+}
+</style>