Différences

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

--- brouillon8 [2026/04/22 20:36] – nanaki
+++ brouillon8 [2026/04/28 19:04] (Version actuelle) – nanaki
@@ Ligne 1: / Ligne 1: @@
-let max = 15;
+Essai 3
-let points = document.getElementById("points");
-let checkboxes = document.querySelectorAll(".skill");
-let rows = document.querySelectorAll("#skills tbody tr");
-function updateUI(){
+<html>
-    let checked = document.querySelectorAll(".skill:checked");
+<head>
-    let total = checked.length;
+<meta charset="UTF-8">
+<title>Simulateur RPG</title>
-    points.innerText = total + " / " + max;
+<style>
+body { font-family: Arial; background:#0b1a13; color:#e0d3a3; padding:20px;}
+h1,h2 { color:gold;}
+.box { border:1px solid gold; padding:10px; margin-bottom:15px;}
+select,input { margin:3px;}
+button { padding:8px; margin:5px; background:gold; border:none;}
+</style>
+</head>
-    if(total >= max){
+<body>
-        rows.forEach(row=>{
-            let cb = row.querySelector(".skill");
+<h1>Simulateur</h1>
-            if(!cb.checked){
-                row.classList.add("disabled-row");
+<div class="box">
-            }
+Race
-        });
+<select id="race"></select>
-    } else {
+</div>
-        rows.forEach(row=>{
-            row.classList.remove("disabled-row");
+<div class="box">
-        });
+Stats
-    }
+<div id="stats"></div>
+</div>
+<div class="box">
+Équipement<br>
+Tête <select id="head"></select><br>
+Cou <select id="neck"></select><br>
+Dos <select id="cape"></select><br>
+Main droite <select id="rightHand"></select><br>
+Main gauche <select id="leftHand"></select><br>
+Corps <select id="body"></select><br>
+Anneau <select id="ring"></select><br>
+Pieds <select id="feet"></select>
+</div>
+<div class="box">
+Compétences
+<div id="skills"></div>
+</div>
+<button onclick="calculate()">Calculer</button>
+<button onclick="exportWiki()">Export Wiki</button>
+<pre id="result"></pre>
+<script>
+// ===== DATA =====
+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},
+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}
+};
+const costTable = {
+cc:[100,50,30], f:[120,55,30], e:[120,55,30], m:[110,55,35],
+pv:[4,2,1], mvt:[100,50,30]
+};
+const equipments = [
+{name:"Lance elfe",race:"Elfe",slot:"weapon",stats:{cc:1,f:1},magicBlock:true},
+{name:"Targe",race:"Nain",slot:"defensive",stats:{cc:1,pv:10},magicBlock:true},
+{name:"Armure elfe",race:"Elfe",slot:"torse",stats:{e:2,mvt:-1},magicBlock:true},
+{name:"Arc long",race:"all",slot:"weapon2h",stats:{ct:2}}
+];
+const skills = ["Fulgurance","Duelliste","Encaisser","Anguille"];
+// ===== DOM =====
+const raceSelect = document.getElementById("race");
+const statsDiv = document.getElementById("stats");
+const skillsDiv = document.getElementById("skills");
+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){
+raceSelect.innerHTML += `<option>${r}</option>`;
 }
-checkboxes.forEach(cb=>{
+// stats
-    cb.addEventListener("change", ()=>{
+for(let s in costTable){
-        let total = document.querySelectorAll(".skill:checked").length;
+statsDiv.innerHTML += `${s} <input type="number" id="${s}" value="0"><br>`;
+}
-        if(total > max){
+// skills
-            cb.checked = false;
+skills.forEach(s=>{
-            return;
+skillsDiv.innerHTML += `<label><input type="checkbox" class="sk"> ${s}</label><br>`;
-        }
+});
-        updateUI();
+// slots reset
-    });
+function resetSlots(){
+[head,neck,cape,rightHand,leftHand,body,ring,feet].forEach(sel=>{
+sel.innerHTML = `<option value="">--</option>`;
 });
+}
-document.getElementById("reset").addEventListener("click", ()=>{
+// remplir équipements
-    checkboxes.forEach(cb => cb.checked = false);
+function fillEquip(){
-    updateUI();
+let r = raceSelect.value;
+equipments.forEach((e,i)=>{
+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==="defensive") leftHand.innerHTML += `<option value="${i}">${e.name}</option>`;
+if(e.slot==="torse") body.innerHTML += `<option value="${i}">${e.name}</option>`;
 });
+}
+// update
+raceSelect.addEventListener("change", ()=>{
+resetSlots();
+fillEquip();
+});
+resetSlots();
+fillEquip();
+// 2 mains
+rightHand.addEventListener("change", ()=>{
+let v = rightHand.value;
+if(v===""){ leftHand.disabled=false; return;}
+let item = equipments[v];
+if(item.slot==="weapon2h"){
+leftHand.value="";
+leftHand.disabled=true;
+}else{
+leftHand.disabled=false;
+}
+});
+// ===== CALCUL =====
+function calculate(){
+let char = {...races[raceSelect.value]};
+let total = 0;
+// stats
+for(let s in costTable){
+let v = parseInt(document.getElementById(s).value)||0;
+char[s]+=v;
+}
+// equip
+[rightHand,leftHand,body].forEach(sel=>{
+if(sel.value==="") return;
+let e = equipments[sel.value];
+for(let stat in e.stats){
+char[stat]=(char[stat]||0)+e.stats[stat];
+}
+});
+// affichage
+result.innerText = JSON.stringify(char,null,2);
+}
+// ===== EXPORT =====
+function exportWiki(){
+let txt="=== Build ===\n";
+txt+="Race: "+raceSelect.value+"\n\n";
+document.querySelectorAll(".sk:checked").forEach(s=>{
+txt+="* "+s.parentNode.innerText+"\n";
+});
+result.innerText=txt;
+}
+</script>
-// INIT
+</body>
-updateUI();
+</html>