From 67d6dd5a1a6ced29af275244eb68644e02d8db36 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Thu, 5 Dec 2024 00:02:31 +0100
Subject: [PATCH] Components refactor (big)

---
 frontend/components/item/Box.vue              | 40 ++++++++++++
 .../{TreeItem.vue => item/Tree.vue}           |  9 ++-
 .../{ItemViewer.vue => item/Viewer.vue}       | 65 ++++++-------------
 .../{NavBar.vue => nav/BottomBar.vue}         |  0
 frontend/components/{ => nav}/SideBar.vue     |  7 +-
 .../{OgImage => opengraph}/OgChampion.vue     |  0
 .../{RunePage.vue => rune/Page.vue}           |  0
 .../{RuneSelector.vue => rune/Selector.vue}   |  0
 frontend/pages/champion/[alias].vue           |  4 +-
 frontend/pages/tierlist/[lane].vue            |  2 +-
 10 files changed, 73 insertions(+), 54 deletions(-)
 create mode 100644 frontend/components/item/Box.vue
 rename frontend/components/{TreeItem.vue => item/Tree.vue} (93%)
 rename frontend/components/{ItemViewer.vue => item/Viewer.vue} (70%)
 rename frontend/components/{NavBar.vue => nav/BottomBar.vue} (100%)
 rename frontend/components/{ => nav}/SideBar.vue (88%)
 rename frontend/components/{OgImage => opengraph}/OgChampion.vue (100%)
 rename frontend/components/{RunePage.vue => rune/Page.vue} (100%)
 rename frontend/components/{RuneSelector.vue => rune/Selector.vue} (100%)

diff --git a/frontend/components/item/Box.vue b/frontend/components/item/Box.vue
new file mode 100644
index 0000000..9d0d9b5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/components/TreeItem.vue b/frontend/components/item/Tree.vue
similarity index 93%
rename from frontend/components/TreeItem.vue
rename to frontend/components/item/Tree.vue
index 28346fb..2dece22 100644
--- a/frontend/components/TreeItem.vue
+++ b/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';
-const { LinePath } = pkg;
+import { LinePath } from 'svg-dom-arrows';
 
 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>
diff --git a/frontend/components/ItemViewer.vue b/frontend/components/item/Viewer.vue
similarity index 70%
rename from frontend/components/ItemViewer.vue
rename to frontend/components/item/Viewer.vue
index b756de5..87a5b9f 100644
--- a/frontend/components/ItemViewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -24,23 +24,19 @@ function trimBuilds(builds : Builds) {
     <div id="iv-container">
         
         <!-- Start items -->
-        <div class="item-box">
-            <h2 class="item-box-title">start</h2>
+        <ItemBox title="start">
             <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" 
-                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 style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
+                <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>
-            </div>
-        </div>
+        </ItemBox>
 
-        <div v-if="builds.bootsFirst > 0.5" class="item-box">
-            <div style="display:flex; flex-direction: column; justify-content: center; align-items: baseline;">
-            <h2 class="item-box-title">boots rush</h2>
-            <h5 style="margin: auto;">({{ (builds.bootsFirst * 100).toFixed(2) }}%)</h5>
-            </div>
+        <!-- Boots first : when champion rush boots -->
+        <ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :bootsFirst="builds.bootsFirst">
             <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">
-            <h2 class="item-box-title">core</h2>
-            <TreeItem style="margin:auto; width: fit-content;" :tree="builds.tree" />
-        </div>
+        <!-- Core items -->
+        <ItemBox title="core">
+            <ItemTree style="margin:auto; width: fit-content;" :tree="builds.tree" />
+        </ItemBox>
 
-        <div v-if="builds.bootsFirst <= 0.5"  class="item-box">
-            <h2 class="item-box-title">boots</h2>
+        <!-- Boots -->
+        <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;
     }
diff --git a/frontend/components/NavBar.vue b/frontend/components/nav/BottomBar.vue
similarity index 100%
rename from frontend/components/NavBar.vue
rename to frontend/components/nav/BottomBar.vue
diff --git a/frontend/components/SideBar.vue b/frontend/components/nav/SideBar.vue
similarity index 88%
rename from frontend/components/SideBar.vue
rename to frontend/components/nav/SideBar.vue
index ea4b246..edb4bf3 100644
--- a/frontend/components/SideBar.vue
+++ b/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' : '')" 
diff --git a/frontend/components/OgImage/OgChampion.vue b/frontend/components/opengraph/OgChampion.vue
similarity index 100%
rename from frontend/components/OgImage/OgChampion.vue
rename to frontend/components/opengraph/OgChampion.vue
diff --git a/frontend/components/RunePage.vue b/frontend/components/rune/Page.vue
similarity index 100%
rename from frontend/components/RunePage.vue
rename to frontend/components/rune/Page.vue
diff --git a/frontend/components/RuneSelector.vue b/frontend/components/rune/Selector.vue
similarity index 100%
rename from frontend/components/RuneSelector.vue
rename to frontend/components/rune/Selector.vue
diff --git a/frontend/pages/champion/[alias].vue b/frontend/pages/champion/[alias].vue
index ca0cf48..8fed985 100644
--- a/frontend/pages/champion/[alias].vue
+++ b/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"/>
 
diff --git a/frontend/pages/tierlist/[lane].vue b/frontend/pages/tierlist/[lane].vue
index 259766c..fefbbb6 100644
--- a/frontend/pages/tierlist/[lane].vue
+++ b/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;">