feat: ajout datatables

Fixes #3

_includes/layouts/parent.njk

@@ -13,8 +13,10 @@
 
 		{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
 		<meta name="generator" content="{{ eleventy.generator }}">
+		<script src="/js/datatables.js"></script>
 
 		{%- css %}{% include "public/css/index.css" %}{% endcss %}
+		{%- css %}{% include "public/css/datatables.css" %}{% endcss %}
 		<style>{% getBundle "css" %}</style>
 
 	</head>
@@ -50,5 +52,25 @@
 		<footer><a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
 
 		<!-- Current page: {{ page.url | htmlBaseUrl }} -->
+
+		<script>
+			const myTable = document.querySelector("#dataTable table");
+
+			console.log(myTable);
+
+			if (myTable) {
+				let labels = {
+						placeholder: "Chercher...",
+						searchTitle: "Chercher dans le tableau",
+						perPage: "lignes par page",
+						noRows: "Aucune lignée trouvée",
+						info: "Résultats {start} à {end} sur {rows}",
+						noResults: "Aucun résultat ne correspond à votre recherche",
+				};
+				let dataTable = new simpleDatatables.DataTable("#dataTable table", {
+					labels,
+				});
+			}
+		</script>
 	</body>
 </html>

content/inventaire/equipements/accessoires.md

@@ -14,9 +14,7 @@ parent: Les équipements
 > [!NOTE]
 > Pour des raisons de gameplay, les personnages sont limité à deux accessoires. Si vous vous demandez pourquoi le personnage ne peut pas avoir des lunettes, des chaussures et un slip à la fois, dites vous que dans les faits, oui il a un superbe slip magnifique et vos baskets qui vous empêcheront d'entrer en boite de nuit.
 
-<!-- tabs:start -->
+<div id="dataTable">
-
-### ** Statistiques **
 
 | Accessoire | Effet | Prix |
 |:----------:|:------|:----:|
@@ -31,22 +29,13 @@ parent: Les équipements
 | Collier mignon | +15 en REL | 650 |
 | Monocle ultime | +15 en PER | 650 |
 | Anneau de contrôle satanique | +15% CHA/VOL contre démons | 750 |
-
-### ** Protection **
-
-
-| Accessoire | Effet | Prix |
-|:----------:|:------|:----:|
 | Débardeur d'acier | +3 armure physique | 750 |
 | Joli clochette | +3 armure magique | 750 |
 | Lunettes de soleil swag | +3 armure mental | 750 |
 | Lunettes Optic Grosbill | Protège de tout malus en perception | 750 |
-
-### ** Divers **
-
-| Accessoire | Effet | Prix |
-|:----------:|:------|:----:|
 | Masque de terreur | En cas de jet de panique, 1D4. Si 4, un allié fait aussi un jet de panique. Sinon, un ennemi le fait | 1500 |
 | Slip divin | +20 aux jets de survies | 2550 |
 | Toge Ancienne de Cultiste | Boost de SAG + 10% de résistance mentale à la métaphysique | 1000 |
-| Toge Ancienne de Frontière | Boost de INT + 10% de métaphysique | 1000 |
+| Toge Ancienne de Frontière | Boost de INT + 10% de métaphysique | 1000 |
+
+</div>

content/mobs/creatures/index.md

@@ -13,54 +13,42 @@ models:
 
 Dans tout JDR, les mobs sont une partie intégrante de ce qu'on peut rencontrer. DanseRonce utilise un système d'espèce pour construire ses créatures. Il est à noter que les créatures ne sont pas forcément des êtres sans intelligences, cela peut aussi concerner des créatures capables de raisons.
 
-## Grands groupes
+## Types de créatures
 
 > [!DANGER]
 > Toutes les créatures reçoivent x2 (x4 si faiblesse à l'éclat) par les attaques d'anomie, sauf les êtres anomique qui reçoivent x1, et les DernierSouffle qui reçoivent x0.5.
 
-### Créatures biologiques
+<div id="dataTable">
 
-| Créatures | Spécificités | Faiblesses | Résistances | Immunité |
-|:---------:|:------------:|:----------:|:-----------:|:--------:|
-| Humanoïdes | Peut manier des armes |  |  | |
-| Bêtes | Des griffes et des crocs | Metal, Chaos, Glace | Air | |
-| Reptiles |  | Glace, Ombre | Feu, Lumière | |
-| Aquatique | Peuvent respirer sous l'eau | Foudre, Végétal | Eau, Feu | |
-| Végétaux | C dé salad lol | Feu, Metal, Poison | Eau, Végétal | |
-| Insectes | | Terre, Feu, Glace | Ordre | |
-| Aerien | | Air, Glace | Terre, Espace | |
 
-### Créatures non-biologiques
+| Créatures | Type | Spécificités | Faiblesses | Résistances | Immunité |
+|:---------:|:----:|:------------:|:----------:|:-----------:|:--------:|
+| Humanoïdes | Biologique | Peut manier des armes |  |  | |
+| Bêtes | Biologique | Des griffes et des crocs | Metal, Chaos, Glace | Air | |
+| Reptiles | Biologique | | Glace, Ombre | Feu, Lumière | |
+| Aquatique | Biologique | Peuvent respirer sous l'eau | Foudre, Végétal | Eau, Feu | |
+| Végétaux | Biologique |  | Feu, Metal, Poison | Eau, Végétal | |
+| Insectes | Biologique | | Terre, Feu, Glace | Ordre | |
+| Aerien | Biologique | | Air, Glace | Terre, Espace | |
+| Machines | Non-biologique |  Ne sont pas soumis aux besoins vitaux normaux | Eau, Foudre, Chaos | Metal, Végétal, Énergie | Poison |
+| Minéraloïdes | Non-biologique | Armure naturelle élevée | Eau, Temps | Foudre, Feu, Air | Poison |
+| Créature de glace | Non-biologique | | Feu, Lumière, Énergie | Glace | |
+| Volutes | Non-biologique | Créatures gazeuses | Végétal, Air, Foudre | Terre, Metal, Temps | Poison |
+| Gelatineux | Non-biologique | Créatures liquides et semi-liquide | Metal, Vegetal, Son | Force, Poison, Eau | |
+| Feufolets | Non-biologique | Créatures de feu | Eau, Terre | Glace | Feu |
+| Démons | Magique | Liés au chaos | Ordre, Lumière | Chaos, Ombre | |
+| Mort-vivant | Magique | Des corps maintenu par la magie | Lumière | Ombre | |
+| Parasite | Magique | Peuvent parasiter d'autres créatures | Feu, Ordre | Végétal | Chaos |
+| Calorique | Magique | Créatures d'énergie pure | | | Poison |
+| Psychiques | Magique | Créatures avec une forte puissance mentales | Ombre, Force, Son | Esprit | |
+| Âmes | Magique | Des êtres d'esprit, sans corps | Tout ce qui est métaphysique, Eclat | Son, Esprit | Tout ce qui est physique, Force, Poison |
+| Titans | Paradoxal | Peuvent être lié élémentairement | *Divers* + Éclat | *Divers* | *Divers* |
+| Effacés | Paradoxal | Liés au néant | Énergie, Éclat | Chaos, Ombre | Néant |
+| Célèste | Paradoxal | Lié à l'ordre | Ombre, Chaos | Lumière, Énergie, Ordre | |
+| Irrégularité | Anomique | Des êtres corrompus par l'anomie | *Divers* + Anomie | *Divers* + Eclat, Paradoxe | *Divers* |
+| Aberration  | Anomique | Des êtres transformé par l'anomie | | Eclat, Paradoxe | Anomie |
 
-| Créatures | Spécificités | Faiblesses | Résistances | Immunité |
+</div>
-|:---------:|:------------:|:----------:|:-----------:|:--------:|
-| Machines | Ne sont pas soumis aux besoins vitaux normaux | Eau, Foudre, Chaos | Metal, Végétal, Énergie | Poison |
-| Minéraloïdes | Armure naturelle élevée | Eau, Temps | Foudre, Feu, Air | Poison |
-| Créature de glace | | Feu, Lumière, Énergie | Glace | |
-| Volutes | Créatures gazeuses | Végétal, Air, Foudre | Terre, Metal, Temps | Poison |
-| Gelatineux | Créatures liquides et semi-liquide | Metal, Vegetal, Son | Force, Poison, Eau | |
-| Feufolets | Créatures de feu | Eau, Terre | Glace | Feu |
-
-### Créatures magiques
-
-| Créatures | Spécificités | Faiblesses | Résistances | Immunité |
-|:---------:|:------------:|:----------:|:-----------:|:--------:|
-| Démons | Liés au chaos | Ordre, Lumière | Chaos, Ombre | |
-| Mort-vivant | Des corps maintenu par la magie | Lumière | Ombre | |
-| Parasite | Peuvent parasiter d'autres créatures | Feu, Ordre | Végétal | Chaos |
-| Calorique | Créatures d'énergie pure | | | Poison |
-| Psychiques | Créatures avec une forte puissance mentales | Ombre, Force, Son | Esprit | |
-| Âmes | Des êtres d'esprit, sans corps | Tout ce qui est métaphysique, Eclat | Son, Esprit | Tout ce qui est physique, Force, Poison |
-
-### Créatures paradoxales
-
-| Créatures | Spécificités | Faiblesses | Résistances | Immunité |
-|:---------:|:------------:|:----------:|:-----------:|:--------:|
-| Titans | Peuvent être lié élémentairement | *Divers* + Éclat | *Divers* | *Divers* |
-| Effacés | Liés au néant | Énergie, Éclat | Chaos, Ombre | Néant |
-| Célèste | Lié à l'ordre | Ombre, Chaos | Lumière, Énergie, Ordre | |
-| Irrégularité | Des êtres corrompus par l'anomie | <Divers> + Anomie | <Divers> + Eclat, Paradoxe | <Divers> |
-| Aberration  | Des êtres transformé par l'anomie | | Eclat, Paradoxe | Anomie |
 
 ## Familiers
 

public/css/datatables.css

@@ -0,0 +1,209 @@
+.datatable-top,
+.datatable-bottom {
+  padding: 8px 10px;
+}
+
+.datatable-top>nav:first-child,
+.datatable-top>div:first-child,
+.datatable-bottom>nav:first-child,
+.datatable-bottom>div:first-child {
+  float: left;
+}
+
+.datatable-top>nav:last-child,
+.datatable-top>div:last-child,
+.datatable-bottom>nav:last-child,
+.datatable-bottom>div:last-child {
+  float: right;
+}
+
+.datatable-selector {
+  padding: 6px;
+  border-radius: 6px;
+  border:0;
+  background-color: rgba(255,255,255,0.2);
+  color:var(--text-color)
+}
+
+.datatable-input {
+  padding: 6px 12px;
+  background-color:rgba(255, 255, 255, 0.2);
+  color: var(--text-color);
+  border:none;
+  border-radius:6px;
+}
+
+.datatable-info {
+  margin: 7px 0;
+}
+
+/* PAGER */
+.datatable-pagination ul {
+  margin: 0;
+  padding-left: 0;
+}
+
+.datatable-pagination li {
+  list-style: none;
+  float: left;
+}
+
+.datatable-pagination li.datatable-hidden {
+  visibility: hidden;
+}
+
+.datatable-pagination a {
+  border: 1px solid transparent;
+  float: left;
+  margin-left: 2px;
+  padding: 6px 12px;
+  position: relative;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.datatable-pagination a:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.datatable-pagination .datatable-active a,
+.datatable-pagination .datatable-active a:focus,
+.datatable-pagination .datatable-active a:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  cursor: default;
+}
+
+.datatable-pagination .datatable-ellipsis a,
+.datatable-pagination .datatable-disabled a,
+.datatable-pagination .datatable-disabled a:focus,
+.datatable-pagination .datatable-disabled a:hover {
+  pointer-events: none;
+  cursor: default;
+}
+
+.datatable-pagination .datatable-disabled a,
+.datatable-pagination .datatable-disabled a:focus,
+.datatable-pagination .datatable-disabled a:hover {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.datatable-pagination .datatable-pagination a {
+  font-weight: bold;
+}
+
+/* TABLE */
+.datatable-table {
+  max-width: 100%;
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.datatable-table>tbody>tr>td,
+.datatable-table>tbody>tr>th,
+.datatable-table>tfoot>tr>td,
+.datatable-table>tfoot>tr>th,
+.datatable-table>thead>tr>td,
+.datatable-table>thead>tr>th {
+  vertical-align: top;
+  padding: 8px 10px;
+}
+
+.datatable-table>thead>tr>th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table>tfoot>tr>th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th {
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.datatable-table th a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.datatable-sorter,
+.datatable-filter {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.datatable-sorter::before,
+.datatable-sorter::after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  right: 4px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  opacity: 0.2;
+}
+
+
+.datatable-sorter::before {
+  border-top: 4px solid var(--text-color);
+  bottom: 0px;
+}
+
+.datatable-sorter::after {
+  border-bottom: 4px solid var(--text-color);
+  border-top: 4px solid transparent;
+  top: 0px;
+}
+
+.datatable-ascending .datatable-sorter::after,
+.datatable-descending .datatable-sorter::before,
+.datatable-ascending .datatable-filter::after,
+.datatable-descending .datatable-filter::before {
+  opacity: 0.6;
+}
+
+.datatable-filter::before {
+  content: "";
+  position: absolute;
+  right: 4px;
+  opacity: 0.2;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-radius: 50%;
+  border-top: 10px solid var(--text-color);
+  top: 25%;
+}
+
+.datatable-filter-active .datatable-filter::before {
+  opacity: 0.6;
+}
+
+.datatable-empty {
+  text-align: center;
+}
+
+.datatable-top::after,
+.datatable-bottom::after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+table.datatable-table:focus tr.datatable-cursor>td:first-child {
+  border-left: 3px var(--text-color) solid;
+}
+
+table.datatable-table:focus {
+  outline: solid 1px black;
+  outline-offset: -1px;
+}