brouillon
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 | ||
| brouillon [2026/04/17 04:05] – nanaki | brouillon [2026/04/22 19:48] (Version actuelle) – nanaki | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ===== Liste des Sorts ===== | + | < |
| - | Un complément d' | + | < |
| + | body { font-family: | ||
| - | < | + | table { border-collapse: collapse; width: 100%; font-size: 13px; } |
| - | < | + | td, th { border: 1px solid #ccc; padding: 5px; } |
| - | <meta charset=" | + | |
| - | < | + | |
| - | < | + | |
| - | body { font-family: | + | |
| - | h3 { text-align: center; } | + | |
| - | .table-container | + | |
| - | table { width: 100%; border-collapse: collapse; min-width: 1200px; } | + | |
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | + | |
| th { background: #f2f2f2; } | th { background: #f2f2f2; } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | /* Couleurs par race */ | + | .offensif |
| - | td.race-Communs | + | .defensif |
| - | td.race-Nain | + | .malediction |
| - | td.race-Géant | + | |
| - | td.race-Olympien { color: darkorange; } | + | .controls |
| - | td.race-HS | + | |
| - | td.race-Elfe { color: green; } | + | |
| </ | </ | ||
| - | </ | ||
| - | < | ||
| - | <!-- ================= TABLEAU 1 : sorts ================= --> | + | <div class="controls"> |
| - | < | + | |
| - | <label for=" | + | |
| - | <select id=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value="Elfe"> | + | |
| - | </select> | + | |
| - | <div class=" | + | Points : <span id="points">0</span> / 15 |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | <!-- ================= COMMUNS ================= --> | + | <br>< |
| - | <tr class="Communs"> | + | Recherche : |
| - | <td class="race-Communs"> | + | <input type="text" |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | Filtre |
| - | <td class=" | + | <select id="filterEffect"> |
| - | <td>6 MP</ | + | <option value=" |
| - | < | + | <option value=" |
| - | </ | + | <option value=" |
| - | + | <option value=" | |
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- ================= RACES ================= --> | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>3 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>5 PM</ | + | |
| - | <td> Projette une flèche composée d'eau sur l' | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | // Script pour le premier tableau | + | |
| - | const select1 = document.getElementById(" | + | |
| - | const rows1 = document.querySelectorAll("# | + | |
| - | + | ||
| - | select1.addEventListener(" | + | |
| - | const chosenRace = select1.value; | + | |
| - | rows1.forEach(row => { | + | |
| - | const isCommun = row.classList.contains(" | + | |
| - | const isRace = row.classList.contains(chosenRace); | + | |
| - | row.style.display = (chosenRace === " | + | |
| - | }); | + | |
| - | }); | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | ====== Effets ====== | + | |
| - | + | ||
| - | Le personnage qui est sous un effet reçoit des modifications de ses caractéristiques et/ou des modifications des règles du jeu. Un personnage peut obtenir un effet suite à un Sort, via une Compétence, | + | |
| - | + | ||
| - | Les effets qui atteignent un personnage sont visibles en Observant ce personnage, si ce dernier se trouve dans votre champ de vision. | + | |
| - | + | ||
| - | :!: Lorsqu' | + | |
| - | + | ||
| - | ^Case terrain^ Nom de l' | + | |
| - | | | Acuité visuelle | {{: | + | |
| - | | | Adrénaline | {{: | + | |
| - | | | Aveuglement | {{: | + | |
| - | | | Boue | {{: | + | |
| - | | | Dextérité | {{: | + | |
| - | | | Diamant | {{: | + | |
| - | | | Eau | {{: | + | |
| - | | | Eau | {{: | + | |
| - | | | Essoufflement | — | Immédiat | Ajoute immédiatement X Malus à la cible. | | + | |
| - | | | Feu | {{: | + | |
| - | | | Furtivité | {{: | + | |
| - | | | Jet pur | — | instantané| Un jet pur se fait avec les caractéristiques du personnage sans prendre en considération les malus/ | + | |
| - | | | Lave | {{: | + | |
| - | | | Maladresse | {{: | + | |
| - | | | Poison | {{: | + | |
| - | | | Poison Magique | {{: | + | |
| - | | | Protection | {{: | + | |
| - | | | Ralentissement | {{: | + | |
| - | | | Régénération | {{: | + | |
| - | | | Ronce | {{: | + | |
| - | | | Sang | {{: | + | |
| - | | | Vol | {{: | + | |
| - | | | Vulnérabilité | {{: | + | |
| - | + | ||
| - | + | ||
| - | ===== Adrénaline ===== | + | |
| - | + | ||
| - | ===== Adrénaline ===== | + | |
| - | {{: | + | |
| - | Empêche d' | + | |
| - | ===== Boue ===== | + | |
| - | {{: | + | |
| - | ===== Corruption des plantes ===== | + | |
| - | {{: | + | |
| - | ===== Corruption du Bois ===== | + | |
| - | {{: | + | |
| - | ===== Corruption du Bronze ===== | + | |
| - | {{: | + | |
| - | ===== Corruption du Cuir ===== | + | |
| - | {{: | + | |
| - | ===== Corruption du métal ===== | + | |
| - | {{: | + | |
| - | ===== Diamant ===== | + | |
| - | {{: | + | |
| - | ===== Eau ===== | + | |
| - | {{: | + | |
| - | + | ||
| - | ===== Feu ===== | + | |
| - | {{: | + | |
| - | ===== Lave ===== | + | |
| - | {{: | + | |
| - | ===== Poison ===== | + | |
| - | {{: | + | |
| - | ===== Poison Magique ===== | + | |
| - | {{: | + | |
| - | ===== Régénération ===== | + | |
| - | {{: | + | |
| - | ===== Ronce ===== | + | |
| - | {{: | + | |
| - | ===== Sang ===== | + | |
| - | {{: | + | |
| - | ===== Vol ===== | + | |
| - | {{: | + | |
| - | + | ||
| - | + | ||
| - | ===== effet ===== | + | |
| - | + | ||
| - | ^ Nom de l' | + | |
| - | | Adrénaline | {{: | + | |
| - | | Boue | {{: | + | |
| - | | Diamant | {{: | + | |
| - | | Eau | {{: | + | |
| - | | Feu | {{: | + | |
| - | | Lave | {{: | + | |
| - | | Poison | {{: | + | |
| - | | Poison Magique | {{: | + | |
| - | | Régénération | {{: | + | |
| - | | Ronce | {{: | + | |
| - | | Sang | {{: | + | |
| - | | Vol | {{: | + | |
| - | | Maladresse | — | 24h | Retire X aux jets d' | + | |
| - | | Vulnérabilité | — | 24h | Retire X aux jets de défense. | | + | |
| - | | Ralentissement | <span class=" | + | |
| - | | Dextérité | — | 24h | Ajoute X aux jets d' | + | |
| - | | Protection | — | 24h | Ajoute X aux jets de défense. | | + | |
| - | | Acuité visuelle | — | jusqu' | + | |
| - | | Aveuglement | — | 24h | Retire X en P. | | + | |
| - | | Furtivité | — | 24h | Un effet impactant les compétences de furtivité. | | + | |
| - | | Essoufflement | — | Immédiat | Ajoute immédiatement X Malus à la cible. | | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | ----- | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | ===== Tentative 4 scripts | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | <meta charset=" | + | |
| - | < | + | |
| - | < | + | |
| - | body { font-family: | + | |
| - | h3 { text-align: center; } | + | |
| - | .table-container { width: 100%; overflow-x: auto; margin-top: 10px; } | + | |
| - | table { width: 100%; border-collapse: | + | |
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | + | |
| - | th { background: #f2f2f2; } | + | |
| - | tbody tr: | + | |
| - | tbody tr: | + | |
| - | + | ||
| - | /* Couleurs par race */ | + | |
| - | td.race-Communs { color: #555; } | + | |
| - | td.race-Nain { color: red; } | + | |
| - | td.race-Géant { color: saddlebrown; | + | |
| - | td.race-Olympien { color: darkorange; } | + | |
| - | td.race-HS { color: darkgreen; } | + | |
| - | td.race-Elfe { color: green; } | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | + | ||
| - | <!-- ================= TABLEAU 1 : sorts ================= --> | + | |
| - | < | + | |
| - | <label for=" | + | |
| - | <select id="raceSelect1"> | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| </ | </ | ||
| - | <div class=" | + | Filtre type : |
| - | <table id=" | + | <select id="filterType"> |
| - | < | + | <option value=" |
| - | < | + | <option value=" |
| - | < | + | <option value=" |
| - | < | + | <option value=" |
| - | < | + | <option value=" |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | + | ||
| - | <!-- ================= COMMUNS ================= --> | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- ================= RACES ================= --> | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>3 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>5 PM</ | + | |
| - | <td> Projette une flèche composée d'eau sur l' | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | // Script pour le premier tableau | + | |
| - | const select1 = document.getElementById(" | + | |
| - | const rows1 = document.querySelectorAll("# | + | |
| - | + | ||
| - | select1.addEventListener(" | + | |
| - | const chosenRace = select1.value; | + | |
| - | rows1.forEach(row => { | + | |
| - | const isCommun = row.classList.contains(" | + | |
| - | const isRace = row.classList.contains(chosenRace); | + | |
| - | row.style.display = (chosenRace === " | + | |
| - | }); | + | |
| - | }); | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | <!-- ================= TABLEAU 2 : Sorts ================= --> | + | |
| - | < | + | |
| - | <label for=" | + | |
| - | <select id="raceSelect2"> | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| </ | </ | ||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | |||
| - | <!-- ===== COMMUNS ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== NAINS ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== GÉANTS ===== --> | ||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>8 PM</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>8 PM</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <!-- ===== OLYMPIENS ===== --> | ||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>7 PM</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>7 PM</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <!-- ===== HS ===== --> | ||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>6 PM</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <!-- ===== ELFES ===== --> | ||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>7 PM</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>7 PM + 1 Mvt</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | </ | ||
| - | </ | ||
| </ | </ | ||
| - | <script> | + | <table id="skills"> |
| - | // Script pour le second tableau | + | |
| - | const select2 = document.getElementById(" | + | |
| - | const rows2 = document.querySelectorAll("# | + | |
| - | + | ||
| - | select2.addEventListener(" | + | |
| - | const chosenRace = select2.value; | + | |
| - | rows2.forEach(row => { | + | |
| - | const isCommun = row.classList.contains(" | + | |
| - | const isRace = row.classList.contains(chosenRace); | + | |
| - | row.style.display = (chosenRace === " | + | |
| - | }); | + | |
| - | }); | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | < | + | |
| - | + | ||
| - | <!-- ================= TABLEAU 3 : Techniques Distance ================= --> | + | |
| - | < | + | |
| - | <label for=" | + | |
| - | < | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | </select> | + | |
| - | <div class=" | ||
| - | <table id=" | ||
| < | < | ||
| <tr> | <tr> | ||
| - | <th>Race</ | + | < |
| - | < | + | <th>Race</th> |
| - | <th>Description</ | + | <th>Nom</ |
| + | < | ||
| + | <th>Type</th> | ||
| + | <th>Effet</th> | ||
| + | < | ||
| + | <th>Niv</th> | ||
| </tr> | </tr> | ||
| </ | </ | ||
| - | < | ||
| - | <!-- ================= COMMUNS ================= --> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>2 MP</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>2 MP</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>6 MP</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | <td>4 MP</ | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr class=" | ||
| - | <td class=" | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | // Script pour le troisieme tableau | ||
| - | const select3 = document.getElementById(" | ||
| - | const rows3 = document.querySelectorAll("# | ||
| - | |||
| - | select3.addEventListener(" | ||
| - | const chosenRace = select3.value; | ||
| - | rows3.forEach(row => { | ||
| - | const isCommun = row.classList.contains(" | ||
| - | const isRace = row.classList.contains(chosenRace); | ||
| - | row.style.display = (chosenRace === " | ||
| - | }); | ||
| - | }); | ||
| - | </ | ||
| - | |||
| - | |||
| - | <hr> | ||
| - | |||
| - | <!-- ================= TABLEAU 4 : Furtivité ================= --> | ||
| - | < | ||
| - | <label for=" | ||
| - | <select id=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| < | < | ||
| + | <!-- NIVEAU 1 --> | ||
| - | + | <tr class=" | |
| - | + | < | |
| - | <!-- ================= COMMUNS ================= --> | + | <td>com</ |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class="Communs"> | + | |
| - | <td class="race-Communs"> | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class="Communs"> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class="Communs"> | + | |
| - | < | + | |
| - | <td>X MP, Y Mvt</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | // Script pour le quatrieme tableau | + | |
| - | const select4 = document.getElementById(" | + | |
| - | const rows4 = document.querySelectorAll("# | + | |
| - | + | ||
| - | select4.addEventListener(" | + | |
| - | const chosenRace = select4.value; | + | |
| - | rows3.forEach(row => { | + | |
| - | const isCommun = row.classList.contains(" | + | |
| - | const isRace = row.classList.contains(chosenRace); | + | |
| - | row.style.display = (chosenRace === " | + | |
| - | }); | + | |
| - | }); | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | **Fonctionnement de la carte sur Olympia** : | + | |
| - | >1) Tous les joueurs sur Olympia sont visibles sur la carte en noir | + | |
| - | >2) Un joueur voit la couleur de race des personnages dans un carré de 15 cases de rayon autour de lui | + | |
| - | >3) Si le personnage se déplace, la couleur se met à jour en fonction de la nouvelle position. | + | |
| - | + | ||
| - | + | ||
| - | **Fonctionnement des compétences de discrétion: | + | |
| - | >1) Pour éviter que ce soit trop simple de rester furtif, le coût augmente au fur et à mesure du temps resté discret | + | |
| - | >2) Utiliser une compétence de discrétion (Discrétion pour le moment) ajoute une charge de l' | + | |
| - | >3) Pour refaire baisser le coût des compétences de discrétion, | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | ===== Tentative 3 scripts | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | <meta charset=" | + | |
| - | < | + | |
| - | < | + | |
| - | body { font-family: | + | |
| - | h3 { text-align: center; } | + | |
| - | .table-container { width: 100%; overflow-x: auto; margin-top: 10px; } | + | |
| - | table { width: 100%; border-collapse: | + | |
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | + | |
| - | th { background: #f2f2f2; } | + | |
| - | tbody tr: | + | |
| - | tbody tr: | + | |
| - | + | ||
| - | /* Couleurs par race */ | + | |
| - | td.race-Communs { color: #555; } | + | |
| - | td.race-Nain { color: red; } | + | |
| - | td.race-Géant { color: saddlebrown; | + | |
| - | td.race-Olympien { color: darkorange; } | + | |
| - | td.race-HS { color: darkgreen; } | + | |
| - | td.race-Elfe { color: green; } | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | + | ||
| - | <!-- ================= TABLEAU 1 : sorts ================= --> | + | |
| - | < | + | |
| - | <label for=" | + | |
| - | <select id=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <table id=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| </tr> | </tr> | ||
| - | </ | ||
| - | < | ||
| - | |||
| - | <!-- ================= COMMUNS ================= --> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Arcanes précises</ | + | < |
| - | <td>6 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Arcanes violentes</ | + | < |
| - | <td>6 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Aveuglement</ | + | < |
| - | <td>4 MP</ | + | <td>com</ |
| - | <td>Aveuglement (x1)</ | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Coup précis</ | + | < |
| - | <td>4 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Épuisement arcanique</ | + | < |
| - | <td>4 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Maladresse</ | + | < |
| - | <td>4 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Peau de granit</ | + | < |
| - | <td>4 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Restauration mineure</ | + | < |
| - | <td>6 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Communs">Communs</td><td>Vulnérabilité</ | + | < |
| - | <td>6 MP</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | < |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | <tr class=" | + | <tr class=" |
| - | <td class=" | + | <td>< |
| - | <td>3 PM</ | + | <td>com</ |
| - | <td>Projette un dard sur l' | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-HS">HS</td><td>Aiguillon</ | + | < |
| - | <td>4 PM</ | + | <td>com</ |
| - | <td>Projette un aiguillon sur l’adversaire.</ | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-HS">HS</td><td>Flux Vital</ | + | < |
| - | < | + | <td>com</ |
| - | <td>Puise dans la régénération magique pour se soigner.</ | + | |
| </tr> | </tr> | ||
| - | + | <tr class=" | |
| - | <tr class=" | + | < |
| - | <td class="race-HS">HS</td><td>Arme Vivante *</ | + | <td>HS</ |
| - | <td>12 PM</ | + | |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-HS">HS</td><td>Taillade illusoire</ | + | < |
| - | <td>10 PM</ | + | <td>Elfe</ |
| - | <td>Des crocs et des griffes spectraux assaillent votre adversaire de toute part.</ | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class=" | + | <td>< |
| - | <td>4 PM</ | + | <td>Géant</ |
| - | <td>Projette un aiguillon sur l’adversaire.</ | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <!-- NIVEAU |
| - | <td class=" | + | |
| - | <td>5 PM</ | + | |
| - | <td> Projette une flèche composée d'eau sur l' | + | |
| - | </tr> | + | |
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Elfe">Elfe</td><td>Lien de Vie</ | + | < |
| - | <td>6 PM</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Elfe">Elfe</td><td>Trait Béni *</ | + | < |
| - | <td>12 PM</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Elfe">Elfe</td><td>Glaciation</ | + | < |
| - | <td>8 PM</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <!-- NIVEAU |
| - | <td class=" | + | |
| - | <td>4 PM</ | + | |
| - | < | + | |
| - | </tr> | + | |
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Géant">Géant</td><td>Boule de Magma</ | + | < |
| - | <td>7 PM</ | + | <td>com</ |
| - | <td>Lance une boule de lave en fusion sur l' | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Géant">Géant</td><td>Régénération</ | + | < |
| - | <td>6 PM</ | + | <td>Géant</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Géant">Géant</td><td>Météore *</ | + | < |
| - | <td>12 PM</ | + | <td>Elfe</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Géant">Géant</td><td>Souffle des cimes</ | + | < |
| - | <td>8 PM</ | + | <td>Olympien</ |
| - | < | + | |
| </tr> | </tr> | ||
| + | <!-- NIVEAU 5 --> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class="race-Nain">Nain</td><td>Pic de Pierre</ | + | < |
| - | <td>4 PM</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class=" | + | <td>< |
| - | <td>8 PM</ | + | <td>com</ |
| - | < | + | |
| </tr> | </tr> | ||
| - | + | <tr class=" | |
| - | <tr class=" | + | < |
| - | <td class="race-Olympien">Olympien</td><td>Lame Volante</ | + | <td>com</ |
| - | <td>4 PM</ | + | |
| - | < | + | |
| </tr> | </tr> | ||
| - | <tr class=" | + | <tr class=" |
| - | <td class=" | + | < |
| - | <td>7 PM</ | + | <td>com</ |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class="Olympien"> | + | |
| - | <td class="race-Olympien"> | + | |
| - | <td>12 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class="Olympien"> | + | |
| - | < | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| </tr> | </tr> | ||
| </ | </ | ||
| </ | </ | ||
| - | </ | ||
| < | < | ||
| - | // Script pour le premier tableau | ||
| - | const select1 = document.getElementById(" | ||
| - | const rows1 = document.querySelectorAll("# | ||
| - | select1.addEventListener(" | + | let max = 15; |
| - | const chosenRace = select1.value; | + | |
| - | rows1.forEach(row => { | + | |
| - | const isCommun = row.classList.contains(" | + | |
| - | const isRace = row.classList.contains(chosenRace); | + | |
| - | row.style.display = (chosenRace === " | + | |
| - | }); | + | |
| - | }); | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | + | ||
| - | <!-- ================= TABLEAU 2 : Sorts ================= --> | + | |
| - | < | + | |
| - | <label for=" | + | |
| - | <select id=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <table id=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | + | ||
| - | <!-- ===== COMMUNS ===== --> | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | + | ||
| - | <!-- ===== NAINS ===== --> | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | + | ||
| - | <!-- ===== GÉANTS ===== --> | + | |
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>8 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- ===== OLYMPIENS ===== --> | + | |
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- ===== HS ===== --> | + | |
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- ===== ELFES ===== --> | + | |
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>7 PM + 1 Mvt</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | // Script pour le second tableau | + | |
| - | const select2 = document.getElementById(" | + | |
| - | const rows2 = document.querySelectorAll("# | + | |
| - | select2.addEventListener("change", () => { | + | document.querySelectorAll(".skill").forEach(cb=>{ |
| - | const chosenRace = select2.value; | + | cb.addEventListener(" |
| - | rows2.forEach(row => { | + | let total = document.querySelectorAll(".skill: |
| - | const isCommun | + | if(total > max){ cb.checked = false; return; } |
| - | const isRace = row.classList.contains(chosenRace); | + | points.innerText |
| - | row.style.display | + | }); |
| - | }); | + | |
| }); | }); | ||
| - | </ | ||
| + | function filter(){ | ||
| + | let e = filterEffect.value; | ||
| + | let t = filterType.value; | ||
| + | let s = search.value.toLowerCase(); | ||
| - | < | + | document.querySelectorAll("# |
| - | + | let txt = r.innerText.toLowerCase(); | |
| - | <!-- ================= TABLEAU 3 : Techniques Distance ================= --> | + | let ok = (e=="all"||r.dataset.effect==e) |
| - | < | + | && |
| - | <label for="raceSelect3"> | + | && txt.includes(s); |
| - | <select id=" | + | r.style.display = ok ? "" |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | <option value=" | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <table id=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | </ | + | |
| - | <tbody> | + | |
| - | + | ||
| - | <!-- ================= COMMUNS ================= --> | + | |
| - | + | ||
| - | <tr class="Communs"> | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>2 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>2 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | <td>6 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class="race-Communs"> | + | |
| - | <td>4 MP</ | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | <tr class=" | + | |
| - | <td class=" | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | // Script pour le troisieme tableau | + | |
| - | const select3 = document.getElementById(" | + | |
| - | const rows3 = document.querySelectorAll("# | + | |
| - | + | ||
| - | select3.addEventListener(" | + | |
| - | const chosenRace = select3.value; | + | |
| - | rows3.forEach(row | + | |
| - | const isCommun | + | |
| - | const isRace = row.classList.contains(chosenRace); | + | |
| - | row.style.display = (chosenRace === " | + | |
| - | }); | + | |
| }); | }); | ||
| - | </ | + | } |
| - | </ | + | filterEffect.onchange |
| - | </ | + | filterType.onchange |
| - | + | search.oninput | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | ===== tableau 0 ===== | + | |
| - | + | ||
| - | + | ||
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | + | ||
| - | <!-- Filtre race + légende couleurs --> | + | |
| - | + | ||
| - | <div style=" | + | |
| - | < | + | |
| - | <span style=" | + | |
| - | <span style=" | + | |
| - | <span style=" | + | |
| - | <span style=" | + | |
| - | <span style=" | + | |
| - | <span style=" | + | |
| - | </ | + | |
| - | + | ||
| - | <hr style=" | + | |
| - | + | ||
| - | <!-- TABLEAUX --> | + | |
| - | <div style=" | + | |
| - | + | ||
| - | <!-- Corps à corps --> | + | |
| - | <div style=" | + | |
| - | < | + | |
| - | <table border=" | + | |
| - | < | + | |
| - | <tbody id=" | + | |
| - | <!-- Niveau 1 --> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | + | ||
| - | <!-- Niveau 2 --> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | + | ||
| - | <!-- Niveau 3 --> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | + | ||
| - | <!-- Niveau 4 --> | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | <tr class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | <!-- Reset --> | + | |
| - | <p style=" | + | |
| - | + | ||
| - | <!-- Encarts choisis --> | + | |
| - | + | ||
| - | <!-- Styles --> | + | |
| - | < | + | |
| - | | + | |
| - | .geant td { color: saddlebrown; | + | |
| - | .hs td { color: darkgreen; } | + | |
| - | .elfe td { color: green; } | + | |
| - | .olympien td { color: darkorange; } | + | |
| - | .lutin td { color: purple; } | + | |
| - | + | ||
| - | /* style case désactivée */ | + | |
| - | input.comp[disabled] { opacity: 0.35; cursor: not-allowed; | + | |
| - | tr.comp-forbidden { opacity: 0.45; } | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- Script --> | + | |
| - | < | + | |
| - | (function(){ | + | |
| - | const MAX = 15; | + | |
| - | const pointsSpan = document.getElementById(' | + | |
| - | const chosenList | + | |
| - | const meleeCountSpan = document.getElementById(' | + | |
| - | const rangedCountSpan = document.getElementById(' | + | |
| - | const levelRecap = document.getElementById(' | + | |
| - | const raceSelect = document.getElementById(' | + | |
| - | + | ||
| - | function qAll(selector){ return Array.from(document.querySelectorAll(selector)); | + | |
| - | + | ||
| - | // compte cochés globaux / par tableau / par niveau | + | |
| - | function countChecked(selector){ | + | |
| - | return qAll(selector).filter(cb => cb.checked).length; | + | |
| - | } | + | |
| - | function countCheckedInTable(tableId, | + | |
| - | return qAll('.comp[data-table="' | + | |
| - | } | + | |
| - | + | ||
| - | function updateUI(){ | + | |
| - | // points restants | + | |
| - | const used = countChecked(' | + | |
| - | const rest = MAX - used; | + | |
| - | pointsSpan.textContent = rest; | + | |
| - | + | ||
| - | // liste choisies | + | |
| - | chosenList.innerHTML = ''; | + | |
| - | qAll(' | + | |
| - | const li = document.createElement(' | + | |
| - | const name = cb.dataset.nom; | + | |
| - | const lvl = cb.dataset.niveau; | + | |
| - | const type = cb.dataset.type; | + | |
| - | const portee = cb.dataset.portee || ''; | + | |
| - | li.textContent = name + ' — Niv ' + lvl + ' — ' + type + (portee ? ' — ' + portee : '' | + | |
| - | chosenList.appendChild(li); | + | |
| - | }); | + | |
| - | + | ||
| - | // counts par tableau | + | |
| - | meleeCountSpan.textContent = countChecked(' | + | |
| - | rangedCountSpan.textContent = countChecked(' | + | |
| - | + | ||
| - | // recap par niveau (melee / ranged) | + | |
| - | levelRecap.innerHTML = ''; | + | |
| - | for(let n=1; | + | |
| - | const li = document.createElement(' | + | |
| - | const m = countCheckedInTable(' | + | |
| - | const r = countCheckedInTable(' | + | |
| - | li.textContent = 'Niv ' | + | |
| - | levelRecap.appendChild(li); | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | // enforce prerequisites per table and apply disabling (grisé) | + | |
| - | function applyRulesAndLocks(){ | + | |
| - | const race = raceSelect.value; | + | |
| - | // For each table, compute counts needed | + | |
| - | const tables = [' | + | |
| - | tables.forEach(tbl=> | + | |
| - | const c1 = countCheckedInTable(tbl,' | + | |
| - | const c2 = countCheckedInTable(tbl,' | + | |
| - | const c3 = countCheckedInTable(tbl,' | + | |
| - | + | ||
| - | // For each checkbox in this table: | + | |
| - | qAll(' | + | |
| - | const lvl = parseInt(cb.dataset.niveau, | + | |
| - | const row = cb.closest(' | + | |
| - | + | ||
| - | // Race check: if cb has data-race and race != all and race != lutin and not matching => forbidden | + | |
| - | const dataRace = cb.dataset.race || ''; | + | |
| - | const raceForbidden = (dataRace && race !== ' | + | |
| - | + | ||
| - | // Prereq check for this checkbox' | + | |
| - | let prereqOk = true; | + | |
| - | if(lvl === 2) prereqOk = (c1 >= 1); | + | |
| - | if(lvl === 3) prereqOk = (c2 >= 2); | + | |
| - | if(lvl === 4) prereqOk = (c3 >= 3); | + | |
| - | + | ||
| - | // points check: if no points left, we should disable unchecked boxes (but allow unchecking) | + | |
| - | const pointsLeft = MAX - countChecked(' | + | |
| - | let outOfPoints = (pointsLeft <= 0); | + | |
| - | + | ||
| - | // final disabled logic: | + | |
| - | // disabled if NOT prereqOk OR raceForbidden OR (outOfPoints && not checked) | + | |
| - | const shouldDisable = (!prereqOk) || raceForbidden || (outOfPoints && !cb.checked); | + | |
| - | + | ||
| - | cb.disabled = shouldDisable && !cb.checked; | + | |
| - | // visual class on row when forbidden by race (so row text grayed) | + | |
| - | if(raceForbidden){ | + | |
| - | row.classList.add(' | + | |
| - | } else { | + | |
| - | row.classList.remove(' | + | |
| - | } | + | |
| - | }); | + | |
| - | + | ||
| - | // If prereqs are now false we must uncheck dependent checkboxes (so UI consistent) | + | |
| - | if(c1 < 1){ | + | |
| - | // remove any checked of level2/3/4 in this table | + | |
| - | qAll(' | + | |
| - | } | + | |
| - | if(c2 < 2){ | + | |
| - | qAll(' | + | |
| - | } | + | |
| - | if(c3 < 3){ | + | |
| - | qAll(' | + | |
| - | } | + | |
| - | }); | + | |
| - | + | ||
| - | updateUI(); | + | |
| - | } | + | |
| - | + | ||
| - | // event handler for checkbox change | + | |
| - | function onCompChange(e){ | + | |
| - | const cb = e.target; | + | |
| - | // if it became checked but is disabled (shouldn' | + | |
| - | if(cb.checked && cb.disabled){ cb.checked = false; return; } | + | |
| - | + | ||
| - | // If checking would exceed MAX, prevent (disable already applied but guard) | + | |
| - | const used = countChecked(' | + | |
| - | if(used > MAX){ | + | |
| - | cb.checked = false; | + | |
| - | alert(' | + | |
| - | } | + | |
| - | + | ||
| - | // After any change, reapply rules/ | + | |
| - | applyRulesAndLocks(); | + | |
| - | } | + | |
| - | + | ||
| - | // race change handler | + | |
| - | function onRaceChange(){ | + | |
| - | // do not hide rows; instead race forbids (grise) non-allowed skill checkboxes | + | |
| - | applyRulesAndLocks(); | + | |
| - | } | + | |
| - | + | ||
| - | // reset | + | |
| - | function resetAll(){ | + | |
| - | qAll(' | + | |
| - | cb.checked = false; | + | |
| - | cb.disabled = false; | + | |
| - | const row = cb.closest(' | + | |
| - | }); | + | |
| - | raceSelect.value = ' | + | |
| - | updateUI(); | + | |
| - | applyRulesAndLocks(); | + | |
| - | } | + | |
| - | + | ||
| - | // attach events | + | |
| - | qAll(' | + | |
| - | document.getElementById(' | + | |
| - | raceSelect.addEventListener(' | + | |
| - | + | ||
| - | // initial state: disable higher levels until prerequisites met (applyRulesAndLocks handles this) | + | |
| - | applyRulesAndLocks(); | + | |
| - | updateUI(); | + | |
| - | })(); | ||
| </ | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | --_----- | ||
| - | --- | ||
| - | ===== tableau 2 ===== | ||
| - | |||
| - | **Tableau pour les sorts** | ||
| - | |||
| - | | Race | Nom de sort | Type | Catégorie | ||
| - | | Communs | Arcanes précises | ||
| - | | Communs | Arcanes violentes | ||
| - | | Communs | Aveuglement | ||
| - | | Communs | Coup précis | ||
| - | | Communs | Epuisement arcanique | ||
| - | | Communs | Maladresse | ||
| - | | Communs | Peau de granit | ||
| - | | Communs | Restauration mineure | ||
| - | | Communs | Vulnérabilité | ||
| - | | Communs | Enchevêtrement | ||
| - | |||
| - | |||
| - | ===== tableau 3 ===== | ||
| - | |||
| - | | Race | Nom de sort | Type | Catégorie | ||
| - | | Communs | Arcanes précises | ||
| - | | Communs | Arcanes violentes | ||
| - | | Communs | Aveuglement | ||
| - | | Communs | Coup précis | ||
| - | | Communs | Epuisement arcanique | ||
| - | | Communs | Maladresse | ||
| - | | Communs | Peau de granit | ||
| - | | Communs | Restauration mineure | ||
| - | | Communs | Vulnérabilité | ||
| - | | Communs | Enchevêtrement | ||
| - | |||
| - | ===== tableau 0 ===== | ||
| - | |||
| - | < | ||
| - | < | ||
| - | |||
| - | <!-- Filtre race + légende couleurs --> | ||
| - | <div style=" | ||
| - | < | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | <span style=" | ||
| - | </ | ||
| - | |||
| - | <hr style=" | ||
| - | |||
| - | <div style=" | ||
| - | |||
| - | <!-- Corps à corps --> | ||
| - | <div style=" | ||
| - | < | ||
| - | <table border=" | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | |||
| - | <!-- Niveau 1 --> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <!-- Niveau 2 --> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- Niveau 3 --> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- Niveau 4 --> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | |||
| - | < | ||
| - | .nain td { color: red; } | ||
| - | .geant td { color: saddlebrown; | ||
| - | .hs td { color: darkgreen; } | ||
| - | .elfe td { color: green; } | ||
| - | .olympien td { color: darkorange; } | ||
| - | .lutin td { color: purple; } | ||
| - | </ | ||
| </ | </ | ||
| - | |||
| - | |||
| - | |||
| - | -------- | ||
| - | |||
| - | |||
| - | ===== tableau 1 ===== | ||
| - | |||
| - | ^ Race ^ Nom de la technique | ||
| - | | Communs | ||
| - | | Communs | ||
| - | | Communs | ||
| - | | Communs | ||
| - | | Communs | ||
| - | | Communs | ||
| - | |||
| - | |||
| - | --------- | ||
| - | |||
| - | < | ||
| - | < | ||
| - | |||
| - | <div style=" | ||
| - | <div style=" | ||
| - | < | ||
| - | <table border=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>2 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>4 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>6 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>2 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>8 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | .nain td { color: red; } | ||
| - | .geant td { color: saddlebrown; | ||
| - | .hs td { color: darkgreen; } | ||
| - | .elfe td { color: green; } | ||
| - | .olympien td { color: darkorange; } | ||
| - | .lutin td { color: purple; } | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ____& | ||
| - | |||
| - | ^ Nom de l' | ||
| - | | Adrénaline | — | 48h | Empêche d' | ||
| - | | Boue | — | 48h | Diminue la Force de 1. | | ||
| - | | Corruption des plantes | — | 48h | Augmente le risque que le matériel contenant des plantes (Adonis) se casse. | | ||
| - | | Corruption du Bois | — | 48h | Augmente le risque que le matériel contenant du Bois (ou du Bois Pétrifié) se casse. | | ||
| - | | Corruption du Bronze | — | 48h | Augmente le risque que le matériel contenant du Bronze se casse. | | ||
| - | | Corruption du Cuir | — | 48h | Augmente le risque que le matériel contenant du Cuir se casse. | | ||
| - | | Corruption du métal | — | 48h | Augmente le risque que le matériel contenant du métal (Bronze, Nickel) se casse. | | ||
| - | | Diamant | — | 48h | Diminue la Magie de 1. | | ||
| - | | Eau | — | 48h | Diminue les Mouvements de 1. | | ||
| - | | Feu | — | 48h | Diminue l' | ||
| - | | Lave | — | 48h | Diminue les Actions de 1. | | ||
| - | | Poison | — | — | Empêche la récupération (R) au prochain tour. | | ||
| - | | Poison Magique | — | — | Empêche la récupération magique (RM) au prochain tour. | | ||
| - | | Régénération | — | 48h | Effet du sort Régénération. | | ||
| - | | Ronce | — | 48h | Diminue l' | ||
| - | | Sang | — | 48h | Diminue Force Mentale de 1. | | ||
| - | | Vol | — | 48h | Permet de se déplacer dans les airs. | | ||
| - | | Maladresse | — | 24h | Retire X aux jets d' | ||
| - | | Vulnérabilité | — | 24h | Retire X aux jets de défense. | | ||
| - | | Ralentissement | — | — | Retire X Mvt au début du prochain tour. | | ||
| - | | Dextérité | — | 24h | Ajoute X aux jets d' | ||
| - | | Protection | — | 24h | Ajoute X aux jets de défense. | | ||
| - | | Acuité visuelle | — | 24h | Ajoute X en P. | | ||
| - | | Aveuglement | — | 24h | Retire X en P. | | ||
| - | | Furtivité | — | 24h | Un effet impactant les compétences de furtivité. | | ||
| - | | Essouflement | — | Immédiat | Ajoute immédiatement X Malus à la cible. | | ||
| - | |||
| - | |||
| - | |||
| - | ----- | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | |||
| - | <hr style=" | ||
| - | |||
| - | <div style=" | ||
| - | |||
| - | <!-- Corps à corps --> | ||
| - | <div style=" | ||
| - | < | ||
| - | <table border=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | ---- | ||
| - | |||
| - | |||
| - | Parfait ! J’ai ajouté toutes les lignes que tu as fournies dans le tableau, en laissant la colonne **Icône** vide et en mettant la **durée** et la **description** dans les colonnes correspondantes. Voici le tableau HTML complet : | ||
| - | |||
| - | ```html | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <hr style=" | ||
| - | |||
| - | <div style=" | ||
| - | |||
| - | <!-- Corps à corps --> | ||
| - | <div style=" | ||
| - | < | ||
| - | <table border=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | ``` | ||
| - | |||
| - | ------ | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | <table border=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ------ | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | margin: 10px; | ||
| - | } | ||
| - | h3 { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .table-container { | ||
| - | width: 100%; | ||
| - | overflow-x: auto; /* Permet le scroll horizontal sur mobile */ | ||
| - | } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | min-width: 800px; /* Force le scroll si écran trop petit */ | ||
| - | } | ||
| - | th, td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | text-align: left; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ===== tableau 0 ===== | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | margin: 10px; | ||
| - | } | ||
| - | h3 { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .table-container { | ||
| - | width: 100%; | ||
| - | overflow-x: auto; /* Permet le scroll horizontal sur mobile */ | ||
| - | } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | min-width: 800px; /* Force le scroll si écran trop petit */ | ||
| - | } | ||
| - | th, td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | text-align: left; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | margin-top: 20px; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | cursor: pointer; | ||
| - | } | ||
| - | td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ddd; | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | <th onclick=" | ||
| - | <th onclick=" | ||
| - | <th onclick=" | ||
| - | <th onclick=" | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | function sortTable(n) { | ||
| - | const table = document.getElementById(" | ||
| - | let switching = true, dir = " | ||
| - | while (switching) { | ||
| - | switching = false; | ||
| - | const rows = table.rows; | ||
| - | for (let i = 1; i < rows.length - 1; i++) { | ||
| - | let shouldSwitch = false; | ||
| - | const x = rows[i].getElementsByTagName(" | ||
| - | const y = rows[i + 1].getElementsByTagName(" | ||
| - | let xContent = x.textContent || x.innerText; | ||
| - | let yContent = y.textContent || y.innerText; | ||
| - | if (dir === " | ||
| - | if (xContent.toLowerCase() > yContent.toLowerCase()) { shouldSwitch = true; break; } | ||
| - | } else { | ||
| - | if (xContent.toLowerCase() < yContent.toLowerCase()) { shouldSwitch = true; break; } | ||
| - | } | ||
| - | } | ||
| - | if (shouldSwitch) { | ||
| - | rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); | ||
| - | switching = true; | ||
| - | switchcount++; | ||
| - | } else if (switchcount === 0 && dir === " | ||
| - | dir = " | ||
| - | switching = true; | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | ------ | ||
| - | |||
| - | ===== tableau 124 ===== | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | margin: 10px; | ||
| - | background-color: | ||
| - | color: #000000; | ||
| - | } | ||
| - | h3 { text-align: center; } | ||
| - | .table-container { width: 100%; overflow-x: auto; } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | min-width: 800px; | ||
| - | } | ||
| - | th, td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | text-align: left; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | cursor: pointer; | ||
| - | } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | <th onclick=" | ||
| - | <th onclick=" | ||
| - | <th onclick=" | ||
| - | <th onclick=" | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | function sortTable(n) { | ||
| - | const table = document.getElementById(" | ||
| - | let switching = true, dir = " | ||
| - | |||
| - | while (switching) { | ||
| - | switching = false; | ||
| - | const rows = table.tBodies[0].rows; | ||
| - | for (let i = 0; i < rows.length - 1; i++) { | ||
| - | let shouldSwitch = false; | ||
| - | const x = rows[i].getElementsByTagName(" | ||
| - | const y = rows[i + 1].getElementsByTagName(" | ||
| - | |||
| - | if (dir === " | ||
| - | if (x > y) { shouldSwitch = true; break; } | ||
| - | } else { | ||
| - | if (x < y) { shouldSwitch = true; break; } | ||
| - | } | ||
| - | } | ||
| - | if (shouldSwitch) { | ||
| - | rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); | ||
| - | switching = true; | ||
| - | switchcount++; | ||
| - | } else if (switchcount === 0 && dir === " | ||
| - | dir = " | ||
| - | switching = true; | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | ===== tableau 1234 ===== | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | margin: 10px; | ||
| - | } | ||
| - | h3 { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .table-container { | ||
| - | width: 100%; | ||
| - | overflow-x: auto; /* Permet le scroll horizontal sur mobile */ | ||
| - | } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | min-width: 800px; /* Force le scroll si écran trop petit */ | ||
| - | } | ||
| - | th, td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | text-align: left; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | margin: 10px; | ||
| - | } | ||
| - | h3 { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .table-container { | ||
| - | width: 100%; | ||
| - | overflow-x: auto; | ||
| - | } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | min-width: 900px; | ||
| - | } | ||
| - | th, td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | text-align: left; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | ------ | ||
| - | |||
| - | ===== tableau 12345 ===== | ||
| - | |||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { | ||
| - | font-family: | ||
| - | margin: 10px; | ||
| - | } | ||
| - | h3 { | ||
| - | text-align: center; | ||
| - | } | ||
| - | .table-container { | ||
| - | width: 100%; | ||
| - | overflow-x: auto; | ||
| - | } | ||
| - | table { | ||
| - | width: 100%; | ||
| - | border-collapse: | ||
| - | font-size: 15px; | ||
| - | min-width: 1200px; | ||
| - | } | ||
| - | th, td { | ||
| - | padding: 8px; | ||
| - | border: 1px solid #ccc; | ||
| - | text-align: left; | ||
| - | } | ||
| - | th { | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | tbody tr: | ||
| - | background-color: | ||
| - | } | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>2 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>4 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>6 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>2 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <td>8 MP</ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ===== tableau 2345 ===== | ||
| - | |||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { font-family: | ||
| - | h3 { text-align: center; } | ||
| - | .table-container { width: 100%; overflow-x: auto; } | ||
| - | table { width: 100%; border-collapse: | ||
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | ||
| - | th { background: #f2f2f2; } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | < | ||
| - | |||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | |||
| - | <!-- ================= COMMUNS ================= --> | ||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | <!-- ================= NAINS ================= --> | ||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | <!-- ================= GEANTS ================= --> | ||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | <!-- ================= OLYMPIENS ================= --> | ||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | <!-- ================= HS ================= --> | ||
| - | < | ||
| - | |||
| - | <!-- ================= ELFES ================= --> | ||
| - | < | ||
| - | |||
| - | < | ||
| - | |||
| - | </ | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | ===== tableau 345 ===== | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { font-family: | ||
| - | h3 { text-align: center; } | ||
| - | .table-container { width: 100%; overflow-x: auto; margin-top: 10px; } | ||
| - | table { width: 100%; border-collapse: | ||
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | ||
| - | th { background: #f2f2f2; } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | |||
| - | /* Couleurs par race */ | ||
| - | .Nain { color: red; font-weight: | ||
| - | .Géant { color: saddlebrown; | ||
| - | .HS { color: darkgreen; font-weight: | ||
| - | .Elfe { color: green; font-weight: | ||
| - | .Olympien { color: darkorange; font-weight: | ||
| - | .Lutin { color: purple; font-weight: | ||
| - | .Communs { color: #555; font-weight: | ||
| - | |||
| - | /* Grisage pour races non sélectionnées */ | ||
| - | .grise { color: #aaa !important; font-weight: | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | < | ||
| - | |||
| - | <!-- Menu de sélection de race --> | ||
| - | <label for=" | ||
| - | <select id=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | <!-- ===== Exemple : Communs ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Exemple : Nains ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Géants ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Olympiens ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== HS ===== --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Elfes ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | const select = document.getElementById(" | ||
| - | const rows = document.querySelectorAll("# | ||
| - | |||
| - | select.addEventListener(" | ||
| - | const chosenRace = select.value; | ||
| - | |||
| - | rows.forEach(row => { | ||
| - | if (chosenRace === " | ||
| - | row.classList.remove(" | ||
| - | } else { | ||
| - | if (row.classList.contains(chosenRace)) { | ||
| - | row.classList.remove(" | ||
| - | } else { | ||
| - | row.classList.add(" | ||
| - | } | ||
| - | } | ||
| - | }); | ||
| - | }); | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ===== tableau 1234. ===== | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | body { font-family: | ||
| - | h3 { text-align: center; } | ||
| - | .table-container { width: 100%; overflow-x: auto; margin-top: 10px; } | ||
| - | table { width: 100%; border-collapse: | ||
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | ||
| - | th { background: #f2f2f2; } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | |||
| - | /* Couleur uniquement pour la cellule race */ | ||
| - | td.race-Nain { color: red; } | ||
| - | td.race-Géant { color: saddlebrown; | ||
| - | td.race-HS { color: darkgreen; } | ||
| - | td.race-Elfe { color: green; } | ||
| - | td.race-Olympien { color: darkorange; } | ||
| - | td.race-Communs { color: #555; } | ||
| - | |||
| - | /* Grisage pour lignes non sélectionnées */ | ||
| - | .grise td: | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | < | ||
| - | |||
| - | <label for=" | ||
| - | <select id=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | <!-- COMMUNS --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- NAIN --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- GEANT --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- OLYMPIEN --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- HS --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ELFE --> | ||
| - | <tr class=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | const select = document.getElementById(" | ||
| - | const rows = document.querySelectorAll("# | ||
| - | |||
| - | select.addEventListener(" | ||
| - | const chosenRace = select.value; | ||
| - | |||
| - | rows.forEach(row => { | ||
| - | const isCommun = row.classList.contains(" | ||
| - | const isSelected = row.classList.contains(chosenRace); | ||
| - | |||
| - | // Communs restent visibles, la race sélectionnée normale, le reste grisé | ||
| - | if (chosenRace === " | ||
| - | row.classList.remove(" | ||
| - | } else { | ||
| - | row.classList.add(" | ||
| - | } | ||
| - | }); | ||
| - | }); | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ===== tableau 123456 ===== | ||
| - | |||
| - | < | ||
| - | < | ||
| - | <meta charset=" | ||
| - | < | ||
| - | < | ||
| - | body { font-family: | ||
| - | h3 { text-align: center; } | ||
| - | .table-container { width: 100%; overflow-x: auto; margin-top: 10px; } | ||
| - | table { width: 100%; border-collapse: | ||
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | ||
| - | th { background: #f2f2f2; } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | |||
| - | /* Couleurs par race (uniquement colonne race) */ | ||
| - | td.race-Nain { color: red; } | ||
| - | td.race-Géant { color: saddlebrown; | ||
| - | td.race-HS { color: darkgreen; } | ||
| - | td.race-Elfe { color: green; } | ||
| - | td.race-Olympien { color: darkorange; } | ||
| - | td.race-Communs { color: #555; } | ||
| - | |||
| - | /* Grisage pour races non sélectionnées */ | ||
| - | .grise td: | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <label for=" | ||
| - | <select id=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | <!-- Communs --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- Nains --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- Géants --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- Olympiens --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- HS --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- Elfes --> | ||
| - | <tr class=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | const select = document.getElementById(" | ||
| - | const rows = document.querySelectorAll("# | ||
| - | |||
| - | select.addEventListener(" | ||
| - | const chosenRace = select.value; | ||
| - | |||
| - | rows.forEach(row => { | ||
| - | const isCommun = row.classList.contains(" | ||
| - | const isSelected = row.classList.contains(chosenRace); | ||
| - | |||
| - | if(chosenRace === " | ||
| - | row.classList.remove(" | ||
| - | } else { | ||
| - | row.classList.add(" | ||
| - | } | ||
| - | }); | ||
| - | }); | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | ===== tableau corps à corps ===== | ||
| - | |||
| - | |||
| - | < | ||
| - | < | ||
| - | <meta charset=" | ||
| - | < | ||
| - | < | ||
| - | body { font-family: | ||
| - | h3 { text-align: center; } | ||
| - | .table-container { width: 100%; overflow-x: auto; margin-top: 10px; } | ||
| - | table { width: 100%; border-collapse: | ||
| - | th, td { padding: 8px; border: 1px solid #ccc; text-align: left; } | ||
| - | th { background: #f2f2f2; } | ||
| - | tbody tr: | ||
| - | tbody tr: | ||
| - | |||
| - | /* Couleurs par race (uniquement colonne race) */ | ||
| - | td.race-Nain { color: red; } | ||
| - | td.race-Géant { color: saddlebrown; | ||
| - | td.race-HS { color: darkgreen; } | ||
| - | td.race-Elfe { color: green; } | ||
| - | td.race-Olympien { color: darkorange; } | ||
| - | td.race-Communs { color: #555; } | ||
| - | |||
| - | /* Grisage pour races non sélectionnées */ | ||
| - | .grise td: | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | |||
| - | <label for=" | ||
| - | <select id=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | <option value=" | ||
| - | </ | ||
| - | |||
| - | <div class=" | ||
| - | <table id=" | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | <!-- ===== Communs ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Nains ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Géants ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Olympiens ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== HS ===== --> | ||
| - | <tr class=" | ||
| - | |||
| - | <!-- ===== Elfes ===== --> | ||
| - | <tr class=" | ||
| - | <tr class=" | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | const select = document.getElementById(" | ||
| - | const rows = document.querySelectorAll("# | ||
| - | |||
| - | select.addEventListener(" | ||
| - | const chosenRace = select.value; | ||
| - | |||
| - | rows.forEach(row => { | ||
| - | const isCommun = row.classList.contains(" | ||
| - | const isSelected = row.classList.contains(chosenRace); | ||
| - | |||
| - | if(chosenRace === " | ||
| - | row.classList.remove(" | ||
| - | } else { | ||
| - | row.classList.add(" | ||
| - | } | ||
| - | }); | ||
| - | }); | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
brouillon.1776391541.txt.gz · Dernière modification : 2026/04/17 04:05 de nanaki
