Différences

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

--- brouillon8 [2026/04/22 20:37] – nanaki
+++ brouillon8 [2026/04/28 19:04] (Version actuelle) – nanaki
@@ Ligne 1: / Ligne 1: @@
+Essai 3
 <html>
+<head>
+<meta charset="UTF-8">
+<title>Simulateur RPG</title>
 <style>
-body { font-family: Arial; }
+body { font-family: Arial; background:#0b1a13; color:#e0d3a3; padding:20px;}
+h1,h2 { color:gold;}
-table { border-collapse: collapse; width: 100%; font-size: 13px; }
+.box { border:1px solid gold; padding:10px; margin-bottom:15px;}
-td, th { border: 1px solid #ccc; padding: 5px; }
+select,input { margin:3px;}
-th { background: #f2f2f2; }
+button { padding:8px; margin:5px; background:gold; border:none;}
-.offensif { background: #ffe5e5; }
-.defensif { background: #e5f0ff; }
-.malediction { background: #f3e5ff; }
-.controls { margin-bottom:10px; }
 </style>
+</head>
-<div class="controls">
+<body>
-Points : <span id="points">0</span> / 15
+<h1>Simulateur</h1>
-<br><br>
+<div class="box">
+Race
+<select id="race"></select>
+</div>
-Recherche :
+<div class="box">
-<input type="text" id="search" placeholder="Nom, effet...">
+Stats
+<div id="stats"></div>
+</div>
-Filtre effet :
+<div class="box">
-<select id="filterEffect">
+Équipement<br>
-<option value="all">Tous</option>
+Tête <select id="head"></select><br>
-<option value="offensif">Offensif</option>
+Cou <select id="neck"></select><br>
-<option value="defensif">Soutien</option>
+Dos <select id="cape"></select><br>
-<option value="malediction">Malédiction</option>
+Main droite <select id="rightHand"></select><br>
-</select>
+Main gauche <select id="leftHand"></select><br>
+Corps <select id="body"></select><br>
-Filtre type :
+Anneau <select id="ring"></select><br>
-<select id="filterType">
+Pieds <select id="feet"></select>
-<option value="all">Tous</option>
+</div>
-<option value="S">Sort</option>
-<option value="CAC">CAC</option>
-<option value="DIS">Distance</option>
-<option value="P">Passif</option>
-</select>
+<div class="box">
+Compétences
+<div id="skills"></div>
 </div>
-<table id="skills">
+<button onclick="calculate()">Calculer</button>
+<button onclick="exportWiki()">Export Wiki</button>
-<thead>
+<pre id="result"></pre>
-<tr>
-<th></th>
-<th>Race</th>
-<th>Nom</th>
-<th>Coût</th>
-<th>Type</th>
-<th>Effet</th>
-<th>Portée</th>
-<th>Niv</th>
-</tr>
-</thead>
-<tbody>
+<script>
-<!-- NIVEAU 1 -->
+// ===== DATA =====
-<tr class="offensif" data-effect="offensif" data-type="S">
+const races = {
-<td><input type="checkbox" class="skill"></td>
+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},
-<td>com</td><td>Arcane ajustée</td><td>6 MP</td><td>S</td><td>Avantage toucher</td><td>min 2</td><td>1</td>
+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},
-</tr>
+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}
+};
-<tr class="offensif" data-effect="offensif" data-type="S">
-<td><input type="checkbox" class="skill"></td>
-<td>com</td><td>Arcanes précises</td><td>6 MP</td><td>S</td><td>+4 toucher</td><td>min 2</td><td>1</td>
-</tr>
-<tr class="offensif" data-effect="offensif" data-type="S">
+const costTable = {
-<td><input type="checkbox" class="skill"></td>
+cc:[100,50,30], f:[120,55,30], e:[120,55,30], m:[110,55,35],
-<td>com</td><td>Arcanes violentes</td><td>6 MP</td><td>S</td><td>-6 toucher +5 dégâts</td><td>min 2</td><td>1</td>
+pv:[4,2,1], mvt:[100,50,30]
-</tr>
+};
-<tr class="malediction" data-effect="malediction" data-type="S">
+const equipments = [
-<td><input type="checkbox" class="skill"></td>
+{name:"Lance elfe",race:"Elfe",slot:"weapon",stats:{cc:1,f:1},magicBlock:true},
-<td>com</td><td>Aveuglement</td><td>4 MP</td><td>S</td><td>Aveuglement</td><td>min 2</td><td>1</td>
+{name:"Targe",race:"Nain",slot:"defensive",stats:{cc:1,pv:10},magicBlock:true},
-</tr>
+{name:"Armure elfe",race:"Elfe",slot:"torse",stats:{e:2,mvt:-1},magicBlock:true},
+{name:"Arc long",race:"all",slot:"weapon2h",stats:{ct:2}}
+];
-<tr class="defensif" data-effect="defensif" data-type="S">
+const skills = ["Fulgurance","Duelliste","Encaisser","Anguille"];
-<td><input type="checkbox" class="skill"></td>
-<td>com</td><td>Peau de granit</td><td>4 MP</td><td>S</td><td>Protection x2</td><td>soi-même et max 1</td><td>1</td>
-</tr>
-<tr class="defensif" data-effect="defensif" data-type="S">
+// ===== DOM =====
-<td><input type="checkbox" class="skill"></td>
+const raceSelect = document.getElementById("race");
-<td>com</td><td>Coup précis</td><td>4 MP</td><td>S</td><td>Dextérité x2</td><td>soi-même et max 1</td><td>1</td>
+const statsDiv = document.getElementById("stats");
-</tr>
+const skillsDiv = document.getElementById("skills");
-<tr class="defensif" data-effect="defensif" data-type="S">
+const head = document.getElementById("head");
-<td><input type="checkbox" class="skill"></td>
+const neck = document.getElementById("neck");
-<td>com</td><td>Restauration mineure</td><td>6 MP</td><td>S</td><td>Restauration(5)</td><td>soi-même et max 1</td><td>1</td>
+const cape = document.getElementById("cape");
-</tr>
+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");
-<tr class="malediction" data-effect="malediction" data-type="S">
+// ===== INIT =====
-<td><input type="checkbox" class="skill"></td>
-<td>com</td><td>Épuisement arcanique</td><td>4 MP</td><td>S</td><td>Essoufflement</td><td>min 2</td><td>1</td>
-</tr>
-<tr class="malediction" data-effect="malediction" data-type="S">
+// race
-<td><input type="checkbox" class="skill"></td>
+for(let r in races){
-<td>com</td><td>Maladresse</td><td>4 MP</td><td>S</td><td>Maladresse x2</td><td>min 2</td><td>1</td>
+raceSelect.innerHTML += `<option>${r}</option>`;
-</tr>
+}
-<tr class="malediction" data-effect="malediction" data-type="S">
+// stats
-<td><input type="checkbox" class="skill"></td>
+for(let s in costTable){
-<td>com</td><td>Vulnérabilité</td><td>6 MP</td><td>S</td><td>Vulnérabilité x2</td><td>min 2</td><td>1</td>
+statsDiv.innerHTML += `${s} <input type="number" id="${s}" value="0"><br>`;
-</tr>
+}
-<!-- NIVEAU 2 -->
+// skills
+skills.forEach(s=>{
+skillsDiv.innerHTML += `<label><input type="checkbox" class="sk"> ${s}</label><br>`;
+});
-<tr class="offensif" data-effect="offensif" data-type="S">
+// slots reset
-<td><input type="checkbox" class="skill"></td>
+function resetSlots(){
-<td>com</td><td>Drain</td><td>6 MP</td><td>S</td><td>Soin dégâts/3</td><td>min 2</td><td>2</td>
+[head,neck,cape,rightHand,leftHand,body,ring,feet].forEach(sel=>{
-</tr>
+sel.innerHTML = `<option value="">--</option>`;
+});
+}
-<tr class="malediction" data-effect="malediction" data-type="S">
+// remplir équipements
-<td><input type="checkbox" class="skill"></td>
+function fillEquip(){
-<td>com</td><td>Faiblesse</td><td>6 MP</td><td>S</td><td>Faiblesse</td><td>min 2</td><td>2</td>
+let r = raceSelect.value;
-</tr>
-<tr class="defensif" data-effect="defensif" data-type="S">
+equipments.forEach((e,i)=>{
-<td><input type="checkbox" class="skill"></td>
+if(e.race!=="all" && e.race!==r) return;
-<td>com</td><td>Régénération</td><td>6 MP</td><td>S</td><td>Soin R/2</td><td>soi-même et max 1</td><td>2</td>
-</tr>
-<tr class="offensif" data-effect="offensif" data-type="S">
+if(e.slot==="weapon"||e.slot==="weapon2h") rightHand.innerHTML += `<option value="${i}">${e.name}</option>`;
-<td><input type="checkbox" class="skill"></td>
+if(e.slot==="defensive") leftHand.innerHTML += `<option value="${i}">${e.name}</option>`;
-<td>HS</td><td>Aiguillon</td><td>4 PM</td><td>S</td><td>+3 dégâts</td><td>min 2</td><td>2</td>
+if(e.slot==="torse") body.innerHTML += `<option value="${i}">${e.name}</option>`;
-</tr>
+});
+}
-<tr class="offensif" data-effect="offensif" data-type="S">
+// update
-<td><input type="checkbox" class="skill"></td>
+raceSelect.addEventListener("change", ()=>{
-<td>Elfe</td><td>Flèche Aquatique</td><td>5 PM</td><td>S</td><td>+3 eau</td><td>min 2</td><td>2</td>
+resetSlots();
-</tr>
+fillEquip();
+});
-<tr class="offensif" data-effect="offensif" data-type="S">
+resetSlots();
-<td><input type="checkbox" class="skill"></td>
+fillEquip();
-<td>Géant</td><td>Boule de Magma</td><td>7 PM</td><td>S</td><td>+3 feu</td><td>min 2</td><td>2</td>
-</tr>
-<!-- NIVEAU 3 -->
+// 2 mains
+rightHand.addEventListener("change", ()=>{
+let v = rightHand.value;
+if(v===""){ leftHand.disabled=false; return;}
-<tr class="defensif" data-effect="defensif" data-type="S">
+let item = equipments[v];
-<td><input type="checkbox" class="skill"></td>
+if(item.slot==="weapon2h"){
-<td>com</td><td>Aide</td><td>8 MP</td><td>S</td><td>Dextérité x4</td><td>soi-même et max 1</td><td>3</td>
+leftHand.value="";
-</tr>
+leftHand.disabled=true;
+}else{
+leftHand.disabled=false;
+}
+});
-<tr class="malediction" data-effect="malediction" data-type="S">
+// ===== CALCUL =====
-<td><input type="checkbox" class="skill"></td>
+function calculate(){
-<td>com</td><td>Malchance</td><td>8 MP</td><td>S</td><td>Maladresse x4</td><td>min 2</td><td>3</td>
-</tr>
-<tr class="offensif" data-effect="offensif" data-type="S">
+let char = {...races[raceSelect.value]};
-<td><input type="checkbox" class="skill"></td>
+let total = 0;
-<td>com</td><td>Régénération accélérée</td><td>10 MP</td><td>S</td><td>Soin R</td><td>soi-même et max 1</td><td>3</td>
-</tr>
-<!-- NIVEAU 4 -->
+// stats
+for(let s in costTable){
+let v = parseInt(document.getElementById(s).value)||0;
+char[s]+=v;
+}
-<tr class="defensif" data-effect="defensif" data-type="S">
+// equip
-<td><input type="checkbox" class="skill"></td>
+[rightHand,leftHand,body].forEach(sel=>{
-<td>com</td><td>Bénédiction</td><td>15 MP</td><td>S</td><td>Prot x4 + Dex x4</td><td>soi-même et max 1</td><td>4</td>
+if(sel.value==="") return;
-</tr>
+let e = equipments[sel.value];
+for(let stat in e.stats){
+char[stat]=(char[stat]||0)+e.stats[stat];
+}
+});
-<tr class="offensif" data-effect="offensif" data-type="S">
+// affichage
-<td><input type="checkbox" class="skill"></td>
+result.innerText = JSON.stringify(char,null,2);
-<td>Géant</td><td>Météore</td><td>12 PM</td><td>S</td><td>+M feu</td><td>min 2</td><td>4</td>
+}
-</tr>
-<tr class="offensif" data-effect="offensif" data-type="S">
-<td><input type="checkbox" class="skill"></td>
-<td>Elfe</td><td>Glaciation</td><td>8 PM</td><td>S</td><td>+6 glace</td><td>min 2</td><td>4</td>
-</tr>
-<tr class="offensif" data-effect="offensif" data-type="S">
+// ===== EXPORT =====
-<td><input type="checkbox" class="skill"></td>
+function exportWiki(){
-<td>Olympien</td><td>Lame Bénie</td><td>12 PM</td><td>S</td><td>+M</td><td>max 1</td><td>4</td>
-</tr>
-<!-- NIVEAU 5 -->
+let txt="=== Build ===\n";
+txt+="Race: "+raceSelect.value+"\n\n";
-<tr class="malediction" data-effect="malediction" data-type="S">
+document.querySelectorAll(".sk:checked").forEach(s=>{
-<td><input type="checkbox" class="skill"></td>
+txt+="* "+s.parentNode.innerText+"\n";
-<td>com</td><td>Exténuation</td><td>25 MP</td><td>S</td><td>Vulnérabilité x8</td><td>min 2</td><td>5</td>
-</tr>
-<tr class="defensif" data-effect="defensif" data-type="S">
-<td><input type="checkbox" class="skill"></td>
-<td>com</td><td>Sauvegarde</td><td>20 MP</td><td>S</td><td>Protection x8</td><td>soi-même et max 1</td><td>5</td>
-</tr>
-<tr class="malediction" data-effect="malediction" data-type="S">
-<td><input type="checkbox" class="skill"></td>
-<td>com</td><td>Guigne</td><td>20 MP</td><td>S</td><td>Maladresse x8</td><td>min 2</td><td>5</td>
-</tr>
-<tr class="defensif" data-effect="defensif" data-type="S">
-<td><input type="checkbox" class="skill"></td>
-<td>com</td><td>Virtuose</td><td>20 MP</td><td>S</td><td>Dextérité x8</td><td>soi-même et max 1</td><td>5</td>
-</tr>
-</tbody>
-</table>
-<script>
-let max = 15;
-document.querySelectorAll(".skill").forEach(cb=>{
-cb.addEventListener("change", ()=>{
-let total = document.querySelectorAll(".skill:checked").length;
-if(total > max){ cb.checked = false; return; }
-points.innerText = total;
-});
 });
-function filter(){
+result.innerText=txt;
-let e = filterEffect.value;
-let t = filterType.value;
-let s = search.value.toLowerCase();
-document.querySelectorAll("#skills tbody tr").forEach(r=>{
-let txt = r.innerText.toLowerCase();
-let ok = (e=="all"||r.dataset.effect==e)
-&& (t=="all"||r.dataset.type==t)
-&& txt.includes(s);
-r.style.display = ok ? "" : "none";
-});
 }
-filterEffect.onchange = filter;
-filterType.onchange = filter;
-search.oninput = filter;
 </script>
+</body>
 </html>