feat(creatures): première version du tableau

src/components/tableaux/TableCreature.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed, defineProps } from "vue";
+import { useCreaturesStore } from "@/stores/creatures";
+import { toURI } from "@/utils/urls";
+
+const store = useCreaturesStore();
+
+const props = defineProps<{
+  group: string;
+}>();
+
+const creatures = computed(() => {
+  return store.datas ?? [];
+});
+</script>
+
+<template>
+  <p>
+    Il y a en tout {{ creatures?.length ?? 0 }} créatures dans cette catégories.
+  </p>
+  <table>
+    <thead>
+      <tr>
+        <th>Nom</th>
+        <th>Type</th>
+        <th>Classe</th>
+        <th>Carrure</th>
+        <th>Niv. Min</th>
+        <th>Niv. Max</th>
+        <th>Voir</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(creature, index) in creatures" :key="index">
+        <td>{{ creature.nom }}</td>
+        <td>{{ creature.type }}</td>
+        <td>{{ creature.classe }}</td>
+        <td>{{ creature.carrure }}</td>
+        <td>{{ creature.min }}</td>
+        <td>{{ creature.max }}</td>
+        <td>
+          <router-link :to="`/creatures/${group}/${toURI(creature.nom)}`"
+            >Voir</router-link
+          >
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

src/stores/creatures.ts

@@ -0,0 +1,33 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type Creature from "@/types/Creature";
+import axios from "axios";
+
+const FOLDER = "creatures";
+
+export const useCreaturesStore = defineStore("creatures", () => {
+  const current = ref("");
+  const datas = ref([] as Creature[]);
+
+  function load(filepath: string) {
+    if (filepath !== current.value) {
+      axios.get(`/datas/${FOLDER}/${filepath}.json`).then((response) => {
+        datas.value = response.data;
+        current.value = filepath;
+      });
+    }
+  }
+
+  function reset() {
+    datas.value = [];
+    current.value = "";
+  }
+
+  function get(name: string): Creature | undefined {
+    return datas.value.filter((data: Creature) => {
+      return data.nom === name;
+    })[0];
+  }
+
+  return { load, reset, get, current, datas };
+});

src/types/Creature.ts

@@ -0,0 +1,14 @@
+export default interface Creature {
+  nom: string;
+  classe: string;
+  carrure: string;
+  min: number;
+  max: number;
+  armes: string[];
+  armures: string;
+  pouvoirs: string[];
+  elements: string[];
+  type: string;
+  replace: { level: number; nom: string; description: string }[];
+  overrideStat: { stat: string; new: number }[];
+}

src/views/CreatureListView.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useCreaturesStore } from "@/stores/creatures";
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+import MarkdownFile from "../components/MarkdownFile.vue";
+import TableCreature from "@/components/tableaux/TableCreature.vue";
+
+const store = useCreaturesStore();
+const route = useRoute();
+
+onMounted(() => {
+  store.load(`${route.params.group}`);
+});
+</script>
+
+<template>
+  <main>
+    <MarkdownFile :path="`pages/creatures/${$route.params.group}`" />
+    <TableCreature :group="`${$route.params.group}`" />
+  </main>
+</template>