brouillon10
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 | ||
| brouillon10 [2026/04/29 14:12] – nanaki | brouillon10 [2026/04/29 23:56] (Version actuelle) – nanaki | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | Évol | ||
| - | |||
| - | |||
| - | |||
| < | < | ||
| < | < | ||
| Ligne 9: | Ligne 5: | ||
| < | < | ||
| - | body { font-family: | + | body { |
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| h1,h2 { color: | h1,h2 { color: | ||
| - | .box { border:1px solid gold; padding: | + | |
| - | select,input { margin: | + | .box { |
| - | button | + | |
| + | | ||
| + | | ||
| + | } | ||
| + | |||
| + | select | ||
| + | input { margin:3px; width:50px; } | ||
| + | |||
| + | .statLine | ||
| + | display:flex; | ||
| + | justify-content:space-between; | ||
| + | max-width: | ||
| + | } | ||
| + | |||
| + | .result { | ||
| + | | ||
| + | color:#00ffcc; | ||
| + | padding: | ||
| + | white-space: | ||
| + | } | ||
| + | |||
| + | .small { | ||
| + | font-size: | ||
| + | color:# | ||
| + | } | ||
| </ | </ | ||
| </ | </ | ||
| Ligne 22: | Ligne 48: | ||
| <div class=" | <div class=" | ||
| - | Race | + | Race : |
| <select id=" | <select id=" | ||
| + | |||
| + | < | ||
| + | <pre id=" | ||
| </ | </ | ||
| <div class=" | <div class=" | ||
| - | Stats | + | < |
| <div id=" | <div id=" | ||
| + | <div id=" | ||
| </ | </ | ||
| <div class=" | <div class=" | ||
| - | Équipement< | + | <h3>Équipement |
| - | Tête <select id=" | + | |
| - | Cou <select id=" | + | Tête <select id=" |
| - | Dos <select id=" | + | Cou <select id=" |
| - | Main droite <select id=" | + | Dos <select id=" |
| - | Main gauche <select id=" | + | Main droite <select id=" |
| - | Corps <select id=" | + | Main gauche <select id=" |
| - | Anneau <select id=" | + | Corps <select id=" |
| - | Pieds <select id=" | + | Anneau <select id=" |
| + | Pieds <select id=" | ||
| + | |||
| + | <div id=" | ||
| </ | </ | ||
| <div class=" | <div class=" | ||
| - | Compétences | + | < |
| <div id=" | <div id=" | ||
| </ | </ | ||
| - | <button onclick=" | + | <button onclick=" |
| - | <button onclick=" | + | |
| - | + | ||
| - | <pre id=" | + | |
| + | <pre id=" | ||
| < | < | ||
| - | // ===== DATA ===== | + | // ===== RACES ===== |
| const races = { | const races = { | ||
| Elfe: | Elfe: | ||
| - | Nain: | + | Nain: |
| + | Géant: | ||
| + | Olympien: | ||
| + | HS: | ||
| }; | }; | ||
| + | // ===== COST ===== | ||
| const costTable = { | const costTable = { | ||
| - | cc: | + | cc: |
| - | pv:[4,2,1], mvt: | + | f: |
| + | agi: | ||
| + | m: | ||
| + | fm: | ||
| + | p: | ||
| + | pv:[4,2,1], | ||
| + | pm: | ||
| + | mvt: | ||
| + | r: | ||
| + | rm: | ||
| }; | }; | ||
| + | // ===== PASSIFS ===== | ||
| + | const skills = [ | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | ]; | ||
| + | |||
| + | |||
| + | // ===== ÉQUIPEMENTS ===== | ||
| const equipments = [ | const equipments = [ | ||
| Ligne 162: | Ligne 216: | ||
| ]; | ]; | ||
| - | + | // ===== INIT ===== | |
| - | + | ||
| - | + | ||
| - | const skills = [" | + | |
| - | + | ||
| - | // ===== DOM ===== | + | |
| const raceSelect = document.getElementById(" | const raceSelect = document.getElementById(" | ||
| const statsDiv = document.getElementById(" | const statsDiv = document.getElementById(" | ||
| - | const skillsDiv | + | const baseDiv |
| - | const head = document.getElementById(" | ||
| - | const neck = document.getElementById(" | ||
| - | const cape = document.getElementById(" | ||
| - | const rightHand = document.getElementById(" | ||
| - | const leftHand = document.getElementById(" | ||
| - | const body = document.getElementById(" | ||
| - | const ring = document.getElementById(" | ||
| - | const feet = document.getElementById(" | ||
| - | |||
| - | // ===== INIT ===== | ||
| - | |||
| - | // race | ||
| for(let r in races){ | for(let r in races){ | ||
| raceSelect.innerHTML += `< | raceSelect.innerHTML += `< | ||
| } | } | ||
| - | // stats | + | // stats UI |
| for(let s in costTable){ | for(let s in costTable){ | ||
| - | statsDiv.innerHTML += `${s} <input type=" | + | statsDiv.innerHTML += ` |
| + | <div class=" | ||
| + | < | ||
| + | <input type=" | ||
| + | </div>`; | ||
| } | } | ||
| - | // skills | + | // passifs |
| skills.forEach(s=> | skills.forEach(s=> | ||
| - | skillsDiv.innerHTML += `< | + | document.getElementById(" |
| + | < | ||
| + | <input type=" | ||
| + | <b>${s.name}</ | ||
| + | <span class=" | ||
| + | </ | ||
| }); | }); | ||
| - | // slots reset | + | // base stats |
| - | function | + | function |
| - | [head, | + | baseDiv.textContent |
| - | sel.innerHTML = `< | + | |
| - | }); | + | |
| } | } | ||
| + | raceSelect.addEventListener(" | ||
| + | displayBase(); | ||
| - | // remplir équipements | + | // ===== COST ===== |
| - | function | + | function |
| - | let r = raceSelect.value; | + | let total=0,last=b; |
| + | for(let i=1; | ||
| + | if(i===1) last=b; | ||
| + | else if(i<=3) last+=m1; | ||
| + | else last+=m2; | ||
| + | total+=last; | ||
| + | } | ||
| + | return total; | ||
| + | } | ||
| - | console.log(e.slot); | + | function updateCost(){ |
| + | let total=0; | ||
| + | for(let s in costTable){ | ||
| + | let v=+document.getElementById(s).value||0; | ||
| + | let [b, | ||
| + | total+=calcCost(b, | ||
| + | } | ||
| + | document.getElementById(" | ||
| + | } | ||
| - | equipments.forEach((e, | + | // ===== SLOTS ===== |
| - | if(e.race!==" | + | const slots = { |
| + | head: | ||
| + | leftHand: | ||
| + | }; | ||
| - | // main droite | + | function resetSlots(){ |
| - | if(e.slot===" | + | Object.values(slots).forEach(s=>s.innerHTML="< |
| - | rightHand.innerHTML += `<option value=" | + | } |
| - | // main gauche | + | function fillEquip(){ |
| - | if(e.slot===" | + | let r=raceSelect.value; |
| - | leftHand.innerHTML += `< | + | |
| - | // corps | + | equipments.forEach((e,i)=>{ |
| - | if(e.slot===" | + | if(e.race!=="all"&&e.race!==r) return; |
| - | body.innerHTML += `<option value=" | + | |
| - | + | ||
| - | // tête | + | |
| - | if(e.slot===" | + | |
| - | head.innerHTML += `<option value=" | + | |
| - | + | ||
| - | // cou | + | |
| - | if(e.slot===" | + | |
| - | neck.innerHTML += `<option value=" | + | |
| - | + | ||
| - | // dos | + | |
| - | if(e.slot===" | + | |
| - | cape.innerHTML += `<option value=" | + | |
| - | + | ||
| - | // pieds | + | |
| - | if(e.slot==="feet") | + | |
| - | feet.innerHTML += `<option value=" | + | |
| - | + | ||
| - | // anneau | + | |
| - | if(e.slot===" | + | |
| - | ring.innerHTML += `<option value=" | + | |
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| }); | }); | ||
| } | } | ||
| - | // update | + | raceSelect.addEventListener(" |
| - | raceSelect.addEventListener(" | + | |
| resetSlots(); | resetSlots(); | ||
| fillEquip(); | fillEquip(); | ||
| + | autoCalculate(); | ||
| }); | }); | ||
| Ligne 258: | Ligne 309: | ||
| fillEquip(); | fillEquip(); | ||
| - | // 2 mains | + | // ===== BONUS ===== |
| - | rightHand.addEventListener(" | + | function displayStats(select,id){ |
| - | let v = rightHand.value; | + | let v=select.value; |
| - | if(v==="" | + | let el=document.getElementById(id); |
| + | if(v==="" | ||
| + | let e=equipments[v]; | ||
| + | let txt=""; | ||
| + | for(let s in e.stats){ | ||
| + | let val=e.stats[s]; | ||
| + | txt+=val> | ||
| + | } | ||
| + | el.innerHTML=txt; | ||
| + | } | ||
| - | let item = equipments[v]; | + | Object.entries(slots).forEach(([k,s])=>{ |
| - | if(item.slot==="weapon2h"){ | + | s.addEventListener("change",()=>{ |
| - | leftHand.value=""; | + | displayStats(s, |
| - | leftHand.disabled=true; | + | checkLimit(); |
| - | }else{ | + | autoCalculate(); |
| - | leftHand.disabled=false; | + | }); |
| - | } | + | |
| }); | }); | ||
| - | // ===== CALCUL | + | // ===== LIMIT ===== |
| + | function checkLimit(){ | ||
| + | let count=0; | ||
| + | Object.entries(slots).forEach(([k, | ||
| + | if(k!==" | ||
| + | }); | ||
| - | function calcCost(base, | + | if(count>=3){ |
| - | let total=0; | + | limitWarn.innerText=" |
| - | let last=base; | + | Object.entries(slots).forEach(([k, |
| - | + | if(k!==" | |
| - | for(let i=1; | + | }); |
| - | if(i===1) last=base; | + | }else{ |
| - | else if(i<=3) last+=m1; | + | limitWarn.innerText="" |
| - | else last+=m2; | + | Object.values(slots).forEach(s=> |
| - | + | ||
| - | total+=last; | + | |
| } | } | ||
| - | return total; | ||
| } | } | ||
| + | // ===== CALCUL ===== | ||
| function calculate(){ | function calculate(){ | ||
| - | let char = {...races[raceSelect.value]}; | + | let char={...races[raceSelect.value]}; |
| - | let totalPI = 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; |
| - | + | ||
| - | // calcul coût | + | |
| - | let [b,m1,m2] = costTable[s]; | + | |
| - | totalPI | + | |
| } | } | ||
| // equip | // equip | ||
| - | [head, | + | Object.values(slots).forEach(sel=> |
| if(sel.value==="" | if(sel.value==="" | ||
| - | + | let e=equipments[sel.value]; | |
| - | let e = equipments[sel.value]; | + | for(let |
| - | + | char[s]=(char[s]||0)+e.stats[s]; | |
| - | for(let | + | |
| - | char[stat]=(char[stat]||0)+e.stats[stat]; | + | |
| } | } | ||
| }); | }); | ||
| + | |||
| + | // esquive | ||
| + | let esquive=Math.round(char.agi*0.75+char.cc*0.25); | ||
| + | |||
| + | let checked=[...document.querySelectorAll(" | ||
| + | |||
| + | if(checked.includes(" | ||
| + | esquive=Math.round(char.agi*0.85+char.cc*0.15); | ||
| + | |||
| + | if(checked.includes(" | ||
| + | esquive=Math.round(char.cc*0.85+char.agi*0.15); | ||
| + | |||
| + | if(checked.includes(" | ||
| + | esquive+=1; | ||
| // affichage | // affichage | ||
| - | result.innerText | + | result.textContent |
| - | JSON.stringify(char, | + | "===== STATS =====\n" |
| - | + "\n\n💰 PI utilisés | + | JSON.stringify(char, |
| + | " | ||
| + | "\n🎯 CT : " | ||
| + | "\n✨ FM : " | ||
| + | "\n🛡 Esquive | ||
| } | } | ||
| + | // ===== AUTO ===== | ||
| + | function autoCalculate(){ | ||
| + | updateCost(); | ||
| + | calculate(); | ||
| + | } | ||
| + | // events stats | ||
| + | document.querySelectorAll("# | ||
| + | i.addEventListener(" | ||
| + | }); | ||
| - | // ===== EXPORT ===== | + | // passifs |
| - | function exportWiki(){ | + | document.querySelectorAll(" |
| + | s.addEventListener(" | ||
| + | }); | ||
| - | let txt="=== Build ===\n"; | + | // ===== RESET ===== |
| - | txt+="Race: " | + | function resetAll(){ |
| - | document.querySelectorAll(" | + | document.querySelectorAll(" |
| - | txt+="* "+s.parentNode.innerText+" | + | |
| + | Object.values(slots).forEach(s=> | ||
| + | s.value="" | ||
| + | s.disabled=false; | ||
| }); | }); | ||
| - | result.innerText=txt; | + | document.querySelectorAll(" |
| + | |||
| + | resetSlots(); | ||
| + | fillEquip(); | ||
| + | displayBase(); | ||
| + | checkLimit(); | ||
| + | autoCalculate(); | ||
| } | } | ||
| - | </script> | + | // init |
| + | autoCalculate(); | ||
| + | </ | ||
| </ | </ | ||
| </ | </ | ||
brouillon10.1777464754.txt.gz · Dernière modification : 2026/04/29 14:12 de nanaki
