Champion page improvements

2026-01-23 23:25:17 +01:00
parent 82bb01c039
commit 7a34c16087
3 changed files with 362 additions and 76 deletions
--- a/frontend/components/item/Tree.vue
+++ b/frontend/components/item/Tree.vue
@@ -11,20 +11,43 @@ const emit = defineEmits<{
  refresh: []
 }>()

-const { data: items }: ItemResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json'
+const { data: items } = useFetch<Array<{ id: number; iconPath: string }>>(
+  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json',
+  {
+    lazy: true, // Don't block rendering
+    server: false // Client-side only
+  }
 )
-const itemMap = reactive(new Map())
-for (const item of items.value) {
-  itemMap.set(item.id, item)
+
+// Create item map reactively
+const itemMap = reactive(new Map<number, { id: number; iconPath: string }>())
+watch(
+  items,
+  newItems => {
+    if (newItems) {
+      itemMap.clear()
+      for (const item of newItems) {
+        itemMap.set(item.id, item)
+      }
+    }
+  },
+  { immediate: true }
+)
+
+function getItemIconPath(itemId: number): string {
+  const item = itemMap.get(itemId)
+  return item ? CDRAGON_BASE + mapPath(item.iconPath) : ''
 }

 const start: Ref<Element | null> = useTemplateRef('start')
 const arrows: Array<svgdomarrowsLinePath> = []

 onMounted(() => {
-  refreshArrows()
-  emit('mount', start.value!)
+  // Only refresh arrows and emit if start element is available
+  if (start.value) {
+    refreshArrows()
+    emit('mount', start.value)
+  }
 })

 onBeforeUpdate(() => {
@@ -35,8 +58,10 @@ onBeforeUpdate(() => {
 })

 onUpdated(() => {
-  refreshArrows()
-  emit('mount', start.value!)
+  if (start.value) {
+    refreshArrows()
+    emit('mount', start.value)
+  }
 })

 onUnmounted(() => {
@@ -85,8 +110,10 @@ addEventListener('scroll', _ => {
 })

 function handleSubtreeMount(end: Element) {
-  drawArrow(start.value!, end)
-  refreshArrows()
+  if (start.value) {
+    drawArrow(start.value, end)
+    refreshArrows()
+  }
  emit('refresh')
 }
 function handleRefresh() {
@@ -107,7 +134,7 @@ function handleRefresh() {
        width="64"
        height="64"
        :alt="tree.data.toString()"
-        :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)"
+        :src="getItemIconPath(tree.data)"
      />
      <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
        {{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%
--- a/frontend/components/item/Viewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -11,7 +11,14 @@ const props = defineProps<{
 const ITEMS_API_URL = CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json'

 // State
-const { data: items, pending: loadingItems, error: itemsError } = await useFetch(ITEMS_API_URL)
+const {
+  data: items,
+  pending: loadingItems,
+  error: itemsError
+} = useFetch(ITEMS_API_URL, {
+  lazy: true, // Don't block rendering
+  server: false // Client-side only
+})
 const itemMap = ref<Map<number, unknown>>(new Map())

 // Initialize item map
@@ -107,13 +114,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
            style="margin-left: 5px; margin-right: 5px"
          >
            <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
              class="item-img"
              width="64"
              height="64"
              :alt="item.data.toString()"
              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
            </h3>
@@ -129,13 +146,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
            style="margin-left: 5px; margin-right: 5px"
          >
            <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
              class="item-img"
              width="64"
              height="64"
              :alt="item.data.toString()"
              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
            </h3>
@@ -153,13 +180,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
          style="margin-left: 5px; margin-right: 5px"
        >
          <NuxtImg
-            v-if="item.data != null && item.data != undefined"
+            v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
            class="item-img"
            width="64"
            height="64"
            :alt="item.data.toString()"
            :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
          />
+          <div
+            v-else
+            style="
+              width: 64px;
+              height: 64px;
+              margin: 10px;
+              background: var(--color-surface);
+              border: 1px solid var(--color-on-surface);
+            "
+          ></div>
          <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
            {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
          </h3>
@@ -181,13 +218,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
          style="margin-left: 5px; margin-right: 5px"
        >
          <NuxtImg
-            v-if="item.data != null && item.data != undefined"
+            v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
            class="item-img"
            width="64"
            height="64"
            :alt="item.data.toString()"
            :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
          />
+          <div
+            v-else
+            style="
+              width: 64px;
+              height: 64px;
+              margin: 10px;
+              background: var(--color-surface);
+              border: 1px solid var(--color-on-surface);
+            "
+          ></div>
          <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
            {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
          </h3>
@@ -205,13 +252,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
            style="margin-left: 5px; margin-right: 5px"
          >
            <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
              class="item-img"
              width="64"
              height="64"
              :alt="item.data.toString()"
              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
            </h3>
@@ -225,13 +282,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
            style="margin-left: 5px; margin-right: 5px"
          >
            <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
              class="item-img"
              width="64"
              height="64"
              :alt="item.data.toString()"
              :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
            />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
            <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
              {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
            </h3>