all simple actions

brdgm · Oct 20, 2024 · 4f4622f · 4f4622f
1 parent 848e488
commit 4f4622f
Show file tree

Hide file tree

Showing 13 changed files with 298 additions and 61 deletions.
diff --git a/src/components/turn/SideBar.vue b/src/components/turn/SideBar.vue
@@ -4,11 +4,11 @@
     <h6 class="mt-2">V.I.C.I</h6>
     <div class="count">
       {{botActions?.evolutionCount ?? navigationState.evolutionCount}}
-      <AppIcon type="action" name="advance-evolution" class="icon"/>
+      <AppIcon type="action" name="place-evolution-marker" class="icon"/>
     </div>
     <div class="count">
       {{botActions?.prosperityCount ?? navigationState.prosperityCount}}
-      <AppIcon type="action" name="advance-prosperity" class="icon"/>
+      <AppIcon type="action" name="place-prosperity-marker" class="icon"/>
     </div>
     <div class="mt-2">
       <div class="dotCount blue">

diff --git a/src/components/turn/action/AdvanceFavor.vue b/src/components/turn/action/AdvanceFavor.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon type="action" name="advance-favor" class="icon"/>
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalAdvanceFavor">
+    <div class="action">
+      <div class="plus">+</div>
+      <div class="value">1</div>
+      <AppIcon type="action" name="advance-favor" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalAdvanceFavor" :title="t('rules.action.advanceFavor.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.advanceFavor.instruction')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -38,4 +41,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  .plus, .value {
+    display: inline-block;
+    color: #000;
+    font-weight: bold;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+  .plus {
+    font-size: 1.5rem;
+  }
+  .value {
+    font-size: 2.2rem;
+  }
+  .icon {
+    height: 2.5rem;
+  }
+}
 </style>
diff --git a/src/components/turn/action/AdvanceScoringCategory.vue b/src/components/turn/action/AdvanceScoringCategory.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon v-if="actionItem.scoringCategory" type="advance-track" :name="actionItem.scoringCategory" class="icon"/>
-    {{actionItem.scoringCategory}}
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalAdvanceScoringCategory">
+    <div class="action">
+      <div class="plus">+</div>
+      <div class="value">{{actionItem.count}}</div>
+      <AppIcon v-if="actionItem.scoringCategory" type="advance-track" :name="actionItem.scoringCategory" class="icon"/>
+      {{ actionItem.scoringCategory }}
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalAdvanceScoringCategory" :title="t('rules.action.advanceScoringCategory.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.advanceScoringCategory.instruction')"></p>
+      <p v-html="t('rules.action.advanceScoringCategory.threshold')"></p>
+      <p v-html="t('rules.action.advanceScoringCategory.exceedTrack')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -39,4 +44,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  .plus, .value {
+    display: inline-block;
+    color: #000;
+    font-weight: bold;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+  .plus {
+    font-size: 1.5rem;
+  }
+  .value {
+    font-size: 2.2rem;
+  }
+  .icon {
+    height: 3rem;
+  }
+}
 </style>
diff --git a/src/components/turn/action/GainActivationDie.vue b/src/components/turn/action/GainActivationDie.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon type="action" name="gain-activation-die" class="icon"/>
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainActivationDie">
+    <div class="action">
+      <div class="plus">+</div>
+      <div class="value">1</div>
+      <AppIcon type="action" name="gain-activation-die" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalGainActivationDie" :title="t('rules.action.gainActivationDie.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.gainActivationDie.instruction')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -38,4 +41,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  .plus, .value {
+    display: inline-block;
+    color: #000;
+    font-weight: bold;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+  .plus {
+    font-size: 1.5rem;
+  }
+  .value {
+    font-size: 2.2rem;
+  }
+  .icon {
+    height: 2.5rem;
+  }
+}
 </style>
diff --git a/src/components/turn/action/GainFateDie.vue b/src/components/turn/action/GainFateDie.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon type="action" name="gain-fate-die" class="icon"/>
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainFateDie">
+    <div class="action">
+      <div class="plus">+</div>
+      <div class="value">1</div>
+      <AppIcon type="action" name="gain-fate-die" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalGainFateDie" :title="t('rules.action.gainFateDie.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.gainFateDie.instruction')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -38,4 +41,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  .plus, .value {
+    display: inline-block;
+    color: #000;
+    font-weight: bold;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+  .plus {
+    font-size: 1.5rem;
+  }
+  .value {
+    font-size: 2.2rem;
+  }
+  .icon {
+    height: 2.5rem;
+  }
+}
 </style>
diff --git a/src/components/turn/action/GainVp.vue b/src/components/turn/action/GainVp.vue
@@ -46,23 +46,21 @@ export default defineComponent({
   .icon {
     height: 3.5rem;
   }
-  .plus {
+  .plus, .value {
     position: absolute;
-    top: 6px;
-    left: 0px;
     color: #fedf12;
-    font-size: 1.25rem;
     font-weight: bold;
     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   }
+  .plus {
+    top: 6px;
+    left: 0px;
+    font-size: 1.25rem;
+  }
   .value {
-    position: absolute;
     top: -6px;
     left: 15px;
-    color: #fedf12;
     font-size: 2.2rem;
-    font-weight: bold;
-    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
   }
 }
 </style>
diff --git a/src/components/turn/action/PlaceEvolutionMarker.vue b/src/components/turn/action/PlaceEvolutionMarker.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon type="action" name="place-evolution-marker" class="icon"/>
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalPlaceEvolutionMarker">
+    <div class="action">
+      <div class="plus">+</div>
+      <div class="value">{{actionItem.count}}</div>
+      <AppIcon type="action" name="place-evolution-marker" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalPlaceEvolutionMarker" :title="t('rules.action.placeEvolutionMarker.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.placeEvolutionMarker.instruction')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -19,7 +22,7 @@ import AppIcon from '../../structure/AppIcon.vue'
 import ModalDialog from '@brdgm/brdgm-commons/src/components/structure/ModalDialog.vue'
 
 export default defineComponent({
-  name: 'PerformProvision',
+  name: 'PlaceEvolutionMarker',
   components: {
     AppIcon,
     ModalDialog
@@ -38,4 +41,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  .plus, .value {
+    display: inline-block;
+    color: #000;
+    font-weight: bold;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+  .plus {
+    font-size: 1.5rem;
+  }
+  .value {
+    font-size: 2.2rem;
+  }
+  .icon {
+    height: 3rem;
+  }
+}
 </style>
diff --git a/src/components/turn/action/PlaceProsperityMarker.vue b/src/components/turn/action/PlaceProsperityMarker.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon type="action" name="place-prosperity-marker" class="icon"/>
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalPlaceProsperityMarker">
+    <div class="action">
+      <div class="plus">+</div>
+      <div class="value">{{actionItem.count}}</div>
+      <AppIcon type="action" name="place-prosperity-marker" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalPlaceProsperityMarker" :title="t('rules.action.placeProsperityMarker.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.placeProsperityMarker.instruction')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -38,4 +41,23 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  .plus, .value {
+    display: inline-block;
+    color: #000;
+    font-weight: bold;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+  }
+  .plus {
+    font-size: 1.5rem;
+  }
+  .value {
+    font-size: 2.2rem;
+  }
+  .icon {
+    height: 2rem;
+  }
+}
 </style>
diff --git a/src/components/turn/action/PlaceStatue.vue b/src/components/turn/action/PlaceStatue.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon type="action" name="place-statue" class="icon"/>
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalPlaceStatue">
+    <div class="action">
+      <AppIcon type="action" name="place-statue" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalPlaceStatue" :title="t('rules.action.placeStatue.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.placeStatue.instruction')"></p>
+      <p v-html="t('rules.action.placeStatue.unlimited')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -38,4 +40,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.icon {
+  height: 3.5rem;
+}
 </style>
diff --git a/src/components/turn/action/RemoveCard.vue b/src/components/turn/action/RemoveCard.vue
@@ -1,13 +1,14 @@
 <template>
-  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalGainCoinHelp">
-    <div>{{actionItem.action}}</div>
-    <AppIcon v-if="actionItem.scoringCategory" type="remove-card" :name="actionItem.scoringCategory" class="icon"/>
-    {{actionItem.scoringCategory}}
+  <div class="actionBox col" data-bs-toggle="modal" data-bs-target="#modalRemoveCard">
+    <div class="action">
+      <AppIcon v-if="actionItem.scoringCategory" type="remove-card" :name="actionItem.scoringCategory" class="icon"/>
+    </div>
   </div>
 
-  <ModalDialog id="modalGainCoinHelp" :title="t('turnBot.action.gainCoin.help.title')">
+  <ModalDialog id="modalRemoveCard" :title="t('rules.action.removeCard.title')">
     <template #body>
-      <p v-html="t('turnBot.action.gainCoin.help.instruction')"></p>
+      <p v-html="t('rules.action.removeCard.instruction')"></p>
+      <p v-html="t('rules.action.removeCard.refill')"></p>
     </template>
   </ModalDialog>
 </template>
@@ -39,4 +40,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.icon {
+  height: 3.5rem;
+}
 </style>