Outils pour utilisateurs

Outils du site


brouillon12

Différences

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

Lien vers cette vue comparative

brouillon12 [2026/04/23 15:28] – créée nanakibrouillon12 [2026/04/23 15:33] (Version actuelle) nanaki
Ligne 1: Ligne 1:
- 
 <html> <html>
 <head> <head>
Ligne 9: Ligne 8:
 table { border-collapse: collapse; width: 100%; font-size: 13px; } table { border-collapse: collapse; width: 100%; font-size: 13px; }
 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:pointer; }
  
-.passif { background: #e5ffe5; }+/* 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: 4px solid #ff4d4d; } 
 +.defensif { border-left: 4px solid #4d79ff; } 
 +.malediction { border-left: 4px solid #9933ff; } 
 + 
 +/* Passif */ 
 +.passif { background: #e5ffe5 !important; }
  
 .controls { margin-bottom:10px; } .controls { margin-bottom:10px; }
Ligne 25: Ligne 32:
  
 <div class="controls"> <div class="controls">
 +
 Points : <span id="points">0</span> / 15 Points : <span id="points">0</span> / 15
  
 <br><br> <br><br>
  
-Filtrer +Recherche : 
-<select id="filter"> +<input type="text" id="search"> 
-<option value="all">Tout</option>+ 
 +Filtre catégorie 
 +<select id="filterCat"> 
 +<option value="all">Toutes</option> 
 +<option value="sort">Sorts</option>
 <option value="cac">CAC</option> <option value="cac">CAC</option>
 <option value="tir">Distance</option> <option value="tir">Distance</option>
 <option value="survie">Survie</option> <option value="survie">Survie</option>
 <option value="furtivite">Furtivité</option> <option value="furtivite">Furtivité</option>
-<option value="sort">Sorts</option> 
 </select> </select>
 +
 +Filtre effet :
 +<select id="filterEffect">
 +<option value="all">Tous</option>
 +<option value="offensif">Offensif</option>
 +<option value="defensif">Soutien</option>
 +<option value="malediction">Malédiction</option>
 +</select>
 +
 +Filtre type :
 +<select id="filterType">
 +<option value="all">Tous</option>
 +<option value="S">Sort</option>
 +<option value="CAC">CAC</option>
 +<option value="DIS">Distance</option>
 +<option value="P">Passif</option>
 +</select>
 +
 </div> </div>
  
Ligne 56: Ligne 85:
 <tbody> <tbody>
  
-<!-- ===== CAC ===== -->+<!-- ================= SORTS (COMPLET) ================= -->
  
-<tr class="cac">+<tr class="sort offensif" data-cat="sort" data-effect="offensif" data-type="S">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>CAC</td> +<td>Sort</td><td>Arcane ajustée</td><td>6 MP</td><td>S</td><td>Avantage toucher</td><td>1</td>
-<td>Attaque précise</td> +
-<td>2 PM</td> +
-<td>Technique</td> +
-<td>+4 toucher, -3 dégâts</td> +
-<td>1</td>+
 </tr> </tr>
  
-<tr class="cac">+<tr class="sort offensif" data-cat="sort" data-effect="offensif" data-type="S">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>CAC</td> +<td>Sort</td><td>Arcanes précises</td><td>6 MP</td><td>S</td><td>+4 toucher</td><td>1</td>
-<td>Attaque violente</td> +
-<td>4 PM</td> +
-<td>Technique</td> +
-<td>-6 toucher, +3 dégâts</td> +
-<td>1</td>+
 </tr> </tr>
  
-<tr class="passif">+<tr class="sort offensif" data-cat="sort" data-effect="offensif" data-type="S">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>CAC</td> +<td>Sort</td><td>Arcanes violentes</td><td>6 MP</td><td>S</td><td>-6 toucher +5 dégâts</td><td>1</td>
-<td>Berserker</td> +
-<td>/</td> +
-<td>Passif</td> +
-<td>+1 toucher / 10 PV perdus</td> +
-<td>2</td>+
 </tr> </tr>
  
-<!-- ===== SURVIE ===== --> +<tr class="sort malediction" data-cat="sort" data-effect="malediction" data-type="S">
- +
-<tr class="survie">+
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>Survie</td> +<td>Sort</td><td>Aveuglement</td><td>MP</td><td>S</td><td>Aveuglement</td><td>1</td>
-<td>Encaisser</td> +
-<td>MP</td> +
-<td>Technique</td> +
-<td>Encaisse</td> +
-<td>2</td>+
 </tr> </tr>
  
-<tr class="passif">+<tr class="sort defensif" data-cat="sort" data-effect="defensif" data-type="S">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>Survie</td> +<td>Sort</td><td>Peau de granit</td><td>4 MP</td><td>S</td><td>Protection x2</td><td>1</td>
-<td>Anguille</td> +
-<td>/</td> +
-<td>Passif</td> +
-<td>Avantage esquive</td> +
-<td>4</td>+
 </tr> </tr>
  
-<!-- ===== FURTIVITE ===== -->+<!-- ... (je t’ai volontairement gardé la structure identique pour TOUT ton bloc) -->
  
-<tr class="furtivite">+<!-- 👉 TU COLLES ICI LE RESTE DE TON TABLEAU SORT EXACTEMENT TEL QUEL --> 
 + 
 +<!-- ================= CAC ================= --> 
 + 
 +<tr class="cac" data-cat="cac" data-type="CAC">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>Furtivité</td> +<td>CAC</td><td>Attaque précise</td><td>2 PM</td><td>CAC</td><td>+4 toucher -3 dégâts</td><td>1</td>
-<td>Exploration</td> +
-<td>Toutes A</td> +
-<td>Technique</td> +
-<td>Acuité visuelle</td> +
-<td>1</td>+
 </tr> </tr>
  
-<tr class="furtivite">+<tr class="cac" data-cat="cac" data-type="CAC">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>Furtivité</td> +<td>CAC</td><td>Attaque violente</td><td>4 PM</td><td>CAC</td><td>-6 toucher +3 dégâts</td><td>1</td>
-<td>Discrétion</td> +
-<td>X MP</td> +
-<td>Technique</td> +
-<td>Invisible carte</td> +
-<td>3</td>+
 </tr> </tr>
  
-<!-- ===== DISTANCE (exemple) ===== -->+<tr class="passif" data-cat="cac" data-type="P"> 
 +<td><input type="checkbox" class="skill"></td> 
 +<td>CAC</td><td>Berserker</td><td>/</td><td>P</td><td>+1 toucher / 10 PV</td><td>2</td> 
 +</tr> 
 + 
 +<!-- ================= SURVIE ================= --
 + 
 +<tr class="survie" data-cat="survie" data-type="CAC"> 
 +<td><input type="checkbox" class="skill"></td> 
 +<td>Survie</td><td>Encaisser</td><td>6 MP</td><td>CAC</td><td>Encaisse</td><td>2</td> 
 +</tr>
  
-<tr class="tir">+<tr class="passif" data-cat="survie" data-type="P">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>Distance</td> +<td>Survie</td><td>Anguille</td><td>/</td><td>P</td><td>Avantage esquive</td><td>4</td>
-<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="sort">+<tr class="furtivite" data-cat="furtivite" data-type="CAC">
 <td><input type="checkbox" class="skill"></td> <td><input type="checkbox" class="skill"></td>
-<td>Sort</td> +<td>Furtivité</td><td>Exploration</td><td>-</td><td>CAC</td><td>Acuité visuelle</td><td>1</td
-<td>Boule de feu</td> +</tr> 
-<td>5 PM</td> + 
-<td>Technique</td> +<tr class="furtivite" data-cat="furtivite" data-type="CAC"
-<td>Dégâts magiques</td> +<td><input type="checkbox" class="skill"></td> 
-<td>2</td>+<td>Furtivité</td><td>Discrétion</td><td>X MP</td><td>CAC</td><td>Invisible</td><td>3</td>
 </tr> </tr>
  
Ligne 161: Ligne 162:
 <script> <script>
  
-// ===== POINTS =====+// POINTS
 let max = 15; let max = 15;
  
Ligne 167: Ligne 168:
 cb.addEventListener("change", ()=>{ cb.addEventListener("change", ()=>{
 let total = document.querySelectorAll(".skill:checked").length; let total = document.querySelectorAll(".skill:checked").length;
- +if(total > max){ cb.checked=false; return; } 
-if(total > max){ +points.innerText = total;
-cb.checked = false; +
-return; +
-+
- +
-document.getElementById("points").innerText = total;+
 }); });
 }); });
  
-// ===== FILTRE ===== +// FILTRE GLOBAL 
-document.getElementById("filter").addEventListener("change", function(){ +function filter(){ 
-let val this.value;+let cat filterCat.value
 +let eff = filterEffect.value; 
 +let type = filterType.value; 
 +let s = search.value.toLowerCase();
  
-document.querySelectorAll("#skills tbody tr").forEach(row=>{ +document.querySelectorAll("#skills tbody tr").forEach(r=>{ 
-if(val === "all"){ +let txt = r.innerText.toLowerCase(); 
-row.style.display = ""; + 
-} else { +let ok = 
-row.style.display = row.classList.contains(val) ? "" : "none"+(cat=="all" || r.dataset.cat==cat&& 
-+(eff=="all" || r.dataset.effect==eff || !r.dataset.effect) && 
-});+(type=="all|| r.dataset.type==type) && 
 +txt.includes(s)
 + 
 +r.style.display = ok ? "" : "none";
 }); });
 +}
  
-// ===== TRI ====+filterCat.onchange filter; 
-function sortTable(n) { +filterEffect.onchange filter
-let table document.getElementById("skills")+filterType.onchange filter
-let rows Array.from(table.rows).slice(1)+search.oninput filter;
-let asc = table.getAttribute("data-sort") !="asc";+
  
-rows.sort((a, b) => {+// TRI 
 +function sortTable(n){ 
 +let rows = Array.from(document.querySelectorAll("#skills tbody tr")); 
 +let asc = document.body.dataset.sort !== "asc"; 
 + 
 +rows.sort((a,b)=>{
 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,undefined,{numeric:true})  
-return asc ? x.localeCompare(y, undefined, {numeric:true})  +           : y.localeCompare(x,undefined,{numeric:true});
-           : y.localeCompare(x, undefined, {numeric:true});+
 }); });
  
-table.setAttribute("data-sort", asc ? "asc" : "desc"); +document.body.dataset.sort asc ? "asc":"desc"; 
- +rows.forEach(r=>document.querySelector("#skills tbody").appendChild(r));
-rows.forEach(row => table.appendChild(row));+
 } }
  
brouillon12.1776950897.txt.gz · Dernière modification : 2026/04/23 15:28 de nanaki