brouillon12
Différences
Ci-dessous, les différences entre deux révisions de la page.
| brouillon12 [2026/04/23 15:28] – créée nanaki | brouillon12 [2026/04/23 15:33] (Version actuelle) – nanaki | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | |||
| < | < | ||
| < | < | ||
| Ligne 9: | Ligne 8: | ||
| table { border-collapse: | table { border-collapse: | ||
| td, th { border: 1px solid #ccc; padding: 5px; } | td, th { border: 1px solid #ccc; padding: 5px; } | ||
| - | th { background: #f2f2f2; cursor: pointer; } | + | th { background: #f2f2f2; cursor: |
| - | .passif | + | /* Catégories */ |
| + | .sort { background: #fff5e5; } | ||
| .cac { background: #ffe5e5; } | .cac { background: #ffe5e5; } | ||
| .tir { background: #e5f0ff; } | .tir { background: #e5f0ff; } | ||
| .survie { background: #e5fff5; } | .survie { background: #e5fff5; } | ||
| .furtivite { background: #f5e5ff; } | .furtivite { background: #f5e5ff; } | ||
| - | .sort { background: #fff5e5; } | + | |
| + | /* Effets */ | ||
| + | .offensif { border-left: | ||
| + | .defensif { border-left: | ||
| + | .malediction { border-left: | ||
| + | |||
| + | /* Passif */ | ||
| + | .passif | ||
| .controls { margin-bottom: | .controls { margin-bottom: | ||
| Ligne 25: | Ligne 32: | ||
| <div class=" | <div class=" | ||
| + | |||
| Points : <span id=" | Points : <span id=" | ||
| < | < | ||
| - | Filtrer | + | Recherche : |
| - | <select id="filter"> | + | <input type=" |
| - | <option value=" | + | |
| + | Filtre catégorie | ||
| + | <select id="filterCat"> | ||
| + | <option value=" | ||
| + | <option value=" | ||
| <option value=" | <option value=" | ||
| <option value=" | <option value=" | ||
| <option value=" | <option value=" | ||
| <option value=" | <option value=" | ||
| - | <option value=" | ||
| </ | </ | ||
| + | |||
| + | Filtre effet : | ||
| + | <select id=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | </ | ||
| + | |||
| + | Filtre type : | ||
| + | <select id=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | </ | ||
| + | |||
| </ | </ | ||
| Ligne 56: | Ligne 85: | ||
| < | < | ||
| - | <!-- ===== CAC ===== --> | + | <!-- ================= SORTS (COMPLET) ================= --> |
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>CAC</td> | + | <td>Sort</ |
| - | <td>Attaque précise</td> | + | |
| - | <td>2 PM</td> | + | |
| - | <td>Technique</td> | + | |
| - | <td>+4 toucher, -3 dégâts</td> | + | |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>CAC</td> | + | <td>Sort</ |
| - | <td>Attaque violente</td> | + | |
| - | <td>4 PM</td> | + | |
| - | <td>Technique</td> | + | |
| - | <td>-6 toucher, | + | |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>CAC</td> | + | <td>Sort</ |
| - | <td>Berserker</td> | + | |
| - | <td>/</td> | + | |
| - | <td>Passif</td> | + | |
| - | <td>+1 toucher / 10 PV perdus</td> | + | |
| - | <td>2</td> | + | |
| </tr> | </tr> | ||
| - | <!-- ===== SURVIE ===== --> | + | <tr class=" |
| - | + | ||
| - | <tr class="survie"> | + | |
| < | < | ||
| - | <td>Survie</td> | + | <td>Sort</ |
| - | <td>Encaisser</td> | + | |
| - | <td>6 MP</ | + | |
| - | <td>Technique</td> | + | |
| - | <td>Encaisse</td> | + | |
| - | <td>2</td> | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>Survie</td> | + | <td>Sort</ |
| - | <td>Anguille</td> | + | |
| - | <td>/</td> | + | |
| - | <td>Passif</td> | + | |
| - | <td>Avantage esquive</td> | + | |
| - | <td>4</td> | + | |
| </tr> | </tr> | ||
| - | < | + | < |
| - | <tr class=" | + | <!-- 👉 TU COLLES ICI LE RESTE DE TON TABLEAU SORT EXACTEMENT TEL QUEL --> |
| + | |||
| + | <!-- ================= CAC ================= --> | ||
| + | |||
| + | <tr class=" | ||
| < | < | ||
| - | <td>Furtivité</td> | + | <td>CAC</ |
| - | <td>Exploration</td> | + | |
| - | <td>Toutes A</td> | + | |
| - | <td>Technique</td> | + | |
| - | <td>Acuité visuelle</td> | + | |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>Furtivité</td> | + | <td>CAC</ |
| - | <td>Discrétion</td> | + | |
| - | <td>X MP</td> | + | |
| - | <td>Technique</td> | + | |
| - | <td>Invisible carte</td> | + | |
| - | <td>3</td> | + | |
| </tr> | </tr> | ||
| - | <!-- ===== DISTANCE (exemple) | + | <tr class=" |
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | <!-- ================= SURVIE ================= --> | ||
| + | |||
| + | <tr class=" | ||
| + | < | ||
| + | < | ||
| + | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>Distance</td> | + | <td>Survie</ |
| - | <td>Tir précis</td> | + | |
| - | <td>3 PM</td> | + | |
| - | <td>Technique</td> | + | |
| - | <td>+3 toucher</td> | + | |
| - | <td>1</td> | + | |
| </tr> | </tr> | ||
| - | <!-- ===== SORTS (placeholder) | + | <!-- ================= FURTIVITE ================= --> |
| - | <tr class=" | + | <tr class=" |
| < | < | ||
| - | <td>Sort</td> | + | <td>Furtivité</ |
| - | <td>Boule de feu</td> | + | </ |
| - | <td>5 PM</td> | + | |
| - | <td>Technique</ | + | <tr class=" |
| - | <td>Dégâts magiques</ | + | <td><input type=" |
| - | <td>2</td> | + | <td>Furtivité</ |
| </tr> | </tr> | ||
| Ligne 161: | Ligne 162: | ||
| < | < | ||
| - | // ===== POINTS | + | // POINTS |
| let max = 15; | let max = 15; | ||
| Ligne 167: | Ligne 168: | ||
| cb.addEventListener(" | cb.addEventListener(" | ||
| let total = document.querySelectorAll(" | let total = document.querySelectorAll(" | ||
| - | + | if(total > max){ cb.checked=false; | |
| - | if(total > max){ | + | points.innerText = total; |
| - | cb.checked = false; | + | |
| - | return; | + | |
| - | } | + | |
| - | + | ||
| - | document.getElementById(" | + | |
| }); | }); | ||
| }); | }); | ||
| - | // ===== FILTRE | + | // FILTRE |
| - | document.getElementById(" | + | function |
| - | let val = this.value; | + | let cat = filterCat.value; |
| + | let eff = filterEffect.value; | ||
| + | let type = filterType.value; | ||
| + | let s = search.value.toLowerCase(); | ||
| - | document.querySelectorAll("# | + | document.querySelectorAll("# |
| - | if(val === " | + | let txt = r.innerText.toLowerCase(); |
| - | row.style.display | + | |
| - | } else { | + | let ok = |
| - | row.style.display = row.classList.contains(val) | + | (cat==" |
| - | } | + | (eff==" |
| - | }); | + | (type=="all" |
| + | txt.includes(s); | ||
| + | |||
| + | r.style.display = ok ? "" | ||
| }); | }); | ||
| + | } | ||
| - | // ===== TRI ===== | + | filterCat.onchange |
| - | function sortTable(n) { | + | filterEffect.onchange |
| - | let table = document.getElementById(" | + | filterType.onchange |
| - | let rows = Array.from(table.rows).slice(1); | + | search.oninput |
| - | let asc = table.getAttribute(" | + | |
| - | rows.sort((a, | + | // TRI |
| + | function sortTable(n){ | ||
| + | let rows = Array.from(document.querySelectorAll("# | ||
| + | let asc = document.body.dataset.sort !== " | ||
| + | |||
| + | rows.sort((a, | ||
| let x = a.cells[n].innerText.toLowerCase(); | let x = a.cells[n].innerText.toLowerCase(); | ||
| let y = b.cells[n].innerText.toLowerCase(); | let y = b.cells[n].innerText.toLowerCase(); | ||
| - | + | return asc ? x.localeCompare(y, | |
| - | return asc ? x.localeCompare(y, | + | : y.localeCompare(x, |
| - | : y.localeCompare(x, | + | |
| }); | }); | ||
| - | table.setAttribute(" | + | document.body.dataset.sort = asc ? " |
| - | + | rows.forEach(r=>document.querySelector("# | |
| - | rows.forEach(row => table.appendChild(row)); | + | |
| } | } | ||
brouillon12.1776950897.txt.gz · Dernière modification : 2026/04/23 15:28 de nanaki
