Solo Board Overview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brdgm/bloomworks-solo-helper",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "description": "Bloomworks Solo Helper",
   "appDeployName": "bloomworks",

src/components/round/SoloBoardOverviewCellContent.vue

@@ -0,0 +1,57 @@
+<template>
+  <template v-if="floorAction">
+    <span class="text-nowrap income" v-if="floorAction.income">${{floorAction.income}}</span>
+    <span class="text-nowrap" v-if="floorAction.action">
+      <template v-for="action of floorAction.action" :key="action">
+        <span v-if="isBillboardAction(action)" class="billboard">M{{floor}}</span>
+        <AppIcon v-else type="action" :name="action" class="icon"/>
+      </template>
+    </span>
+  </template>
+  <span v-else class="text-muted">-</span>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { FloorAction } from '@/services/SoloBoard'
+import Action from '@/services/enum/Action'
+import AppIcon from '../structure/AppIcon.vue'
+
+export default defineComponent({
+  name: 'SoloBoardOverviewCellContent',
+  components: {
+    AppIcon
+  },
+  props: {
+    floorAction: {
+      type: Object as PropType<FloorAction>,
+      required: false
+    },
+    floor: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    isBillboardAction(action: Action) : boolean {
+      return action === Action.BILLBOARD
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.income {
+  color: darkgreen;
+  font-weight: bold;
+  margin-right: 0.25rem;
+}
+.icon {
+  height: 1rem;
+  margin-left: 0.15rem;
+}
+.billboard {
+  font-weight: bold;
+  margin-left: 0.15rem;
+}
+</style>

src/components/round/SoloBoardOverviewModal.vue

@@ -0,0 +1,114 @@
+<template>
+  <ModalDialog id="soloBoardOverviewModal" :title="t('soloBoardOverview.title')" :sizeLg="true"  :fullscreenMdDown="true">
+    <template #body>
+      <table class="table table-bordered table-sm solo-board-table">
+        <thead>
+          <tr>
+            <th scope="row">{{t('soloBoardOverview.playerTurns')}}</th>
+            <th v-for="turn in turns" :key="turn" class="turnCount" scope="col">{{turn}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="floorActions in sortedFloorActions" :key="floorActions.floor">
+            <th class="floor-cell" scope="row">{{floorActions.floor}}</th>
+            <td v-for="turn in turns" :key="turn" class="cell"
+                :class="{active: turn === playerTurns && floorActions.floor === playerDeliveryFloor}">
+              <CellContent :floorAction="floorActions.floorAction[turn]" :floor="floorActions.floor"/>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr class="bot-card-row">
+            <th class="fw-bold" scope="row">{{t('soloBoardOverview.botCards')}}</th>
+            <th v-for="turn in turns" :key="turn" scope="col">
+              {{soloBoard.botCardCount[turn]}}
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+    </template>
+  </ModalDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ModalDialog from '@brdgm/brdgm-commons/src/components/structure/ModalDialog.vue'
+import SoloBoard, { FloorActions } from '@/services/SoloBoard'
+import CellContent from './SoloBoardOverviewCellContent.vue'
+
+export default defineComponent({
+  name: 'SoloBoardOverviewModal',
+  components: {
+    ModalDialog,
+    CellContent
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  props: {
+    soloBoard: {
+      type: Object as PropType<SoloBoard>,
+      required: true
+    },
+    playerTurns: {
+      type: Number,
+      required: true
+    },
+    playerDeliveryFloor: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    turns() : number[] {
+      return [0, 1, 2, 3, 4, 5]
+    },
+    sortedFloorActions() : FloorActions[] {
+      return [...this.soloBoard.floorActions].sort((a, b) => b.floor - a.floor)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.solo-board-table {
+  font-size: 0.85rem;
+  th, td {
+    border-color: #000;
+    text-align: center;
+    vertical-align: middle;
+    height: 3rem;
+  }
+  thead th {
+    background-color: #e7c5de;
+    &:first-child {
+      background-color: #ce82b7;
+    }
+  }
+  tfoot th {
+    background-color: #d4eace;
+    &:first-child {
+      background-color: #abd8aa;
+    }
+  }
+  .floor-cell {
+    background-color: #f0f0f0;
+    width: 3rem;
+  }
+  .cell {
+    vertical-align: middle;
+  }
+  .active {
+    background-color: #fff3cd;
+    font-weight: bold;
+  }
+  .bot-card-row td {
+    background-color: #f8f9fa;
+  }
+  .turnCount {
+    width: 15%;
+  }
+}
+</style>

src/locales/en.json

@@ -1,5 +1,10 @@
 {
   "gameTitle": "Bloomworks",
+  "soloBoardOverview": {
+    "title": "Solo Board Overview",
+    "playerTurns": "Player Turns",
+    "botCards": "Pei Draws"
+  },
   "home": {
     "title": "Bloomworks Solo Helper",
     "play1": "Play <a href='https://boardgamegeek.com/boardgame/462920/bloomworks' target='_blank' rel='noopener'><b>Bloomworks</b></a> against Lady Pei, the solo opponent.",