From 83917eec706a7efb4f5232ba0ec90d611ee1f109 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Sun, 24 Nov 2024 20:58:15 +0100
Subject: [PATCH] Hardened frontend

---
 frontend/components/ItemViewer.vue   | 14 +++++++++++---
 frontend/components/RuneSelector.vue |  9 ++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/components/ItemViewer.vue b/frontend/components/ItemViewer.vue
index 0634b31..76845d3 100644
--- a/frontend/components/ItemViewer.vue
+++ b/frontend/components/ItemViewer.vue
@@ -35,7 +35,10 @@ for(let item of items.value) {
             </div>
             <div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
             <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
-            <img style="border: 1px solid var(--color-on-surface);" width="64" height="64" :alt="item.data" :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
+            <img v-if="item.data != null && item.data != undefined"  
+                style="border: 1px solid var(--color-on-surface);" 
+                width="64" height="64" :alt="item.data" 
+                :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
             <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
             </div>
             </div>
@@ -50,7 +53,10 @@ for(let item of items.value) {
             <h2 class="item-box-title">boots</h2>
             <div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
             <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
-            <img style="border: 1px solid var(--color-on-surface);" width="64" height="64" :alt="item.data" :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
+            <img v-if="item.data != null && item.data != undefined" 
+                style="border: 1px solid var(--color-on-surface);" 
+                width="64" height="64" :alt="item.data" 
+                :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
             <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
             </div>
             </div>
@@ -60,7 +66,9 @@ for(let item of items.value) {
             <h2 class="item-box-title">late game</h2>
             <div style="display: flex; width: fit-content; height: fit-content; margin:auto;">
             <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(0, 7)" >
-            <img class="item-img" width="64" height="64" :alt="item.data" :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
+            <img v-if="item.data != null && item.data != undefined"
+                 class="item-img" width="64" height="64" :alt="item.data" 
+                 :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
             <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
             </div>
             </div>
diff --git a/frontend/components/RuneSelector.vue b/frontend/components/RuneSelector.vue
index 4cd367e..70f40ae 100644
--- a/frontend/components/RuneSelector.vue
+++ b/frontend/components/RuneSelector.vue
@@ -52,9 +52,12 @@ function runeSelect(rune) {
     <div style="display: flex; margin-top: 20px;">
     <div v-for="rune in runes" :class="'rune-selector-entry ' + (rune == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(rune)">
         <div style="display: flex; margin-top: 20px;">
-        <img style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.primaryStyleValue.iconPath)" />
-        <img width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(rune.keystoneValue).iconPath))"/>
-        <img style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.secondaryStyleValue.iconPath)" />
+        <img v-if="rune.primaryStyleValue != null && rune.primaryStyleValue != undefined" 
+            style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.primaryStyleValue.iconPath)" />
+        <img v-if="rune.keystoneValue != null && rune.keystoneValue != undefined" 
+            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(rune.keystoneValue).iconPath))"/>
+        <img v-if="rune.secondaryStyleValue != null && rune.secondaryStyleValue != undefined" 
+            style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.secondaryStyleValue.iconPath)" />
         </div>
         <h3 style="text-align: center; margin-top: 10px;">{{ (rune.pickrate * 100).toFixed(2) }}% pick.</h3>
     </div>