Bards of Carcassonne

src/renderer/components/game/ActionPanel.vue

@@ -91,7 +91,8 @@ const MAPPING = {
   PlaceFerryPhase: FerryPhaseAction,
   PhantomPhase: ActionPhaseAction,
   TunnelPhase: ActionPhaseAction,
-  WagonPhase: ActionPhaseAction
+  WagonPhase: ActionPhaseAction,
+  BardsLutePhase: ActionPhaseAction
 }
 
 export default {

src/renderer/components/game/ExpressionItem.vue

@@ -56,6 +56,7 @@
       <template v-else-if="item.name === 'besieged'"><img src="~/assets/features/C1/siege.png" height="40"></template>
       <template v-else-if="item.name === 'shrine-challenge'"><ExpansionSymbol :expansion="Expansion.CULT" :style="{ width: 40, height: 40 }" /></template>
       <template v-else-if="item.name === 'coc'"><ExpansionSymbol :expansion="Expansion.COUNT" :style="{ width: 40, height: 40 }" /></template>
+      <template v-else-if="item.name === 'bardsnotes'"><TokenImage token="BARDS_NOTE" :height="40" /></template>
       <template v-else-if="artworkValue && artworkValue.tag === 'svg'">
         <svg
           class="artwork-element"

src/renderer/components/game/TokenImage.vue

@@ -37,7 +37,8 @@ const TOKENS = {
   GOLD: { tag: 'img', src: require('~/assets/figures/gold.png') },
   LB_HOUSE: { tag: 'img', src: require('~/assets/figures/lb_house.png') },
   LB_SHED: { tag: 'img', src: require('~/assets/figures/lb_shed.png') },
-  LB_TOWER: { tag: 'img', src: require('~/assets/figures/lb_tower.png') }
+  LB_TOWER: { tag: 'img', src: require('~/assets/figures/lb_tower.png') },
+  BARDS_NOTE: { tag: 'img', src: require('~/assets/figures/bards_note.png') },
 }
 
 export default {
@@ -46,7 +47,7 @@ export default {
     AnimalToken
   },
 
-  props: {
+  props: { 
     token: { type: String, required: true },
     height: { type: Number, default: null },
     player: { type: Number, default: null },

src/renderer/components/game/actions/ActionPhaseAction.vue

@@ -106,6 +106,13 @@
         :options="item.options"
         :active="idx === selected"
       />
+      <BardsLuteItem
+        v-else-if="item.type == 'BardsLute'"
+        :player="action.player"
+        :token="item.token"
+        :options="item.options"
+        :active="idx === selected"
+      />
       <div v-else>{{ item.type }}</div>
     </div>
     <slot />
@@ -127,6 +134,7 @@ import ReturnMeepleItem from '@/components/game/actions/items/ReturnMeepleItem.v
 import ScoreAcrobatsItem from '@/components/game/actions/items/ScoreAcrobatsItem.vue'
 import TowerPieceItem from '@/components/game/actions/items/TowerPieceItem.vue'
 import TunnelItem from '@/components/game/actions/items/TunnelItem.vue'
+import BardsLuteItem from '@/components/game/actions/items/BardsLuteItem.vue'
 
 export default {
   components: {
@@ -140,7 +148,8 @@ export default {
     ReturnMeepleItem,
     ScoreAcrobatsItem,
     TowerPieceItem,
-    TunnelItem
+    TunnelItem,
+    BardsLuteItem
   },
 
   props: {

src/renderer/components/game/actions/items/BardsLuteItem.vue

@@ -0,0 +1,49 @@
+<template>
+  <img
+    src="~/assets/figures/bards_note.png"
+    :height="$vuetify.breakpoint.height > 768 ? 55 : 39"
+  >
+</template>
+
+<script>
+import LayeredItemMixin from '@/components/game/actions/items/LayeredItemMixin.js'
+
+export default {
+  mixins: [LayeredItemMixin],
+
+  props: {
+    options: { type: Array, required: true },
+    active: { type: Boolean }
+  },
+
+  computed: {
+    layers () {
+      return [['FeatureSelectLayer', {
+        options: this.options
+      }]]
+    }
+  },
+
+  mounted () {
+    this.$root.$on('feature.select', this.onSelect)
+  },
+
+  beforeDestroy () {
+    this.$root.$off('feature.select', this.onSelect)
+  },
+
+  methods: {
+    async onSelect (opt) {
+      if (this.active) {
+        await this.$store.dispatch('game/apply', {
+          type: 'PLACE_TOKEN',
+          payload: {
+            token: 'BARDS_NOTE',
+            pointer: opt
+          }
+        })
+      }
+    }
+  }
+}
+</script>

src/renderer/components/game/layers/TokenLayer.vue

@@ -72,6 +72,13 @@
     >
       <image href="~/assets/figures/lb_tower.png" transform="scale(1.2)" />
     </g>
+    <g
+      v-for=" opt in tokens.BARDS_NOTE"
+      :key="'bards-note-' + positionAsKey(opt.position)"
+      :transform="transformPoint(opt) + 'translate(-100 -100)'"
+    >
+      <image href="~/assets/figures/bards_note.png" transform="scale(2) rotate(15 0 0)" />
+    </g>
   </g>
 </template>
 

src/renderer/components/game/play-events/TokenPlacedEvent.vue

@@ -12,7 +12,7 @@
 <script>
 import TokenImage from '@/components/game/TokenImage'
 
-const FULL_SIZE_TOKENS = new Set(['WOLF', 'SHEEP', 'TUNNEL', 'FERRY', 'LB'])
+const FULL_SIZE_TOKENS = new Set(['WOLF', 'SHEEP', 'TUNNEL', 'FERRY', 'LB', 'BARDS_NOTE'])
 
 export default {
   components: {