Différences

Ci-dessous, les différences entre deux révisions de la page.

--- brouillon4 [2026/04/21 20:58] – nanaki
+++ brouillon4 [2026/04/21 21:02] (Version actuelle) – nanaki
@@ Ligne 1: / Ligne 1: @@
-<html>
-<style>
-.controls { display:flex; gap:10px; margin-bottom:10px; }
-table { width:100%; border-collapse:collapse; }
-th, td { border:1px solid #ccc; padding:6px; }
-th { background:#f2f2f2; cursor:pointer; }
-tr:nth-child(even){ background:#fafafa; }
-.offensif { background:#ffe5e5; }
-.defensif { background:#e5f0ff; }
-.utilitaire { background:#e5ffe5; }
-.lvl { padding:2px 6px; border-radius:4px; }
-.lvl-1 { background:#ddd; }
-.lvl-2 { background:#cce5ff; }
-</style>
-<div class="controls">
-<select id="raceFilter">
-<option value="Toutes">Toutes</option>
-<option value="Communs">Communs</option>
-</select>
-<select id="typeFilter">
-<option value="Tous">Tous</option>
-<option value="CAC">CAC</option>
-<option value="Distance">Distance</option>
-<option value="Sort">Sort</option>
-</select>
-</div>
-<table id="table">
-<thead>
-<tr>
-<th onclick="sortTable(0)">Race</th>
-<th onclick="sortTable(1)">Nom</th>
-<th onclick="sortTable(2)">Type</th>
-<th>Effet</th>
-<th onclick="sortTable(4)">Niveau</th>
-</tr>
-</thead>
-<tbody>
-<tr class="Communs offensif" data-type="CAC" data-level="1">
-<td>Communs</td>
-<td>Attaque précise</td>
-<td>CAC</td>
-<td>+4 toucher, -3 dégâts</td>
-<td><span class="lvl lvl-1">1</span></td>
-</tr>
-<tr class="Communs offensif" data-type="Distance" data-level="1">
-<td>Communs</td>
-<td>Arme improvisée</td>
-<td>Distance</td>
-<td>-4 toucher, -2 dégâts</td>
-<td><span class="lvl lvl-1">1</span></td>
-</tr>
-<tr class="Communs utilitaire" data-type="Sort" data-level="1">
-<td>Communs</td>
-<td>Arcane ajustée</td>
-<td>Sort</td>
-<td>Avantage au toucher</td>
-<td><span class="lvl lvl-1">1</span></td>
-</tr>
-</tbody>
-</table>
-<script>
-const raceFilter = document.getElementById("raceFilter");
-const typeFilter = document.getElementById("typeFilter");
-const rows = document.querySelectorAll("#table tbody tr");
-function filter(){
-  rows.forEach(row=>{
-    const raceOk = raceFilter.value==="Toutes" || row.classList.contains(raceFilter.value);
-    const typeOk = typeFilter.value==="Tous" || row.dataset.type===typeFilter.value;
-    row.style.display = (raceOk && typeOk) ? "" : "none";
-  });
-}
-raceFilter.onchange = filter;
-typeFilter.onchange = filter;
-function sortTable(col){
-  const tbody = document.querySelector("#table tbody");
-  const rowsArr = Array.from(tbody.rows);
-  rowsArr.sort((a,b)=>a.cells[col].innerText.localeCompare(b.cells[col].innerText,undefined,{numeric:true}));
-  rowsArr.forEach(r=>tbody.appendChild(r));
-}
-</script>
-</html>