From 30c12345f652999c405ee33d1af16de5a3f59be1 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Mon, 21 May 2018 13:42:58 +0200
Subject: Add more highlights

---
 src/TalentBox.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/TalentBox.vue')

diff --git a/src/TalentBox.vue b/src/TalentBox.vue
index ee30717..f7f2694 100644
--- a/src/TalentBox.vue
+++ b/src/TalentBox.vue
@@ -3,15 +3,14 @@
   <p class="title-box">{{ title }}</p>
   <div class="columns is-mobile">
     <div class="column is-centered">
-      <figure class="image is-64x64 hero-image-slot">
-        <img class="hero-image" :src="'dist/assets/hero-icons/' + hero.toLowerCase() + '.png'" :alt="entry.Actor">
-      </figure>
-      <p class="hero-name">{{ hero }}</p>
+      <hero-image :actor="entry.Actor" class="is-64x64 hero-image-slot"></hero-image>
+      <span class="hero-name">{{ hero }}</span>
     </div>
     <div class="column value is-centered">
-      <talent-image :entry="entry" :size="64"></talent-image>
-        {{ value }}{{ label }}
-        <div class="type">{{ type }}</div>
+      <talent-image v-if="hasTalent" :entry="entry" :size="64"></talent-image>
+      <span v-else>No Talent</span>
+      <span>{{ value }}{{ label }}</span>
+      <span class="type">{{ type }}</span>
     </div>
     </div>
   </div>
@@ -62,6 +61,7 @@
 <script>
 import Vue from 'vue';
 import TalentImage from './TalentImage.vue';
+import HeroImage from './HeroImage.vue';
 import * as maps from './maps/maps';
 
 export default Vue.component('talent-box', {
@@ -70,9 +70,13 @@ export default Vue.component('talent-box', {
     hero: function() {
       return maps.getHero(this.entry.Actor);
     },
+    hasTalent: function() {
+      return maps.getTalentRarity(this.entry.Talent) != 'None';
+    },
   },
   components: {
     TalentImage,
+    HeroImage,
   }
 });
 </script>
-- 
cgit v1.3.1