Components refactor (big)

frontend/components/item/Box.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineProps<{
+    title: string,
+    bootsFirst?: number
+}>()
+</script>
+
+<template>
+<div 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" 
+            style="margin: auto;">({{ (bootsFirst * 100).toFixed(2) }}%)</h5>
+    </div>
+    <slot/>
+</div>
+</template>
+
+<style scoped>
+.item-box {
+    border: 1px solid var(--color-on-surface);
+    border-radius: 8px;
+
+    margin: 10px;
+
+    width: fit-content;
+    height: 600px;
+}
+.item-box-title {
+    font-variant: small-caps; 
+    text-align: center;
+    margin: 10px;
+}
+@media only screen and (max-width: 1000px) {
+    .item-box {
+        width: 95%;
+        height: fit-content;
+    }
+}
+</style>

frontend/components/item/Tree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
     tree: ItemTree,
     parentCount?: number
 }>()
@@ -15,11 +15,10 @@ for(let item of items.value) {
     itemMap.set(item.id, item)
 }
 
-import pkg from 'svg-dom-arrows';
+import { LinePath } from 'svg-dom-arrows';
-const { LinePath } = pkg;
 
 const start : Ref<Element | null> = useTemplateRef("start")
-const arrows : Array<pkg.LinePath> = []
+const arrows : Array<LinePath> = []
 
 onMounted(() => {
     refreshArrows()
@@ -101,7 +100,7 @@ function handleRefresh() {
 
         <div style="margin-left: 30px;">
             <div style="width: fit-content; height: fit-content;" v-for="child in tree.children">
-            <TreeItem @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" :parent-count="tree.count" />
+            <ItemTree @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" :parent-count="tree.count" />
             </div>
         </div>
     </div>

frontend/components/item/Viewer.vue

@@ -24,8 +24,7 @@ function trimBuilds(builds : Builds) {
     <div id="iv-container">
         
         <!-- Start items -->
-        <div class="item-box">
+        <ItemBox title="start">
-            <h2 class="item-box-title">start</h2>
             <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,13 +33,10 @@ function trimBuilds(builds : Builds) {
                 <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
                 </div>
             </div>
-        </div>
+        </ItemBox>
 
-        <div v-if="builds.bootsFirst > 0.5" class="item-box">
+        <!-- Boots first : when champion rush boots -->
-            <div style="display:flex; flex-direction: column; justify-content: center; align-items: baseline;">
+        <ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :bootsFirst="builds.bootsFirst">
-            <h2 class="item-box-title">boots rush</h2>
-            <h5 style="margin: auto;">({{ (builds.bootsFirst * 100).toFixed(2) }}%)</h5>
-            </div>
             <div class="iv-items-container">
             <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
             <NuxtImg v-if="item.data != null && item.data != undefined"  
@@ -49,15 +45,15 @@ function trimBuilds(builds : Builds) {
             <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
             </div>
             </div>
-        </div>
+        </ItemBox>
 
-        <div class="item-box">
+        <!-- Core items -->
-            <h2 class="item-box-title">core</h2>
+        <ItemBox title="core">
-            <TreeItem style="margin:auto; width: fit-content;" :tree="builds.tree" />
+            <ItemTree style="margin:auto; width: fit-content;" :tree="builds.tree" />
-        </div>
+        </ItemBox>
 
-        <div v-if="builds.bootsFirst <= 0.5"  class="item-box">
+        <!-- Boots -->
-            <h2 class="item-box-title">boots</h2>
+        <ItemBox v-if="builds.bootsFirst <= 0.5" title="boots">
             <div class="iv-items-container">
             <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots.slice(0, 4)" >
             <NuxtImg v-if="item.data != null && item.data != undefined" 
@@ -66,11 +62,10 @@ function trimBuilds(builds : Builds) {
             <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
             </div>
             </div>
-        </div>
+        </ItemBox>
-
-        <div class="item-box">
-            <h2 class="item-box-title">late game</h2>
 
+        <!-- Late game items -->
+        <ItemBox title="late game">
             <div id="iv-late-game-container">
 
             <div class="iv-items-container">
@@ -92,7 +87,7 @@ function trimBuilds(builds : Builds) {
             </div>
 
             </div>
-        </div>
+        </ItemBox>
     </div>
 </template>
 
@@ -113,20 +108,6 @@ function trimBuilds(builds : Builds) {
     border: 1px solid var(--color-on-surface);
     margin: 10px;
 }
-.item-box {
-    border: 1px solid var(--color-on-surface);
-    border-radius: 8px;
-
-    margin: 10px;
-
-    width: fit-content;
-    height: 600px;
-}
-.item-box-title {
-    font-variant: small-caps; 
-    text-align: center;
-    margin: 10px;
-}
 #iv-late-game-container {
     display: flex;
 }
@@ -136,10 +117,6 @@ function trimBuilds(builds : Builds) {
         flex-direction: column;
         width: 100%;
     }
-    .item-box {
-        width: 95%;
-        height: fit-content;
-    }
     .iv-items-container {
         flex-direction: row;
     }

frontend/components/nav/SideBar.vue

@@ -2,7 +2,7 @@
 import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
 
 defineProps<{
-    championName: string
+    championName?: string
     championLanes?: Array<LaneData>
 }>()
 const emit = defineEmits<{
@@ -28,7 +28,10 @@ function handleStateChange(newState : string, newLane: number) {
         <div style="display: flex; align-items: center; margin-top: 30px; padding-right: 10px; overflow: hidden;">
         <h1 style="font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
         <img style="margin-left: 10px;" width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
-        <h2 v-if="championName.length < 8" style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">{{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}</h2>
+        <h2 v-if="championName != null && championName != undefined && championName.length < 8" 
+            style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">
+            {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
+        </h2>
         </div>
 
         <h2 :class="'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')" 

frontend/pages/champion/[alias].vue

@@ -28,13 +28,13 @@ function updateState(newState : string, newLane : number) {
         <Title>{{ championData.name }}</Title>
     </Head>
 
-    <NavBar :champion-name="championData.name" 
+    <NavBottomBar :champion-name="championData.name" 
         :champion-lanes="championData.lanes" 
         @state-change="updateState"/>
 
     <div id="alias-content-wrapper">
 
-    <SideBar :champion-name="championData.name" 
+    <NavSideBar :champion-name="championData.name" 
         :champion-lanes="championData.lanes" 
         @state-change="updateState"/>
 

frontend/pages/tierlist/[lane].vue

@@ -51,7 +51,7 @@ const d_tier = tierFromPickrate(0, 0.05)
     </Head>
 
     <div style="display: flex; min-height: 100vh; align-items: stretch;  width: 100%;">
-        <SideBar/>
+        <NavSideBar/>
 
         <div style="margin-left: 10px; width: 100%; overflow-y: scroll;">