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 13:52] – nanaki | brouillon10 [2026/04/29 23:56] (Version actuelle) – nanaki | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | |||
| < | < | ||
| < | < | ||
| <meta charset=" | <meta charset=" | ||
| - | < | + | < |
| < | < | ||
| - | body{font-family: | + | body { |
| - | select{margin: | + | |
| - | .box{background:# | + | |
| + | | ||
| + | | ||
| + | } | ||
| + | |||
| + | h1,h2 { color: | ||
| + | |||
| + | .box { | ||
| + | border:1px solid gold; | ||
| + | padding: | ||
| + | margin-bottom: | ||
| + | } | ||
| + | |||
| + | select { margin:3px; max-width:150px; | ||
| + | input { margin:3px; width:50px; } | ||
| + | |||
| + | .statLine | ||
| + | display: | ||
| + | justify-content: | ||
| + | max-width: | ||
| + | } | ||
| + | |||
| + | .result { | ||
| + | | ||
| + | color:# | ||
| + | | ||
| + | white-space:pre-wrap; | ||
| + | } | ||
| + | |||
| + | .small { | ||
| + | font-size:12px; | ||
| + | color:# | ||
| + | } | ||
| </ | </ | ||
| </ | </ | ||
| Ligne 14: | Ligne 45: | ||
| < | < | ||
| - | < | + | < |
| - | <!-- RACE --> | + | <div class=" |
| - | <h2>Race</h2> | + | Race : |
| - | <select id=" | + | <select id=" |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | <!-- EQUIPEMENT --> | + | <h3>Stats de base</h3> |
| - | <h2>Équipement</h2> | + | <pre id=" |
| + | </div> | ||
| - | <select id="head"></ | + | <div class="box"> |
| - | <select id=" | + | <h3>Améliorations</h3> |
| - | <select | + | <div id="stats"></ |
| - | <select | + | <div id="cost"></ |
| - | <select id=" | + | </div> |
| - | <select id=" | + | |
| - | <!-- PASSIFS --> | + | <div class=" |
| - | <h2>Passifs</h2> | + | <h3>Équipement (3 max + 1 anneau)</h3> |
| - | <select id="passives" | + | |
| + | Tête <select id="head"></ | ||
| + | Cou <select | ||
| + | Dos <select id=" | ||
| + | Main droite <select id=" | ||
| + | Main gauche <select id=" | ||
| + | Corps <select id=" | ||
| + | Anneau <select id=" | ||
| + | Pieds <select id=" | ||
| + | |||
| + | <div id=" | ||
| + | </div> | ||
| - | <!-- RESULT --> | ||
| <div class=" | <div class=" | ||
| - | <h2>Résultats combat</h2> | + | <h3>Passifs</h3> |
| - | <div id="result"></ | + | <div id="skills"></ |
| </ | </ | ||
| - | <script> | + | <button onclick=" |
| - | /* ================= RACES ================= */ | + | <pre id=" |
| + | |||
| + | < | ||
| + | // ===== RACES ===== | ||
| const races = { | const races = { | ||
| - | Elfe: | + | Elfe: |
| - | Nain: | + | Nain: |
| - | Géant: | + | Géant: |
| - | Olympien: | + | Olympien: |
| - | HS: | + | HS: |
| }; | }; | ||
| - | /* ================= | + | // ===== COST ===== |
| + | const costTable | ||
| + | cc: | ||
| + | f: | ||
| + | agi: | ||
| + | m: | ||
| + | fm: | ||
| + | p: | ||
| + | pv: | ||
| + | pm: | ||
| + | mvt: | ||
| + | r: | ||
| + | rm: | ||
| + | }; | ||
| + | |||
| + | // ===== PASSIFS | ||
| + | const skills | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | ]; | ||
| + | // ===== ÉQUIPEMENTS ===== | ||
| const equipments = [ | const equipments = [ | ||
| - | {name:" | ||
| - | {name:" | + | /* ================= COMMUNS ================= */ |
| - | {name:" | + | |
| - | {name:" | + | |
| - | {name:" | + | |
| - | {name:" | + | {name:" |
| - | {name:" | + | {name:" |
| - | {name:" | + | {name:" |
| - | ]; | + | {name:" |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | /* ================= | + | /* ================= |
| - | const passives = [ | + | {name:" |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | {name:" | + | /* ================= NAINS ================= */ |
| - | {name:" | + | |
| - | {name:" | + | |
| - | {name:" | + | |
| - | {name:" | + | |
| - | {name:" | + | |
| - | ]; | + | {name:" |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | /* ================= | + | /* ================= |
| - | const race = document.getElementById(" | + | {name:" |
| - | const passivesSelect = document.getElementById("passives"); | + | {name:" |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | const slots = { | + | /* ================= HS ================= */ |
| - | head: | + | |
| - | body: | + | |
| - | right: | + | |
| - | left: | + | |
| - | feet: | + | |
| - | ring: | + | |
| - | }; | + | |
| - | /* ================= INIT ================= */ | + | {name:" |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | function initEquip(){ | + | /* ================= OLYMPIENS ================= */ |
| - | Object.values(slots).forEach(s=> | + | {name:"Armure hoplitique", |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | equipments.forEach((e, | + | /* ================= ANNEAUX ================= */ |
| - | if(e.slot==="weapon"||e.slot==="weapon2h") | + | {name:" |
| - | slots.right.innerHTML += `<option value="${i}">${e.name}</ | + | {name:" |
| + | {name:"Anneau Horizon", | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| - | if(e.slot===" | + | ]; |
| - | slots.left.innerHTML += `<option value=" | + | |
| - | if(e.slot==="body") | + | // ===== INIT ===== |
| - | slots.body.innerHTML += `<option value="${i}">${e.name}</ | + | const raceSelect = document.getElementById("race"); |
| + | const statsDiv | ||
| + | const baseDiv = document.getElementById(" | ||
| - | if(e.slot===" | + | for(let r in races){ |
| - | slots.feet.innerHTML += `< | + | raceSelect.innerHTML += `< |
| + | } | ||
| - | if(e.slot===" | + | // stats UI |
| - | slots.ring.innerHTML += `<option value="${i}">${e.name}</option>`; | + | for(let s in costTable){ |
| + | statsDiv.innerHTML += ` | ||
| + | <div class="statLine"> | ||
| + | < | ||
| + | <input type=" | ||
| + | </div>`; | ||
| + | } | ||
| + | // passifs | ||
| + | skills.forEach(s=> | ||
| + | document.getElementById(" | ||
| + | < | ||
| + | <input type=" | ||
| + | < | ||
| + | <span class=" | ||
| + | </ | ||
| }); | }); | ||
| + | // base stats | ||
| + | function displayBase(){ | ||
| + | baseDiv.textContent = JSON.stringify(races[raceSelect.value], | ||
| } | } | ||
| + | raceSelect.addEventListener(" | ||
| + | displayBase(); | ||
| - | /* ================= | + | // ===== COST ===== |
| + | function calcCost(b, | ||
| + | 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 | + | function |
| - | passives.forEach((p,i)=>{ | + | let total=0; |
| - | let opt=document.createElement(" | + | for(let s in costTable){ |
| - | opt.value=i; | + | let v=+document.getElementById(s).value||0; |
| - | opt.textContent=p.name; | + | let [b,m1,m2]=costTable[s]; |
| - | passivesSelect.appendChild(opt); | + | total+=calcCost(b,m1,m2,v); |
| - | }); | + | } |
| + | document.getElementById(" | ||
| } | } | ||
| - | /* ================= CALCUL ================= */ | + | // ===== SLOTS ===== |
| + | const slots = { | ||
| + | head: | ||
| + | leftHand: | ||
| + | }; | ||
| - | function | + | function |
| + | Object.values(slots).forEach(s=> | ||
| + | } | ||
| - | let s = {...races[race.value]}; | + | function fillEquip(){ |
| + | let r=raceSelect.value; | ||
| - | Object.values(slots).forEach(sel=>{ | + | equipments.forEach((e,i)=>{ |
| - | let item = equipments[sel.value]; | + | if(e.race!==" |
| - | if(!item || !item.stats) return; | + | |
| - | Object.entries(item.stats).forEach(([k,v])=>{ | + | if(e.slot===" |
| - | s[k]=(s[k]||0)+v; | + | if(e.slot===" |
| - | }); | + | if(e.slot===" |
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| + | if(e.slot===" | ||
| }); | }); | ||
| + | } | ||
| - | // passifs | + | raceSelect.addEventListener(" |
| - | [...passivesSelect.selectedOptions].forEach(o=>{ | + | resetSlots(); |
| - | passives[o.value].effect(s); | + | fillEquip(); |
| + | autoCalculate(); | ||
| }); | }); | ||
| - | return s; | + | resetSlots(); |
| + | fillEquip(); | ||
| + | |||
| + | // ===== BONUS ===== | ||
| + | function displayStats(select, | ||
| + | let v=select.value; | ||
| + | let el=document.getElementById(id); | ||
| + | if(v==="" | ||
| + | let e=equipments[v]; | ||
| + | let txt=""; | ||
| + | for(let | ||
| + | let val=e.stats[s]; | ||
| + | txt+=val> | ||
| + | } | ||
| + | el.innerHTML=txt; | ||
| } | } | ||
| - | /* ================= CT DISTANCE ================= */ | + | Object.entries(slots).forEach(([k, |
| + | s.addEventListener(" | ||
| + | displayStats(s, | ||
| + | checkLimit(); | ||
| + | autoCalculate(); | ||
| + | }); | ||
| + | }); | ||
| - | function | + | // ===== LIMIT ===== |
| - | if(dist<=2) return ct; | + | function |
| - | return ct - (dist-2)*3; | + | let count=0; |
| + | Object.entries(slots).forEach(([k,s])=>{ | ||
| + | if(k!==" | ||
| + | }); | ||
| + | |||
| + | if(count> | ||
| + | limitWarn.innerText=" | ||
| + | Object.entries(slots).forEach(([k, | ||
| + | if(k!==" | ||
| + | }); | ||
| + | }else{ | ||
| + | limitWarn.innerText=""; | ||
| + | Object.values(slots).forEach(s=> | ||
| + | } | ||
| } | } | ||
| - | /* ================= ESQUIVE ================= */ | + | // ===== CALCUL |
| + | function calculate(){ | ||
| - | function dodgeShot(cc, | + | let char={...races[raceSelect.value]}; |
| - | let def = Math.max( | + | // stats investies |
| - | Math.floor(cc*0.75 + agi*0.25), | + | for(let s in costTable){ |
| - | Math.floor(cc*0.25 + agi*0.75) | + | let v=+document.getElementById(s).value||0; |
| - | ); | + | char[s]=(char[s]||0)+v; |
| + | } | ||
| - | return | + | // equip |
| + | Object.values(slots).forEach(sel=> | ||
| + | if(sel.value==="" | ||
| + | let e=equipments[sel.value]; | ||
| + | for(let s in e.stats){ | ||
| + | char[s]=(char[s]||0)+e.stats[s]; | ||
| } | } | ||
| + | }); | ||
| - | /* ================= UPDATE ================= */ | + | // esquive |
| + | let esquive=Math.round(char.agi*0.75+char.cc*0.25); | ||
| - | function update(){ | + | let checked=[...document.querySelectorAll(" |
| - | let s = getStats(); | + | if(checked.includes(" |
| + | esquive=Math.round(char.agi*0.85+char.cc*0.15); | ||
| - | let res = ` | + | if(checked.includes(" |
| - | <b>CC :</b> ${s.cc}< | + | esquive=Math.round(char.cc*0.85+char.agi*0.15); |
| - | <b>FM :</b> ${s.fm}< | + | |
| - | <b>CT :</ | + | if(checked.includes(" |
| - | 1 case : ${ctAtRange(s.ct, | + | esquive+=1; |
| - | 2 cases : ${ctAtRange(s.ct,2)}< | + | |
| - | 3 cases : ${ctAtRange(s.ct, | + | |
| - | 4 cases : ${ctAtRange(s.ct, | + | |
| - | < | + | // affichage |
| - | `; | + | result.textContent = |
| + | "===== STATS =====\n" | ||
| + | JSON.stringify(char, | ||
| + | " | ||
| + | " | ||
| + | "\n✨ FM : " | ||
| + | " | ||
| + | } | ||
| - | if(s.cover) res += "< | + | // ===== AUTO ===== |
| + | function autoCalculate(){ | ||
| + | updateCost(); | ||
| + | calculate(); | ||
| + | } | ||
| - | document.getElementById("result").innerHTML | + | // events stats |
| + | document.querySelectorAll("#stats input").forEach(i=>{ | ||
| + | i.addEventListener(" | ||
| + | }); | ||
| - | } | + | // passifs |
| + | document.querySelectorAll(" | ||
| + | s.addEventListener(" | ||
| + | }); | ||
| - | /* ================= EVENTS ================= */ | + | // ===== RESET ===== |
| + | function resetAll(){ | ||
| - | document.querySelectorAll(" | + | document.querySelectorAll(" |
| - | s.addEventListener("change",update); | + | |
| + | Object.values(slots).forEach(s=> | ||
| + | s.value="" | ||
| + | s.disabled=false; | ||
| }); | }); | ||
| - | /* ================= START ================= */ | + | document.querySelectorAll(" |
| - | initEquip(); | + | resetSlots(); |
| - | initPassives(); | + | fillEquip(); |
| - | update(); | + | displayBase(); |
| + | checkLimit(); | ||
| + | autoCalculate(); | ||
| + | } | ||
| - | </script> | + | // init |
| + | autoCalculate(); | ||
| + | </ | ||
| </ | </ | ||
| </ | </ | ||
brouillon10.1777463554.txt.gz · Dernière modification : 2026/04/29 13:52 de nanaki
