make delivery

Author: stefanseifert

src/components/round/SoloBoardPassActionInfo.vue

@@ -1,5 +1,6 @@
 <template>
-  <span v-if="income || actions || burnCardCount">: </span>
+  <span>:</span>
+  <span v-if="!(income || actions || burnCardCount)" class="noAction">-</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">
@@ -86,7 +87,10 @@ export default defineComponent({
   }
 }
 .burnCards {
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
   color: #000;
 }
+.noAction {
+  margin-left: 0.25rem;
+}
 </style>

src/views/RoundTurnPlayer.vue

@@ -5,29 +5,30 @@
   <p class="mt-4">Select your action:</p>
 
   <div class="actions">
-    <button class="btn btn-primary btn-lg" @click="next">
+    <button class="btn btn-primary btn-lg" v-if="!showDeliveryActions" @click="showDeliveryActions = true">
       Make Delivery
     </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}}
+      </button>
+    </div>
     <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">
+      <button class="btn btn-outline-danger btn-lg passButton" 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">
+      <div class="small mt-1 fst-italic passNextTurnInfo">
         <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>
-
   <ModalDialog id="passModal" :title="t('action.pass')">
     <template #body>
       <p v-html="t('roundTurnPlayer.passConfirm')"></p>
@@ -74,9 +75,11 @@ export default defineComponent({
 
     const navigationState = new NavigationState(route, state)
     const { round, turn } = navigationState
+    
     const playerDeliveryFloor = ref(navigationState.playerDeliveryFloor)
+    const showDeliveryActions = ref(false)
 
-    return { t, router, navigationState, state, round, turn, playerDeliveryFloor }
+    return { t, router, navigationState, state, round, turn, playerDeliveryFloor, showDeliveryActions }
   },
   computed: {
     backButtonRouteTo() : string {
@@ -85,6 +88,9 @@ export default defineComponent({
       }
       return ''
     },
+    floors() : number[] {
+      return [5,4,3,2,1]
+    },
     soloBoardPassAction() : SoloBoardPassAction {
       const { soloBoard, playerTurns, playerDeliveryFloor } = this.navigationState
       return getSoloBoardPassAction(soloBoard, playerTurns, playerDeliveryFloor)
@@ -95,6 +101,10 @@ export default defineComponent({
     }
   },
   methods: {
+    deliverToFloor(floor: number) : void {
+      this.playerDeliveryFloor = floor
+      this.next()
+    },
     next() : void {
       this.nextWithPassed(false)
     },
@@ -125,6 +135,22 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  max-width: 15rem;
+  max-width: 18rem;
+}
+.deliveryActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.passButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.passNextTurnInfo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>