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 {
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;
}

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

@@ -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>

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 &&
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