Lint frontend

2026-01-21 23:39:03 +01:00
parent f307e3a8fc
commit 3d79d9e495
21 changed files with 356 additions and 183 deletions
--- a/frontend/components/item/Tree.vue
+++ b/frontend/components/item/Tree.vue
@@ -108,14 +108,18 @@ function handleRefresh() {
        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">
+      <div
+        v-for="child in tree.children"
+        :key="child.data"
+        style="width: fit-content; height: fit-content"
+      >
        <ItemTree
          :tree="child"
          :parent-count="tree.count"
--- a/frontend/components/item/Viewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -12,7 +12,7 @@ const ITEMS_API_URL = CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/defaul

 // State
 const { data: items, pending: loadingItems, error: itemsError } = await useFetch(ITEMS_API_URL)
-const itemMap = ref<Map<number, any>>(new Map())
+const itemMap = ref<Map<number, unknown>>(new Map())

 // Initialize item map
 watch(
@@ -21,7 +21,7 @@ watch(
    try {
      const itemsData = newItems || []
      if (Array.isArray(itemsData)) {
-        const map = new Map<number, any>()
+        const map = new Map<number, unknown>()
        for (const item of itemsData) {
          if (item?.id) {
            map.set(item.id, item)
@@ -90,24 +90,9 @@ function trimLateGameItems(builds: Builds): void {
  trimLateGameItemsFromTree(builds.tree)
 }

-/**
- * Get item data safely
- */
-function getItemData(itemId: number): any {
-  return itemMap.value.get(itemId) || { iconPath: '' }
-}
-
-/**
- * Calculate percentage for item display
- */
-function getItemPercentage(item: { count: number }, total: number): string {
-  if (total <= 0) return '0%'
-  return ((item.count / total) * 100).toFixed(0) + '%'
-}
-
 // Error and loading states
-const hasError = computed(() => itemsError.value || props.error)
-const isLoading = computed(() => loadingItems.value || props.loading)
+const _hasError = computed(() => itemsError.value || props.error)
+const _isLoading = computed(() => loadingItems.value || props.loading)
 </script>

 <template>
@@ -116,14 +101,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
      <!-- Start items -->
      <ItemBox v-if="builds.suppItems == undefined || builds.suppItems == null" title="start">
        <div class="iv-items-container">
-          <div v-for="item in builds.start" style="margin-left: 5px; margin-right: 5px">
+          <div
+            v-for="item in builds.start"
+            :key="item.data"
+            style="margin-left: 5px; margin-right: 5px"
+          >
            <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)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -134,14 +123,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
      <!-- Supp items -->
      <ItemBox v-if="builds.suppItems != undefined && builds.suppItems != null" title="supp">
        <div class="iv-items-container">
-          <div v-for="item in builds.suppItems" style="margin-left: 5px; margin-right: 5px">
+          <div
+            v-for="item in builds.suppItems"
+            :key="item.data"
+            style="margin-left: 5px; margin-right: 5px"
+          >
            <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)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -154,14 +147,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
    <!-- Boots first : when champion rush boots -->
    <ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :boots-first="builds.bootsFirst">
      <div class="iv-items-container">
-        <div v-for="item in builds.boots" style="margin-left: 5px; margin-right: 5px">
+        <div
+          v-for="item in builds.boots"
+          :key="item.data"
+          style="margin-left: 5px; margin-right: 5px"
+        >
          <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)"
+            :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
          />
          <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
            {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -178,14 +175,18 @@ const isLoading = computed(() => loadingItems.value || props.loading)
    <!-- Boots -->
    <ItemBox v-if="builds.bootsFirst <= 0.5" title="boots">
      <div class="iv-items-container">
-        <div v-for="item in builds.boots.slice(0, 4)" style="margin-left: 5px; margin-right: 5px">
+        <div
+          v-for="item in builds.boots.slice(0, 4)"
+          :key="item.data"
+          style="margin-left: 5px; margin-right: 5px"
+        >
          <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)"
+            :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
          />
          <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
            {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -200,6 +201,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
        <div class="iv-items-container">
          <div
            v-for="item in builds.lateGame.slice(0, 4)"
+            :key="item.data"
            style="margin-left: 5px; margin-right: 5px"
          >
            <NuxtImg
@@ -208,7 +210,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
              width="64"
              height="64"
              :alt="item.data.toString()"
-              :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
@@ -219,6 +221,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
        <div v-if="builds.lateGame.length > 4" class="iv-items-container">
          <div
            v-for="item in builds.lateGame.slice(4, 8)"
+            :key="item.data"
            style="margin-left: 5px; margin-right: 5px"
          >
            <NuxtImg
@@ -227,7 +230,7 @@ const isLoading = computed(() => loadingItems.value || props.loading)
              width="64"
              height="64"
              :alt="item.data.toString()"
-              :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)"
+              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%