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:52] – nanakibrouillon4 [2026/04/21 21:02] (Version actuelle) – nanaki
Ligne 1: Ligne 1:
 +
 +
 <html> <html>
  
 <style> <style>
-.controls { display:flex; gap:10px; margin-bottom:10px; }+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; } table { width:100%; border-collapse:collapse; }
-th, td { border:1px solid #ccc; padding:6px; }+th, td { border:1px solid #ccc; padding:6px; text-align:left; }
 th { background:#f2f2f2; cursor:pointer; } th { background:#f2f2f2; cursor:pointer; }
 tr:nth-child(even){ background:#fafafa; } tr:nth-child(even){ background:#fafafa; }
Ligne 11: Ligne 18:
 .defensif { background:#e5f0ff; } .defensif { background:#e5f0ff; }
 .utilitaire { background:#e5ffe5; } .utilitaire { background:#e5ffe5; }
 +.malediction { background:#eadcff; }
  
 .lvl { padding:2px 6px; border-radius:4px; } .lvl { padding:2px 6px; border-radius:4px; }
 .lvl-1 { background:#ddd; } .lvl-1 { background:#ddd; }
 .lvl-2 { background:#cce5ff; } .lvl-2 { background:#cce5ff; }
 +
 </style> </style>
 +
 +<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</option> <option value="Toutes">Toutes</option>
Ligne 24: Ligne 38:
  
 <select id="typeFilter"> <select id="typeFilter">
-<option value="Tous">Tous</option>+<option value="Tous">Tous types</option>
 <option value="CAC">CAC</option> <option value="CAC">CAC</option>
 <option value="Distance">Distance</option> <option value="Distance">Distance</option>
 <option value="Sort">Sort</option> <option value="Sort">Sort</option>
 </select> </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> </div>
  
Ligne 34: Ligne 58:
 <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>Type</th>
 <th>Effet</th> <th>Effet</th>
-<th onclick="sortTable(4)">Niveau</th>+<th>Niveau</th>
 </tr> </tr>
 </thead> </thead>
Ligne 44: Ligne 69:
 <tbody> <tbody>
  
-<tr class="Communs offensif" data-type="CAC" data-level="1"> +<!-- AUTO IMPORT SORTS --> 
-<td>Communs</td> + 
-<td>Attaque précise</td> +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
-<td>CAC</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>+4 toucher, -3 dégâts</td> +
-<td><span class="lvl lvl-1">1</span></td>+
 </tr> </tr>
  
-<tr class="Communs offensif" data-type="Distance" data-level="1"> +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
-<td>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>Arme improvisée</td> +</tr> 
-<td>Distance</td> + 
-<td>-4 toucher, -2 dégâts</td> +<tr class="Communs offensif" data-type="Sort" data-effect="offensif"> 
-<td><span class="lvl lvl-1">1</span></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> 
 +</tr> 
 + 
 +<tr class="Communs malediction" data-type="Sort" data-effect="malediction"> 
 +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Aveuglement</td><td>Sort</td><td>-1 P</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>Coup précis</td><td>Sort</td><td>Dextérité x2</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>Épuisement arcanique</td><td>Sort</td><td>Essoufflement</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>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>
  
-<tr class="Communs utilitaire" data-type="Sort" data-level="1"> +<tr class="Communs defensif" data-type="Sort" data-effect="defensif"> 
-<td>Communs</td> +<td><input type="checkbox" class="skill"></td><td>Communs</td><td>Sauvegarde</td><td>Sort</td><td>Protection x8</td><td>5</td>
-<td>Arcane ajustée</td> +
-<td>Sort</td> +
-<td>Avantage au toucher</td> +
-<td><span class="lvl lvl-1">1</span></td>+
 </tr> </tr>
  
Ligne 72: Ligne 183:
  
 <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 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 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(){ function filter(){
 +  const term = search.value.toLowerCase();
 +
   rows.forEach(row=>{   rows.forEach(row=>{
 +
     const raceOk = raceFilter.value==="Toutes" || row.classList.contains(raceFilter.value);     const raceOk = raceFilter.value==="Toutes" || row.classList.contains(raceFilter.value);
     const typeOk = typeFilter.value==="Tous" || row.dataset.type===typeFilter.value;     const typeOk = typeFilter.value==="Tous" || row.dataset.type===typeFilter.value;
-    row.style.display = (raceOk && typeOk) ? "" : "none";+    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";
   });   });
 } }
Ligne 86: Ligne 234:
 raceFilter.onchange = filter; raceFilter.onchange = filter;
 typeFilter.onchange = filter; typeFilter.onchange = filter;
 +effectFilter.onchange = filter;
 +search.oninput = filter;
  
 function sortTable(col){ function sortTable(col){
   const tbody = document.querySelector("#table tbody");   const tbody = document.querySelector("#table tbody");
   const rowsArr = Array.from(tbody.rows);   const rowsArr = Array.from(tbody.rows);
 +
   rowsArr.sort((a,b)=>a.cells[col].innerText.localeCompare(b.cells[col].innerText,undefined,{numeric:true}));   rowsArr.sort((a,b)=>a.cells[col].innerText.localeCompare(b.cells[col].innerText,undefined,{numeric:true}));
 +
   rowsArr.forEach(r=>tbody.appendChild(r));   rowsArr.forEach(r=>tbody.appendChild(r));
 } }
Ligne 96: Ligne 248:
  
 </html> </html>
 +
brouillon4.1776779564.txt.gz · Dernière modification : 2026/04/21 15:52 de nanaki