From 35a43f77383ba6dd8ab199e10bacf0291bc4f514 Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Wed, 12 Jun 2024 18:27:08 -0500
Subject: [PATCH] Add page for loots

---
 layouts/default.vue        |  5 ++++
 pages/loots/index.vue      | 55 ++++++++++++++++++++++++++++++++++++++
 pages/ward-skins/index.vue |  2 +-
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 pages/loots/index.vue

diff --git a/layouts/default.vue b/layouts/default.vue
index 453bba3..4202c8a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -50,6 +50,11 @@
                               <MaterialIcon name="penguin" :size="24" /> Companions
                             </NuxtLink>
                         </li>
+                        <li class="nav-item">
+                            <NuxtLink class="nav-link" to="/loots">
+                              <MaterialIcon name="treasure-chest" :size="24" /> Loots
+                            </NuxtLink>
+                        </li>
                     </ul>
                 </div>
             </div>
diff --git a/pages/loots/index.vue b/pages/loots/index.vue
new file mode 100644
index 0000000..96633b3
--- /dev/null
+++ b/pages/loots/index.vue
@@ -0,0 +1,55 @@
+<template>  
+  <div class="d-flex flex-column gap-2">
+    <h1>Loots</h1>
+
+    <div class="input-group">
+      <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
+        v-model="query"/>
+    </div>
+
+    <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+    :on-first="p.first" :on-last="p.last"/>
+
+    <div class="d-flex flex-wrap justify-content-around gap-2">
+      <div class="card bg-transparent bg-screen border-light border-opacity-25" style="max-width: 180px; width: 180px;"
+        v-for="loot in p.pages[p.index.value]" :key="loot.id">
+        <img :src="loot.getImage('latest')" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png';" />
+
+        <div class="card-body d-flex flex-column justify-content-end">
+          <h5>{{ loot.name }}</h5>
+          <span class="small border-bottom border-light border-opacity-25 pb-2 mb-2">{{ loot.id }}</span>
+          <span>{{ loot.rarity }}</span>
+        </div>
+      </div>
+    </div>
+
+    <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+        :on-first="p.first" :on-last="p.last"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Pagination from "../../components/Pagination.vue";
+import useClient from '../../composables/useClient';
+import useIsNumeric from "../../composables/useIsNumeric";
+import usePagination from '../../composables/usePagination';
+import Badge from "~/components/Badge.vue";
+
+const { client } = useClient();
+
+const query = ref("");
+
+// Alphanumerically sort by id, remove null entries
+const loots = (await client.loots.listAsync({locale: "default", version: "latest"}))
+  .sort((a, b) => a.id.localeCompare(b.id))
+  .filter((x) => x.id != "");
+
+const { isNumeric } = useIsNumeric();
+const p = computed(() => {
+  let filtered = [];
+  
+  filtered = loots.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
+
+  return usePagination(filtered, 100);
+});
+</script>
\ No newline at end of file
diff --git a/pages/ward-skins/index.vue b/pages/ward-skins/index.vue
index 731d722..a54c133 100644
--- a/pages/ward-skins/index.vue
+++ b/pages/ward-skins/index.vue
@@ -67,5 +67,5 @@ const p = computed(() => {
         filtered = skins.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
 
     return usePagination(filtered, 100);
-})
+});
 </script>
\ No newline at end of file