Lint and format

frontend/components/item/Tree.vue

@@ -1,112 +1,128 @@
 <script setup lang="ts">
+import svgdomarrows from 'svg-dom-arrows'
+
 defineProps<{
-    tree: ItemTree,
-    parentCount?: number
+  tree: ItemTree
+  parentCount?: number
 }>()
 
 const emit = defineEmits<{
-    mount: [end: Element],
-    refresh: []
+  mount: [end: Element]
+  refresh: []
 }>()
 
-const {data : items} : ItemResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
+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)
+for (const item of items.value) {
+  itemMap.set(item.id, item)
 }
 
-import svgdomarrows from 'svg-dom-arrows';
-
-const start : Ref<Element | null> = useTemplateRef("start")
-const arrows : Array<svgdomarrows.LinePath> = []
+const start: Ref<Element | null> = useTemplateRef('start')
+const arrows: Array<svgdomarrows.LinePath> = []
 
 onMounted(() => {
-    refreshArrows()
-    emit('mount', start.value!!)
+  refreshArrows()
+  emit('mount', start.value!)
 })
 
 onBeforeUpdate(() => {
-    for(let arrow of arrows) {
-        arrow.release()
-    }
-    arrows.splice(0, arrows.length)
+  for (const arrow of arrows) {
+    arrow.release()
+  }
+  arrows.splice(0, arrows.length)
 })
 
 onUpdated(() => {
-    refreshArrows()
-    emit('mount', start.value!!)
+  refreshArrows()
+  emit('mount', start.value!)
 })
 
 onUnmounted(() => {
-    for(let arrow of arrows) {
-        arrow.release()
-    }
+  for (const arrow of arrows) {
+    arrow.release()
+  }
 })
 
-function drawArrow(start : Element, end : Element) {
-    // console.log("drawArrow(", start, ", ", end, ")")
-    if(start == null || end == null) return;
+function drawArrow(start: Element, end: Element) {
+  // console.log("drawArrow(", start, ", ", end, ")")
+  if (start == null || end == null) return
 
-    const arrow = new svgdomarrows.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)
+  const arrow = new svgdomarrows.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()
-    }
+  for (const arrow of arrows) {
+    arrow.redraw()
+  }
 }
 
 // Redraw arrows on window resize
-addEventListener('resize', (_) => {
-    refreshArrows()
+addEventListener('resize', _ => {
+  refreshArrows()
 })
-addEventListener("scroll", (_) => {
-    refreshArrows()
+addEventListener('scroll', _ => {
+  refreshArrows()
 })
 
-function handleSubtreeMount(end : Element) {
-    drawArrow(start.value!!, end)
-    refreshArrows()
-    emit('refresh')
+function handleSubtreeMount(end: Element) {
+  drawArrow(start.value!, end)
+  refreshArrows()
+  emit('refresh')
 }
 function handleRefresh() {
-    refreshArrows()
-    emit('refresh')
+  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 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 v-for="child in tree.children" style="width: fit-content; height: fit-content">
+        <ItemTree
+          :tree="child"
+          :parent-count="tree.count"
+          @refresh="handleRefresh"
+          @mount="end => handleSubtreeMount(end)"
+        />
+      </div>
+    </div>
+  </div>
 </template>