brouillon8
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
| brouillon8 [2026/04/22 20:49] – nanaki | brouillon8 [2026/04/28 19:04] (Version actuelle) – nanaki | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| + | Essai 3 | ||
| + | |||
| < | < | ||
| + | < | ||
| + | <meta charset=" | ||
| + | < | ||
| < | < | ||
| - | body { font-family: | + | body { font-family: |
| - | + | h1,h2 { color: | |
| - | table { border-collapse: collapse; width: 100%; font-size: 13px; } | + | .box { border:1px solid gold; padding:10px; margin-bottom:15px;} |
| - | td, th { border: 1px solid #ccc; padding: | + | select, |
| - | th { background: #f2f2f2; } | + | button |
| - | + | ||
| - | .offensif | + | |
| - | .defensif | + | |
| - | .malediction { background: | + | |
| - | + | ||
| - | .controls { margin-bottom:10px; } | + | |
| </ | </ | ||
| + | </ | ||
| - | <div class=" | + | <body> |
| - | Points : <span id=" | + | <h1>Simulateur</h1> |
| - | <br><br> | + | <div class=" |
| + | Race | ||
| + | <select id=" | ||
| + | </div> | ||
| - | Recherche : | + | <div class="box"> |
| - | <input type="text" id="search" | + | Stats |
| + | < | ||
| + | </div> | ||
| - | Filtre effet : | + | <div class="box"> |
| - | <select id="filterEffect"> | + | Équipement<br> |
| - | <option value=" | + | Tête <select id="head"></ |
| - | <option value="offensif">Offensif</option> | + | Cou <select id="neck"></ |
| - | <option value="defensif">Soutien</option> | + | Dos <select id="cape"></ |
| - | <option value="malediction">Malédiction</option> | + | Main droite |
| - | </select> | + | Main gauche |
| - | + | Corps <select id="body"></ | |
| - | Filtre type : | + | Anneau |
| - | <select id="filterType"> | + | Pieds <select id="feet"></ |
| - | <option value=" | + | </div> |
| - | <option value="S">Sort</option> | + | |
| - | <option value="CAC">CAC</option> | + | |
| - | <option value="DIS">Distance</option> | + | |
| - | <option value="P">Passif</option> | + | |
| - | </select> | + | |
| + | <div class=" | ||
| + | Compétences | ||
| + | <div id=" | ||
| </ | </ | ||
| - | <table id="skills"> | + | <button onclick="calculate()"> |
| + | <button onclick=" | ||
| - | <thead> | + | <pre id=" |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </thead> | + | |
| - | <tbody> | + | <script> |
| - | <!-- NIVEAU 1 --> | + | // ===== DATA ===== |
| - | <tr class=" | + | const races = { |
| - | < | + | Elfe: |
| - | < | + | Nain: |
| - | </tr> | + | Géant: |
| + | Olympien: | ||
| + | HS: | ||
| + | }; | ||
| - | <tr class=" | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr class=" | + | const costTable |
| - | < | + | cc: |
| - | < | + | pv:[4,2,1], mvt: |
| - | </tr> | + | }; |
| - | <tr class="malediction" | + | const equipments |
| - | < | + | {name:"Lance elfe",race:"Elfe",slot:"weapon", |
| - | < | + | {name:"Targe",race:"Nain", |
| - | </tr> | + | {name:" |
| + | {name:" | ||
| + | ]; | ||
| - | <tr class="defensif" | + | const skills |
| - | < | + | |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | // ===== DOM ===== |
| - | < | + | const raceSelect = document.getElementById("race"); |
| - | < | + | const statsDiv |
| - | </tr> | + | const skillsDiv |
| - | <tr class="defensif" | + | const head = document.getElementById("head"); |
| - | < | + | const neck = document.getElementById("neck"); |
| - | < | + | const cape = document.getElementById("cape"); |
| - | </tr> | + | const rightHand |
| + | const leftHand | ||
| + | const body = document.getElementById(" | ||
| + | const ring = document.getElementById(" | ||
| + | const feet = document.getElementById(" | ||
| - | <tr class=" | + | // ===== INIT ===== |
| - | < | + | |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | // race |
| - | < | + | for(let r in races){ |
| - | < | + | raceSelect.innerHTML += `<option>${r}</option>`; |
| - | </tr> | + | } |
| - | <tr class=" | + | // stats |
| - | < | + | for(let s in costTable){ |
| - | < | + | statsDiv.innerHTML += `${s} <input type="number" |
| - | </tr> | + | } |
| - | <!-- NIVEAU 2 --> | + | // skills |
| + | skills.forEach(s=> | ||
| + | skillsDiv.innerHTML += `< | ||
| + | }); | ||
| - | <tr class=" | + | // slots reset |
| - | <td>< | + | function resetSlots(){ |
| - | < | + | [head, |
| - | </tr> | + | sel.innerHTML = `<option value=""> |
| + | }); | ||
| + | } | ||
| - | <tr class=" | + | // remplir équipements |
| - | < | + | function fillEquip(){ |
| - | < | + | let r = raceSelect.value; |
| - | </tr> | + | |
| - | <tr class=" | + | equipments.forEach((e, |
| - | < | + | if(e.race!=="all" |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class="offensif" | + | if(e.slot==="weapon"||e.slot==="weapon2h") rightHand.innerHTML += `<option value="${i}">${e.name}</option>`; |
| - | <td><input type="checkbox" | + | if(e.slot==="defensive") leftHand.innerHTML += `<option value="${i}">${e.name}</option>`; |
| - | < | + | if(e.slot===" |
| - | </tr> | + | }); |
| + | } | ||
| - | <tr class=" | + | // update |
| - | < | + | raceSelect.addEventListener("change", ()=>{ |
| - | < | + | resetSlots(); |
| - | </tr> | + | fillEquip(); |
| + | }); | ||
| - | <tr class=" | + | resetSlots(); |
| - | < | + | fillEquip(); |
| - | < | + | |
| - | </tr> | + | |
| + | // 2 mains | ||
| + | rightHand.addEventListener(" | ||
| + | let v = rightHand.value; | ||
| + | if(v==="" | ||
| - | <tr class=" | + | let item = equipments[v]; |
| - | < | + | if(item.slot==="weapon2h"){ |
| - | < | + | leftHand.value="" |
| - | </tr> | + | leftHand.disabled=true; |
| + | }else{ | ||
| + | leftHand.disabled=false; | ||
| + | } | ||
| + | }); | ||
| - | <tr class=" | + | // ===== CALCUL |
| - | < | + | function calculate(){ |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | let char = {...races[raceSelect.value]}; |
| - | < | + | let total = 0; |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | // stats |
| - | < | + | for(let s in costTable){ |
| - | < | + | let v = parseInt(document.getElementById(s).value)||0; |
| - | </tr> | + | char[s]+=v; |
| + | } | ||
| - | <tr class=" | + | // equip |
| - | < | + | [rightHand, |
| - | < | + | if(sel.value==="" |
| - | </tr> | + | let e = equipments[sel.value]; |
| + | for(let stat in e.stats){ | ||
| + | char[stat]=(char[stat]||0)+e.stats[stat]; | ||
| + | } | ||
| + | }); | ||
| - | <tr class=" | + | // affichage |
| - | < | + | result.innerText |
| - | < | + | } |
| - | </tr> | + | |
| - | <tr class=" | + | // ===== EXPORT |
| - | < | + | function exportWiki(){ |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class="malediction" | + | let txt="=== Build ===\n"; |
| - | < | + | txt+="Race: "+raceSelect.value+"\n\n"; |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | document.querySelectorAll(" |
| - | < | + | txt+="* "+s.parentNode.innerText+" |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- NIVEAU 3 --> | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- NIVEAU 4 --> | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- NIVEAU 5 --> | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | let max = 15; | + | |
| - | + | ||
| - | document.querySelectorAll(" | + | |
| - | cb.addEventListener(" | + | |
| - | let total = document.querySelectorAll(".skill: | + | |
| - | if(total > max){ cb.checked = false; return; } | + | |
| - | points.innerText | + | |
| - | }); | + | |
| }); | }); | ||
| - | function filter(){ | + | result.innerText=txt; |
| - | let e = filterEffect.value; | + | |
| - | let t = filterType.value; | + | |
| - | let s = search.value.toLowerCase(); | + | |
| - | + | ||
| - | document.querySelectorAll("# | + | |
| - | let txt = r.innerText.toLowerCase(); | + | |
| - | let ok = (e==" | + | |
| - | && (t==" | + | |
| - | && | + | |
| - | r.style.display = ok ? "" | + | |
| - | }); | + | |
| } | } | ||
| - | |||
| - | filterEffect.onchange = filter; | ||
| - | filterType.onchange = filter; | ||
| - | search.oninput = filter; | ||
| </ | </ | ||
| + | </ | ||
| </ | </ | ||
brouillon8.1776883780.txt.gz · Dernière modification : 2026/04/22 20:49 de nanaki
