Outils pour utilisateurs

Outils du site


brouillon10

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
brouillon10 [2026/04/29 14:01] nanakibrouillon10 [2026/04/29 23:56] (Version actuelle) nanaki
Ligne 1: Ligne 1:
-Évol 
- 
- 
- 
 <html> <html>
 <head> <head>
Ligne 9: Ligne 5:
  
 <style> <style>
-body { font-family: Arial; background:#0b1a13; color:#e0d3a3; padding:20px;}+body { 
 +  font-family: Arial; 
 +  background:#0b1a13; 
 +  color:#e0d3a3; 
 +  padding:10px; 
 +} 
 h1,h2 { color:gold;} h1,h2 { color:gold;}
-.box { border:1px solid gold; padding:10px; margin-bottom:15px;} + 
-select,input { margin:3px;+.box { 
-button padding:8pxmargin:5px; background:goldborder:none;}+  border:1px solid gold; 
 +  padding:10px; 
 +  margin-bottom:10px; 
 +} 
 + 
 +select { margin:3px; max-width:150px;
 +input { margin:3px; width:50px; } 
 + 
 +.statLine { 
 +  display:flex; 
 +  justify-content:space-between; 
 +  max-width:260px; 
 +
 + 
 +.result { 
 +  background:#000; 
 +  color:#00ffcc; 
 +  padding:10px; 
 +  white-space:pre-wrap; 
 +
 + 
 +.small { 
 +  font-size:12px; 
 +  color:#aaa; 
 +}
 </style> </style>
 </head> </head>
Ligne 22: Ligne 48:
  
 <div class="box"> <div class="box">
-Race+Race :
 <select id="race"></select> <select id="race"></select>
 +
 +<h3>Stats de base</h3>
 +<pre id="baseStats"></pre>
 </div> </div>
  
 <div class="box"> <div class="box">
-Stats+<h3>Améliorations</h3>
 <div id="stats"></div> <div id="stats"></div>
 +<div id="cost"></div>
 </div> </div>
  
 <div class="box"> <div class="box">
-Équipement<br+<h3>Équipement (3 max + 1 anneau)</h3> 
-Tête <select id="head"></select><br> + 
-Cou <select id="neck"></select><br> +Tête <select id="head"></select> <span id="headStats"></span><br> 
-Dos <select id="cape"></select><br> +Cou <select id="neck"></select> <span id="neckStats"></span><br> 
-Main droite <select id="rightHand"></select><br> +Dos <select id="cape"></select> <span id="capeStats"></span><br> 
-Main gauche <select id="leftHand"></select><br> +Main droite <select id="rightHand"></select> <span id="rightStats"></span><br> 
-Corps <select id="body"></select><br> +Main gauche <select id="leftHand"></select> <span id="leftStats"></span><br> 
-Anneau <select id="ring"></select><br> +Corps <select id="body"></select> <span id="bodyStats"></span><br> 
-Pieds <select id="feet"></select>+Anneau <select id="ring"></select> <span id="ringStats"></span><br> 
 +Pieds <select id="feet"></select> <span id="feetStats"></span> 
 + 
 +<div id="limitWarn" style="color:red;"></div>
 </div> </div>
  
 <div class="box"> <div class="box">
-Compétences+<h3>Passifs</h3>
 <div id="skills"></div> <div id="skills"></div>
 </div> </div>
  
-<button onclick="calculate()">Calculer</button> +<button onclick="resetAll()">Reset</button>
-<button onclick="exportWiki()">Export Wiki</button>+
  
-<pre id="result"></pre>+<pre id="result" class="result"></pre>
  
 <script> <script>
  
-// ===== DATA =====+// ===== RACES =====
 const races = { const races = {
 Elfe:{cc:9,ct:10,f:9,e:4,agi:9,p:5,mvt:5,pv:55,pm:30,r:4,rm:6,fm:8,m:6}, Elfe:{cc:9,ct:10,f:9,e:4,agi:9,p:5,mvt:5,pv:55,pm:30,r:4,rm:6,fm:8,m:6},
-Nain:{cc:11,ct:8,f:11,e:6,agi:6,p:4,mvt:4,pv:50,pm:15,r:5,rm:4,fm:10,m:3}+Nain:{cc:11,ct:8,f:11,e:6,agi:6,p:4,mvt:4,pv:50,pm:15,r:5,rm:4,fm:10,m:3}, 
 +Géant:{cc:9,ct:10,f:12,e:4,agi:7,p:4,mvt:5,pv:65,pm:20,r:5,rm:5,fm:6,m:5}, 
 +Olympien:{cc:10,ct:9,f:10,e:5,agi:8,p:4,mvt:5,pv:60,pm:30,r:5,rm:6,fm:7,m:5}, 
 +HS:{cc:8,ct:9,f:7,e:3,agi:11,p:5,mvt:6,pv:45,pm:40,r:3,rm:7,fm:9,m:5}
 }; };
  
 +// ===== COST =====
 const costTable = { const costTable = {
-cc:[100,50,30], f:[120,55,30], e:[120,55,30], m:[110,55,35], +cc:[100,50,30], ct:[110,50,30], 
-pv:[4,2,1], mvt:[100,50,30]+f:[120,55,30], e:[120,55,30], 
 +agi:[95,45,25], 
 +m:[110,55,35], 
 +fm:[100,50,30], 
 +p:[110,85,78], 
 +pv:[4,2,1], 
 +pm:[5,3,1], 
 +mvt:[100,50,30], 
 +r:[40,30,15], 
 +rm:[50,40,20]
 }; };
  
 +// ===== PASSIFS =====
 +const skills = [
 +{name:"Fulgurance",desc:"+1 esquive"},
 +{name:"Couverture",desc:"85% CC / 15% AGI"},
 +{name:"Réflexes fulgurants",desc:"85% AGI / 15% CC"},
 +{name:"Anguille",desc:"Avantage esquive"}
 +];
 +
 +
 +// ===== ÉQUIPEMENTS =====
 const equipments = [ const equipments = [
  
Ligne 161: Ligne 216:
 ]; ];
  
- +// ===== INIT =====
- +
- +
-const skills = ["Fulgurance","Duelliste","Encaisser","Anguille"]; +
- +
-// ===== DOM =====+
 const raceSelect = document.getElementById("race"); const raceSelect = document.getElementById("race");
 const statsDiv = document.getElementById("stats"); const statsDiv = document.getElementById("stats");
-const skillsDiv = document.getElementById("skills"); +const baseDiv = document.getElementById("baseStats");
- +
-const head = document.getElementById("head"); +
-const neck = document.getElementById("neck"); +
-const cape = document.getElementById("cape"); +
-const rightHand = document.getElementById("rightHand"); +
-const leftHand = document.getElementById("leftHand"); +
-const body = document.getElementById("body"); +
-const ring = document.getElementById("ring"); +
-const feet = document.getElementById("feet"); +
- +
-// ===== INIT =====+
  
-// race 
 for(let r in races){ for(let r in races){
 raceSelect.innerHTML += `<option>${r}</option>`; raceSelect.innerHTML += `<option>${r}</option>`;
 } }
  
-// stats+// stats UI
 for(let s in costTable){ for(let s in costTable){
-statsDiv.innerHTML += `${s} <input type="number" id="${s}" value="0"><br>`;+statsDiv.innerHTML += ` 
 +<div class="statLine"> 
 +<span>${s}</span> 
 +<input type="number" id="${s}" value="0" min="0"> 
 +</div>`;
 } }
  
-// skills+// passifs
 skills.forEach(s=>{ skills.forEach(s=>{
-skillsDiv.innerHTML += `<label><input type="checkbox" class="sk"> ${s}</label><br>`;+document.getElementById("skills").innerHTML += ` 
 +<label> 
 +<input type="checkbox" class="skilldata-name="${s.name}"> 
 +<b>${s.name}</b><br> 
 +<span class="small">${s.desc}</span> 
 +</label><br>`;
 }); });
  
-// slots reset+// base stats 
 +function displayBase(){ 
 +baseDiv.textContent = JSON.stringify(races[raceSelect.value],null,2); 
 +
 +raceSelect.addEventListener("change", displayBase); 
 +displayBase(); 
 + 
 +// ===== COST ===== 
 +function calcCost(b,m1,m2,n){ 
 +let total=0,last=b; 
 +for(let i=1;i<=n;i++){ 
 +if(i===1) last=b; 
 +else if(i<=3) last+=m1; 
 +else last+=m2; 
 +total+=last; 
 +
 +return total; 
 +
 + 
 +function updateCost(){ 
 +let total=0; 
 +for(let s in costTable){ 
 +let v=+document.getElementById(s).value||0; 
 +let [b,m1,m2]=costTable[s]; 
 +total+=calcCost(b,m1,m2,v); 
 +
 +document.getElementById("cost").innerHTML="💰 PI : "+total; 
 +
 + 
 +// ===== SLOTS ===== 
 +const slots = { 
 +head:head,neck:neck,cape:cape,rightHand:rightHand, 
 +leftHand:leftHand,body:body,ring:ring,feet:feet 
 +}; 
 function resetSlots(){ function resetSlots(){
-[head,neck,cape,rightHand,leftHand,body,ring,feet].forEach(sel=>+Object.values(slots).forEach(s=>s.innerHTML="<option value=''>--</option>");
-sel.innerHTML = `<option value="">--</option>`; +
-});+
 } }
  
-// remplir équipements 
 function fillEquip(){ function fillEquip(){
-let r = raceSelect.value;+let r=raceSelect.value;
  
 equipments.forEach((e,i)=>{ equipments.forEach((e,i)=>{
-if(e.race!=="all" && e.race!==r) return;+if(e.race!=="all"&&e.race!==r) return;
  
-if(e.slot==="weapon"||e.slot==="weapon2h") rightHand.innerHTML += `<option value="${i}">${e.name}</option>`; +if(e.slot==="weapon"||e.slot==="weapon2h") rightHand.innerHTML+=`<option value="${i}">${e.name}</option>`; 
-if(e.slot==="defensive") leftHand.innerHTML += `<option value="${i}">${e.name}</option>`; +if(e.slot==="offhand") leftHand.innerHTML+=`<option value="${i}">${e.name}</option>`; 
-if(e.slot==="torse") body.innerHTML += `<option value="${i}">${e.name}</option>`;+if(e.slot==="body") body.innerHTML+=`<option value="${i}">${e.name}</option>`; 
 +if(e.slot==="head") head.innerHTML+=`<option value="${i}">${e.name}</option>`; 
 +if(e.slot==="neck") neck.innerHTML+=`<option value="${i}">${e.name}</option>`; 
 +if(e.slot==="cape") cape.innerHTML+=`<option value="${i}">${e.name}</option>`; 
 +if(e.slot==="feet") feet.innerHTML+=`<option value="${i}">${e.name}</option>`; 
 +if(e.slot==="ring") ring.innerHTML+=`<option value="${i}">${e.name}</option>`;
 }); });
 } }
  
-// update +raceSelect.addEventListener("change",()=>{
-raceSelect.addEventListener("change", ()=>{+
 resetSlots(); resetSlots();
 fillEquip(); fillEquip();
 +autoCalculate();
 }); });
  
Ligne 226: Ligne 309:
 fillEquip(); fillEquip();
  
-// 2 mains +// ===== BONUS ===== 
-rightHand.addEventListener("change"()=>+function displayStats(select,id){ 
-let v = rightHand.value; +let v=select.value
-if(v===""){ leftHand.disabled=false; return;}+let el=document.getElementById(id)
 +if(v===""){el.innerHTML="";return;
 +let e=equipments[v]; 
 +let txt=""; 
 +for(let s in e.stats){ 
 +let val=e.stats[s]; 
 +txt+=val>0?`+${val} ${s} `:`${val} ${s} `; 
 +
 +el.innerHTML=txt; 
 +}
  
-let item equipments[v]; +Object.entries(slots).forEach(([k,s])=>
-if(item.slot==="weapon2h"){ +s.addEventListener("change",()=>
-leftHand.value=""; +displayStats(s,k+"Stats"); 
-leftHand.disabled=true;+checkLimit(); 
 +autoCalculate(); 
 +}); 
 +}); 
 + 
 +// ===== LIMIT ===== 
 +function checkLimit(){ 
 +let count=0; 
 +Object.entries(slots).forEach(([k,s])=>{ 
 +if(k!=="ring"&&s.value!=="") count++; 
 +}); 
 + 
 +if(count>=3){ 
 +limitWarn.innerText="Limite atteinte"; 
 +Object.entries(slots).forEach(([k,s])=>
 +if(k!=="ring"&&s.value==="") s.disabled=true
 +});
 }else{ }else{
-leftHand.disabled=false;+limitWarn.innerText=""; 
 +Object.values(slots).forEach(s=>s.disabled=false); 
 +}
 } }
-}); 
  
 // ===== CALCUL ===== // ===== CALCUL =====
 function calculate(){ function calculate(){
  
-let char = {...races[raceSelect.value]}+let char={...races[raceSelect.value]};
-let total = 0;+
  
-// stats+// stats investies
 for(let s in costTable){ for(let s in costTable){
-let v = parseInt(document.getElementById(s).value)||0; +let v=+document.getElementById(s).value||0; 
-char[s]+=v;+char[s]=(char[s]||0)+v;
 } }
  
 // equip // equip
-[rightHand,leftHand,body].forEach(sel=>{+Object.values(slots).forEach(sel=>{
 if(sel.value==="") return; if(sel.value==="") return;
-let e = equipments[sel.value]; +let e=equipments[sel.value]; 
-for(let stat in e.stats){ +for(let in e.stats){ 
-char[stat]=(char[stat]||0)+e.stats[stat];+char[s]=(char[s]||0)+e.stats[s];
 } }
 }); });
 +
 +// esquive
 +let esquive=Math.round(char.agi*0.75+char.cc*0.25);
 +
 +let checked=[...document.querySelectorAll(".skill:checked")].map(e=>e.dataset.name);
 +
 +if(checked.includes("Réflexes fulgurants"))
 +esquive=Math.round(char.agi*0.85+char.cc*0.15);
 +
 +if(checked.includes("Couverture"))
 +esquive=Math.round(char.cc*0.85+char.agi*0.15);
 +
 +if(checked.includes("Fulgurance"))
 +esquive+=1;
  
 // affichage // affichage
-result.innerText = JSON.stringify(char,null,2);+result.textContent = 
 +"===== STATS =====\n"
 +JSON.stringify(char,null,2)
 +"\n\n⚔ CC : "+char.cc+ 
 +"\n🎯 CT : "+char.ct+ 
 +"\n✨ FM : "+char.fm+ 
 +"\n🛡 Esquive : "+esquive;
 } }
  
-// ===== EXPORT ===== +// ===== AUTO ===== 
-function exportWiki(){+function autoCalculate(){ 
 +updateCost(); 
 +calculate(); 
 +}
  
-let txt="=== Build ===\n"; +// events stats 
-txt+="Race: "+raceSelect.value+"\n\n";+document.querySelectorAll("#stats input").forEach(i=>
 +i.addEventListener("input", autoCalculate); 
 +});
  
-document.querySelectorAll(".sk:checked").forEach(s=>+// passifs 
-txt+="* "+s.parentNode.innerText+"\n";+document.querySelectorAll(".skill").forEach(s=>
 +s.addEventListener("change", autoCalculate);
 }); });
  
-result.innerText=txt;+// ===== RESET ===== 
 +function resetAll(){ 
 + 
 +document.querySelectorAll("#stats input").forEach(i=>i.value=0); 
 + 
 +Object.values(slots).forEach(s=>
 +s.value=""; 
 +s.disabled=false; 
 +}); 
 + 
 +document.querySelectorAll(".skill").forEach(s=>s.checked=false); 
 + 
 +resetSlots(); 
 +fillEquip(); 
 +displayBase(); 
 +checkLimit(); 
 +autoCalculate();
 } }
  
-</script>+// init 
 +autoCalculate();
  
 +</script>
 </body> </body>
 </html> </html>
brouillon10.1777464064.txt.gz · Dernière modification : 2026/04/29 14:01 de nanaki