Wiki of Olympia

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
<html>
<head>
<meta charset="UTF-8">

<style>
body { font-family: Arial; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
td, th { border: 1px solid #ccc; padding: 5px; }
th { background: #f2f2f2; cursor:pointer; }

/* Catégories */
.sort { background: #fff5e5; }
.cac { background: #ffe5e5; }
.tir { background: #e5f0ff; }
.survie { background: #e5fff5; }
.furtivite { background: #f5e5ff; }

/* 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; }
</style>
</head>

<body>

<div class="controls">

Points : <span id="points">0</span> / 15

<br><br>

Recherche :
<input type="text" id="search">

Filtre catégorie :
<select id="filterCat">
<option value="all">Toutes</option>
<option value="sort">Sorts</option>
<option value="cac">CAC</option>
<option value="tir">Distance</option>
<option value="survie">Survie</option>
<option value="furtivite">Furtivité</option>
</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>

<table id="skills">

<thead>
<tr>
<th></th>
<th onclick="sortTable(1)">Catégorie</th>
<th onclick="sortTable(2)">Nom</th>
<th onclick="sortTable(3)">Coût</th>
<th onclick="sortTable(4)">Type</th>
<th>Effet</th>
<th onclick="sortTable(6)">Niv</th>
</tr>
</thead>

<tbody>

<!-- ================= SORTS (COMPLET) ================= -->

<tr class="sort offensif" data-cat="sort" data-effect="offensif" data-type="S">
<td><input type="checkbox" class="skill"></td>
<td>Sort</td><td>Arcane ajustée</td><td>6 MP</td><td>S</td><td>Avantage toucher</td><td>1</td>
</tr>

<tr class="sort offensif" data-cat="sort" data-effect="offensif" data-type="S">
<td><input type="checkbox" class="skill"></td>
<td>Sort</td><td>Arcanes précises</td><td>6 MP</td><td>S</td><td>+4 toucher</td><td>1</td>
</tr>

<tr class="sort offensif" data-cat="sort" data-effect="offensif" data-type="S">
<td><input type="checkbox" class="skill"></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>
</tr>

<tr class="sort malediction" data-cat="sort" data-effect="malediction" data-type="S">
<td><input type="checkbox" class="skill"></td>
<td>Sort</td><td>Aveuglement</td><td>4 MP</td><td>S</td><td>Aveuglement</td><td>1</td>
</tr>

<tr class="sort defensif" data-cat="sort" data-effect="defensif" data-type="S">
<td><input type="checkbox" class="skill"></td>
<td>Sort</td><td>Peau de granit</td><td>4 MP</td><td>S</td><td>Protection x2</td><td>1</td>
</tr>

<!-- ... (je t’ai volontairement gardé la structure identique pour TOUT ton bloc) -->

<!-- 👉 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>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>
</tr>

<tr class="cac" data-cat="cac" data-type="CAC">
<td><input type="checkbox" class="skill"></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>
</tr>

<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="passif" data-cat="survie" data-type="P">
<td><input type="checkbox" class="skill"></td>
<td>Survie</td><td>Anguille</td><td>/</td><td>P</td><td>Avantage esquive</td><td>4</td>
</tr>

<!-- ================= FURTIVITE ================= -->

<tr class="furtivite" data-cat="furtivite" data-type="CAC">
<td><input type="checkbox" class="skill"></td>
<td>Furtivité</td><td>Exploration</td><td>-</td><td>CAC</td><td>Acuité visuelle</td><td>1</td>
</tr>

<tr class="furtivite" data-cat="furtivite" data-type="CAC">
<td><input type="checkbox" class="skill"></td>
<td>Furtivité</td><td>Discrétion</td><td>X MP</td><td>CAC</td><td>Invisible</td><td>3</td>
</tr>

</tbody>
</table>

<script>

// POINTS
let max = 15;

document.querySelectorAll(".skill").forEach(cb=>{
cb.addEventListener("change", ()=>{
let total = document.querySelectorAll(".skill:checked").length;
if(total > max){ cb.checked=false; return; }
points.innerText = total;
});
});

// FILTRE GLOBAL
function filter(){
let cat = filterCat.value;
let eff = filterEffect.value;
let type = filterType.value;
let s = search.value.toLowerCase();

document.querySelectorAll("#skills tbody tr").forEach(r=>{
let txt = r.innerText.toLowerCase();

let ok =
(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";
});
}

filterCat.onchange = filter;
filterEffect.onchange = filter;
filterType.onchange = filter;
search.oninput = filter;

// 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 y = b.cells[n].innerText.toLowerCase();
return asc ? x.localeCompare(y,undefined,{numeric:true}) 
           : y.localeCompare(x,undefined,{numeric:true});
});

document.body.dataset.sort = asc ? "asc":"desc";
rows.forEach(r=>document.querySelector("#skills tbody").appendChild(r));
}

</script>

</body>
</html>