ambidextrous/gemp-lotr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modified - queue configurator styling

Browse Source
This commit is contained in:
jakub.salavec
2025-06-13 17:46:46 +02:00
parent 23a1cec38d
commit 9ccfded413
3 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css
View File

@@ -853,6 +853,7 @@ table.standings {
#limitedGameForm { #limitedGameForm {
display: grid; display: grid;
margin-left: 20px; margin-left: 20px;
padding-top: 8px;
padding-bottom: 20px; padding-bottom: 20px;
gap: 8px; gap: 8px;
max-width: 400px; max-width: 400px;
@@ -877,3 +878,10 @@ form#limitedGameForm input {
display: grid; display: grid;
gap: 8px; gap: 8px;
} }
.formRow {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px;
}

20
gemp-lotr/gemp-lotr-async/src/main/web/hall.html
View File

@@ -276,24 +276,26 @@
<div id="limitedGamesContent" class='visibilityToggle'> <div id="limitedGamesContent" class='visibilityToggle'>
<form id="limitedGameForm"> <form id="limitedGameForm">
<!-- Game Type Selection --> <!-- Game Type Selection -->
<label for="gameTypeSelect">Type of Game:</label> <div class="formRow">
<select id="gameTypeSelect" name="gameType"> <label for="gameTypeSelect">Type of Game:</label>
<option value="" disabled selected>Select game type</option> <select id="gameTypeSelect" name="gameType">
<option value="sealed">Sealed</option> <option value="" disabled selected>Select game type</option>
<option value="solodraft">Solo Draft</option> <option value="sealed">Sealed</option>
<option value="table_draft">Live Draft</option> <option value="table_draft">Live Draft</option>
</select> <option value="solodraft">Solo Draft</option>
</select>
</div>
<!-- Placeholder for dynamic fields --> <!-- Placeholder for dynamic fields -->
<div id="dynamicFields"></div> <div id="dynamicFields"></div>
<!-- Toggle for advanced fields --> <!-- 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 --> <!-- Advanced settings section -->
<div id="advancedFields" style="display: none;"></div> <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> </form>
</div> </div>

57
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js
View File

@@ -212,7 +212,13 @@ var GempLotrHallUI = Class.extend({
validPlayerReadyCombo && validPlayerReadyCombo &&
draftValid; 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 () { $("#gameTypeSelect").on("change", function () {
@@ -245,13 +251,15 @@ var GempLotrHallUI = Class.extend({
if (formats.length === 0) return; if (formats.length === 0) return;
// Create Format label and select // Create Format label and select
const $formatRow = $("<div>").addClass("formRow");
const $label = $("<label>").attr("for", "formatSelect").text("Format:"); const $label = $("<label>").attr("for", "formatSelect").text("Format:");
const $select = $("<select>") const $select = $("<select>")
.attr("id", "formatSelect") .attr("id", "formatSelect")
.attr("name", "format") .attr("name", "format")
.append($("<option disabled selected>").text("Select format")); .append($("<option disabled selected>").text("Select format"));
$formatRow.append($label, $select);
// Fill options // Fill format options
for (const format of formats) { for (const format of formats) {
const $option = $("<option>") const $option = $("<option>")
.val(format.code) .val(format.code)
@@ -270,10 +278,12 @@ var GempLotrHallUI = Class.extend({
} }
// Number of players // Number of players
const $playersRow = $("<div>").addClass("formRow");
const $playersLabel = $("<label>").attr("for", "numPlayers").text("Number of players:"); const $playersLabel = $("<label>").attr("for", "numPlayers").text("Number of players:");
const $playersInput = $("<input>") const $playersInput = $("<input>")
.attr({ type: "number", id: "numPlayers", name: "numPlayers", min: 1 }) .attr({ type: "number", id: "numPlayers", name: "numPlayers", min: 1 })
.val(4); .val(4);
$playersRow.append($playersLabel, $playersInput);
// Modify the max number of players based on format selected (if needed) // Modify the max number of players based on format selected (if needed)
$select.on("change", function () { $select.on("change", function () {
@@ -292,69 +302,75 @@ var GempLotrHallUI = Class.extend({
}); });
// Pairing type // Pairing type
const $pairingRow = $("<div>").addClass("formRow");
const $pairingLabel = $("<label>").attr("for", "pairingType").text("Pairing type:"); const $pairingLabel = $("<label>").attr("for", "pairingType").text("Pairing type:");
const $pairingSelect = $("<select>") const $pairingSelect = $("<select>")
.attr({ id: "pairingType", name: "pairingType" }) .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")); .append($("<option>").val("SINGLE_ELIMINATION").text("Single elimination"));
$pairingRow.append($pairingLabel, $pairingSelect);
// Deck-building duration // Deck-building duration
const $durationRow = $("<div>").addClass("formRow");
const $durationLabel = $("<label>").attr("for", "deckDuration").text("Deck-building duration (minutes, minimum 5):"); const $durationLabel = $("<label>").attr("for", "deckDuration").text("Deck-building duration (minutes, minimum 5):");
const $durationInput = $("<input>") const $durationInput = $("<input>")
.attr({ type: "number", id: "deckDuration", name: "deckDuration", min: 5 }) .attr({ type: "number", id: "deckDuration", name: "deckDuration", min: 5 })
.val(15); .val(15);
$durationRow.append($durationLabel, $durationInput);
// Competitive // Competitive
const $competitiveRow = $("<div>").addClass("formRow");
const $competitiveLabel = $("<label>").attr("for", "competitiveSelect").text("Competitive:"); const $competitiveLabel = $("<label>").attr("for", "competitiveSelect").text("Competitive:");
const $competitiveSelect = $("<select>") const $competitiveSelect = $("<select>")
.attr({ id: "competitiveSelect", name: "competitive" }) .attr({ id: "competitiveSelect", name: "competitive" })
.append($("<option>").val("false").text("Games can be spectated")) .append($("<option>").val("false").text("Games can be spectated"))
.append($("<option>").val("true").text("No spectate; hidden names in queue")); .append($("<option>").val("true").text("No spectate; hidden names in queue"));
$competitiveRow.append($competitiveLabel, $competitiveSelect);
// Early start // Early start
const $earlyStartRow = $("<div>").addClass("formRow");
const $earlyStartLabel = $("<label>").attr("for", "startableEarlySelect").text("Early start:"); const $earlyStartLabel = $("<label>").attr("for", "startableEarlySelect").text("Early start:");
const $earlyStartSelect = $("<select>") const $earlyStartSelect = $("<select>")
.attr({ id: "startableEarlySelect", name: "startableEarly" }) .attr({ id: "startableEarlySelect", name: "startableEarly" })
.append($("<option>").val("true").text("Can be started with less players")) .append($("<option>").val("true").text("Can be started with less players"))
.append($("<option>").val("false").text("Starts only with all player slots filled")); .append($("<option>").val("false").text("Starts only with all player slots filled"));
$earlyStartRow.append($earlyStartLabel, $earlyStartSelect);
// Ready check // Ready check
const $readyCheckRow = $("<div>").addClass("formRow");
const $readyCheckLabel = $("<label>").attr("for", "readyCheckSelect").text("Ready check:"); const $readyCheckLabel = $("<label>").attr("for", "readyCheckSelect").text("Ready check:");
const $readyCheckSelect = $("<select>") const $readyCheckSelect = $("<select>")
.attr({ id: "readyCheckSelect", name: "readyCheck" }) .attr({ id: "readyCheckSelect", name: "readyCheck" })
.append($("<option>").val("-1").text("No ready check, just start the tournament")) .append($("<option>").val("-1").text("No, just start the tournament"))
.append($("<option>").val("90").text("90 seconds to confirm")) .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")); .append($("<option>").val("180").text("3 minutes to confirm"));
$readyCheckRow.append($readyCheckLabel, $readyCheckSelect);
// Set default to 90 seconds as we start with 4 players // Set default to 90 seconds as we start with 4 players
$readyCheckSelect.val("90"); $readyCheckSelect.val("90");
// Append to form // Append to form
$fields.append( $fields.append(
$("<div>").append($label), $("<div>").append($formatRow),
$("<div>").append($select), $("<div>").append($playersRow)
$("<div>").append($playersLabel),
$("<div>").append($playersInput)
); );
// Append to form // Append to form
$advanced.append( $advanced.append(
$("<div>").append($pairingLabel), $("<div>").append($pairingRow),
$("<div>").append($pairingSelect), $("<div>").append($durationRow),
$("<div>").append($durationLabel), $("<div>").append($competitiveRow),
$("<div>").append($durationInput), $("<div>").append($earlyStartRow),
$("<div>").append($competitiveLabel), $("<div>").append($readyCheckRow)
$("<div>").append($competitiveSelect),
$("<div>").append($earlyStartLabel),
$("<div>").append($earlyStartSelect),
$("<div>").append($readyCheckLabel),
$("<div>").append($readyCheckSelect)
); );
// Add live draft timer // Add live draft timer
const $timerRow = $("<div>").addClass("formRow");
const $timerLabel = $("<label>").attr("for", "draftTimer").text("Draft timer:"); const $timerLabel = $("<label>").attr("for", "draftTimer").text("Draft timer:");
const $timerSelect = $("<select>") const $timerSelect = $("<select>")
.attr({ id: "draftTimer", name: "draftTimer" }) .attr({ id: "draftTimer", name: "draftTimer" })
.append($("<option disabled selected>").text("Select timer")); .append($("<option disabled selected>").text("Select timer"));
$timerRow.append($timerLabel, $timerSelect);
if (gameType === "table_draft") { if (gameType === "table_draft") {
for (const timerType of json.draftTimerTypes) { for (const timerType of json.draftTimerTypes) {
$timerSelect.append( $timerSelect.append(
@@ -363,8 +379,7 @@ var GempLotrHallUI = Class.extend({
} }
$advanced.append( $advanced.append(
$("<div>").append($timerLabel), $("<div>").append($timerRow)
$("<div>").append($timerSelect)
); );
// Modify the timer based on format selected // Modify the timer based on format selected