From 67f93478f98fd696a38b73d4c4b68c2b73483663 Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Mon, 10 Jun 2024 16:32:18 -0500
Subject: [PATCH] Fix images not loading, add pagination and search

---
 core/models.ts             |  2 +-
 pages/companions/index.vue | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/core/models.ts b/core/models.ts
index faaeb92..285e30a 100644
--- a/core/models.ts
+++ b/core/models.ts
@@ -319,6 +319,6 @@ export class Companion extends CommunityDragonObject {
   }
 
   getLoadoutsIcon(version: string): string {
-    return this.resolveGamePath({path: this.loadoutsIcon, version: version});
+    return this.resolveClientPath({path: this.loadoutsIcon, args: {locale: "default", version: version}});
   }
 }
\ No newline at end of file
diff --git a/pages/companions/index.vue b/pages/companions/index.vue
index 307ccc4..b8d48d4 100644
--- a/pages/companions/index.vue
+++ b/pages/companions/index.vue
@@ -17,27 +17,23 @@
             <th scope="col">Item Id</th>
             <th scope="col">Icon</th>
             <th scope="col">Name</th>
-            <th scope="col">Species Name</th>
             <th scope="col">Species ID</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="companion in p.pages[p.index.value]" :key="companion.contentId" style="positon: relative;">
+          <tr v-for="companion in p.pages[p.index.value]" :key="companion.contentId" style="position: relative;">
             <td scope="row">
               <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/companions/overview/${companion.contentId}`">
                 {{ companion.itemId }}
               </NuxtLink>
             </td>
             <td>
-              <img :src="companion.getLoadoutsIcon('latest')" width="32px" height="32px" loading="lazy"
+              <img :src="companion.getLoadoutsIcon('latest')" height="48px" loading="lazy"
               onerror="this.onerror = null; this.src='/clean-cuts/img/error.png'" />
             </td>
             <td>
               {{ companion.name }}
             </td>
-            <td>
-              {{ companion.speciesName }}
-            </td>
             <td>
               {{ companion.speciesId }}
             </td>
@@ -61,7 +57,8 @@ const { client } = useClient();
 
 const query = ref("");
 
-const companions = await client.companions.listAsync({locale: "default", version: "latest"});
+const companions = (await client.companions.listAsync({locale: "default", version: "latest"}))
+  .sort((a, b) => a.itemId - b.itemId);
 
 const { isNumeric } = useIsNumeric();
 const p = computed(() => {