Rework ward skins

app.vue

@@ -114,6 +114,10 @@ ul.dropdown-menu {
   width: 200px; 
 }
 
+.form-control {
+  @extend .app-background;
+}
+
 .background {
   height: 100%;
   width: 100%;

components/Pagination.vue

@@ -1,30 +1,4 @@
-<template>
-  <div class="btn-group">
-    <a :class="`btn btn-outline-dark`"
-      @click="onFirst()">
-      <MaterialIcon name="chevron-double-left" :size="32" />
-    </a>
-    <a :class="`btn btn-outline-dark ${hasPrevCss}`"
-      @click="onPrev()">
-      <MaterialIcon name="chevron-left" :size="32" />
-    </a>
-    <a :class="`btn btn-outline-dark text-light`">
-      <span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${index + 1} / ${count}` }}</span>
-    </a>
-    <a :class="`btn btn-outline-dark ${hasNextCss}`"
-      @click="onNext()">
-      <MaterialIcon name="chevron-right" :size="32" />
-    </a>
-    <a :class="`btn btn-outline-dark `"
-      @click="onLast()">
-      <MaterialIcon name="chevron-double-right" :size="32" />
-    </a>
-  </div>
-</template>
-
 <script setup lang="ts">
-import MaterialIcon from './MaterialIcon.vue';
-
 const props = defineProps<{
   index: number,
   pages: Array<any>,
@@ -39,6 +13,26 @@ const hasPrevCss = computed(() => { return !(props.index > 0) ? "disabled" : "";
 const hasNextCss = computed(() => { return !(props.index < props.count - 1) ? "disabled" : "";})
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<template>
+  <div class="btn-group app-background">
+    <a :class="`btn btn-outline-secondary border-light border-opacity-25`"
+      @click="onFirst()">
+      <MaterialIcon name="chevron-double-left" :size="32" />
+    </a>
+    <a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasPrevCss}`"
+      @click="onPrev()">
+      <MaterialIcon name="chevron-left" :size="32" />
+    </a>
+    <a :class="`btn btn-outline-secondary border-light border-opacity-25 text-light`">
+      <span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${index + 1} / ${count}` }}</span>
+    </a>
+    <a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasNextCss}`"
+      @click="onNext()">
+      <MaterialIcon name="chevron-right" :size="32" />
+    </a>
+    <a :class="`btn btn-outline-secondary border-light border-opacity-25`"
+      @click="onLast()">
+      <MaterialIcon name="chevron-double-right" :size="32" />
+    </a>
+  </div>
+</template>

nuxt.config.ts

@@ -2,6 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   ssr: false,
+
   app: {
     baseURL: "/clean-cuts/",
     pageTransition: {
@@ -56,7 +57,10 @@ export default defineNuxtConfig({
       ],
     },
   },
+
   experimental: {
     payloadExtraction: false,
   },
+
+  compatibilityDate: "2024-10-09",
 })

pages/ward-skins/index.vue

@@ -1,58 +1,4 @@
-<template>
-  <div class="d-flex flex-column gap-2">
-      <h1>Ward Skins</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="overflow-hidden rounded border border-light border-opacity-25 p-4">
-          <table class="sortable table table-borderless">
-              <thead>
-                  <tr>
-                      <th scope="col">Id</th>
-                      <th scope="col">Icon</th>
-                      <th scope="col">Name</th>
-                  </tr>
-              </thead>
-              <tbody>
-                      <tr v-for="skin in p.pages[p.index.value]" :key="skin.id" style="position: relative;">
-                          <th scope="row">
-                              <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/ward-skins/overview/${skin.id}`">
-                                  {{ skin.id }}
-                              </NuxtLink>
-                          </th>
-                          <td>
-                              <NuxtLink class="text-decoration-none text-light" :to="`/ward-skins/overview/${skin.id}`">
-                                  <img :src="skin.getWardImage('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png'"/>
-                              </NuxtLink>
-                          </td>
-                          <td>
-                              <NuxtLink class="text-decoration-none text-light" :to="`/ward-skins/overview/${skin.id}`">
-                                  {{ skin.name }}
-                              </NuxtLink>
-                          </td>
-                      </tr>
-              </tbody>
-          </table>
-      </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 useLocale from '~/composables/useLocale';
-import useIsNumeric from '../../composables/useIsNumeric';
-import usePagination from '../../composables/usePagination';
-
 const { client } = useClient();
 const { currentLocale } = useLocale();
 const getSkins = async () => await client.wardSkins.listAsync({locale: currentLocale.value, version: "latest"});
@@ -74,4 +20,51 @@ const p = computed(() => {
 
     return usePagination(filtered, 100);
 });
+
+const rarities = {
+    "1": "Epic",
+    "2": "Legendary",
+    "3": "Ultimate",
+    "4": "Mythic"
+};
 </script>
+
+<template>
+  <div class="d-flex flex-column gap-2">
+      <div class="d-flex gap-4 justify-content-end">
+        <Card class="d-flex justify-content-center align-items-center me-auto">
+            <span>{{ skins.length }} skins</span>
+        </Card>
+        <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" style="min-width: 300px;"/>
+        <div class="input-group" style="max-width: 400px;">
+            <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
+                v-model="query"/>
+        </div>
+      </div>
+      
+      <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
+        <div v-for="wardSkin in p.pages[p.index.value]" :id="`${wardSkin.id}`"
+            style="width: 225px;"
+            data-aos="zoom-out"
+            data-aos-duration="500">
+            <div class="ratio ratio-1x1 position-relative">
+                <img class="rounded app-background p-4" :src="wardSkin.getWardShadowImage('latest')" loading="lazy"/>
+                <img class="rounded p-4" :src="wardSkin.getWardImage('latest')" loading="lazy"/>
+                <div class="position-absolute z-1 d-flex flex-column justify-content-end">
+                    <div class="d-inline-flex justify-content-between align-item-between p-1 rounded-bottom" style="background: #0008;">
+                        <span class="fs-6 fw-light">{{ wardSkin.name }}</span>
+                        <span class="fw-bold">{{ wardSkin.id }}</span>
+                    </div>
+                </div>
+                <div class="position-absolute z-2 d-flex flex-column justify-content-start align-items-end">
+                    <div class="m-2">
+                        <span v-if="wardSkin.isLegacy" style="background: #0008;" class="rounded p-1">Legacy</span>
+                        <span v-if="wardSkin.rarities && wardSkin.rarities.length > 0 && wardSkin.rarities[0].rarity != '0'" style="background: #0008;" class="rounded ms-1 p-1">{{ rarities[wardSkin.rarities[0].rarity as keyof typeof rarities] }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div>
+  </div>
+</template>