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

- streamlined element IDs, function etc.

Browse Source 
- sortTable() now adds contextual classes to combatantRows (depending on their ini value)
- moved all inline CSS styles to custom.css
This commit is contained in:
Tobias 2023-02-04 00:06:02 +01:00
parent 07747b3b18
commit 208738531a
3 changed files with 198 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/custom.css
View File

@ -1,20 +1,20 @@
input /*input {
{
opacity: 0.65; opacity: 0.65;
} }
*/
/*tr#newCombRow input {
background: paleturquoise;
}*/
input:invalid { input:invalid {
border: 2px solid red; border: 2px solid red;
} }
tr[data-ini='0'] { .header-align-center {
background: lightgray;
}
th#combIniHeader, th#combDiceReaHeader, th#combActionsHeader {
text-align: center; text-align: center;
} }
table.diceandrea {
padding: 0;
margin: 0;
}
td.combatantDice, td.combatantRea {
width: 45%;
}

40
index.html
View File

@ -24,25 +24,25 @@
<body> <body>
<div class="container"> <div class="container">
<header class="navbar navbar-expand navbar-light bg-light"> <header class="navbar navbar-expand bg-light">
<span class="navbar-brand">Shadowrun 2 Initiative Tracker</span> <span class="navbar-brand">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">
<button type="button" class="btn btn-outline-secondary" id="newCombAddButton" title="Add combatant to fight">Add Combatant …</button> <button type="submit" class="btn btn-outline-secondary" id="addCombatantButton" title="Add combatant">Add Combatant</button>
<button type="button" class="btn btn-outline-secondary" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="begin new round">New Round</button> <button type="submit" class="btn btn-outline-secondary" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round">New Round</button>
</nav> </nav>
</header> </header>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-sm table-borderless" id="combatants"> <table class="table table-sm" id="combatantsTable">
<thead> <thead>
<tr id="combatants-headrow"> <tr>
<th class="col-sm-5" id="combNameHeader" title="Name">Name</th> <th class="col-sm-5" title="Name">Name</th>
<th class="col-sm-2" id="combIniHeader" title="Initiative">Initiative</th> <th class="col-sm-2 header-align-center" title="Initiative">Initiative</th>
<th class="col-sm-3" id="combDiceReaHeader" title="Initiative Dice and Reaction">Ini Dice & REA</th> <th class="col-sm-2 header-align-center" title="Initiative Dice and Reaction">Ini Dice & REA</th>
<th class="col-sm-2" id="combActionsHeader" title="Available Actions">Actions</th> <th class="col-sm-3 header-align-center" title="Available Actions">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody class="align-middle" id="sortable"> <tbody class="align-middle">
</tbody> </tbody>
</table> </table>
</div> </div>
@ -60,13 +60,13 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="newroundModalOkButton" data-bs-dismiss="modal">OK</button> <button type="submit" class="btn btn-primary" id="newroundModalOkButton" data-bs-dismiss="modal">OK</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="addCombModal" tabindex="-1"> <div class="modal fade" id="combatantModal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content modal-sm"> <div class="modal-content modal-sm">
<div class="modal-header"> <div class="modal-header">
@ -74,26 +74,26 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="addCombForm" name="addCombModalForm" class="combForm was-validated" onsubmit="return false;"> <form id="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;">
<div class="form-outline mb-4"> <div class="form-outline mb-4">
<input type="text" maxlength="40" class="form-control combName" form="addCombModalForm" id="newCombName" placeholder="Name" required /> <input type="text" maxlength="40" class="form-control" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required />
</div> </div>
<div class="form-outline mb-4"> <div class="form-outline mb-4">
<div class="input-group"> <div class="input-group">
<input type="number" min="1" max="5" class="form-control combDice" form="addCombModalForm" placeholder="Dice" /> <input type="number" min="1" max="5" class="form-control" id="combatantModalDice" form="combatantModalForm" placeholder="Dice" />
<span class="input-group-text">D+</span> <span class="input-group-text">D+</span>
<input type="number" min="1" max="25" class="form-control combRea" form="addCombModalForm" placeholder="REA" /> <input type="number" min="1" max="25" class="form-control" id="combatantModalRea" form="combatantModalForm" placeholder="REA" />
</div> </div>
<div class="form-outline mb-4"> <div class="form-outline mb-4">
</div> </div>
<input type="number" min="0" max="55" class="form-control combIni" form="addCombModalForm" placeholder="Ini" /> <input type="number" min="0" max="55" class="form-control" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" />
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" id="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="addModalOkButton" data-bs-dismiss="modal">OK (add)</button> <button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK (add)</button>
<button type="button" class="btn btn-primary" id="editModalOkButton" data-bs-dismiss="modal" style="display: none">OK (edit)</button> <button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK (edit)</button>
</div> </div>
</div> </div>
</div> </div>

345
js/sr2ini.js
View File

@ -7,7 +7,6 @@ function rollForInitiative(dice, rea) {
let ini = 0; let ini = 0;
for ( let i = 0; i < parseInt(dice); i++ ) { for ( let i = 0; i < parseInt(dice); i++ ) {
roll = Math.floor(Math.random() * 6) + 1; roll = Math.floor(Math.random() * 6) + 1;
// console.log(roll);
ini += roll; ini += roll;
} }
return ini + parseInt(rea); return ini + parseInt(rea);
@ -15,14 +14,37 @@ function rollForInitiative(dice, rea) {
// sorts the combatants by ini value // sorts the combatants by ini value
function sortTable() { function sortTable() {
console.log("OK let's sort"); // sort rows
let $table = $("table#combatants"); let $rows = $(".combatantRow").toArray().sort(function(a, b) {
let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) { return parseInt($(b).find(".combatantIni").text()) - parseInt($(a).find(".combatantIni").text());
return parseInt($(b).attr("data-ini")) - parseInt($(a).attr("data-ini"));
}); });
// append rows in sorted order
for ( var i = 0; i < $rows.length; i++ ) { for ( var i = 0; i < $rows.length; i++ ) {
$table.append($rows[i]); $("#combatantsTable").append($rows[i]);
} }
// compute highest ini
let iniValues = $.map( $(".combatantIni"), function(td, i) {
return parseInt($(td).text());
});
let iniMax = Math.max.apply(null, iniValues);
// add contextual classes to rows
$(".combatantRow").each( function() {
// default: remove previous classes, disable act button
$(this).removeClass("table-primary table-secondary").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
// ini is zero: add class
if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
$(this).addClass("table-secondary");
}
// ini is max and non-zero: add class, enable act button
else if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
$(this).addClass("table-primary").find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
}
})
return;
} }
@ -30,108 +52,80 @@ console.log("OK let's sort");
* Event handler functions * Event handler functions
*/ */
// blur handler for input elements (blur is triggered when an element loses focus) that checks if validation is required
function handleBlur (e) {
let $tr = $(e.target).parents("tr");
// trigger validation check only if focus is not going to another input in the same row
if ( ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) {
// validation check
if ( ! validateCombRowValues($tr) ) {
e.preventDefault();
return false;
}
// did Ini value stay the same? do nothing then
if ( $tr.find(".combIni")[0].value == $tr.attr("data-ini") ) {
return true;
}
// Ini value changed => reposition row
$tr.attr("data-ini", $tr.find(".combIni")[0].value);
sortTable()
}
}
// click handler for add buttons
function handleAddButtonClick (e) {
// restyle modal
$modal = $("#addCombModal");
$modal.find(".modal-title").text("Add Combatant");
$modal.find("#addModalOkButton").show();
$modal.find("#editModalOkButton").hide();
// add handler for enter key
$("#addCombModal input[class*='comb']").off("keydown");
$("#addCombModal input[class*='comb']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) {
addCombatant();
$('#addCombModal').modal("hide");
}
});
// show modal
$modal.modal("show");
}
// click handler for edit buttons
function handleEditButtonClick (e) {
// find current table row
let $tr = $(e.target).parents("tr.combRow");
// restyle modal
$modal = $("#addCombModal");
$modal.find(".modal-title").text("Edit Combatant");
$modal.find("#addModalOkButton").hide();
$modal.find("#editModalOkButton").show();
// populate modal with values from row
$modal.find(".combName").val($tr.find(".combName").val());
$modal.find(".combDice").val($tr.find(".combDice").val());
$modal.find(".combRea").val($tr.find(".combRea").val());
$modal.find(".combIni").val($tr.find(".combIni").val());
// note which row is being edited
console.log($("tr.combRow").index($tr));
$modal.attr("data-row", $("tr.combRow").index($tr));
// add handler for enter key
$("#addCombModal input[class*='comb']").off("keydown");
$("#addCombModal input[class*='comb']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) {
modifyCombatant();
$('#addCombModal').modal("hide");
}
});
// show modal
$modal.modal("show");
}
// click handler for act buttons // click handler for act buttons
function handleActButtonClick (e) { function handleActButtonClick (e) {
// find current table row // find current table row
let $tr = $(e.target).parents("tr.combRow"); let $tr = $(e.target).parents(".combatantRow");
let input = $tr.find(".combIni")[0]; let ini = $tr.find(".combatantIni").text();
// reduce ini by 10 but not lower than 0 // reduce ini by 10 but not lower than 0
input.value = Math.max(parseInt(input.value) - 10, 0); ini = Math.max(parseInt(ini) - 10, 0);
$tr.attr("data-ini", input.value);
// set new ini value
$tr.find(".combatantIni").text(ini);
// resort table // resort table
sortTable(); sortTable();
} }
// click handler for add buttons
function handleAddButtonClick (e) {
// restyle modal
$("#combatantModal .modal-title").text("Add Combatant");
$("#combatantModalAddOkButton").show();
$("#combatantModalEditOkButton").hide();
// add handler for enter key
$("#combatantModal input[id*='combatantModal']").off("keydown");
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) {
addCombatant(e);
}
});
// show modal
$("#combatantModal").modal("show");
}
// click handler for edit buttons
function handleEditButtonClick (e) {
// find current table row
let $tr = $(e.target).parents(".combatantRow");
// restyle modal
$("#combatantModal .modal-title").text("Edit Combatant");
$("#combatantModalAddOkButton").hide();
$("#combatantModalEditOkButton").show();
// populate modal with values from row
$("#combatantModalName").val($tr.find(".combatantName").text());
$("#combatantModalDice").val($tr.find(".combatantDice").text());
$("#combatantModalRea").val($tr.find(".combatantRea").text());
$("#combatantModalIni").val($tr.find(".combatantIni").text());
// mark which row is being edited
$("#combatantModal").attr("data-row", $(".combatantRow").index($tr));
// add handler for enter key
$("#combatantModal input[id*='combatantModal']").off("keydown");
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) {
editCombatant(e);
}
});
// show modal
$("#combatantModal").modal("show");
}
// click handler for remove buttons // click handler for remove buttons
function handleRemoveButtonClick (e) { function handleRemoveButtonClick (e) {
// remove table row // remove table row
$(e.target).parents("tr.combRow").remove(); $(e.target).parents(".combatantRow").remove();
} }
@ -140,16 +134,18 @@ function handleRemoveButtonClick (e) {
*/ */
// validate a combatant row form by checking for all conditions, including regular HTML5 validation // validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombRowValues(tr) { function validateCombatant() {
// get input elements
let inputElements = { let inputElements = {
name: $(tr).find("input[class*='combName']").get(0), name: $("#combatantModalName").get(0),
ini: $(tr).find("input[class*='combIni']").get(0), ini: $("#combatantModalIni").get(0),
dice: $(tr).find("input[class*='combDice']").get(0), dice: $("#combatantModalDice").get(0),
rea: $(tr).find("input[class*='combRea']").get(0) rea: $("#combatantModalRea").get(0)
}; };
// do standard HTML5 form validation first (makes sure that name is not empty and that all other values are numbers within their individual ranges) // do standard HTML5 form validation first
// (makes sure that name is not empty and that all other values are numbers within their individual ranges)
let valid = true; let valid = true;
Object.values(inputElements).forEach(function(input) { Object.values(inputElements).forEach(function(input) {
if ( ! input.reportValidity() ) { if ( ! input.reportValidity() ) {
@ -160,8 +156,7 @@ function validateCombRowValues(tr) {
return false; return false;
} }
// now some custom validation // now for some custom validation; first we need to get the input values
// first get values
let ini = inputElements["ini"].value.trim(); let ini = inputElements["ini"].value.trim();
let dice = inputElements["dice"].value.trim(); let dice = inputElements["dice"].value.trim();
let rea = inputElements["rea"].value.trim(); let rea = inputElements["rea"].value.trim();
@ -182,7 +177,7 @@ function validateCombRowValues(tr) {
return false; return false;
} }
// ok fine // ok then
return true; return true;
} }
@ -193,117 +188,122 @@ function validateCombRowValues(tr) {
// add new combatant // add new combatant
function addCombatant (e) { function addCombatant (e) {
if ( ! validateCombRowValues($("#addCombForm")) ) {
return; e.preventDefault();
// validate form
if ( ! validateCombatant() ) {
return false;
} }
// hide modal
$("#combatantModal").modal("hide");
// get values // get values
let name = $("#addCombModal .combName").val().trim(); let name = $("#combatantModalName").val().trim();
let ini = $("#addCombModal .combIni").val().trim(); let ini = $("#combatantModalIni").val().trim();
let dice = $("#addCombModal .combDice").val().trim(); let dice = $("#combatantModalDice").val().trim();
let rea = $("#addCombModal .combRea").val().trim(); let rea = $("#combatantModalRea").val().trim();
// roll for initiative if ini is empty // roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea); ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// construct jQuery object for table row // construct jQuery object for table row
let $tr = $($.parseHTML( [ let $tr = $($.parseHTML( [
'<tr class="combRow" data-ini="', ini, '">\n', '<tr class="combatantRow">\n',
'<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n', '<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
'<td>\n', '<td>\n',
'<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', name, '" />\n', '<div>\n',
'</td>\n', '<table class="table table-sm table-borderless diceandrea">\n',
'<td class="col-sm-2">\n', '<tr>\n',
'<input type="number" min="0" max="50" class="form-control combIni" title="click to edit" value="', ini, '" />\n', '<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</td>\n',
'</td>\n', '<td class="text-center">D+</td>\n',
'<td class="col-sm-3">\n', '<td class="combatantRea text-start" title="Reaction">', rea, '</td>\n',
'<div class="input-group">\n', '</tr>\n',
'<input type="number" min="1" max="5" class="form-control combDice" title="click to edit" value="', dice, '" />\n', '</table>\n',
'<span class="input-group-text">D+</span>\n',
'<input type="number" min="1" max="20" class="form-control combRea" title="click to edit" value="', rea, '" />\n',
'</div>\n', '</div>\n',
'</td>\n', '</td>\n',
'<td>\n', '<td>\n',
'<div class="btn-group d-flex">\n', '<div class="btn-group d-flex">\n',
'<button type="button" class="btn btn-primary w-50 edit-button" title="Edit combatant\'s values">Edit</button>&nbsp;\n', '<button type="button" class="btn btn-primary btn-rounded w-50 edit-button" title="Edit combatant\'s values">Edit</button>&nbsp;\n',
'<button type="button" class="btn btn-warning w-50 act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>&nbsp;\n', '<button type="button" class="btn btn-warning btn-rounded w-50 act-button" title="Act and reduce ini by 10">-10</button>&nbsp;\n',
'<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>\n', '<button type="button" class="btn btn-danger btn-rounded w-50 remove-button" title="Remove combatant">X</button>\n',
'</div>\n', '</div>\n',
'</td>\n', '</td>\n',
'</form>\n',
'</tr>'].join("") '</tr>'].join("")
)); ));
// add handlers to table row object // add handlers to table row buttons
// $tr.find("input[class*='comb']").on("blur", handleBlur);
// $tr.find("input[type='number']").bind('keyup input change', handleBlur);
$tr.find("button.edit-button").on("click", handleEditButtonClick); $tr.find("button.edit-button").on("click", handleEditButtonClick);
$tr.find("button.act-button").on("click", handleActButtonClick); $tr.find("button.act-button").on("click", handleActButtonClick);
$tr.find("button.remove-button").on("click", handleRemoveButtonClick); $tr.find("button.remove-button").on("click", handleRemoveButtonClick);
// insert combatant row // add handlers to table cells (click to edit)
$("table#combatants").append($tr); $tr.find("[class*='combatant']").on("click", handleEditButtonClick);
sortTable();
//reset form values // add row to table and sort
$("#addCombModal input[class*='comb']").val(""); $("#combatantsTable").append($tr);
sortTable();
} }
// modify combatant values
function modifyCombatant (e) {
$("#addCombModal").modal("hide"); // edit combatant values
function editCombatant (e) {
e.preventDefault();
// validate form // validate form
if ( ! validateCombRowValues($("#addCombForm")) ) { if ( ! validateCombatant() ) {
return; return false;
} }
// hide modal
$("#combatantModal").modal("hide");
// get values // get values
let name = $("#addCombModal .combName").val().trim(); let name = $("#combatantModalName").val().trim();
let ini = $("#addCombModal .combIni").val().trim(); let ini = $("#combatantModalIni").val().trim();
let dice = $("#addCombModal .combDice").val().trim(); let dice = $("#combatantModalDice").val().trim();
let rea = $("#addCombModal .combRea").val().trim(); let rea = $("#combatantModalRea").val().trim();
// roll for initiative if ini is empty // roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea); ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// get correct row // get correct row
let index = parseInt($("#addCombModal").attr("data-row")); let index = parseInt($("#combatantModal").attr("data-row"));
$tr = $("tr.combRow").eq(index); $tr = $("tr.combatantRow").eq(index);
// set new values // set new values
$tr.find(".combName").val(name); $tr.find(".combatantName").text(name);
$tr.find(".combDice").val(dice); $tr.find(".combatantDice").text(dice);
$tr.find(".combRea").val(rea); $tr.find(".combatantRea").text(rea);
$tr.find(".combIni").val(ini); $tr.find(".combatantIni").text(ini);
$tr.attr("data-ini", ini);
// sort table
sortTable();
// clean up // clean up
$("#addCombModal").removeAttr("data-row"); $("#combatantModal").removeAttr("data-row");
$("#addCombModal input[class*='comb']").val("");
} }
// start a new combat round // start a new combat round
function newRound() { function newRound() {
// are there rows at all? // are there rows at all?
let $rows = $("tr.combRow"); if ( $(".combatantRow").length == 0 ) {
if ( $rows.length == 0 ) {
return; return;
} }
// reset ini values in cloned rows // reset ini values
$rows.each( function() { $(".combatantRow").each( function() {
let $input = $(this).find(".combIni"); let $ini = $(this).find(".combatantIni");
let dice = $(this).find(".combDice").val(); let $dice = $(this).find(".combatantDice");
if ( dice == "" ) { if ( $dice.text() == "" ) {
$input.val(0); $ini.text(1);
$ini.text(1);
} else { } else {
$input.val(rollForInitiative(dice, $(this).find(".combRea").val())); $ini.text(rollForInitiative($dice.text(), $(this).find(".combatantRea").text()));
} }
$(this).attr("data-ini", $input.val());
}); });
// resort table // resort table
@ -316,13 +316,22 @@ function newRound() {
*/ */
$(document).ready(function(){ $(document).ready(function(){
// add event handlers to initial buttons and input elements // add event handlers to navbar buttons
$("#newCombAddButton").on("click", handleAddButtonClick); $("#addCombatantButton").on("click", handleAddButtonClick);
$("#newroundModalOkButton").on("click", newRound); $("#newroundModalOkButton").on("click", newRound);
$("#addModalOkButton").on("click", addCombatant);
$("#editModalOkButton").on("click", modifyCombatant);
$('#addCombModal').on('shown.bs.modal', function() { // add event handlers to modal buttons
$('.combName').focus(); $("#combatantModalAddOkButton").on("click", addCombatant);
$("#combatantModalEditOkButton").on("click", editCombatant);
// always focus name input field when combatant modal appears
$('#combatantModal').on('shown.bs.modal', function() {
$('#combatantModalName').focus();
}) })
// always empty input fields when combatant modal disappears
$("#combatantModal").on('hidden.bs.modal', function (e) {
$("#combatantModal input[id*='combatantModal']").val("");
})
}); });