From 52123350c6fc2906305abc4a7de7d836bb2ac1ea Mon Sep 17 00:00:00 2001
From: Blossomi Shymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Wed, 1 May 2024 20:54:05 -0500
Subject: [PATCH] Add runes feat

---
 pages/runes/index.vue | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 pages/runes/index.vue

diff --git a/pages/runes/index.vue b/pages/runes/index.vue
new file mode 100644
index 0000000..4098167
--- /dev/null
+++ b/pages/runes/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="d-flex flex-column gap-2">
+      <h1>Runes</h1>
+
+      <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>
+                      <th scope="col">Description</th>
+                  </tr>
+              </thead>
+              <tbody>
+                <tr v-for="rune in runes" :key="rune.id">
+                    <th scope="row">
+                        {{ rune.id }}
+                    </th>
+                    <td>
+                        <img :src="rune.getIcon('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src = '/img/error.png';"/>
+                    </td>
+                    <td>
+                        {{ rune.name }}
+                    </td>
+                    <td>
+                        <span v-html="rune.shortDesc"></span>
+                    </td>
+                </tr>
+              </tbody>
+          </table>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useClient from '../../composables/useClient';
+
+const { client } = useClient();
+const runes = await client.perks.listAsync({locale: "default", version: "latest"});
+</script>
\ No newline at end of file