src/components/CapaciteFile.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUpdate } from "vue";
+
+import axios from "axios";
+import type CapaciteList from "@/types/CapaciteList";
+import MarkdownFile from "./MarkdownFile.vue";
+import CapaciteCategory from "./capacites/CapaciteCategory.vue";
+
+const props = defineProps<{
+  path: string;
+  json: string;
+  order?: number;
+}>();
+
+const loadedPage = ref("");
+const categories = ref([] as CapaciteList[]);
+
+function refresh() {
+  const capacitesFileUrl = `/${props.json}.json`;
+  if (loadedPage.value === capacitesFileUrl) {
+    return;
+  }
+  loadedPage.value = capacitesFileUrl;
+  console.log(`Chargement du json ${capacitesFileUrl}`);
+  axios
+    .get(capacitesFileUrl)
+    .then((response) => {
+      categories.value = response.data;
+    })
+    .catch();
+}
+
+onMounted(() => {
+  refresh();
+});
+
+onBeforeUpdate(() => {
+  refresh();
+});
+</script>
+
+<template>
+  <article>
+    <MarkdownFile :path="path">
+      <div v-for="(category, index) in categories" :key="index">
+        <CapaciteCategory
+          :order="index"
+          :capacite-list="category"
+        ></CapaciteCategory>
+      </div>
+    </MarkdownFile>
+  </article>
+</template>

src/components/capacites/CapaciteCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type Capacite from "@/types/Capacite";
+
+defineProps<{
+  capacite: Capacite;
+}>();
+</script>
+
+<template>
+  <div class="card">
+    <h3 class="title-3">{{ capacite.nom }}</h3>
+    <div class="badges">
+      <span
+        v-for="(statName, index) in capacite.stats"
+        :key="index"
+        class="btn-small pill bg-primary"
+      >
+        {{ statName }}
+      </span>
+      <span
+        v-for="(costName, index) in capacite.couts"
+        :key="index"
+        class="btn-small pill bg-danger"
+      >
+        {{ costName }}
+      </span>
+      <span v-if="capacite.type == 'passif'" class="btn-small pill bg-success">
+        Passif
+      </span>
+      <span v-if="capacite.type == 'posture'" class="btn-small pill bg-success">
+        Posture
+      </span>
+    </div>
+    <p class="pouvoir-desc" v-html="capacite.description"></p>
+    <ul
+      class="niveaux"
+      v-for="(levelupSet, index) in capacite.levelups"
+      :key="index"
+    >
+      <li v-for="(levelup, index) in levelupSet" :key="index">
+        <strong>Niveau {{ levelup.niveau }} :</strong> {{ levelup.effet }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  height: 100%;
+}
+
+h3 {
+  font-size: 1.2rem;
+  text-align: center;
+  padding-bottom: 0;
+}
+
+.badges {
+  font-size: 0.8rem;
+  text-align: center;
+  padding-bottom: 1rem;
+}
+
+.pouvoir-desc {
+  font-size: 0.9rem;
+}
+</style>

src/components/capacites/CapaciteCategory.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type Capacite from "@/types/Capacite";
+import type CapaciteList from "@/types/CapaciteList";
+import axios from "axios";
+import { ref, onMounted } from "vue";
+import CapaciteCard from "./CapaciteCard.vue";
+
+const props = defineProps<{
+  capaciteList: CapaciteList;
+  order: number;
+}>();
+
+const toLoad = ref(1);
+const capacites = ref([] as Capacite[]);
+
+onMounted(() => {
+  setTimeout(() => {
+    refresh();
+  }, 100);
+});
+
+async function refresh() {
+  toLoad.value = props.capaciteList.capacites.length;
+  for (const file of props.capaciteList.capacites) {
+    var fileName = file;
+    var currentName = "";
+    if (file.includes(":")) {
+      const splittedFilename = file.split(":");
+      fileName = splittedFilename[0];
+      currentName = splittedFilename[1];
+    }
+    const capaciteFile = `/jdr/pouvoirs/${fileName}.json`;
+    const response = await axios.get(capaciteFile);
+    if (response.data) {
+      toLoad.value = toLoad.value - 1;
+      if (currentName !== "") {
+        response.data.nom = currentName;
+      }
+      capacites.value = capacites.value.concat(response.data);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="pouvoir-category" :v-if="toLoad == 0">
+    <h2>{{ capaciteList.title }}</h2>
+    <div class="columns">
+      <div class="col-4" v-for="(capacite, index) in capacites" :key="index">
+        <CapaciteCard :capacite="capacite"></CapaciteCard>
+      </div>
+    </div>
+  </div>
+</template>

src/router/index.ts

@@ -6,6 +6,7 @@ import FichesView from "../views/FichesView.vue";
 import ObjetsView from "../views/ObjetsView.vue";
 import EquipView from "../views/EquipView.vue";
 import ElementsView from "../views/ElementsView.vue";
+import CapaciteView from "../views/CapaciteView.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -47,6 +48,10 @@ const router = createRouter({
       path: "/jdr/:jdr/elements/",
       component: ElementsView,
     },
+    {
+      path: "/jdr/:jdr/pouvoirs/:filepath",
+      component: CapaciteView,
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     if (to.hash) {

src/stores/config.ts

@@ -62,7 +62,9 @@ export const useConfigStore = defineStore("config", () => {
 
   function getSidebar(): LinkList[] {
     if (isJdrLoaded()) {
-      return sidebar.value;
+      return (
+        sidebar.value.sort((a, b) => a.id - b.id) ?? [{ id: 0, links: [] }]
+      );
     } else {
       return (
         config.value?.jdr?.sort((a, b) => a.id - b.id) ?? [{ id: 0, links: [] }]

src/types/Capacite.ts

@@ -0,0 +1,13 @@
+export default interface Capacite {
+  nom: string;
+  description: string;
+  stats?: string[];
+  couts?: string[];
+  type?: "posture" | "passif";
+  levelups?: LevelUp[][];
+}
+
+interface LevelUp {
+  niveau: number;
+  effet: string;
+}

src/types/CapaciteList.ts

@@ -0,0 +1,4 @@
+export default interface CapaciteList {
+  title: string;
+  capacites: string[];
+}

src/views/CapaciteView.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import CapaciteFile from "@/components/CapaciteFile.vue";
+import { useConfigStore } from "@/stores/config";
+import { useTocStore } from "@/stores/toc";
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+
+const store = useConfigStore();
+const toc = useTocStore();
+const route = useRoute();
+
+onMounted(() => {
+  toc.resetToc();
+  store.loadJdr(`${route.params.jdr}`);
+  console.log(`${route.params.filepath}`);
+});
+</script>
+
+<template>
+  <main>
+    <CapaciteFile
+      :path="`rules/pouvoirs/${$route.params.filepath}`"
+      :json="`jdr/pouvoirs/${$route.params.filepath}`"
+    ></CapaciteFile>
+  </main>
+</template>