Better dev experience, better front page

frontend/components/item/Viewer.vue

@@ -1,39 +1,105 @@
 <script setup lang="ts">
+import { isEmpty, deepClone } from '~/utils/helpers';
+
 const props = defineProps<{
-  builds: Builds
-}>()
+  builds: Builds;
+  loading?: boolean;
+  error?: boolean;
+}>();
 
-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)
-}
+// Constants
+const ITEMS_API_URL = CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json";
 
-const builds = ref(JSON.parse(JSON.stringify(props.builds)))
-watch(() => props.builds, () => {
-    builds.value = JSON.parse(JSON.stringify(props.builds))
-    trimBuilds(builds.value)
-    trimLateGameItems(builds.value)
-})
-trimBuilds(builds.value)
-trimLateGameItems(builds.value)
+// State
+const { data: items, pending: loadingItems, error: itemsError } = await useFetch(ITEMS_API_URL);
+const itemMap = ref<Map<number, any>>(new Map());
 
-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)
-}
-function trimLateGameItems(builds: Builds) {
-    function trimLateGameItemsFromTree(tree: ItemTree) {
-        const foundIndex = builds.lateGame.findIndex((x) => x.data === tree.data)
-        if(foundIndex != -1) builds.lateGame.splice(foundIndex, 1)
-        for(let children of tree.children) {
-            trimLateGameItemsFromTree(children)
+// Initialize item map
+watch(items, (newItems) => {
+  try {
+    const itemsData = newItems || [];
+    if (Array.isArray(itemsData)) {
+      const map = new Map<number, any>();
+      for (const item of itemsData) {
+        if (item?.id) {
+          map.set(item.id, item);
         }
+      }
+      itemMap.value = map;
     }
-    trimLateGameItemsFromTree(builds.tree)
+  } catch (error) {
+    console.error('Error initializing item map:', error);
+  }
+}, { immediate: true });
+
+// Builds management
+const builds = ref<Builds>(deepClone(props.builds));
+
+watch(() => props.builds, (newBuilds) => {
+  builds.value = deepClone(newBuilds);
+  trimBuilds(builds.value);
+  trimLateGameItems(builds.value);
+}, { deep: true });
+
+// Initialize with trimmed builds
+onMounted(() => {
+  trimBuilds(builds.value);
+  trimLateGameItems(builds.value);
+});
+
+/**
+ * Trim builds tree to show only primary build paths
+ */
+function trimBuilds(builds: Builds): void {
+  if (!builds?.tree?.children) return;
+
+  // Keep only the first child (primary build path)
+  builds.tree.children.splice(1, builds.tree.children.length - 1);
+
+  // For the primary path, keep only the first child of the first child
+  if (builds.tree.children[0]?.children) {
+    builds.tree.children[0].children.splice(1, builds.tree.children[0].children.length - 1);
+  }
 }
 
+/**
+ * Remove items from lateGame that are already in the build tree
+ */
+function trimLateGameItems(builds: Builds): void {
+  if (!builds?.tree || isEmpty(builds.lateGame)) return;
+
+  function trimLateGameItemsFromTree(tree: ItemTree): void {
+    const foundIndex = builds.lateGame.findIndex((x) => x.data === tree.data);
+    if (foundIndex !== -1) {
+      builds.lateGame.splice(foundIndex, 1);
+    }
+
+    for (const child of tree.children || []) {
+      trimLateGameItemsFromTree(child);
+    }
+  }
+
+  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);
 </script>
 
 <template>