From 9ccfded413dfbbdf0199c03175bbd608bb576c00 Mon Sep 17 00:00:00 2001
From: "jakub.salavec" <jakub.salavec@target-technologie.cz>
Date: Fri, 13 Jun 2025 17:46:46 +0200
Subject: [PATCH] Modified - queue configurator styling

---
 .../src/main/web/css/gemp-001/hall.css        |  8 +++
 .../gemp-lotr-async/src/main/web/hall.html    | 20 ++++---
 .../src/main/web/js/gemp-022/hallUi.js        | 57 ++++++++++++-------
 3 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css
index 1a4a55436..5e00cd073 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css
@@ -853,6 +853,7 @@ table.standings {
 #limitedGameForm {
   display: grid;
   margin-left: 20px;
+  padding-top: 8px;
   padding-bottom: 20px;
   gap: 8px;
   max-width: 400px;
@@ -877,3 +878,10 @@ form#limitedGameForm input {
   display: grid;
   gap: 8px;
 }
+
+.formRow {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 8px;
+}
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/hall.html b/gemp-lotr/gemp-lotr-async/src/main/web/hall.html
index ed2abb68c..d7e48c47a 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/hall.html
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/hall.html
@@ -276,24 +276,26 @@
 					<div id="limitedGamesContent" class='visibilityToggle'>
 						<form id="limitedGameForm">
 							<!-- Game Type Selection -->
-							<label for="gameTypeSelect">Type of Game:</label>
-							<select id="gameTypeSelect" name="gameType">
-								<option value="" disabled selected>Select game type</option>
-								<option value="sealed">Sealed</option>
-								<option value="solodraft">Solo Draft</option>
-								<option value="table_draft">Live Draft</option>
-							</select>
+							<div class="formRow">
+								<label for="gameTypeSelect">Type of Game:</label>
+								<select id="gameTypeSelect" name="gameType">
+									<option value="" disabled selected>Select game type</option>
+									<option value="sealed">Sealed</option>
+									<option value="table_draft">Live Draft</option>
+									<option value="solodraft">Solo Draft</option>
+								</select>
+							</div>
 
 							<!-- Placeholder for dynamic fields -->
 							<div id="dynamicFields"></div>
 
 							<!-- Toggle for advanced fields -->
-							<button type="button" id="toggleAdvancedFields" style="display: none;">Show advanced settings</button>
+							<button type="button" id="toggleAdvancedFields" class="ui-button ui-corner-all ui-widget" style="display: none;">Show advanced settings</button>
 
 							<!-- Advanced settings section -->
 							<div id="advancedFields" style="display: none;"></div>
 
-							<button type="button" id="createTournamentButton" style="display: none;">Create</button>
+							<button type="button" id="createTournamentButton" class="ui-button ui-corner-all ui-widget" style="display: none;">Create</button>
 						</form>
 					</div>
 					
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js
index 8a7a85ac9..b55c8b6f8 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js
@@ -212,7 +212,13 @@ var GempLotrHallUI = Class.extend({
                 validPlayerReadyCombo &&
                 draftValid;
 
-            $("#createTournamentButton").prop("disabled", !allValid);
+            if (allValid) {
+                $("#createTournamentButton").prop("disabled", false);
+                $("#createTournamentButton").removeClass("ui-state-disabled");
+            } else {
+                $("#createTournamentButton").prop("disabled", true);
+                $("#createTournamentButton").addClass("ui-state-disabled");
+            }
         };
 
         $("#gameTypeSelect").on("change", function () {
@@ -245,13 +251,15 @@ var GempLotrHallUI = Class.extend({
             if (formats.length === 0) return;
 
             // Create Format label and select
+            const $formatRow = $("<div>").addClass("formRow");
             const $label = $("<label>").attr("for", "formatSelect").text("Format:");
             const $select = $("<select>")
               .attr("id", "formatSelect")
               .attr("name", "format")
               .append($("<option disabled selected>").text("Select format"));
+            $formatRow.append($label, $select);
 
-            // Fill options
+            // Fill format options
             for (const format of formats) {
                 const $option = $("<option>")
                     .val(format.code)
@@ -270,10 +278,12 @@ var GempLotrHallUI = Class.extend({
             }
 
             // Number of players
+            const $playersRow = $("<div>").addClass("formRow");
             const $playersLabel = $("<label>").attr("for", "numPlayers").text("Number of players:");
             const $playersInput = $("<input>")
                 .attr({ type: "number", id: "numPlayers", name: "numPlayers", min: 1 })
                 .val(4);
+            $playersRow.append($playersLabel, $playersInput);
 
             // Modify the max number of players based on format selected (if needed)
             $select.on("change", function () {
@@ -292,69 +302,75 @@ var GempLotrHallUI = Class.extend({
             });
 
             // Pairing type
+            const $pairingRow = $("<div>").addClass("formRow");
             const $pairingLabel = $("<label>").attr("for", "pairingType").text("Pairing type:");
             const $pairingSelect = $("<select>")
                 .attr({ id: "pairingType", name: "pairingType" })
-                .append($("<option>").val("SWISS").text("Swiss"))
+                .append($("<option>").val("SWISS").text("Swiss - losers play next rounds too"))
                 .append($("<option>").val("SINGLE_ELIMINATION").text("Single elimination"));
+            $pairingRow.append($pairingLabel, $pairingSelect);
 
             // Deck-building duration
+            const $durationRow = $("<div>").addClass("formRow");
             const $durationLabel = $("<label>").attr("for", "deckDuration").text("Deck-building duration (minutes, minimum 5):");
             const $durationInput = $("<input>")
                 .attr({ type: "number", id: "deckDuration", name: "deckDuration", min: 5 })
                 .val(15);
+            $durationRow.append($durationLabel, $durationInput);
 
             // Competitive
+            const $competitiveRow = $("<div>").addClass("formRow");
             const $competitiveLabel = $("<label>").attr("for", "competitiveSelect").text("Competitive:");
             const $competitiveSelect = $("<select>")
                 .attr({ id: "competitiveSelect", name: "competitive" })
                 .append($("<option>").val("false").text("Games can be spectated"))
                 .append($("<option>").val("true").text("No spectate; hidden names in queue"));
+            $competitiveRow.append($competitiveLabel, $competitiveSelect);
 
             // Early start
+            const $earlyStartRow = $("<div>").addClass("formRow");
             const $earlyStartLabel = $("<label>").attr("for", "startableEarlySelect").text("Early start:");
             const $earlyStartSelect = $("<select>")
                 .attr({ id: "startableEarlySelect", name: "startableEarly" })
                 .append($("<option>").val("true").text("Can be started with less players"))
                 .append($("<option>").val("false").text("Starts only with all player slots filled"));
+            $earlyStartRow.append($earlyStartLabel, $earlyStartSelect);
 
             // Ready check
+            const $readyCheckRow = $("<div>").addClass("formRow");
             const $readyCheckLabel = $("<label>").attr("for", "readyCheckSelect").text("Ready check:");
             const $readyCheckSelect = $("<select>")
                 .attr({ id: "readyCheckSelect", name: "readyCheck" })
-                .append($("<option>").val("-1").text("No ready check, just start the tournament"))
-                .append($("<option>").val("90").text("90 seconds to confirm"))
+                .append($("<option>").val("-1").text("No, just start the tournament"))
+                .append($("<option>").val("60").text("1 minute to confirm"))
+                .append($("<option>").val("90").text("1 minute 30 seconds to confirm"))
                 .append($("<option>").val("180").text("3 minutes to confirm"));
+            $readyCheckRow.append($readyCheckLabel, $readyCheckSelect);
             // Set default to 90 seconds as we start with 4 players
             $readyCheckSelect.val("90");
 
             // Append to form
             $fields.append(
-                $("<div>").append($label),
-                $("<div>").append($select),
-                $("<div>").append($playersLabel),
-                $("<div>").append($playersInput)
+                $("<div>").append($formatRow),
+                $("<div>").append($playersRow)
             );
 
             // Append to form
             $advanced.append(
-                $("<div>").append($pairingLabel),
-                $("<div>").append($pairingSelect),
-                $("<div>").append($durationLabel),
-                $("<div>").append($durationInput),
-                $("<div>").append($competitiveLabel),
-                $("<div>").append($competitiveSelect),
-                $("<div>").append($earlyStartLabel),
-                $("<div>").append($earlyStartSelect),
-                $("<div>").append($readyCheckLabel),
-                $("<div>").append($readyCheckSelect)
+                $("<div>").append($pairingRow),
+                $("<div>").append($durationRow),
+                $("<div>").append($competitiveRow),
+                $("<div>").append($earlyStartRow),
+                $("<div>").append($readyCheckRow)
             );
 
             // Add live draft timer
+            const $timerRow = $("<div>").addClass("formRow");
             const $timerLabel = $("<label>").attr("for", "draftTimer").text("Draft timer:");
             const $timerSelect = $("<select>")
                 .attr({ id: "draftTimer", name: "draftTimer" })
                 .append($("<option disabled selected>").text("Select timer"));
+            $timerRow.append($timerLabel, $timerSelect);
             if (gameType === "table_draft") {
                 for (const timerType of json.draftTimerTypes) {
                     $timerSelect.append(
@@ -363,8 +379,7 @@ var GempLotrHallUI = Class.extend({
                 }
 
                 $advanced.append(
-                    $("<div>").append($timerLabel),
-                    $("<div>").append($timerSelect)
+                    $("<div>").append($timerRow)
                 );
 
                 // Modify the timer based on format selected