Différences

Ci-dessous, les différences entre deux révisions de la page.

--- brouillon10 [2026/04/29 09:53] – nanaki
+++ brouillon10 [2026/04/29 11:39] (Version actuelle) – nanaki
@@ Ligne 7: / Ligne 7: @@
 <style>
 body{font-family:Arial;background:#1e1e1e;color:#eee;padding:20px}
-select{margin:5px;width:250px}
+select,input{margin:5px;width:220px}
 .box{background:#2a2a2a;padding:10px;margin-top:10px;border-radius:6px}
+label{display:inline-block;width:120px}
+.stat{color:#8fd}
 button{margin:5px;padding:6px 10px}
-input{width:300px}
 </style>
 </head>
@@ Ligne 28: / Ligne 29: @@
 <h2>Équipement</h2>
+<div class="box">
-<select id="head"></select><br>
+<label>Tête</label><select id="head"></select><span id="headStats" class="stat"></span><br>
-<select id="cape"></select><br>
+<label>Dos</label><select id="cape"></select><span id="capeStats" class="stat"></span><br>
-<select id="body"></select><br>
+<label>Corps</label><select id="body"></select><span id="bodyStats" class="stat"></span><br>
-<select id="right"></select><br>
+<label>Main droite</label><select id="right"></select><span id="rightStats" class="stat"></span><br>
-<select id="left"></select><br>
+<label>Main gauche</label><select id="left"></select><span id="leftStats" class="stat"></span><br>
-<select id="feet"></select><br>
+<label>Pieds</label><select id="feet"></select><span id="feetStats" class="stat"></span><br>
-<select id="ring"></select><br>
+<label>Anneau</label><select id="ring"></select><span id="ringStats" class="stat"></span><br>
 <div id="equipCount"></div>
+</div>
 <h2>Passifs</h2>
-<select id="passives" multiple size="8"></select>
+<select id="passives" multiple size="6"></select>
+<h2>Investissement stats</h2>
+<div class="box">
+CC <input type="number" id="ccUp" value="0"><br>
+CT <input type="number" id="ctUp" value="0"><br>
+F <input type="number" id="fUp" value="0"><br>
+E <input type="number" id="eUp" value="0"><br>
+AGI <input type="number" id="agiUp" value="0"><br>
+FM <input type="number" id="fmUp" value="0"><br>
+M <input type="number" id="mUp" value="0"><br>
+PV <input type="number" id="pvUp" value="0"><br>
+</div>
 <div class="box">
@@ Ligne 48: / Ligne 63: @@
 <div class="box">
-<h2>Sauvegarde / Partage</h2>
+<h2>Sauvegarde</h2>
 <button onclick="saveBuild()">💾 Sauvegarder</button>
 <button onclick="loadBuild()">📂 Charger</button><br><br>
-<button onclick="generateLink()">🔗 Générer lien</button><br>
+<button onclick="generateLink()">🔗 Lien</button><br>
 <input id="shareLink" readonly>
 </div>
@@ Ligne 58: / Ligne 73: @@
 <script>
-/* ================= RACES ================= */
+/* ===== RACES ===== */
 const races = {
 Elfe:{cc:9,ct:10,f:9,e:4,agi:9,fm:8},
@@ Ligne 68: / Ligne 82: @@
 };
-/* ================= EQUIPEMENTS ================= */
+/* ===== EQUIPEMENTS ===== */
 const equipments = [
 {name:"Rien",slot:"all"},
-{name:"Armure sylvestre",slot:"body",stats:{e:2}},
 {name:"Gladius",slot:"weapon",stats:{cc:1}},
 {name:"Lance elfique",slot:"weapon",stats:{cc:1,f:1}},
 {name:"Arc long",slot:"weapon2h",stats:{ct:2,cc:-2}},
 {name:"Bouclier",slot:"offhand",stats:{cc:1}},
+{name:"Armure sylvestre",slot:"body",stats:{e:2}},
 {name:"Cape de chasse",slot:"cape",stats:{ct:1}},
 {name:"Bottes rapides",slot:"feet",stats:{agi:1}},
 {name:"Anneau puissance",slot:"ring",stats:{m:1}}
 ];
-/* ================= PASSIFS ================= */
+/* ===== PASSIFS ===== */
 const passives = [
 {name:"Fulgurance",effect:(s)=>{s.cc+=1;s.agi+=1}},
@@ Ligne 96: / Ligne 105: @@
 ];
-/* ================= SELECT ================= */
+/* ===== COSTS ===== */
+const costs = {
+cc:[100,50,30],
+ct:[110,50,30],
+f:[120,55,30],
+e:[120,55,30],
+agi:[95,45,25],
+fm:[100,50,30],
+m:[110,55,35],
+pv:[4,2,1]
+};
+/* ===== SELECT ===== */
 const race = document.getElementById("race");
 const passivesSelect = document.getElementById("passives");
@@ Ligne 111: / Ligne 131: @@
 };
-/* ================= INIT ================= */
+/* ===== INIT ===== */
 function initEquip(){
+Object.values(slots).forEach(s=>s.innerHTML=`<option value="">-- Aucun --</option>`);
-Object.values(slots).forEach(s=>{
-s.innerHTML = `<option value="">-- Aucun --</option>`;
-});
 equipments.forEach((e,i)=>{
 if(e.slot==="weapon"||e.slot==="weapon2h")
-slots.right.innerHTML += `<option value="${i}">${e.name}</option>`;
+slots.right.innerHTML+=`<option value="${i}">${e.name}</option>`;
 if(e.slot==="offhand")
-slots.left.innerHTML += `<option value="${i}">${e.name}</option>`;
+slots.left.innerHTML+=`<option value="${i}">${e.name}</option>`;
 if(e.slot==="body")
-slots.body.innerHTML += `<option value="${i}">${e.name}</option>`;
+slots.body.innerHTML+=`<option value="${i}">${e.name}</option>`;
 if(e.slot==="cape")
-slots.cape.innerHTML += `<option value="${i}">${e.name}</option>`;
+slots.cape.innerHTML+=`<option value="${i}">${e.name}</option>`;
 if(e.slot==="feet")
-slots.feet.innerHTML += `<option value="${i}">${e.name}</option>`;
+slots.feet.innerHTML+=`<option value="${i}">${e.name}</option>`;
 if(e.slot==="ring")
-slots.ring.innerHTML += `<option value="${i}">${e.name}</option>`;
+slots.ring.innerHTML+=`<option value="${i}">${e.name}</option>`;
 });
 }
-/* ================= PASSIFS ================= */
 function initPassives(){
 passives.forEach((p,i)=>{
-let opt=document.createElement("option");
+let o=document.createElement("option");
-opt.value=i;
+o.value=i;o.textContent=p.name;
-opt.textContent=p.name;
+passivesSelect.appendChild(o);
-passivesSelect.appendChild(opt);
 });
 }
-/* ================= LIMIT ================= */
+/* ===== BONUS AFFICHAGE ===== */
+function displayItemStats(){
-function checkEquipLimit(){
+Object.entries(slots).forEach(([k,s])=>{
+let item=equipments[s.value];
-let count = 0;
+let target=document.getElementById(k+"Stats");
-let ring = 0;
+if(!item||!item.stats){target.innerHTML="";return;}
+target.innerHTML="👉 "+Object.entries(item.stats)
-Object.entries(slots).forEach(([name,sel])=>{
+.map(([a,v])=>a+" "+(v>0?"+":"")+v).join(" | ");
-if(!sel.value) return;
-if(name==="ring") ring++;
-else count++;
 });
-if(count>3){
-alert("Max 3 équipements !");
-return false;
-}
-if(ring>1){
-alert("Max 1 anneau !");
-return false;
 }
-return true;
+/* ===== LIMITE ===== */
+function checkLimit(){
+let count=0,ring=0;
+Object.entries(slots).forEach(([k,s])=>{
+if(!s.value)return;
+if(k==="ring")ring++;else count++;
+});
+document.getElementById("equipCount").innerHTML=`Objets ${count}/3 | Anneau ${ring}/1`;
+return count<=3&&ring<=1;
 }
-/* ================= 2 MAINS ================= */
+/* ===== 2 MAINS ===== */
 slots.right.addEventListener("change",()=>{
-let item = equipments[slots.right.value];
+let item=equipments[slots.right.value];
+if(item&&item.slot==="weapon2h"){
-if(item && item.slot==="weapon2h"){
+slots.left.disabled=true;
-slots.left.disabled = true;
+slots.left.innerHTML="<option>Bloqué</option>";
-slots.left.innerHTML = "<option>Bloqué</option>";
 }else{
-slots.left.disabled = false;
+slots.left.disabled=false;
 initEquip();
 }
 });
-/* ================= STATS ================= */
+/* ===== COST CALC ===== */
+function calcCost(b,m1,m2,n){
+let cost=0,last=b;
+for(let i=1;i<=n;i++){
+if(i===1) last=b;
+else if(i<=3) last+=m1;
+else last+=m2;
+cost+=last;
+}
+return cost;
+}
-function getStats(){
+function totalPI(){
+return calcCost(...costs.cc,ccUp.value)
-let s = {...races[race.value]};
++calcCost(...costs.ct,ctUp.value)
++calcCost(...costs.f,fUp.value)
-Object.values(slots).forEach(sel=>{
++calcCost(...costs.e,eUp.value)
-let item = equipments[sel.value];
++calcCost(...costs.agi,agiUp.value)
-if(!item || !item.stats) return;
++calcCost(...costs.fm,fmUp.value)
++calcCost(...costs.m,mUp.value)
-Object.entries(item.stats).forEach(([k,v])=>{
++calcCost(...costs.pv,pvUp.value);
-s[k]=(s[k]||0)+v;
-});
-});
-[...passivesSelect.selectedOptions].forEach(o=>{
-passives[o.value].effect(s);
-});
-return s;
 }
-/* ================= CALCUL ================= */
+/* ===== CALCUL ===== */
 function ctRange(ct,d){
-if(d<=2) return ct;
+return d<=2?ct:ct-(d-2)*3;
-return ct-(d-2)*3;
 }
@@ Ligne 230: / Ligne 228: @@
 }
-/* ================= UPDATE ================= */
+/* ===== UPDATE ===== */
 function update(){
-if(!checkEquipLimit()) return;
+if(!checkLimit()) return;
-let s = getStats();
+displayItemStats();
+let s={...races[race.value]};
+Object.values(slots).forEach(sel=>{
+let item=equipments[sel.value];
+if(item&&item.stats){
+Object.entries(item.stats).forEach(([k,v])=>{
+s[k]=(s[k]||0)+v;
+});
+}
+});
+[...passivesSelect.selectedOptions].forEach(o=>{
+passives[o.value].effect(s);
+});
-document.getElementById("result").innerHTML = `
+document.getElementById("result").innerHTML=`
 CC: ${s.cc}<br>
 FM: ${s.fm}<br><br>
 CT:<br>
 case: ${ctRange(s.ct,1)}<br>
@@ Ligne 247: / Ligne 258: @@
 cases: ${ctRange(s.ct,3)}<br>
 cases: ${ctRange(s.ct,4)}<br><br>
+Esquive tir: ${dodge(s.cc,s.agi)}<br><br>
-Esquive tir: ${dodge(s.cc,s.agi)}
+💰 PI: ${totalPI()}
 `;
-displayCount();
 }
-/* ================= COMPTEUR ================= */
+/* ===== SAVE ===== */
-function displayCount(){
-let count=0, ring=0;
-Object.entries(slots).forEach(([name,sel])=>{
-if(!sel.value) return;
-if(name==="ring") ring++;
-else count++;
-});
-document.getElementById("equipCount").innerHTML =
-`Équipements: ${count}/3 | Anneau: ${ring}/1`;
-}
-/* ================= SAVE ================= */
 function saveBuild(){
-let data = {
+let data={race:race.value,equip:{},passives:[...passivesSelect.selectedOptions].map(o=>o.value)};
-race: race.value,
+Object.entries(slots).forEach(([k,s])=>data.equip[k]=s.value);
-equip:{},
-passives:[...passivesSelect.selectedOptions].map(o=>o.value)
-};
-Object.entries(slots).forEach(([k,s])=>{
-data.equip[k]=s.value;
-});
 localStorage.setItem("build",JSON.stringify(data));
-alert("Build sauvegardé !");
 }
-/* ================= LOAD ================= */
+/* ===== LOAD ===== */
 function loadBuild(){
+let data=JSON.parse(localStorage.getItem("build"));
-let data = JSON.parse(localStorage.getItem("build"));
+if(!data)return;
-if(!data) return;
+race.value=data.race;
+Object.entries(data.equip).forEach(([k,v])=>slots[k].value=v);
-race.value = data.race;
+[...passivesSelect.options].forEach(o=>o.selected=data.passives.includes(o.value));
-Object.entries(data.equip).forEach(([k,v])=>{
-slots[k].value=v;
-});
-[...passivesSelect.options].forEach(o=>{
-o.selected = data.passives.includes(o.value);
-});
 update();
 }
-/* ================= SHARE ================= */
+/* ===== SHARE ===== */
 function generateLink(){
+let data={race:race.value,equip:{},passives:[...passivesSelect.selectedOptions].map(o=>o.value)};
-let data = {
+Object.entries(slots).forEach(([k,s])=>data.equip[k]=s.value);
-race: race.value,
+document.getElementById("shareLink").value=location.href.split("?")[0]+"?b="+btoa(JSON.stringify(data));
-equip:{},
-passives:[...passivesSelect.selectedOptions].map(o=>o.value)
-};
-Object.entries(slots).forEach(([k,s])=>{
-data.equip[k]=s.value;
-});
-let str = btoa(JSON.stringify(data));
-let url = location.href.split("?")[0]+"?build="+str;
-document.getElementById("shareLink").value = url;
 }
-/* ================= LOAD FROM URL ================= */
+/* ===== INIT ===== */
+document.querySelectorAll("select,input").forEach(e=>e.addEventListener("change",update));
-function loadFromURL(){
-let params = new URLSearchParams(window.location.search);
-let data = params.get("build");
-if(!data) return;
-let decoded = JSON.parse(atob(data));
-race.value = decoded.race;
-Object.entries(decoded.equip).forEach(([k,v])=>{
-slots[k].value=v;
-});
-[...passivesSelect.options].forEach(o=>{
-o.selected = decoded.passives.includes(o.value);
-});
-update();
-}
-/* ================= EVENTS ================= */
-document.querySelectorAll("select").forEach(s=>{
-s.addEventListener("change",update);
-});
-/* ================= START ================= */
 initEquip();
 initPassives();
-loadFromURL();
 update();