eclipse/sr2ini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

- fixed a bug where clicking on a nested table would not open the edit modal

Browse Source 
- refined sorting comparison function
This commit is contained in:
Tobias 2023-02-04 15:49:36 +01:00
parent e99c2e031d
commit aa0713d3ee
3 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/custom.css
View File

@ -1,7 +1,10 @@
/*input { #dummy-row {
opacity: 0.65; display: none;
} }
*/ #dummy-row:only-child {
display: block;
}
input:invalid { input:invalid {
border: 2px solid red; border: 2px solid red;
} }

13
index.html
View File

@ -24,13 +24,11 @@
<body> <body>
<div class="container"> <div class="container">
<header class="navbar navbar-expand bg-warning"> <header class="navbar navbar-expand bg-success bg-opacity-25">
<span class="navbar-brand ps-4">Shadowrun 2 Initiative Tracker</span> <span class="navbar-brand text-bold ps-4">Shadowrun 2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation"> <nav class="container-fluid justify-content-end" aria-label="Main navigation">
<div class="btn-group"> <button type="submit" class="btn btn-light btn-rounded mx-1" id="addCombatantButton" title="Add combatant"><img src="png/001-add.png" /></button>
<button type="submit" class="btn btn-light btn-rounded" id="addCombatantButton" title="Add combatant"><img src="png/001-add.png" /></button>&nbsp; <button type="submit" class="btn btn-light btn-rounded mx-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="png/009-refresh.png" /></button>
<button type="submit" class="btn btn-light btn-rounded" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="png/009-refresh.png" /></button>
</div>
</nav> </nav>
</header> </header>
</br> </br>
@ -45,6 +43,9 @@
</tr> </tr>
</thead> </thead>
<tbody class="align-middle"> <tbody class="align-middle">
<tr id="dummy-row">
<td class="col-sm text-muted" colspan="4">No combatants yet …</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

46
js/sr2ini.js
View File

@ -12,19 +12,33 @@ function rollForInitiative(dice, rea) {
return ini + parseInt(rea); return ini + parseInt(rea);
} }
// figure out whose action comes first out of two combatants a and b
function whoGoesFirst(a, b) {
let comparer = parseInt($(b).find(".combatantIni").text()) - parseInt($(a).find(".combatantIni").text());
if (comparer != 0) {
return comparer;
} else {
let reaA = parseInt($(a).find(".combatantRea").text());
let reaB = parseInt($(b).find(".combatantRea").text());
reaA = isNaN(reaA) ? 0 : reaA;
if (isNaN(reaB)) { reaB = 0; }
console.log(reaA, reaB);
return reaB - reaA;
}
}
// sorts the combatants by ini value // sorts the combatants by ini value
function sortTable() { function sortTable() {
// sort rows // sort rows and append them in new order
let $rows = $(".combatantRow").toArray().sort(function(a, b) { let $rows = $(".combatantRow").toArray().sort(whoGoesFirst);
return parseInt($(b).find(".combatantIni").text()) - parseInt($(a).find(".combatantIni").text());
});
// append rows in sorted order
for ( var i = 0; i < $rows.length; i++ ) { for ( var i = 0; i < $rows.length; i++ ) {
$("#combatantsTable").append($rows[i]); $("#combatantsTable").append($rows[i]);
} }
// compute highest ini // add contectual classes to rows – currently for highest ini and ini = 0
// compute highest ini
let iniValues = $.map( $(".combatantIni"), function(td, i) { let iniValues = $.map( $(".combatantIni"), function(td, i) {
return parseInt($(td).text()); return parseInt($(td).text());
}); });
@ -32,13 +46,13 @@ function sortTable() {
// add contextual classes to rows // add contextual classes to rows
$(".combatantRow").each( function() { $(".combatantRow").each( function() {
// default: remove previous classes, disable act button // always remove previous classes, disable act button
$(this).removeClass("table-primary table-secondary").find(".act-button").prop("disabled", true).attr("aria-disabled", "true"); $(this).removeClass("table-primary table-secondary").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
// ini is zero: add class // add class if ini is zero
if ( parseInt($(this).find(".combatantIni").text()) == 0 ) { if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
$(this).addClass("table-secondary"); $(this).addClass("table-secondary");
} }
// ini is max and non-zero: add class, enable act button // add class, enable act button if ini is max and non-zero
else if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) { else if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
$(this).addClass("table-primary").find(".act-button").prop("disabled", false).removeAttr("aria-disabled"); $(this).addClass("table-primary").find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
} }
@ -215,7 +229,7 @@ function addCombatant (e) {
'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n', '<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
'<td>\n', '<td>\n',
'<div>\n', '<div>\n',
'<table class="table table-sm table-borderless m-0 p-0">\n', '<table class="table table-sm table-borderless m-0 p-0 combatantDiceAndRea">\n',
'<tr>\n', '<tr>\n',
'<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</td>\n', '<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</td>\n',
'<td class="text-center"><img src="png/002-dice.png" />+</td>\n', '<td class="text-center"><img src="png/002-dice.png" />+</td>\n',
@ -224,11 +238,11 @@ function addCombatant (e) {
'</table>\n', '</table>\n',
'</div>\n', '</div>\n',
'</td>\n', '</td>\n',
'<td class="text-center">\n', '<td class="text-end">\n',
'<div class="btn-group">\n', '<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded edit-button" title="Edit combatant\'s values"><img src="png/005-edit-button.png" /></button>&nbsp;\n', '<button type="button" class="btn btn-light btn-rounded mx-1 edit-button" title="Edit combatant\'s values"><img src="png/005-edit-button.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded act-button" title="Act and reduce ini by 10"><img src="png/004-shooting.png" /></button>&nbsp;\n', '<button type="button" class="btn btn-light btn-rounded mx-1 act-button" title="Act and reduce ini by 10"><img src="png/004-shooting.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded remove-button" title="Remove combatant"><img src="png/003-dead-body.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 remove-button" title="Remove combatant"><img src="png/003-dead-body.png" /></button>\n',
'</div>\n', '</div>\n',
'</td>\n', '</td>\n',
'</tr>'].join("") '</tr>'].join("")
@ -240,7 +254,7 @@ function addCombatant (e) {
$tr.find("button.remove-button").on("click", handleRemoveButtonClick); $tr.find("button.remove-button").on("click", handleRemoveButtonClick);
// add handlers to table cells (click to edit) // add handlers to table cells (click to edit)
$tr.find("[class*='combatant']").on("click", handleEditButtonClick); $tr.find(".combatantName, .combatantIni, .combatantDiceAndRea").on("click", handleEditButtonClick);
// add row to table and sort // add row to table and sort
$("#combatantsTable").append($tr); $("#combatantsTable").append($tr);