research area

src/components/turn/botAction/ActionResearchAreaSpecific.vue

@@ -3,7 +3,7 @@
     <AppIcon type="action" :name="botAction.action" class="actionIcon"/>
   </div>
   <div class="actionCol support">
-    <SupportInfo :botAction="botAction" :numberedSelection="true"/>
+    <SupportInfo :botAction="botAction" :researchArea="true" :numberedSelection="true"/>
   </div>
   <div class="actionCol text-muted small">
     <ol>

src/components/turn/supportInfo/ResearchArea.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <AppIcon type="research-area" :name="type" class="icon"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import AppIcon from '@/components/structure/AppIcon.vue'
+import ResearchArea from '@/services/enum/ResearchArea'
+
+export default defineComponent({
+  name: 'ResearchArea',
+  components: {
+    AppIcon
+  },
+  props: {
+    type: {
+      type: String as PropType<ResearchArea>,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  height: 3rem;
+}
+</style>

src/components/turn/supportInfo/SupportInfo.vue

@@ -3,6 +3,7 @@
     <ScoringFinalTiebreaker v-if="scoringFinalTiebreaker && botAction.scoringFinalTiebreaker" :type="botAction.scoringFinalTiebreaker"/>
     <NavigationRange v-if="range && botAction.range" :range="botAction.range"/>
     <DirectionalSelection v-if="directionalSelection && botAction.directionalSelection" :type="botAction.directionalSelection"/>
+    <ResearchArea v-if="researchArea && botAction.researchArea" :type="botAction.researchArea"/>
     <NumberedSelection v-if="numberedSelection && botAction.numberedSelection && botAction.numberedSelectionCount"
         :type="botAction.numberedSelection" :count="botAction.numberedSelectionCount"/>
   </div>
@@ -14,6 +15,7 @@ import BotAction from '@/services/BotAction'
 import ScoringFinalTiebreaker from '@/components/turn/supportInfo/ScoringFinalTiebreaker.vue'
 import NavigationRange from '@/components/turn/supportInfo/NavigationRange.vue'
 import DirectionalSelection from '@/components/turn/supportInfo/DirectionalSelection.vue'
+import ResearchArea from './ResearchArea.vue'
 import NumberedSelection from './NumberedSelection.vue'
 
 export default defineComponent({
@@ -22,6 +24,7 @@ export default defineComponent({
     ScoringFinalTiebreaker,
     NavigationRange,
     DirectionalSelection,
+    ResearchArea,
     NumberedSelection
   },
   props: {
@@ -41,6 +44,10 @@ export default defineComponent({
       type: Boolean,
       required: false
     },
+    researchArea: {
+      type: Boolean,
+      required: false
+    },
     numberedSelection: {
       type: Boolean,
       required: false