diff --git a/js/sr2ini.js b/js/sr2ini.js
index a07633f..83b2391 100644
--- a/js/sr2ini.js
+++ b/js/sr2ini.js
@@ -7,7 +7,6 @@ function rollForInitiative(dice, rea) {
let ini = 0;
for ( let i = 0; i < parseInt(dice); i++ ) {
roll = Math.floor(Math.random() * 6) + 1;
-// console.log(roll);
ini += roll;
}
return ini + parseInt(rea);
@@ -15,14 +14,37 @@ function rollForInitiative(dice, rea) {
// sorts the combatants by ini value
function sortTable() {
-console.log("OK let's sort");
- let $table = $("table#combatants");
- let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) {
- return parseInt($(b).attr("data-ini")) - parseInt($(a).attr("data-ini"));
+ // sort rows
+ let $rows = $(".combatantRow").toArray().sort(function(a, b) {
+ return parseInt($(b).find(".combatantIni").text()) - parseInt($(a).find(".combatantIni").text());
});
+
+ // append rows in sorted order
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
*/
-// 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");
+// click handler for act buttons
+function handleActButtonClick (e) {
+ // find current table row
+ let $tr = $(e.target).parents(".combatantRow");
+ let ini = $tr.find(".combatantIni").text();
- // 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;
- }
+ // reduce ini by 10 but not lower than 0
+ ini = Math.max(parseInt(ini) - 10, 0);
- // 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()
- }
+ // set new ini value
+ $tr.find(".combatantIni").text(ini);
+
+ // resort table
+ 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();
+ $("#combatantModal .modal-title").text("Add Combatant");
+ $("#combatantModalAddOkButton").show();
+ $("#combatantModalEditOkButton").hide();
// add handler for enter key
- $("#addCombModal input[class*='comb']").off("keydown");
- $("#addCombModal input[class*='comb']").on("keydown", function (e) {
+ $("#combatantModal input[id*='combatantModal']").off("keydown");
+ $("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) {
- addCombatant();
- $('#addCombModal').modal("hide");
+ addCombatant(e);
}
});
// show modal
- $modal.modal("show");
+ $("#combatantModal").modal("show");
}
// click handler for edit buttons
function handleEditButtonClick (e) {
-
// find current table row
- let $tr = $(e.target).parents("tr.combRow");
+ let $tr = $(e.target).parents(".combatantRow");
// restyle modal
- $modal = $("#addCombModal");
- $modal.find(".modal-title").text("Edit Combatant");
- $modal.find("#addModalOkButton").hide();
- $modal.find("#editModalOkButton").show();
+ $("#combatantModal .modal-title").text("Edit Combatant");
+ $("#combatantModalAddOkButton").hide();
+ $("#combatantModalEditOkButton").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());
+ $("#combatantModalName").val($tr.find(".combatantName").text());
+ $("#combatantModalDice").val($tr.find(".combatantDice").text());
+ $("#combatantModalRea").val($tr.find(".combatantRea").text());
+ $("#combatantModalIni").val($tr.find(".combatantIni").text());
- // note which row is being edited
-console.log($("tr.combRow").index($tr));
- $modal.attr("data-row", $("tr.combRow").index($tr));
+ // mark which row is being edited
+ $("#combatantModal").attr("data-row", $(".combatantRow").index($tr));
// add handler for enter key
- $("#addCombModal input[class*='comb']").off("keydown");
- $("#addCombModal input[class*='comb']").on("keydown", function (e) {
+ $("#combatantModal input[id*='combatantModal']").off("keydown");
+ $("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) {
- modifyCombatant();
- $('#addCombModal').modal("hide");
+ editCombatant(e);
}
});
// show modal
- $modal.modal("show");
-}
-
-
-// click handler for act buttons
-function handleActButtonClick (e) {
- // find current table row
- let $tr = $(e.target).parents("tr.combRow");
- let input = $tr.find(".combIni")[0];
-
- // reduce ini by 10 but not lower than 0
- input.value = Math.max(parseInt(input.value) - 10, 0);
- $tr.attr("data-ini", input.value);
-
- // resort table
- sortTable();
+ $("#combatantModal").modal("show");
}
// click handler for remove buttons
function handleRemoveButtonClick (e) {
// 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
-function validateCombRowValues(tr) {
+function validateCombatant() {
+ // get input elements
let inputElements = {
- name: $(tr).find("input[class*='combName']").get(0),
- ini: $(tr).find("input[class*='combIni']").get(0),
- dice: $(tr).find("input[class*='combDice']").get(0),
- rea: $(tr).find("input[class*='combRea']").get(0)
+ name: $("#combatantModalName").get(0),
+ ini: $("#combatantModalIni").get(0),
+ dice: $("#combatantModalDice").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;
Object.values(inputElements).forEach(function(input) {
if ( ! input.reportValidity() ) {
@@ -160,8 +156,7 @@ function validateCombRowValues(tr) {
return false;
}
- // now some custom validation
- // first get values
+ // now for some custom validation; first we need to get the input values
let ini = inputElements["ini"].value.trim();
let dice = inputElements["dice"].value.trim();
let rea = inputElements["rea"].value.trim();
@@ -182,7 +177,7 @@ function validateCombRowValues(tr) {
return false;
}
- // ok fine
+ // ok then
return true;
}
@@ -193,117 +188,122 @@ function validateCombRowValues(tr) {
// add new combatant
function addCombatant (e) {
- if ( ! validateCombRowValues($("#addCombForm")) ) {
- return;
+
+ e.preventDefault();
+
+ // validate form
+ if ( ! validateCombatant() ) {
+ return false;
}
+ // hide modal
+ $("#combatantModal").modal("hide");
+
// get values
- let name = $("#addCombModal .combName").val().trim();
- let ini = $("#addCombModal .combIni").val().trim();
- let dice = $("#addCombModal .combDice").val().trim();
- let rea = $("#addCombModal .combRea").val().trim();
+ let name = $("#combatantModalName").val().trim();
+ let ini = $("#combatantModalIni").val().trim();
+ let dice = $("#combatantModalDice").val().trim();
+ let rea = $("#combatantModalRea").val().trim();
// roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// construct jQuery object for table row
let $tr = $($.parseHTML( [
- '
\n',
- '\n',
+ '
\n',
+ '
', name, '
\n',
+ '
', ini, '
\n',
+ '
\n',
+ '
\n',
+ '
\n',
+ '
\n',
+ '
', dice, '
\n',
+ '
D+
\n',
+ '
', rea, '
\n',
+ '
\n',
+ '
\n',
+ '
\n',
+ '
\n',
+ '
\n',
+ '
\n',
+ ' \n',
+ ' \n',
+ '\n',
+ '
\n',
+ '
\n',
'
'].join("")
));
- // add handlers to table row object
-// $tr.find("input[class*='comb']").on("blur", handleBlur);
-// $tr.find("input[type='number']").bind('keyup input change', handleBlur);
+ // add handlers to table row buttons
$tr.find("button.edit-button").on("click", handleEditButtonClick);
$tr.find("button.act-button").on("click", handleActButtonClick);
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
- // insert combatant row
- $("table#combatants").append($tr);
- sortTable();
+ // add handlers to table cells (click to edit)
+ $tr.find("[class*='combatant']").on("click", handleEditButtonClick);
- //reset form values
- $("#addCombModal input[class*='comb']").val("");
+ // add row to table and sort
+ $("#combatantsTable").append($tr);
+ sortTable();
}
-// modify combatant values
-function modifyCombatant (e) {
- $("#addCombModal").modal("hide");
+// edit combatant values
+function editCombatant (e) {
+ e.preventDefault();
// validate form
- if ( ! validateCombRowValues($("#addCombForm")) ) {
- return;
+ if ( ! validateCombatant() ) {
+ return false;
}
+ // hide modal
+ $("#combatantModal").modal("hide");
+
// get values
- let name = $("#addCombModal .combName").val().trim();
- let ini = $("#addCombModal .combIni").val().trim();
- let dice = $("#addCombModal .combDice").val().trim();
- let rea = $("#addCombModal .combRea").val().trim();
+ let name = $("#combatantModalName").val().trim();
+ let ini = $("#combatantModalIni").val().trim();
+ let dice = $("#combatantModalDice").val().trim();
+ let rea = $("#combatantModalRea").val().trim();
// roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// get correct row
- let index = parseInt($("#addCombModal").attr("data-row"));
- $tr = $("tr.combRow").eq(index);
+ let index = parseInt($("#combatantModal").attr("data-row"));
+ $tr = $("tr.combatantRow").eq(index);
// set new values
- $tr.find(".combName").val(name);
- $tr.find(".combDice").val(dice);
- $tr.find(".combRea").val(rea);
- $tr.find(".combIni").val(ini);
- $tr.attr("data-ini", ini);
+ $tr.find(".combatantName").text(name);
+ $tr.find(".combatantDice").text(dice);
+ $tr.find(".combatantRea").text(rea);
+ $tr.find(".combatantIni").text(ini);
+
+ // sort table
+ sortTable();
// clean up
- $("#addCombModal").removeAttr("data-row");
- $("#addCombModal input[class*='comb']").val("");
+ $("#combatantModal").removeAttr("data-row");
}
// start a new combat round
function newRound() {
-
// are there rows at all?
- let $rows = $("tr.combRow");
- if ( $rows.length == 0 ) {
+ if ( $(".combatantRow").length == 0 ) {
return;
}
- // reset ini values in cloned rows
- $rows.each( function() {
- let $input = $(this).find(".combIni");
- let dice = $(this).find(".combDice").val();
- if ( dice == "" ) {
- $input.val(0);
+ // reset ini values
+ $(".combatantRow").each( function() {
+ let $ini = $(this).find(".combatantIni");
+ let $dice = $(this).find(".combatantDice");
+ if ( $dice.text() == "" ) {
+ $ini.text(1);
+ $ini.text(1);
} 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
@@ -316,13 +316,22 @@ function newRound() {
*/
$(document).ready(function(){
- // add event handlers to initial buttons and input elements
- $("#newCombAddButton").on("click", handleAddButtonClick);
+ // add event handlers to navbar buttons
+ $("#addCombatantButton").on("click", handleAddButtonClick);
$("#newroundModalOkButton").on("click", newRound);
- $("#addModalOkButton").on("click", addCombatant);
- $("#editModalOkButton").on("click", modifyCombatant);
- $('#addCombModal').on('shown.bs.modal', function() {
- $('.combName').focus();
+ // add event handlers to modal buttons
+ $("#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("");
+ })
+
});