fix(pages): adaptation du routeur

public/datas/creatures/animaux.json

@@ -0,0 +1,30 @@
+[
+    {
+        "nom":"Chèvre",
+        "classe":"Troupeau",
+        "carrure":"Médium Commun",
+        "min":1,
+        "max":5,
+        "armes":["cornes"],
+        "armures":["Cuir Naturel"],
+        "pouvoirs":["Rendre Chèvre"],
+        "elements":[],
+        "type":"",
+        "replace":[],
+        "overrideStats":[]
+    },
+    {
+        "nom":"Bélier",
+        "classe":"Troupeau",
+        "carrure":"Médium Commun",
+        "min":1,
+        "max":5,
+        "armes":["cornes"],
+        "armures":["Laine"],
+        "pouvoirs":["Rendre Chèvre"],
+        "elements":[],
+        "type":"",
+        "replace":[],
+        "overrideStats":[]
+    }
+]

public/pages/about.md

@@ -1,11 +1,9 @@
 # À propos
 
-Pélican est un système générique de jeu de rôle basé sur le système D100, ayant pour objectif de créer un système de jeu de rôle simple mais efficace, se basant sur les dés les plus générique d’un rôliste. Il vise plutôt les débutants dans le JDR, et/ou ceux qui veulent ne pas se prendre la tête avec de nombreux calculs. Il provient en grande partie de ma frustration avec des systèmes comme celui de Pathfinder ou de tout les systèmes D6, qui n'étaient pas adapté à mes besoins.
+Pélican est un bestiaire créé pour mon jeu de rôle Erratum, mais réutilisable potentiellement dans d'autres jeux de rôles utilisant un système similaire. Ce bestiaire à pour but de contenir pas mal de créatures à terme de l'imaginaire collectif afin de pouvoir gérer plus facilement les rencontres dans mon JDR.
 
-Il est à noter que toutes les règles dans ces pages doivent être vu comme servant avant tout à servir la construction d'une histoire, et le RP.
+Erratum est lui un JDR basé sur le système D100, ayant pour objectif de créer un système de jeu de rôle simple mais efficace, se basant sur les dés les plus générique d’un rôliste. Il vise plutôt les débutants dans le JDR, et/ou ceux qui veulent ne pas se prendre la tête avec de nombreux calculs. Il se déroule dans un univers de fantasy urbaine (mais peut être adapté à plusieurs époques et ambiances).
 
-Pourquoi cette page ? Et bien, faisant un petit JDR avec mes amis, je me suis retrouvé comme beaucoup de MJ avec une situation qui peut être parfois casse-pied... Devoir gérer 300 versions du livre de règles différentes parce que le fichier .odt a été passé à plusieurs personnes, modifié sur le tas, etc.
+Pourquoi cette page ? Et bien, faisant un petit JDR avec mes amis, je me suis retrouvé comme beaucoup de MJ avec une situation qui peut être parfois casse-pied... Devoir gérer 300 versions du livre de règles différentes parce que le fichier .odt a été passé à plusieurs personnes, modifié sur le tas, etc. Et pour les monstres ? C'est encore pire. Genre je fais la moitié sur le tas, mais sont jamais adapté.
 
-Étant particulièrement feinéant, j'ai commencé à me dire que toute possibilité de moins avoir à réfléchir étant la plus belle chose qui pouvait m'arriver. En plus, je voulais m'entrainer à dev sous vue3 (la technologie utilisée pour générer ce site), et donc paf voilà le site de Pélican !
-
-Ce site vise donc à présenter les règles et les rendre facilement accessible et explorable, et présenter quelques un de mes JDR fait avec pour des campagnes homebrew.
+Ce site vise donc à présenter les créatures et les rendre facilement accessible et explorable, et les utiliser dans mes campagnes homebrew. Le site est codé en vue3, et a ses données stockées juste en tant que fichiers json.

public/pages/creatures/animaux.md

@@ -0,0 +1,3 @@
+# Animaux communs
+
+Les animaux sont les créatures les plus communes que vous pouvez trouver. Ces créatures peuvent parfois êtres domestiquées par les êtres humains, pour diverses raisons. Elles n'ont souvent pas de pouvoirs magiques, ni des niveaux très haut.

public/pages/home.md

@@ -1,9 +1,5 @@
 # Bienvenue sur le site de Pélican
 
-Pélican est un système générique de jeu de rôle basé sur le système D100, ayant pour objectif de créer un système de jeu de rôle simple mais efficace, se basant sur les dés les plus générique d’un rôliste. Il ne s'agit cependant que d'une base de système, à partir de laquelle vous pourrez construire des systèmes adaptés à votre univers et vos concepts.
+Pélican est un bestiaire pour Erratum, présentant les différents types de monstres présent dans le JDR, ainsi que les PNJs génériques (et certains spéciaux, plus tard). Les monstres réutilisent le système de niveau et le système D100 d'Erratum.
 
-Le système pélican à pour objectif de mettre en avant l'imagination et le RP plus que des règles complexes et un gameplay hyper peaufiné. Il vise à être simple à apprendre et à retenir, tout en offrant pas mal de cas de figure et possibilité. Il contient également des recommendation en terme de bienveillance envers les joueurs.
-
-Cette page vous donne accès au set de base et aux différents set de règle que j'ai fait pour mes différentes campagnes.
-
-Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise des systèmes de mon groupe de JDR. Il est distribué sous la [Creative Common BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
+Ce set de monstre est fourni par [Kazhnuz](https://kazhnuz.space), et est basé sur des monstres communs et sortant souvent du domaine public. Le set complet est distribué sous la [Creative Common BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/), mais les concepts de base des monstres sont du domaine public du coup.

src/App.vue

@@ -27,6 +27,5 @@ onMounted(() => {
         <RouterView v-if="loaded" />
       </div>
     </div>
-    <TableOfContent />
   </div>
 </template>

src/components/layout/SideBar.vue

@@ -1,34 +1,24 @@
 <script setup lang="ts">
-import { useConfigStore } from "@/stores/config";
 import { computed } from "vue";
+import { LISTE_CREATURES } from "@/utils/constantes";
+import { toURI } from "@/utils/urls";
 
-const store = useConfigStore();
-
-const sidebar = computed(() => {
-  return store.getSidebar() ?? [{ title: "", id: 0, links: [] }];
-});
-
-const linkBase = computed(() => {
-  if (store.isJdrLoaded()) {
-    return `jdr/${store.currentJdr}`;
-  } else {
-    return `jdr`;
-  }
+const creatures = computed(() => {
+  return LISTE_CREATURES;
 });
 </script>
 
 <template>
   <aside id="sidebar" class="bg-dark fg-light menu">
     <h1 class="title-5 fg-light">Navigation</h1>
-    <ul v-for="item in sidebar" :key="item.id">
-      <div class="menu-divider" v-if="item.title">{{ item.title }}</div>
-      <li v-for="(link, index) in item.links" :key="index">
+    <ul>
+      <div class="menu-divider">Créatures</div>
+      <li v-for="(creature, index) in creatures" :key="index">
         <router-link
-          :to="`/${linkBase}/${link.path}`"
+          :to="`/creatures/${toURI(creature)}`"
           class="menu-item"
           :replace="true"
-          v-if="!link.isHidden"
-          >{{ link.title }}</router-link
+          >{{ creature }}</router-link
         >
       </li>
     </ul>

src/components/layout/TopBar.vue

@@ -2,15 +2,14 @@
   <header class="bg-primary" id="topbar">
     <div class="menu toolbar fg-light d-block d-flex-sm">
       <ul>
-        <li><router-link to="/" class="menu-item">Home</router-link></li>
+        <li><router-link to="/" class="menu-item">Accueil</router-link></li>
         <li>
-          <router-link to="/about" class="menu-item">À propos</router-link>
+          <router-link to="/pages/about" class="menu-item"
+            >À propos</router-link
+          >
         </li>
       </ul>
       <ul class="f-end">
-        <li>
-          <router-link to="/fiches" class="menu-item">Fiches</router-link>
-        </li>
         <li>
           <a
             href="https://git.kobold.cafe/pelican/pelican-jdr"
@@ -19,7 +18,7 @@
           >
         </li>
         <li>
-          <a href="https://kazhnuz.space" class="menu-item">Retour</a>
+          <a href="https://erratum.kazhnuz.space" class="menu-item">Erratum</a>
         </li>
       </ul>
     </div>

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/router/index.ts

@@ -1,11 +1,7 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import RuleView from "../views/RuleView.vue";
-import JdrView from "../views/JdrView.vue";
-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 CreaturesView from "../views/CreatureListView.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -16,39 +12,15 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: "/jdr/:jdr/rules/:category/:filepath",
+      path: "/pages/:filepath",
       component: RuleView,
     },
     {
-      path: "/jdr/:jdr/",
-      component: JdrView,
-    },
-    {
-      path: "/fiches",
-      component: FichesView,
-    },
-    {
-      path: "/about",
-      name: "about",
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import("../views/AboutView.vue"),
-    },
-    {
-      path: "/jdr/:jdr/inventaire/objets/",
-      component: ObjetsView,
-    },
-    {
-      path: "/jdr/:jdr/inventaire/equipements/",
-      component: EquipView,
-    },
-    {
-      path: "/jdr/:jdr/elements/",
-      component: ElementsView,
+      path: "/creatures/:group",
+      component: CreaturesView,
     },
   ],
-  scrollBehavior(to, from, savedPosition) {
+  scrollBehavior(to) {
     if (to.hash) {
       return {
         el: to.hash,

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/styles/custom/_article.scss

@@ -11,6 +11,9 @@ article .table-auto table, table.table-auto {
 table {
     display: table;
     width: 100%;
+}
+
+table.fixed {
     table-layout: fixed;
 }
 

src/styles/custom/_global.scss

@@ -12,10 +12,10 @@
 }
 
 #sidebar {
+  padding:0.5rem;
   padding-top:1rem;
   padding-left:0.75rem;
   width:17rem;
-  position: fixed;
   height: calc(100vh - 3rem);
   overflow: scroll;
   h1 {
@@ -30,8 +30,10 @@
 
 #page {
   flex-grow:1;
-  padding-left:18rem;
-  padding-right: 18rem;
+  margin:auto;
+  margin-top:0;
+  max-width:1200px;
+  padding: 1rem;
 }
 
 #toc {

src/styles/definitions/_fonts.scss

@@ -1,12 +1,12 @@
 // FONTS
 // Define how looks the text
 
-$fontsize: 4.75mm;
+$fontsize: 4.25mm;
 
 $fontweight_big: 300;
 $fontweight_base: 400;
 $fontweight_bold: 600;
 $fontweight_hyper: 800;
 
-$basefont: Open Sans, sans-serif;
-$titlefont: Open Sans, sans-serif;
+$basefont: -apple-system, system-ui, sans-serif;
+$titlefont: -apple-system, system-ui, sans-serif;

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/utils/constantes.ts

@@ -0,0 +1,8 @@
+export const LISTE_CREATURES = [
+  "Animaux",
+  "Animaux sauvages",
+  "Animaux magiques",
+  "Démons",
+  "Petit peuples",
+  "Morts-Vivants",
+];

src/utils/urls.ts

@@ -0,0 +1,8 @@
+export function toURI(str: string): string {
+  return str
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+}

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>

src/views/RuleView.vue

@@ -17,8 +17,6 @@ onMounted(() => {
 
 <template>
   <main>
-    <MarkdownFile
-      :path="`rules/${$route.params.category}/${$route.params.filepath}`"
-    />
+    <MarkdownFile :path="`pages/${$route.params.filepath}`" />
   </main>
 </template>

tsconfig.json

@@ -14,4 +14,6 @@
       "path": "./tsconfig.config.json"
     }
   ],
+  "resolveJsonModule": true,
+  "esModuleInterop": true,
 }