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:54] – nanaki | brouillon10 [2026/04/29 23:56] (Version actuelle) – nanaki | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | |||
| < | < | ||
| < | < | ||
| Ligne 6: | 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 19: | 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: | ||
| }; | }; | ||
| - | const equipments | + | // ===== PASSIFS ===== |
| - | {name:" | + | const skills |
| - | {name:" | + | {name:" |
| - | {name:" | + | {name:" |
| - | {name:" | + | {name:" |
| + | {name:" | ||
| ]; | ]; | ||
| - | const skills = [" | ||
| - | // ===== DOM ===== | + | // ===== ÉQUIPEMENTS |
| - | const raceSelect | + | const equipments |
| - | const statsDiv = document.getElementById(" | + | |
| - | const skillsDiv = document.getElementById(" | + | |
| - | const head = document.getElementById(" | + | /* ================= COMMUNS ================= */ |
| - | const neck = document.getElementById(" | + | |
| - | const cape = document.getElementById(" | + | {name:" |
| - | const rightHand = document.getElementById("rightHand"); | + | {name:" |
| - | const leftHand | + | {name:" |
| - | const body = document.getElementById(" | + | {name:" |
| - | const ring = document.getElementById("ring"); | + | {name:" |
| - | const feet = document.getElementById(" | + | {name:" |
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | |||
| + | /* ================= ELFES ================= */ | ||
| + | |||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | |||
| + | /* ================= NAINS ================= */ | ||
| + | |||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:"Solerets", | ||
| + | {name:" | ||
| + | |||
| + | /* ================= GÉANTS ================= */ | ||
| + | |||
| + | {name:"Bouclier Clipeus", | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | |||
| + | /* ================= HS ================= */ | ||
| + | |||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:"Ceste", | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | |||
| + | /* ================= OLYMPIENS ================= */ | ||
| + | |||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | |||
| + | /* ================= ANNEAUX ================= */ | ||
| + | |||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | {name:" | ||
| + | |||
| + | ]; | ||
| // ===== INIT ===== | // ===== INIT ===== | ||
| + | const raceSelect = document.getElementById(" | ||
| + | const statsDiv = document.getElementById(" | ||
| + | const baseDiv = document.getElementById(" | ||
| - | // 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 displayBase(){ | ||
| + | baseDiv.textContent = JSON.stringify(races[raceSelect.value], | ||
| + | } | ||
| + | raceSelect.addEventListener(" | ||
| + | displayBase(); | ||
| + | |||
| + | // ===== COST ===== | ||
| + | function calcCost(b, | ||
| + | let total=0, | ||
| + | for(let i=1; | ||
| + | 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, | ||
| + | total+=calcCost(b, | ||
| + | } | ||
| + | document.getElementById(" | ||
| + | } | ||
| + | |||
| + | // ===== SLOTS ===== | ||
| + | const slots = { | ||
| + | head: | ||
| + | leftHand: | ||
| + | }; | ||
| function resetSlots(){ | function resetSlots(){ | ||
| - | [head, | + | Object.values(slots).forEach(s=>s.innerHTML="<option value='' |
| - | sel.innerHTML = `<option value="" | + | |
| - | }); | + | |
| } | } | ||
| - | // remplir équipements | ||
| function fillEquip(){ | function fillEquip(){ | ||
| - | let r = raceSelect.value; | + | let r=raceSelect.value; |
| equipments.forEach((e, | equipments.forEach((e, | ||
| - | if(e.race!==" | + | if(e.race!==" |
| - | if(e.slot===" | + | if(e.slot===" |
| - | if(e.slot===" | + | 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 132: | 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, |
| - | if(item.slot==="weapon2h"){ | + | s.addEventListener(" |
| - | leftHand.value=""; | + | displayStats(s, |
| - | leftHand.disabled=true; | + | checkLimit(); |
| + | autoCalculate(); | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | // ===== LIMIT ===== | ||
| + | function checkLimit(){ | ||
| + | let count=0; | ||
| + | Object.entries(slots).forEach(([k,s])=>{ | ||
| + | if(k!==" | ||
| + | }); | ||
| + | |||
| + | if(count> | ||
| + | limitWarn.innerText="Limite atteinte"; | ||
| + | Object.entries(slots).forEach(([k, | ||
| + | if(k!==" | ||
| + | }); | ||
| }else{ | }else{ | ||
| - | leftHand.disabled=false; | + | limitWarn.innerText=""; |
| + | Object.values(slots).forEach(s=> | ||
| + | } | ||
| } | } | ||
| - | }); | ||
| // ===== 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, | + | Object.values(slots).forEach(sel=> |
| if(sel.value==="" | if(sel.value==="" | ||
| - | let e = equipments[sel.value]; | + | let e=equipments[sel.value]; |
| - | for(let | + | for(let |
| - | 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(" | ||
| + | |||
| + | 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 |
| + | "===== STATS =====\n" | ||
| + | JSON.stringify(char, | ||
| + | " | ||
| + | " | ||
| + | "\n✨ FM : " | ||
| + | " | ||
| } | } | ||
| - | // ===== EXPORT | + | // ===== AUTO ===== |
| - | function | + | function |
| + | updateCost(); | ||
| + | calculate(); | ||
| + | } | ||
| - | let txt=" | + | // events stats |
| - | txt+="Race: "+raceSelect.value+"\n\n"; | + | document.querySelectorAll("#stats input").forEach(i=> |
| + | i.addEventListener("input", autoCalculate); | ||
| + | }); | ||
| - | document.querySelectorAll(" | + | // passifs |
| - | txt+=" | + | document.querySelectorAll(" |
| + | s.addEventListener("change", autoCalculate); | ||
| }); | }); | ||
| - | result.innerText=txt; | + | // ===== RESET ===== |
| + | function resetAll(){ | ||
| + | |||
| + | document.querySelectorAll("# | ||
| + | |||
| + | Object.values(slots).forEach(s=> | ||
| + | s.value=""; | ||
| + | s.disabled=false; | ||
| + | }); | ||
| + | |||
| + | document.querySelectorAll(" | ||
| + | |||
| + | resetSlots(); | ||
| + | fillEquip(); | ||
| + | displayBase(); | ||
| + | checkLimit(); | ||
| + | autoCalculate(); | ||
| } | } | ||
| - | </script> | + | // init |
| + | autoCalculate(); | ||
| + | </ | ||
| </ | </ | ||
| </ | </ | ||
brouillon10.1777463682.txt.gz · Dernière modification : 2026/04/29 13:54 de nanaki
