Merge branch 'release/1.0.1'

brdgm · Mar 23, 2023 · 080f901 · 080f901
2 parents 33a0e8c + 3617408
commit 080f901
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@brdgm/autobahn-solo-helper",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "description": "Autobahn Solo Helper",
   "scripts": {

diff --git a/src/assets/icons/bonus-tile.png b/src/assets/icons/bonus-tile.png
diff --git a/src/components/turn/BotStatus.vue b/src/components/turn/BotStatus.vue
@@ -1,48 +1,54 @@
 <template>
   <div class="bot-status">
-    <h5 v-html="t('botStatus.title')"></h5>
+    <h5 class="title" v-html="t('botStatus.title')"></h5>
 
-    <h6 v-html="t('botStatus.taskQueue')"></h6>
-    <template v-if="taskCardDeck.isQueueEmpty()">
-      <div class="none text-muted" v-html="t('botStatus.empty')"></div>
-    </template>
-    <template v-else>
-      <AppIcon v-for="taskCard of taskCardDeck.queue" :key="taskCard.id"
-          type="action" :name="taskCard.action" class="action-icon"/>
-    </template>
-
-    <h6 v-html="t('botStatus.taskPile')"></h6>
-    <template v-if="taskCardDeck.isPileEmpty()">
-      <div class="none text-muted" v-html="t('botStatus.empty')"></div>
-    </template>
-    <template v-else>
-      <AppIcon v-for="index of taskCardDeck.pile.length" :key="index"
-          type="action" name="unknown" class="action-icon"/>
-    </template>
+    <div class="status-details mb-2">
+      <h6 v-html="t('botStatus.taskQueue')"></h6>
+      <template v-if="taskCardDeck.isQueueEmpty()">
+        <div class="none text-muted" v-html="t('botStatus.empty')"></div>
+      </template>
+      <template v-else>
+        <AppIcon v-for="taskCard of taskCardDeck.queue" :key="taskCard.id"
+            type="action" :name="taskCard.action" class="action-icon"/>
+      </template>
 
-    <h6 v-html="t('botStatus.usedColors')"></h6>
-    <template v-if="colorCardDeck.isUsedEmpty()">
-      <div class="none text-muted" v-html="t('botStatus.none')"></div>
-    </template>
-    <template v-else>
-      <AutobahnColorCard v-for="(colorCard, index) of colorCardDeck.used" :key="index"
-        :color-card="colorCard" class="color-card"/>
-    </template>
+      <h6 v-html="t('botStatus.taskPile')"></h6>
+      <template v-if="taskCardDeck.isPileEmpty()">
+        <div class="none text-muted" v-html="t('botStatus.empty')"></div>
+      </template>
+      <template v-else>
+        <AppIcon v-for="index of taskCardDeck.pile.length" :key="index"
+            type="action" name="unknown" class="action-icon"/>
+      </template>
 
-    <h6 v-html="t('botStatus.usedTasks')"></h6>
-    <template v-if="taskCardDeck.isUsedEmpty()">
-      <div class="none text-muted" v-html="t('botStatus.none')"></div>
-    </template>
-    <template v-else>
-      <AppIcon v-for="taskCard of taskCardDeck.used" :key="taskCard.id"
-        type="action" :name="taskCard.action" class="action-icon"/>
-    </template>
+      <h6 v-html="t('botStatus.usedColors')"></h6>
+      <template v-if="colorCardDeck.isUsedEmpty()">
+        <div class="none text-muted" v-html="t('botStatus.none')"></div>
+      </template>
+      <template v-else>
+        <AutobahnColorCard v-for="(colorCard, index) of colorCardDeck.used" :key="index"
+          :color-card="colorCard" class="color-card"/>
+      </template>
 
-    <div class="mt-1">
-      <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#botGainBonusModal">
-        {{t('botStatus.gainBonus')}}
-      </button>
+      <h6 v-html="t('botStatus.usedTasks')"></h6>
+      <template v-if="taskCardDeck.isUsedEmpty()">
+        <div class="none text-muted" v-html="t('botStatus.none')"></div>
+      </template>
+      <template v-else>
+        <AppIcon v-for="taskCard of taskCardDeck.used" :key="taskCard.id"
+          type="action" :name="taskCard.action" class="action-icon"/>
+      </template>
     </div>
+
+    <button class="show-details-button btn btn-outline-secondary btn-sm me-2" @click="toggleDetails">
+      Show
+    </button>
+    <button class="hide-details-button btn btn-outline-secondary btn-sm me-2" @click="toggleDetails">
+      Hide
+    </button>
+    <button class="gain-bonus-button btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#botGainBonusModal">
+      {{t('botStatus.gainBonus')}}
+    </button>
   </div>
 
   <BotGainBonusModal/>
@@ -96,6 +102,12 @@ export default defineComponent({
       required: true
     },
   },
+  methods: {
+    toggleDetails(event : Event) : void {
+      const targetElement = event.target as HTMLElement
+      targetElement.parentElement?.classList.toggle('show-details')
+    }
+  }
 })
 </script>
 
@@ -106,24 +118,52 @@ export default defineComponent({
   background-color: rgb(200, 221, 249);
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
-}
-.color-card {
-  display: inline-block;
-  margin-right: 5px;
-  width: 35px;
-  height: 35px;
-}
-.action-icon {
-  width: 38px;
-  margin-right: 4px;
-  margin-bottom: 6px;
-  filter: drop-shadow(1px 1px 2px #555);
-}
-.none {
-  margin-bottom: 10px;
-  font-size: small;
-}
-button img {
-  width: 30px;
+  .color-card {
+    display: inline-block;
+    margin-right: 5px;
+    width: 35px;
+    height: 35px;
+  }
+  .action-icon {
+    width: 38px;
+    margin-right: 4px;
+    margin-bottom: 6px;
+    filter: drop-shadow(1px 1px 2px #555);
+  }
+  .none {
+    margin-bottom: 10px;
+    font-size: small;
+  }
+  .show-details-button, .hide-details-button {
+    display: none;
+  }
+  @media (max-width: 500px) {
+    padding: 10px;
+    border-radius: 10px;
+    .status-details {
+      display: none;
+    }
+    .show-details-button {
+      display: unset;
+    }
+    &.show-details {
+      .status-details {
+        display: block;
+      }
+      .hide-details-button {
+        display: unset;
+      }
+      .show-details-button {
+        display: none;
+      }
+    }
+    .title {
+      display: inline-block;
+      margin-right: 10px;
+    }
+    .show-details {
+      display: block;
+    }
+  }
 }
 </style>
diff --git a/src/components/turn/BuildRoadUpgradeLinkModal.vue b/src/components/turn/BuildRoadUpgradeLinkModal.vue
@@ -20,6 +20,14 @@
             <li v-html="t('buildRoadUpgradeLink.buildRoad.priority.item4')"></li>
           </ol>
           <p v-html="t('buildRoadUpgradeLink.buildRoad.employeeCostInfo')"></p>
+          <p>
+            <AppIcon type="bonus-action" name="develop-1" class="icon"/>
+            <span v-html="t('buildRoadUpgradeLink.buildRoad.developIcon')"></span>
+          </p>
+          <p>
+            <AppIcon name="bonus-tile" class="icon"/>
+            <span v-html="t('buildRoadUpgradeLink.buildRoad.bonusTile')"></span>
+          </p>
         </div>
         <div class="tab-pane" id="tab-upgrade-link" role="tabpanel" aria-labelledby="tablink-upgrade-link" tabindex="0">
           <p v-html="t('buildRoadUpgradeLink.upgradeLink.intro')"></p>
@@ -44,11 +52,13 @@ import enableTabLinksInContent from '@/util/enableTabLinksInContent';
 import ModalDialog from 'brdgm-commons/src/components/structure/ModalDialog.vue'
 import Expansion from '@/services/enum/Expansion';
 import { useStore } from '@/store';
+import AppIcon from '../structure/AppIcon.vue';
 
 export default defineComponent({
   name: 'BuildRoadUpgradeLinkModal',  
   components: {
-    ModalDialog
+    ModalDialog,
+    AppIcon
   },
   setup() {
     const { t } = useI18n()
@@ -65,3 +75,15 @@ export default defineComponent({
   },
 })
 </script>
+
+<style lang="scss" scoped>
+.icon {
+  height: 40px;
+  float: left;
+  margin-right: 10px;
+  margin-bottom: 5px;
+}
+p {
+  clear: both;
+}
+</style>
diff --git a/src/components/turn/SideBar.vue b/src/components/turn/SideBar.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="sidebar">
-    <p>
-      <b><span v-html="t('sidebar.era', {era:navigationState.era})"></span></b><br/>
+    <div class="era" v-html="t('sidebar.era', {era:navigationState.era})"></div>
+    <div class="round">
       <span v-html="t('sidebar.round', {round:navigationState.round})"></span>
       <span v-if="showLastTurn" class="last-turn" v-html="t('sidebar.lastTurn')"></span>
-    </p>
+    </div>
     <BotStatus :task-card-deck="navigationState.taskCardDeck" :color-card-deck="navigationState.colorCardDeck"/>
   </div>
 </template>
@@ -44,10 +44,25 @@ export default defineComponent({
   width: 200px;
   margin-right: -12px;
   margin-left: 20px;
-  .last-turn {
-    color: red;
+  .era {
     font-weight: bold;
-    margin-left: 0.5em;
+  }
+  .round {
+    margin-bottom: 10px;
+    .last-turn {
+      color: red;
+      font-weight: bold;
+      margin-left: 0.5em;
+    }
+  }
+  @media (max-width: 500px) {
+    float: unset;
+    margin: 0;
+    width: 100%;
+    .round, .era {
+      display: inline-block;
+      margin-right: 5px;
+    }
   }
 }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -3,7 +3,7 @@
   "home": {
     "title": "Autobahn Solo Helper",
     "play1": "Play against Autobot, the Solo Mode opponent of <a href='https://boardgamegeek.com/boardgame/348554/autobahn' target='_blank' rel='noopener'><b>Autobahn</b></a>.",
-    "play2": "This helper application replaces the task and action card decks of Autobot and manages the difficulty levels.",
+    "play2": "This helper application replaces the task and action card decks of Autobot and manages the difficulty levels. The Autobot rules are displayed by clicking on the action icons.",
     "feedback": "Discussion and Feedback:"
   },
   "setup": {
@@ -38,7 +38,7 @@
     "placeDevelopmentToken": "Place Autobot's Development token on the first space of the Development Track.",
     "placeBlackConstructionOffice": "Autobot is the start player, so place 1 of Autobot's Employees onto the first (leftmost) seat of the black Construction Office. Place one of yours on the next seat.",
     "setupPlayerPlayArea": "Set up your play area as normal, and reveal 2 Route cards from the deck. Pick one for yourself and discard the other one. Return the unused route cards back to the box. Autobot does not have a Route card.",
-    "winePickCard": "Wine Module: You randomly pick one of the wine cards for yourself, and place the remaining three next to the solo board.",
+    "winePickCard": "Wine Module: Randomly pick one of the wine cards for yourself, and place the remaining three next to the solo board.",
     "unlimitedBudget": "Autobot has an unlimited budget. You do not need to track Autobot's income or expenditure."
   },
   "turnBot": {
@@ -52,7 +52,7 @@
   },
   "turnBotMoveTrucks": {
     "title": "Autobot's turn - Move Trucks",
-    "moveSpaces": "Move each of Autobot's trucks <b>{numberOfSpaces} spaces</b> towards the <a href='#loadTruckModal' data-bs-toggle='modal'>selected country</a>. Ignore the colors.",
+    "moveSpaces": "Move each of Autobot's loaded trucks <b>{numberOfSpaces} spaces</b> towards the <a href='#loadTruckModal' data-bs-toggle='modal'>selected country</a>. Ignore the colors.",
     "moveTruckInfo": "Details about <a href='#moveTruckModal' data-bs-toggle='modal'>Autobot's truck movements and delivery</a>."
   },
   "turnPlayer": {
@@ -105,10 +105,10 @@
     "develop": "<b>Develop:</b> Move Autobot's Marker 1 or 2 steps forward on the Development Track.",
     "advancedCard": "<b>Take Advanced Task Card:</b> Add an advanced card to the task card deck.",
     "takeAdvancedCard": "Take Advanced Card",
-    "promote": "<b>Promote:</b> Promote 1 of Autobot's Employees as explained in <a href='#tablink-bonus-promotions' data-bs-toggle='tab'>Autobot's promotions</a>.",
+    "promote": "<b>Promote:</b> Promote 1 of Autobot's Employees as explained in <a href='#tablink-bonus-promotions' data-custom-toggle='tab'>Autobot's promotions</a>.",
     "colorCard": "<b>Take Color Card:</b> Take the <i>leftmost</i> card from the display. This will give Autobot an extra color card.",
     "takeColorCard": "Take Color Card",
-    "promoteServiceTrade": "<b>Promote:</b> Promotions gained in this way should be taken on the Department shown if possible. If a promotion in the department shown is not possible, follow the normal priority rules in <a href='#tablink-bonus-promotions' data-bs-toggle='tab'>Autobot's promotions</a>.",
+    "promoteServiceTrade": "<b>Promote:</b> Promotions gained in this way should be taken on the Department shown if possible. If a promotion in the department shown is not possible, follow the normal priority rules in <a href='#tablink-bonus-promotions' data-custom-toggle='tab'>Autobot's promotions</a>.",
     "buildServiceStation": "<b>Build a Service Station:</b> Immediately perform the <a href='#buildServiceStationModal' data-bs-toggle='modal'>Build a Service Station</a> action.",
     "buildRoadSection": "<b>Build a road section:</b> Immediately perform the <a href='#buildRoadUpgradeLinkModal' data-bs-toggle='modal'>Build a road section</a> action.",
     "upgradeLink": "<b>Upgrade a link:</b> Immediately perform the <a href='#buildRoadUpgradeLinkModal' data-bs-toggle='modal'>Upgrade a link</a> action.",
@@ -122,15 +122,17 @@
     "title": "Build Road Section or Upgrade Link",
     "buildRoad": {
       "title": "Build Road Section",
-      "intro": "Autobot builds the next road section of the autobahn that matches the current color. If all available road sections have already been built, Autobot will instead <a href='#tablink-upgrade-link' data-bs-toggle='tab'>upgrade a complete link</a>.",
+      "intro": "Autobot builds the next road section of the autobahn that matches the current color. If all available road sections have already been built, Autobot will instead <a href='#tablink-upgrade-link' data-custom-toggle='tab'>upgrade a complete link</a>.",
       "priority": {
         "title": "Priority:",
         "item1": "The section of road that would allow one of Autobot's Trucks to deliver a Goods token to or move towards its destination country. If tied, the country that appears highest on Autobot's delivery board.",
         "item2": "A section of road that contains a Bonus token.",
         "item3": "The section of road nearest to the black autobahn (the fewest road sections to travel).",
         "item4": "In the first and second eras, the southernmost location, then the westernmost. In the third era, the northernmost location, then the easternmost."
       },
-      "employeeCostInfo": "When building a road, Autobot places an Employee in the corresponding Office as usual. Autobot never pays building costs."
+      "employeeCostInfo": "When building a road, Autobot places an Employee in the corresponding Office as usual. Autobot never pays building costs.",
+      "developIcon": "If Autobot builds a road section on a space with a 'Develop' icon, move Autobot's Marker 1 steps forward on the Development Track.",
+      "bonusTile": "If Autobot builds a road section on a space with a bonus tile, Autobot places it face down on the next available slot of the Solo board and gains the bonus depicted on the slot as described in <a href='#botGainBonusModal' data-bs-toggle='modal'>Gain Bonus</a>."
     },
     "upgradeLink": {
       "title": "Upgrade Link",
@@ -183,7 +185,7 @@
     "ignoreColor": "Autobot does not need to match the current color card to move along road sections. If a Truck cannot move forwards for any reason (such as an unbuilt road) it stays still.",
     "passServiceStations": "Each time one of Autobot's Trucks passes one of its own Service Stations, it gains the rightmost revealed bonus as shown on the Solo board. If one of Autobot's Trucks passes your Service Stations, you gain income from the supply as normal.",
     "deliverGoods": "If one of Autobot's Trucks reaches its selected country, it delivers its goods:",
-    "deliverGoodsItem1": "When a good is delivered, place it onto the corresponding space of Autobot's delivery board.",
+    "deliverGoodsItem1": "When a good is delivered, place a delivery token onto the corresponding space of Autobot's delivery board.",
     "deliverGoodsItem2": "If the good type matches, Autobot moves 1 space up the Development Track. Autobot never receives the bonus action or money shown on the delivery board.",
     "deliverGoodsItem3": "If Autobot delivers Pharmaceuticals it gains the delivery bonus as normal.",
     "deliverGoodsItem4": "If the selected country has a delivery bonus tile, Autobot takes it and places the token face down on the next available slot of the Solo board and gains the bonus depicted on the slot as described in <a href='#botGainBonusModal' data-bs-toggle='modal'>Solo Board Bonuses</a>.",

diff --git a/src/util/enableTabLinksInContent.ts b/src/util/enableTabLinksInContent.ts
@@ -5,7 +5,7 @@ import { Tab } from "bootstrap";
  * @param element Parent element which contains both the tab links and tab panes
  */
 export default function(parent : HTMLElement) : void {
-  parent.querySelectorAll('a[data-bs-toggle="tab"]').forEach(anchor => {
+  parent.querySelectorAll('a[data-custom-toggle="tab"]').forEach(anchor => {
     anchor.addEventListener('click', event => {
       event.preventDefault();
       const target = anchor.getAttribute('href')

diff --git a/src/views/AppHome.vue b/src/views/AppHome.vue
@@ -11,13 +11,11 @@
   <p v-html="t('home.play1')"></p>
   <p v-html="t('home.play2')"></p>
 
-<!--
   <p class="text-muted fst-italic">
     {{t('home.feedback')}}
-    <a href="#" target="_blank" rel="noopener">Board Game Geek Thread</a> |
+    <a href="https://boardgamegeek.com/thread/3052422/brdgmme-autobahn-solo-helper-web-application" target="_blank" rel="noopener">Board Game Geek Thread</a> |
     <a href="https://github.com/brdgm/autobahn-solo-helper" target="_blank" rel="noopener">GitHub</a>
   </p>
--->
 
   <router-link to="/setupGame" class="btn btn-primary btn-lg mt-3">{{t('action.playGame')}}</router-link>