Added special suppitem case (fix #8)

frontend/components/item/Box.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 defineProps<{
     title: string,
-    bootsFirst?: number
+    bootsFirst?: number,
+    sizePerc?: number
 }>()
 </script>
 
 <template>
-<div class="item-box">
+<div :style="(sizePerc != undefined && sizePerc != null) ? 'max-height: ' + (sizePerc * 600) + 'px;' : ''" class="item-box">
     <div style="display:flex; flex-direction: column; justify-content: center; align-items: center;">
         <h2 class="item-box-title">{{ title }}</h2>
         <h5 v-if="bootsFirst != undefined && bootsFirst != null" 

frontend/components/item/Viewer.vue

@@ -23,8 +23,9 @@ function trimBuilds(builds : Builds) {
 <template>
     <div id="iv-container">
         
+        <div>
         <!-- Start items -->
-        <ItemBox title="start">
+        <ItemBox title="start" :sizePerc="builds.suppItems != undefined && builds.suppItems != null ? 0.3 : undefined">
             <div class="iv-items-container">
                 <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
                 <NuxtImg v-if="item.data != null && item.data != undefined" 
@@ -34,6 +35,18 @@ function trimBuilds(builds : Builds) {
                 </div>
             </div>
         </ItemBox>
+        <!-- Supp items -->
+        <ItemBox v-if="builds.suppItems != undefined && builds.suppItems != null" title="supp" :sizePerc="0.68">
+            <div class="iv-items-container">
+                <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.suppItems" >
+                <NuxtImg v-if="item.data != null && item.data != undefined" 
+                    class="item-img" width="64" height="64" :alt="item.data.toString()" 
+                    :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
+                <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
+                </div>
+            </div>
+        </ItemBox>
+        </div>
 
         <!-- Boots first : when champion rush boots -->
         <ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :bootsFirst="builds.bootsFirst">

frontend/types/api.ts

@@ -10,6 +10,7 @@ declare global {
         bootsFirst: number
         boots: Array<{count: number, data: number}>
         lateGame: Array<{count: number, data: number}>
+        suppItems?: Array<{count: number, data: number}>
     }
     type Rune = {
         count: number