buy flower, make delivery

Author: stefanseifert

src/components/round/SideBar.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="sidebar">
     <div>
-      {{t('sideBar.round', {round})}}: <span class="fw-bold">{{t(`season.${season}`)}}</span><br/>
-      {{t('sideBar.turn', {turn})}}
+      <span class="fw-bold">{{t(`season.${season}`)}}</span> {{t('sideBar.round', {round})}}
 
       <hr/>
 

src/locales/en.json

@@ -33,6 +33,17 @@
     }
   },
   "roundTurnPlayer": {
+    "selectAction": "Select your action:",
+    "makeDelivery": "Make Delivery",
+    "deliveredToFloor": "Delivered to Floor ${floor}",
+    "otherAction": "Other Action",
+    "passConfirm": "Do you really want to pass?",
+    "buyFlower": {
+      "title": "Buy Flower",
+      "selectFlower": "Select Flower:",
+      "numberOfFlowers": "Number of Flowers:",
+      "totalCost": "Total Cost:"
+    },
     "passInfo": {
       "nextTurn": "Pass next turn",
       "billboard": "M{floor}"

src/util/NavigationState.ts

@@ -55,7 +55,7 @@ function getPlayerDeliveryFloor(round: number, turn: number, state: State) : num
 }
 
 function getFlowerPrices(round: number, turn: number, state: State) : FlowerPrice[] {
-  const prices = getTurns(round, turn, state).find(t => t.botPersistence)?.marketPrices
+  const prices = getTurns(round, turn, state)[0]?.marketPrices
   if (prices) {
     return prices
   }

src/util/getBuyFlowerCost.ts

@@ -0,0 +1,15 @@
+/**
+ * Calculates the total cost for buying flowers.
+ * The first flower costs the current price, each additional flower costs 1 more.
+ * The price per flower is never higher than 12.
+ * @param currentPrice Current market price
+ * @param count Number of flowers to buy
+ * @returns Total cost
+ */
+export default function getBuyFlowerCost(currentPrice: number, count: number) : number {
+  let total = 0
+  for (let i = 0; i < count; i++) {
+    total += Math.min(currentPrice + i, 12)
+  }
+  return total
+}

src/util/getSellFlowerRevenue.ts

@@ -0,0 +1,15 @@
+/**
+ * Calculates the total revenue for selling flowers.
+ * Before selling, the price is reduced by 1. Each additional flower sells for 1 less.
+ * The price per flower is never lower than 1.
+ * @param currentPrice Current market price
+ * @param count Number of flowers to sell
+ * @returns Total revenue
+ */
+export default function getSellFlowerRevenue(currentPrice: number, count: number) : number {
+  let total = 0
+  for (let i = 0; i < count; i++) {
+    total += Math.max(currentPrice - 1 - i, 1)
+  }
+  return total
+}

src/views/RoundTurnPlayer.vue

@@ -1,23 +1,23 @@
 <template>
   <SideBar :navigationState="navigationState"/>
-  <h1>{{t('player.player')}}</h1>
+  <h1>{{t('player.player')}}: {{t('sideBar.turn', {turn})}}</h1>
 
-  <p class="mt-4">Select your action:</p>
+  <p class="mt-4" v-html="t('roundTurnPlayer.selectAction')"/>
 
   <div class="actions">
     <button class="btn btn-primary btn-lg" v-if="!showDeliveryActions" @click="showDeliveryActions = true">
-      Make Delivery
+      {{t('roundTurnPlayer.makeDelivery')}}
     </button>
     <div class="deliveryActions" v-if="showDeliveryActions">
       <button class="btn btn-primary btn-lg" v-for="floor of floors" :key="floor" @click="deliverToFloor(floor)">
-        Delivered to Floor {{floor}}
+        {{t('roundTurnPlayer.deliveredToFloor', {floor})}}
       </button>
     </div>
-    <button class="btn btn-primary btn-lg" @click="next">
-      Buy Flower
+    <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#buyFlowerModal">
+      {{t('roundTurnPlayer.buyFlower.title')}}
     </button>
     <button class="btn btn-primary btn-lg" @click="next">
-      Other Action
+      {{t('roundTurnPlayer.otherAction')}}
     </button>
     <div>
       <button class="btn btn-outline-danger btn-lg passButton" data-bs-toggle="modal" data-bs-target="#passModal">
@@ -29,6 +29,31 @@
     </div>
   </div>
 
+  <ModalDialog id="buyFlowerModal" :title="t('roundTurnPlayer.buyFlower.title')">
+    <template #body>
+      <div>{{t('roundTurnPlayer.buyFlower.selectFlower')}}</div>
+      <div class="d-flex flex-wrap gap-2 mb-3">
+        <button v-for="flower in allFlowers" :key="flower" type="button"
+            class="btn flower-btn" :class="buyFlowerType === flower ? 'btn-dark' : 'btn-outline-secondary'"
+            @click="buyFlowerType = flower">
+          <FlowerIcon :flower="flower"/>
+        </button>
+      </div>
+      <div>
+        {{t('roundTurnPlayer.buyFlower.numberOfFlowers')}}<br/>
+        <NumberInput v-model="buyFlowerCount" :min="1" :max="20" class="numberInput"/>
+      </div>
+      <div class="mt-3">
+        <span>{{t('roundTurnPlayer.buyFlower.totalCost')}}</span>
+        <span class="cost">$<span class="value">{{buyFlowerTotalCost}}</span></span>
+      </div>
+    </template>
+    <template #footer>
+      <button class="btn btn-primary" :disabled="!buyFlowerType || !buyFlowerCount" @click="buyFlower()" data-bs-dismiss="modal">{{t('action.ok')}}</button>
+      <button class="btn btn-secondary" data-bs-dismiss="modal">{{t('action.cancel')}}</button>
+    </template>
+  </ModalDialog>
+
   <ModalDialog id="passModal" :title="t('action.pass')">
     <template #body>
       <p v-html="t('roundTurnPlayer.passConfirm')"></p>
@@ -52,19 +77,25 @@ import NavigationState from '@/util/NavigationState'
 import FooterButtons from '@/components/structure/FooterButtons.vue'
 import { useStateStore } from '@/store/state'
 import ModalDialog from '@brdgm/brdgm-commons/src/components/structure/ModalDialog.vue'
+import NumberInput from '@brdgm/brdgm-commons/src/components/form/NumberInput.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 FlowerIcon from '@/components/structure/FlowerIcon.vue'
 import Player from '@/services/enum/Player'
+import Flower from '@/services/enum/Flower'
+import getBuyFlowerCost from '@/util/getBuyFlowerCost'
 
 export default defineComponent({
   name: 'RoundTurnPlayer',
   components: {
     FooterButtons,
     ModalDialog,
+    NumberInput,
     SideBar,
     SoloBoardPassActionInfo,
+    FlowerIcon,
     DebugInfo
   },
   setup() {
@@ -78,8 +109,10 @@ export default defineComponent({
     
     const playerDeliveryFloor = ref(navigationState.playerDeliveryFloor)
     const showDeliveryActions = ref(false)
+    const buyFlowerType = ref(undefined as Flower|undefined)
+    const buyFlowerCount = ref(1)
 
-    return { t, router, navigationState, state, round, turn, playerDeliveryFloor, showDeliveryActions }
+    return { t, router, navigationState, state, round, turn, playerDeliveryFloor, showDeliveryActions, buyFlowerType, buyFlowerCount }
   },
   computed: {
     backButtonRouteTo() : string {
@@ -91,6 +124,13 @@ export default defineComponent({
     floors() : number[] {
       return [5,4,3,2,1]
     },
+    allFlowers() : Flower[] {
+      return this.navigationState.marketPrices.flowerOrder
+    },
+    buyFlowerTotalCost() : number {
+      const price = this.navigationState.marketPrices.getPrice(this.buyFlowerType!)
+      return getBuyFlowerCost(price, this.buyFlowerCount)
+    },
     soloBoardPassAction() : SoloBoardPassAction {
       const { soloBoard, playerTurns, playerDeliveryFloor } = this.navigationState
       return getSoloBoardPassAction(soloBoard, playerTurns, playerDeliveryFloor)
@@ -105,6 +145,13 @@ export default defineComponent({
       this.playerDeliveryFloor = floor
       this.next()
     },
+    buyFlower() : void {
+      if (this.buyFlowerType && this.buyFlowerCount) {
+        const newPrice = this.navigationState.marketPrices.getPrice(this.buyFlowerType) + this.buyFlowerCount
+        this.navigationState.marketPrices.setPrice(this.buyFlowerType, newPrice)
+        this.next()
+      }
+    },
     next() : void {
       this.nextWithPassed(false)
     },
@@ -153,4 +200,17 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
 }
+.flower-btn {
+  padding: 0.4rem 0.6rem;
+}
+.cost {
+  color: darkred;
+  margin-left: 0.25rem;
+  .value {
+    font-weight: bold;
+  }
+}
+.numberInput {
+  width: 4rem;
+}
 </style>

tests/unit/util/getBuyFlowerCost.spec.ts

@@ -0,0 +1,41 @@
+import getBuyFlowerCost from '@/util/getBuyFlowerCost'
+import { expect } from 'chai'
+
+describe('util/getBuyFlowerCost', () => {
+  it('buy 1 flower at price 5', () => {
+    expect(getBuyFlowerCost(5, 1)).to.eq(5)
+  })
+
+  it('buy 2 flowers at price 5', () => {
+    // 5 + 6 = 11
+    expect(getBuyFlowerCost(5, 2)).to.eq(11)
+  })
+
+  it('buy 3 flowers at price 5', () => {
+    // 5 + 6 + 7 = 18
+    expect(getBuyFlowerCost(5, 3)).to.eq(18)
+  })
+
+  it('buy 1 flower at price 1', () => {
+    expect(getBuyFlowerCost(1, 1)).to.eq(1)
+  })
+
+  it('price capped at 12', () => {
+    // price 11: 11 + 12 = 23
+    expect(getBuyFlowerCost(11, 2)).to.eq(23)
+  })
+
+  it('price capped at 12 for multiple flowers', () => {
+    // price 10: 10 + 11 + 12 + 12 = 45
+    expect(getBuyFlowerCost(10, 4)).to.eq(45)
+  })
+
+  it('buy at price 12', () => {
+    // 12 + 12 + 12 = 36
+    expect(getBuyFlowerCost(12, 3)).to.eq(36)
+  })
+
+  it('buy 0 flowers', () => {
+    expect(getBuyFlowerCost(5, 0)).to.eq(0)
+  })
+})

tests/unit/util/getSellFlowerRevenue.spec.ts

@@ -0,0 +1,45 @@
+import getSellFlowerRevenue from '@/util/getSellFlowerRevenue'
+import { expect } from 'chai'
+
+describe('util/getSellFlowerRevenue', () => {
+  it('sell 1 flower at price 5', () => {
+    // 5 - 1 = 4
+    expect(getSellFlowerRevenue(5, 1)).to.eq(4)
+  })
+
+  it('sell 2 flowers at price 5', () => {
+    // 4 + 3 = 7
+    expect(getSellFlowerRevenue(5, 2)).to.eq(7)
+  })
+
+  it('sell 3 flowers at price 5', () => {
+    // 4 + 3 + 2 = 9
+    expect(getSellFlowerRevenue(5, 3)).to.eq(9)
+  })
+
+  it('sell 1 flower at price 10', () => {
+    // 10 - 1 = 9
+    expect(getSellFlowerRevenue(10, 1)).to.eq(9)
+  })
+
+  it('revenue floored at 1', () => {
+    // price 2: sell 1 => 1, sell 2 => 1 (floored)
+    expect(getSellFlowerRevenue(2, 2)).to.eq(2)
+  })
+
+  it('revenue floored at 1 for multiple flowers', () => {
+    // price 3: 2 + 1 + 1 + 1 = 5
+    expect(getSellFlowerRevenue(3, 4)).to.eq(5)
+  })
+
+  it('sell at price 1', () => {
+    // price 1: each flower sells at max(0, 1) = 1
+    // Actually: max(1 - 1 - 0, 1) = max(0, 1) = 1
+    // max(1 - 1 - 1, 1) = max(-1, 1) = 1
+    expect(getSellFlowerRevenue(1, 3)).to.eq(3)
+  })
+
+  it('sell 0 flowers', () => {
+    expect(getSellFlowerRevenue(5, 0)).to.eq(0)
+  })
+})