Wiki of Olympia

Outils pour utilisateurs

Outils du site

Piste :
brouillon4

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
Prochaine révision		Révision précédente
brouillon4 [2026/04/21 15:45] – nanakibrouillon4 [2026/04/21 21:02] (Version actuelle) – nanaki
Ligne 1: Ligne 1:
-<!DOCTYPE html> + 
-<html lang="fr"> + 
-<head> +<html> 
-<meta charset="UTF-8"> +
-<title>Compétences Optimisées</title>+
 <style> <style>
 body { font-family: Arial, sans-serif; margin: 10px; } 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; }+.controls { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
  
-table { width: 100%; border-collapse: collapse; } +#pointsBox { font-weight:bold; margin-bottom:10px; }
-th, td { padding: 6px; border: 1px solid #ccc; } +
-th { background: #f2f2f2; cursor:pointer; } +
-tr:nth-child(even) { background: #fafafa; }+
  
-/* Gameplay colors */ +table { width:100%; border-collapse:collapse; } 
-.offensif { background: #ffe5e5; } +th, td { border:1px solid #ccc; padding:6px; text-align:left; } 
-.defensif { background: #e5f0ff; } +th { background:#f2f2f2; cursor:pointer; } 
-.utilitaire { background: #e5ffe5; } +tr:nth-child(even){ background:#fafafa; }
-.controle { background: #fff5cc; }+
  
-/* Race colors */ +.offensif { background:#ffe5e5; } 
-.race-Communs { color:#555; } +.defensif { background:#e5f0ff; } 
-.race-Nain { color:red; } +.utilitaire { background:#e5ffe5; } 
-.race-Géant { color:saddlebrown; } +.malediction { background:#eadcff; }
-.race-Olympien { color:darkorange; } +
-.race-HS { color:darkgreen; } +
-.race-Elfe { color:green; }+
  
-.lvl { padding:2px 6px; border-radius:4px; font-weight:bold; }+.lvl { padding:2px 6px; border-radius:4px; }
 .lvl-1 { background:#ddd; } .lvl-1 { background:#ddd; }
 .lvl-2 { background:#cce5ff; } .lvl-2 { background:#cce5ff; }
-.lvl-3 { background:#d4edda; } +
-.lvl-4 { background:#ffd6a5; }+
 </style> </style>
-</head> 
-<body> 
  
-<h3>Compétences</h3>+<div id="pointsBox"> 
 +Points utilisés : <span id="points">0</span> / 15 
 +</div>
  
 <div class="controls"> <div class="controls">
 +
 <select id="raceFilter"> <select id="raceFilter">
-<option value="Toutes">Toutes les races</option>+<option value="Toutes">Toutes</option>
 <option value="Communs">Communs</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>
  
 <select id="typeFilter"> <select id="typeFilter">
 <option value="Tous">Tous types</option> <option value="Tous">Tous types</option>
-<option value="Sort">Sort</option> +<option value="CAC">CAC</option>
-<option value="CAC">Corps à corps</option>+
 <option value="Distance">Distance</option> <option value="Distance">Distance</option>
-<option value="Furtivité">Furtivité</option> +<option value="Sort">Sort</option>
-<option value="Survie">Survie</option>+
 </select> </select>
  
-<select id="levelFilter"> +<select id="effectFilter"> 
-<option value="Tous">Tous niveaux</option> +<option value="Tous">Tous effets</option> 
-<option value="1">Niveau 1</option> +<option value="offensif">Offensif</option> 
-<option value="2">Niveau 2</option> +<option value="defensif">Soutien / Défensif</option> 
-<option value="3">Niveau 3</option> +<option value="malediction">Malédiction</option>
-<option value="4">Niveau 4</option>+
 </select> </select>
 +
 +<input type="text" id="search" placeholder="Rechercher...">
 +
 </div> </div>
  
-<div class="table-container"> 
 <table id="table"> <table id="table">
 <thead> <thead>
 <tr> <tr>
-<th onclick="sortTable(0)">Race</th> +<th>Choix</th> 
-<th onclick="sortTable(1)">Nom</th> +<th>Race</th> 
-<th onclick="sortTable(2)">Type</th> +<th>Nom</th> 
-<th onclick="sortTable(3)">Coût</th>+<th>Type</th>
 <th>Effet</th> <th>Effet</th>
-<th>Cible / Portée</th> +<th>Niveau</th>
-<th onclick="sortTable(6)">Niveau</th>+
 </tr> </tr>
 </thead> </thead>
 +
 <tbody> <tbody>
  
-<tr class="Communs offensif" data-type="Distance" data-level="1"> +<!-- AUTO IMPORT SORTS --> 
-<td class="race-Communs">Communs</td> + 
-<td>Arme improvisée</td> +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
-<td>Distance</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Arcane ajustée</td><td>Sort</td><td>Avantage toucher</td><td>1</td>
-<td>2 PM</td> +
-<td>-4 toucher, -2 dégâts</td> +
-<td>Ennemi / 2+</td> +
-<td><span class="lvl lvl-1">1</span></td>+
 </tr> </tr>
  
-<tr class="Communs offensif" data-type="CAC" data-level="1"> +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
-<td class="race-Communs">Communs</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Arcanes précises</td><td>Sort</td><td>+4 toucher</td><td>1</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><span class="lvl lvl-1">1</span></td>+
 </tr> </tr>
  
-<tr class="Communs utilitaire" data-type="Furtivité" data-level="1"> +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
-<td class="race-Communs">Communs</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Arcanes violentes</td><td>Sort</td><td>-6 toucher +5 dégâts</td><td>1</td>
-<td>Exploration</td> +
-<td>Furtivité</td> +
-<td>Toutes actions</td> +
-<td>+X perception</td> +
-<td>Soi / -</td> +
-<td><span class="lvl lvl-1">1</span></td>+
 </tr> </tr>
  
-<tr class="Communs defensif" data-type="Survie" data-level="2"> +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
-<td class="race-Communs">Communs</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Aveuglement</td><td>Sort</td><td>-1 P</td><td>1</td>
-<td>Encaisser</td> +
-<td>Survie</td> +
-<td>6 PM</td> +
-<td>Gain Encaisse</td> +
-<td>Soi / -</td> +
-<td><span class="lvl lvl-2">2</span></td>+
 </tr> </tr>
  
-<tr class="Communs offensif" data-type="Sort" data-level="1"> +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
-<td class="race-Communs">Communs</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Coup précis</td><td>Sort</td><td>Dextérité x2</td><td>1</td> 
-<td>Arcane ajustée</td> +</tr> 
-<td>Sort</td> + 
-<td>6 PM</td> +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
-<td>Avantage au toucher</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Épuisement arcanique</td><td>Sort</td><td>Essoufflement</td><td>1</td> 
-<td>Ennemi / 2+</td> +</tr> 
-<td><span class="lvl lvl-1">1</span></td>+ 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Maladresse</td><td>Sort</td><td>Maladresse x2</td><td>1</td> 
 +</tr> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Peau de granit</td><td>Sort</td><td>Protection x2</td><td>1</td> 
 +</tr> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Restauration mineure</td><td>Sort</td><td>Soin</td><td>1</td> 
 +</tr> 
 + 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Vulnérabilité</td><td>Sort</td><td>Vulnérabilité x2</td><td>1</td> 
 +</tr> 
 + 
 +<!-- NIVEAU 2 exemples --> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Agressivité</td><td>Sort</td><td>Agressivité x1</td><td>2</td> 
 +</tr> 
 + 
 +<tr class="HS offensif" data-type="Sort" data-effect="offensif"> 
 +<td><input type="checkbox" class="skill"></td><td>HS</td><td>Aiguillon</td><td>Sort</td><td>+3</td><td>2</td> 
 +</tr> 
 + 
 +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Drain</td><td>Sort</td><td>Drain</td><td>2</td> 
 +</tr> 
 + 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Faiblesse</td><td>Sort</td><td>Faiblesse</td><td>2</td> 
 +</tr> 
 + 
 +<tr class="Olympien offensif" data-type="Sort" data-effect="offensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Olympien</td><td>Lame Volante</td><td>Sort</td><td>+3</td><td>2</td> 
 +</tr> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Régénération</td><td>Sort</td><td>Soin</td><td>2</td> 
 +</tr> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Stabilisation</td><td>Sort</td><td>Stabilité</td><td>2</td> 
 +</tr> 
 + 
 +<!-- NIVEAU 3 --> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Aide</td><td>Sort</td><td>Dextérité x4</td><td>3</td> 
 +</tr> 
 + 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Fatigue</td><td>Sort</td><td>Vulnérabilité x4</td><td>3</td> 
 +</tr> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Récupération</td><td>Sort</td><td>Soin</td><td>3</td> 
 +</tr> 
 + 
 +<!-- NIVEAU 4 exemples --> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Bénédiction</td><td>Sort</td><td>Buff majeur</td><td>4</td> 
 +</tr> 
 + 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Friabilité</td><td>Sort</td><td>Fragilité x2</td><td>4</td> 
 +</tr> 
 + 
 +<tr class="Géant offensif" data-type="Sort" data-effect="offensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Géant</td><td>Météore</td><td>Sort</td><td>+M feu</td><td>4</td> 
 +</tr> 
 + 
 +<!-- NIVEAU 5 --> 
 + 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Exténuation</td><td>Sort</td><td>Vulnérabilité x8</td><td>5</td> 
 +</tr> 
 + 
 +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Sauvegarde</td><td>Sort</td><td>Protection x8</td><td>5</td>
 </tr> </tr>
  
 </tbody> </tbody>
 </table> </table>
-</div> 
  
 <script> <script>
 +const maxPoints = 15;
 +
 const raceFilter = document.getElementById("raceFilter"); const raceFilter = document.getElementById("raceFilter");
 const typeFilter = document.getElementById("typeFilter"); const typeFilter = document.getElementById("typeFilter");
-const levelFilter = document.getElementById("levelFilter");+const effectFilter = document.getElementById("effectFilter"); 
 +const search = document.getElementById("search");
 const rows = document.querySelectorAll("#table tbody tr"); const rows = document.querySelectorAll("#table tbody tr");
 +const checkboxes = document.querySelectorAll(".skill");
 +const pointsDisplay = document.getElementById("points");
  
-function filter() { +function updatePoints(e){ 
-  rows.forEach(row => { +  let total = 0;
-    const race = raceFilter.value; +
-    const type = typeFilter.value; +
-    const level = levelFilter.value;+
  
-    const matchRace = race === "Toutes" || row.classList.contains(race); +  checkboxes.forEach(cb => { 
-    const matchType = type === "Tous" || row.dataset.type === type; +    if(cb.checked) total++;
-    const matchLevel = level === "Tous" || row.dataset.level === level; +
- +
-    row.style.display = (matchRace && matchType && matchLevel) ? "" : "none";+
   });   });
 +
 +  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);
 +  }
 } }
  
-raceFilter.addEventListener("change", filter); +checkboxes.forEach(cb => cb.addEventListener("change", updatePoints));
-typeFilter.addEventListener("change", filter); +
-levelFilter.addEventListener("change", filter);+
  
-function sortTable(col) { +function filter(){ 
-  const table = document.getElementById("table"); +  const term = search.value.toLowerCase();
-  const tbody = table.tBodies[0]; +
-  const rowsArray = Array.from(tbody.rows);+
  
-  rowsArray.sort((a, b) => { +  rows.forEach(row=>{ 
-    return a.cells[col].innerText.localeCompare(b.cells[col].innerText, undefined, {numeric:true});+ 
 +    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}));
  
-  rowsArray.forEach(row => tbody.appendChild(row));+  rowsArr.forEach(r=>tbody.appendChild(r));
 } }
 </script> </script>
  
-</body> 
 </html> </html>
  
brouillon4.1776779122.txt.gz · Dernière modification : 2026/04/21 15:45 de nanaki