Wiki of Olympia

Ceci est une ancienne révision du document !

<!DOCTYPE html> <html lang=“fr”> <head> <meta charset=“UTF-8”> <title>Compétences Optimisées</title> <style> body { font-family: Arial, sans-serif; margin: 10px; } h3 { text-align: center; }

.controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }

.table-container { width: 100%; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; } th, td { padding: 6px; border: 1px solid #ccc; } th { background: #f2f2f2; cursor:pointer; } tr:nth-child(even) { background: #fafafa; }

/* Gameplay colors */ .offensif { background: #ffe5e5; } .defensif { background: #e5f0ff; } .utilitaire { background: #e5ffe5; } .controle { background: #fff5cc; }

/* Race colors */ .race-Communs { color:#555; } .race-Nain { color:red; } .race-Géant { color:saddlebrown; } .race-Olympien { color:darkorange; } .race-HS { color:darkgreen; } .race-Elfe { color:green; }

.lvl { padding:2px 6px; border-radius:4px; font-weight:bold; } .lvl-1 { background:#ddd; } .lvl-2 { background:#cce5ff; } .lvl-3 { background:#d4edda; } .lvl-4 { background:#ffd6a5; } </style> </head> <body>

<h3>Compétences</h3>

<select id=“raceFilter”> <option value=“Toutes”>Toutes les races</option> <option value=“Communs”>Communs</option> <option value=“Nain”>Nain</option> <option value=“Géant”>Géant</option> <option value=“Olympien”>Olympien</option> <option value=“HS”>HS</option> <option value=“Elfe”>Elfe</option> </select>

<select id=“typeFilter”> <option value=“Tous”>Tous types</option> <option value=“Sort”>Sort</option> <option value=“CAC”>Corps à corps</option> <option value=“Distance”>Distance</option> <option value=“Furtivité”>Furtivité</option> <option value=“Survie”>Survie</option> </select>

<select id=“levelFilter”> <option value=“Tous”>Tous niveaux</option> <option value=“1”>Niveau 1</option> <option value=“2”>Niveau 2</option> <option value=“3”>Niveau 3</option> <option value=“4”>Niveau 4</option> </select>

<table id=“table”> <thead> <tr> <th onclick=“sortTable(0)”>Race</th> <th onclick=“sortTable(1)”>Nom</th> <th onclick=“sortTable(2)”>Type</th> <th onclick=“sortTable(3)”>Coût</th> <th>Effet</th> <th>Cible / Portée</th> <th onclick=“sortTable(6)”>Niveau</th> </tr> </thead> <tbody>

<tr class=“Communs offensif” data-type=“Distance” data-level=“1”> <td class=“race-Communs”>Communs</td> <td>Arme improvisée</td> <td>Distance</td> <td>2 PM</td> <td>-4 toucher, -2 dégâts</td> <td>Ennemi / 2+</td> <td>1</td> </tr>

<tr class=“Communs offensif” data-type=“CAC” data-level=“1”> <td class=“race-Communs”>Communs</td> <td>Attaque précise</td> <td>CAC</td> <td>2 PM</td> <td>+4 toucher, -3 dégâts</td> <td>Ennemi / Contact</td> <td>1</td> </tr>

<tr class=“Communs utilitaire” data-type=“Furtivité” data-level=“1”> <td class=“race-Communs”>Communs</td> <td>Exploration</td> <td>Furtivité</td> <td>Toutes actions</td> <td>+X perception</td> <td>Soi / -</td> <td>1</td> </tr>

<tr class=“Communs defensif” data-type=“Survie” data-level=“2”> <td class=“race-Communs”>Communs</td> <td>Encaisser</td> <td>Survie</td> <td>6 PM</td> <td>Gain Encaisse</td> <td>Soi / -</td> <td>2</td> </tr>

<tr class=“Communs offensif” data-type=“Sort” data-level=“1”> <td class=“race-Communs”>Communs</td> <td>Arcane ajustée</td> <td>Sort</td> <td>6 PM</td> <td>Avantage au toucher</td> <td>Ennemi / 2+</td> <td>1</td> </tr>

</tbody> </table>

function filter() {

rows.forEach(row => {
  const race = raceFilter.value;
  const type = typeFilter.value;
  const level = levelFilter.value;

  const matchRace = race === "Toutes" || row.classList.contains(race);
  const matchType = type === "Tous" || row.dataset.type === type;
  const matchLevel = level === "Tous" || row.dataset.level === level;

  row.style.display = (matchRace && matchType && matchLevel) ? "" : "none";
});

}

raceFilter.addEventListener(“change”, filter); typeFilter.addEventListener(“change”, filter); levelFilter.addEventListener(“change”, filter);

function sortTable(col) {

const table = document.getElementById("table");
const tbody = table.tBodies[0];
const rowsArray = Array.from(tbody.rows);

rowsArray.sort((a, b) => {
  return a.cells[col].innerText.localeCompare(b.cells[col].innerText, undefined, {numeric:true});
});

rowsArray.forEach(row => tbody.appendChild(row));

} </script>

</body> </html>