Différences

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

--- brouillon8 [2026/04/28 18:37] – nanaki
+++ brouillon8 [2026/04/28 19:04] (Version actuelle) – nanaki
@@ Ligne 1: / Ligne 1: @@
-essai
+Essai 3
 <html>
 <head>
 <meta charset="UTF-8">
-<title>Simulateur Personnage</title>
+<title>Simulateur RPG</title>
 <style>
-body {
+body { font-family: Arial; background:#0b1a13; color:#e0d3a3; padding:20px;}
-    font-family: Arial;
+h1,h2 { color:gold;}
-    background: #0b1a13;
+.box { border:1px solid gold; padding:10px; margin-bottom:15px;}
-    color: #e0d3a3;
+select,input { margin:3px;}
-    padding: 20px;
+button { padding:8px; margin:5px; background:gold; border:none;}
-}
-h2 {
-    color: gold;
-}
-select, input {
-    margin: 5px;
-}
-.box {
-    border: 1px solid gold;
-    padding: 10px;
-    margin-bottom: 15px;
-}
 </style>
 </head>
@@ Ligne 29: / Ligne 17: @@
 <body>
-<h1>🧝 Simulateur de personnage</h1>
+<h1>Simulateur</h1>
 <div class="box">
-<h2>Race</h2>
+Race
-<select id="race">
+<select id="race"></select>
-<option value="elfe">Elfe</option>
-<option value="nain">Nain</option>
-<option value="geant">Géant</option>
-<option value="olympien">Olympien</option>
-<option value="hs">Homme Sauvage</option>
-</select>
 </div>
 <div class="box">
-<h2>Stats à ajouter</h2>
+Stats
-CC: <input type="number" id="cc" value="0"><br>
+<div id="stats"></div>
-F: <input type="number" id="f" value="0"><br>
-E: <input type="number" id="e" value="0"><br>
-Agi: <input type="number" id="agi" value="0"><br>
-M: <input type="number" id="m" value="0"><br>
-PV: <input type="number" id="pv" value="0"><br>
 </div>
 <div class="box">
-<h2>Équipement (max 4)</h2>
+Équipement<br>
-<label><input type="checkbox" value="cc1"> +1 CC</label><br>
+Tête <select id="head"></select><br>
-<label><input type="checkbox" value="f1"> +1 F</label><br>
+Cou <select id="neck"></select><br>
-<label><input type="checkbox" value="e2"> +2 E</label><br>
+Dos <select id="cape"></select><br>
-<label><input type="checkbox" value="pv10"> +10 PV</label><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">
-<h2>Compétences (max 15)</h2>
+Compétences
-<input type="checkbox"> Fulgurance<br>
+<div id="skills"></div>
-<input type="checkbox"> Duelliste<br>
-<input type="checkbox"> Couverture<br>
-<input type="checkbox"> Encaisser<br>
-<input type="checkbox"> Anguille<br>
 </div>
-<button onclick="calcul()">Calculer</button>
+<button onclick="calculate()">Calculer</button>
+<button onclick="exportWiki()">Export Wiki</button>
-<div class="box">
-<h2>Résultat</h2>
 <pre id="result"></pre>
-</div>
 <script>
+// ===== DATA =====
 const races = {
-    elfe: {cc:9, f:9, e:4, agi:9, m:6, pv:55},
+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, f:11, e:6, agi:6, m:3, pv:50},
+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},
-    geant: {cc:9, f:12, e:4, agi:7, m:5, pv:65},
+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, f:10, e:5, agi:8, m:5, pv:60},
+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, f:7, e:3, agi:11, m:5, pv:45}
+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}
 };
-function calcul() {
-    let race = document.getElementById("race").value;
+const costTable = {
-    let base = {...races[race]};
+cc:[100,50,30], f:[120,55,30], e:[120,55,30], m:[110,55,35],
+pv:[4,2,1], mvt:[100,50,30]
+};
-    base.cc += parseInt(document.getElementById("cc").value);
+const equipments = [
-    base.f += parseInt(document.getElementById("f").value);
+{name:"Lance elfe",race:"Elfe",slot:"weapon",stats:{cc:1,f:1},magicBlock:true},
-    base.e += parseInt(document.getElementById("e").value);
+{name:"Targe",race:"Nain",slot:"defensive",stats:{cc:1,pv:10},magicBlock:true},
-    base.agi += parseInt(document.getElementById("agi").value);
+{name:"Armure elfe",race:"Elfe",slot:"torse",stats:{e:2,mvt:-1},magicBlock:true},
-    base.m += parseInt(document.getElementById("m").value);
+{name:"Arc long",race:"all",slot:"weapon2h",stats:{ct:2}}
-    base.pv += parseInt(document.getElementById("pv").value);
+];
+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>`;
+}
+// stats
+for(let s in costTable){
+statsDiv.innerHTML += `${s} <input type="number" id="${s}" value="0"><br>`;
+}
+// skills
+skills.forEach(s=>{
+skillsDiv.innerHTML += `<label><input type="checkbox" class="sk"> ${s}</label><br>`;
+});
+// slots reset
+function resetSlots(){
+[head,neck,cape,rightHand,leftHand,body,ring,feet].forEach(sel=>{
+sel.innerHTML = `<option value="">--</option>`;
+});
+}
+// remplir équipements
+function fillEquip(){
+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);
+}
-    let equip = document.querySelectorAll('input[type="checkbox"]:checked');
+// ===== EXPORT =====
+function exportWiki(){
-    if (equip.length > 4) {
-        alert("Max 4 équipements !");
-        return;
-    }
-    equip.forEach(e => {
+let txt="=== Build ===\n";
-        if (e.value === "cc1") base.cc += 1;
+txt+="Race: "+raceSelect.value+"\n\n";
-        if (e.value === "f1") base.f += 1;
-        if (e.value === "e2") base.e += 2;
-        if (e.value === "pv10") base.pv += 10;
-    });
-    let result = `
+document.querySelectorAll(".sk:checked").forEach(s=>{
-CC : ${base.cc}
+txt+="* "+s.parentNode.innerText+"\n";
-F : ${base.f}
+});
-E : ${base.e}
-Agi : ${base.agi}
-M : ${base.m}
-PV : ${base.pv}
-`;
-    document.getElementById("result").innerText = result;
+result.innerText=txt;
 }