Added champions items (first try)

frontend/components/TreeItem.vue

@@ -0,0 +1,72 @@
+<script setup>
+const props = defineProps({
+  tree: {
+    type: Object,
+    required: true
+  }
+})
+
+const item = props.tree
+
+const {data : items} = 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 pkg from 'svg-dom-arrows'; const { LinePath } = pkg; 
+const treeItems = ref([])
+const treeItem = ref(null)
+const start = ref(null)
+
+const arrows = []
+
+onMounted(() => {
+    if(start.value == null) return;
+    for(let dest of treeItems.value) {
+        console.log(dest)
+        const arrow = new LinePath({
+            start: {
+                element: start.value,
+                position: {
+                    top: 0.5,
+                    left: 1
+                }
+            },
+            end: {
+                element: dest.childNodes[0].childNodes[0].childNodes[0],
+                position: {
+                    top: 0.5,
+                    left: 0
+                }
+            },
+            
+            style: 'stroke:var(--color-on-surface);stroke-width:3;fill:transparent;',
+            appendTo: document.body
+        })
+        arrows.push(arrow)
+    }
+})
+onUnmounted(() => {
+    for(let arrow of arrows) {
+        document.body.removeChild(arrow.containerDiv)
+    }
+})
+
+</script>
+
+<template>
+    <div ref="treeItem" style="display: flex; align-items: center;">
+        
+        <div v-if="item.data != undefined && item.data != null" style="width: fit-content; height: fit-content;">
+        <img ref="start" 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 style="margin-left: 30px;">
+            <div style="width: fit-content; height: fit-content;" :ref="(el) => { treeItems.push(el) }" v-for="child in item.children">
+            <TreeItem :tree="child" />
+            </div>
+        </div>
+    </div>
+</template>