From 3dee1159efee0d5d1859570546bfadcce6b980ed Mon Sep 17 00:00:00 2001
From: kmitresse <kmitresse@etud.univ-pau.fr>
Date: Sat, 27 Apr 2024 14:12:45 +0200
Subject: [PATCH] fix: devWeb - newgame configuration: update nbround when
 sliders values is updated

---
 .../webapp/WEB-INF/tags/forms/new-game.tag    | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag
index 31e81b8..369055d 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag
@@ -45,19 +45,6 @@
 
     <h2 class="title is-5">Paramètres du Deck</h2>
     <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">
             <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>
@@ -71,6 +58,19 @@
                 <span class="ml-1 tag"><strong>${Deck.NB_COLORS_MAX}</strong></span>
             </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 class="columns">
@@ -88,11 +88,18 @@
 </style>
 
 <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
     const rangeInputs = document.querySelectorAll("input[type='range']");
     rangeInputs.forEach(input => {
         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