kmitresse/cards-rush
1
0
Fork 0
mirror of https://github.com/kmitresse/Cards-Rush.git synced 2026-07-09 13:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: devWeb - newgame configuration: update nbround when sliders values is updated

Browse Source
This commit is contained in:
kmitresse
2024-04-27 14:12:45 +02:00
parent 65a4f28327
commit 3dee1159ef
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag
+21 -14
View File
@@ -45,19 +45,6 @@
<h2 class="title is-5">Paramètres du Deck</h2> <h2 class="title is-5">Paramètres du Deck</h2>
<div class="columns"> <div class="columns">
<div class="column field">
<label class="label" for="nbValues">
Nombre de valeurs: <span class="tag is-medium is-light is-primary" id="tooltip-values">${Deck.NB_VALUES_PER_COLOR_MAX}</span>
</label>
<div class="control is-flex is-1">
<span class="mr-1 tag"><strong>${Deck.NB_VALUES_PER_COLOR_MIN}</strong></span>
<input type="range" required id="nbValues" name="nbValues" class="is-flex-grow-1" data-tooltip="#tooltip-values"
value="${Deck.NB_VALUES_PER_COLOR_MAX}"
min="${Deck.NB_VALUES_PER_COLOR_MIN}"
max="${Deck.NB_VALUES_PER_COLOR_MAX}">
<span class="ml-1 tag"><strong>${Deck.NB_VALUES_PER_COLOR_MAX}</strong></span>
</div>
</div>
<div class="column field"> <div class="column field">
<label class="label" for="nbColors"> <label class="label" for="nbColors">
Nombre de couleurs: <span class="tag is-medium is-light is-primary" id="tooltip-colors">${Deck.NB_COLORS_MAX}</span> Nombre de couleurs: <span class="tag is-medium is-light is-primary" id="tooltip-colors">${Deck.NB_COLORS_MAX}</span>
@@ -71,6 +58,19 @@
<span class="ml-1 tag"><strong>${Deck.NB_COLORS_MAX}</strong></span> <span class="ml-1 tag"><strong>${Deck.NB_COLORS_MAX}</strong></span>
</div> </div>
</div> </div>
<div class="column field">
<label class="label" for="nbValues">
Nombre de valeurs: <span class="tag is-medium is-light is-primary" id="tooltip-values">${Deck.NB_VALUES_PER_COLOR_MAX}</span>
</label>
<div class="control is-flex is-1">
<span class="mr-1 tag"><strong>${Deck.NB_VALUES_PER_COLOR_MIN}</strong></span>
<input type="range" required id="nbValues" name="nbValues" class="is-flex-grow-1" data-tooltip="#tooltip-values"
value="${Deck.NB_VALUES_PER_COLOR_MAX}"
min="${Deck.NB_VALUES_PER_COLOR_MIN}"
max="${Deck.NB_VALUES_PER_COLOR_MAX}">
<span class="ml-1 tag"><strong>${Deck.NB_VALUES_PER_COLOR_MAX}</strong></span>
</div>
</div>
</div> </div>
<div class="columns"> <div class="columns">
@@ -88,11 +88,18 @@
</style> </style>
<script defer type="module"> <script defer type="module">
const nbRound = document.querySelector("input[name='nbRounds']");
const nbValues = document.querySelector("input[name='nbValues']");
const nbColors = document.querySelector("input[name='nbColors']");
// Range inputs // Range inputs
const rangeInputs = document.querySelectorAll("input[type='range']"); const rangeInputs = document.querySelectorAll("input[type='range']");
rangeInputs.forEach(input => { rangeInputs.forEach(input => {
const tooltip = document.querySelector(input.dataset.tooltip); const tooltip = document.querySelector(input.dataset.tooltip);
input.addEventListener("input", () => tooltip.innerHTML = input.value); input.addEventListener("input", () => {
tooltip.innerHTML = input.value
nbRound.max = nbValues.value * nbColors.value;
nbRound.value = nbRound.value > nbRound.max ? nbRound.max : nbRound.value;
});
}); });
// Radio buttons // Radio buttons