Components refactor (big)

2024-12-05 00:02:31 +01:00
parent 07daa05772
commit 67d6dd5a1a
10 changed files with 73 additions and 54 deletions
--- a/frontend/components/item/Box.vue
+++ 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>
--- a/frontend/components/item/Tree.vue
+++ b/frontend/components/item/Tree.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+defineProps<{
+    tree: ItemTree,
+    parentCount?: number
+}>()
+
+const emit = defineEmits<{
+    mount: [end: Element],
+    refresh: []
+}>()
+
+const {data : items} : ItemResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
+const itemMap = reactive(new Map())
+for(let item of items.value) {
+    itemMap.set(item.id, item)
+}
+
+import { LinePath } from 'svg-dom-arrows';
+
+const start : Ref<Element | null> = useTemplateRef("start")
+const arrows : Array<LinePath> = []
+
+onMounted(() => {
+    refreshArrows()
+    emit('mount', start.value!!)
+})
+
+onBeforeUpdate(() => {
+    for(let arrow of arrows) {
+        arrow.release()
+    }
+    arrows.splice(0, arrows.length)
+})
+
+onUpdated(() => {
+    refreshArrows()
+    emit('mount', start.value!!)
+})
+
+onUnmounted(() => {
+    for(let arrow of arrows) {
+        arrow.release()
+    }
+})
+
+function drawArrow(start : Element, end : Element) {
+    // console.log("drawArrow(", start, ", ", end, ")")
+    if(start == null || end == null) return;
+
+    const arrow = new LinePath({
+        start: {
+            element: start,
+            position: {
+                top: 0.5,
+                left: 1
+            }
+        },
+        end: {
+            element: end,
+            position: {
+                top: 0.5,
+                left: 0
+            }
+        },
+        style: 'stroke:var(--color-on-surface);stroke-width:3;fill:transparent;',
+        appendTo: document.body
+    })
+    arrows.push(arrow)
+}
+
+function refreshArrows() {
+    for(let arrow of arrows) {
+        arrow.redraw()
+    }
+}
+
+// Redraw arrows on window resize
+addEventListener('resize', (_) => {
+    refreshArrows()
+})
+
+function handleSubtreeMount(end : Element) {
+    drawArrow(start.value!!, end)
+    refreshArrows()
+    emit('refresh')
+}
+function handleRefresh() {
+    refreshArrows()
+    emit('refresh')
+}
+</script>
+
+<template>
+    <div style="display: flex; align-items: center;">
+        
+        <div v-if="tree.data != undefined && tree.data != null" style="width: fit-content; height: fit-content;">
+        <img ref="start" class="item-img" width="64" height="64" :alt="tree.data.toString()" :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)" />
+        <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%</h3>
+        </div>
+
+        <div style="margin-left: 30px;">
+            <div style="width: fit-content; height: fit-content;" v-for="child in tree.children">
+            <ItemTree @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" :parent-count="tree.count" />
+            </div>
+        </div>
+    </div>
+</template>
--- a/frontend/components/item/Viewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+const props = defineProps<{
+  builds: Builds
+}>()
+
+const {data : items} : ItemResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
+const itemMap = reactive(new Map())
+for(let item of items.value) {
+    itemMap.set(item.id, item)
+}
+
+watch(() => props.builds, () => trimBuilds(props.builds))
+trimBuilds(props.builds)
+
+function trimBuilds(builds : Builds) {
+    builds.tree.children.splice(1, builds.tree.children.length - 1)
+    if(builds.tree.children[0] != null && builds.tree.children[0] != undefined)
+        builds.tree.children[0].children.splice(1, builds.tree.children[0].children.length - 1)
+}
+
+</script>
+
+<template>
+    <div id="iv-container">
+        
+        <!-- Start items -->
+        <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>
+            </div>
+        </ItemBox>
+
+        <!-- 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"  
+                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>
+
+        <!-- Core items -->
+        <ItemBox title="core">
+            <ItemTree style="margin:auto; width: fit-content;" :tree="builds.tree" />
+        </ItemBox>
+
+        <!-- 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" 
+                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>
+
+        <!-- Late game items -->
+        <ItemBox title="late game">
+            <div id="iv-late-game-container">
+
+            <div class="iv-items-container">
+            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(0, 4)" >
+            <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 class="iv-items-container">
+            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(4, 8)" >
+            <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>
+        </ItemBox>
+    </div>
+</template>
+
+<style>
+#iv-container {
+    display: flex;
+    width: fit-content; 
+    height: fit-content;
+}
+.iv-items-container {
+    display: flex; 
+    flex-direction: column; 
+    width: fit-content; 
+    height: fit-content; 
+    margin:auto;
+}
+.item-img {
+    border: 1px solid var(--color-on-surface);
+    margin: 10px;
+}
+#iv-late-game-container {
+    display: flex;
+}
+
+@media only screen and (max-width: 1000px) {
+    #iv-container {
+        flex-direction: column;
+        width: 100%;
+    }
+    .iv-items-container {
+        flex-direction: row;
+    }
+    .item-img {
+        width: 48px;
+        height: 48px;
+    }
+    #iv-late-game-container {
+        flex-direction: column;
+    }
+}
+</style>