Wiki of Olympia

Outils pour utilisateurs

Outils du site

Piste :
brouillon3

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
brouillon3 [2026/04/21 17:20] – nanakibrouillon3 [2026/04/21 17:22] (Version actuelle) – nanaki
Ligne 219: Ligne 219:
  
 </table> </table>
 +
 +</html>
 +
 +
 +
 +<html>
 +
 +<style>
 +body { font-family: Arial, sans-serif; margin: 10px; }
 +
 +.controls { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
 +
 +#pointsBox { font-weight:bold; margin-bottom:10px; }
 +
 +table { width:100%; border-collapse:collapse; }
 +th, td { border:1px solid #ccc; padding:6px; text-align:left; }
 +th { background:#f2f2f2; cursor:pointer; }
 +tr:nth-child(even){ background:#fafafa; }
 +
 +.offensif { background:#ffe5e5; }
 +.defensif { background:#e5f0ff; }
 +.utilitaire { background:#e5ffe5; }
 +.malediction { background:#eadcff; }
 +
 +.lvl { padding:2px 6px; border-radius:4px; }
 +.lvl-1 { background:#ddd; }
 +.lvl-2 { background:#cce5ff; }
 +
 +</style>
 +
 +<div id="pointsBox">
 +Points utilisés : <span id="points">0</span> / 15
 +</div>
 +
 +<div class="controls">
 +
 +<select id="raceFilter">
 +<option value="Toutes">Toutes</option>
 +<option value="Communs">Communs</option>
 +</select>
 +
 +<select id="typeFilter">
 +<option value="Tous">Tous types</option>
 +<option value="CAC">CAC</option>
 +<option value="Distance">Distance</option>
 +<option value="Sort">Sort</option>
 +</select>
 +
 +<select id="effectFilter">
 +<option value="Tous">Tous effets</option>
 +<option value="offensif">Offensif</option>
 +<option value="defensif">Soutien / Défensif</option>
 +<option value="malediction">Malédiction</option>
 +</select>
 +
 +<input type="text" id="search" placeholder="Rechercher...">
 +
 +</div>
 +
 +<table id="table">
 +<thead>
 +<tr>
 +<th>Choix</th>
 +<th>Race</th>
 +<th>Nom</th>
 +<th>Type</th>
 +<th>Effet</th>
 +<th>Niveau</th>
 +</tr>
 +</thead>
 +
 +<tbody>
 +
 +<!-- SORTS AJOUTES -->
 +
 +<tr class="Communs offensif" data-type="Sort" data-level="1" data-effect="offensif">
 +<td><input type="checkbox" class="skill"></td>
 +<td>Communs</td>
 +<td>Boule de feu</td>
 +<td>Sort</td>
 +<td>Dégâts de feu + brûlure</td>
 +<td><span class="lvl lvl-1">1</span></td>
 +</tr>
 +
 +<tr class="Communs defensif" data-type="Sort" data-level="1" data-effect="defensif">
 +<td><input type="checkbox" class="skill"></td>
 +<td>Communs</td>
 +<td>Entraide</td>
 +<td>Sort</td>
 +<td>Soigne et protège un allié</td>
 +<td><span class="lvl lvl-1">1</span></td>
 +</tr>
 +
 +<tr class="Communs malediction" data-type="Sort" data-level="1" data-effect="malediction">
 +<td><input type="checkbox" class="skill"></td>
 +<td>Communs</td>
 +<td>Maudit</td>
 +<td>Sort</td>
 +<td>Affaiblit la cible</td>
 +<td><span class="lvl lvl-1">1</span></td>
 +</tr>
 +
 +</tbody>
 +</table>
 +
 +<script>
 +const maxPoints = 15;
 +
 +const raceFilter = document.getElementById("raceFilter");
 +const typeFilter = document.getElementById("typeFilter");
 +const effectFilter = document.getElementById("effectFilter");
 +const search = document.getElementById("search");
 +const rows = document.querySelectorAll("#table tbody tr");
 +const checkboxes = document.querySelectorAll(".skill");
 +const pointsDisplay = document.getElementById("points");
 +
 +function updatePoints(e){
 +  let total = 0;
 +
 +  checkboxes.forEach(cb => {
 +    if(cb.checked) total++;
 +  });
 +
 +  if(total > maxPoints){
 +    e.target.checked = false;
 +    return;
 +  }
 +
 +  pointsDisplay.textContent = total;
 +
 +  if(total >= maxPoints){
 +    checkboxes.forEach(cb => {
 +      if(!cb.checked) cb.disabled = true;
 +    });
 +  } else {
 +    checkboxes.forEach(cb => cb.disabled = false);
 +  }
 +}
 +
 +checkboxes.forEach(cb => cb.addEventListener("change", updatePoints));
 +
 +function filter(){
 +  const term = search.value.toLowerCase();
 +
 +  rows.forEach(row=>{
 +
 +    const raceOk = raceFilter.value==="Toutes" || row.classList.contains(raceFilter.value);
 +    const typeOk = typeFilter.value==="Tous" || row.dataset.type===typeFilter.value;
 +    const effectOk = effectFilter.value==="Tous" || row.dataset.effect===effectFilter.value;
 +    const textOk = row.innerText.toLowerCase().includes(term);
 +
 +    row.style.display = (raceOk && typeOk && effectOk && textOk) ? "" : "none";
 +  });
 +}
 +
 +raceFilter.onchange = filter;
 +typeFilter.onchange = filter;
 +effectFilter.onchange = filter;
 +search.oninput = 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> </html>
  
brouillon3.1776784831.txt.gz · Dernière modification : 2026/04/21 17:20 de nanaki