/* * helper functions */ // roll for initiative with the given reaction and number of ini dice function rollForInitiative(dice, rea) { let ini = 0; for ( let i = 0; i < parseInt(dice); i++ ) { roll = Math.floor(Math.random() * 6) + 1; ini += roll; } return ini + parseInt(rea); } // sorts the combatants by ini value function sortTable() { // 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++ ) { $("#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; } /* * Event handler functions */ // click handler for act buttons function handleActButtonClick (e) { // find current table row let $tr = $(e.target).parents(".combatantRow"); let ini = $tr.find(".combatantIni").text(); // reduce ini by 10 but not lower than 0 ini = Math.max(parseInt(ini) - 10, 0); // set new ini value $tr.find(".combatantIni").text(ini); // resort table 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 function handleRemoveButtonClick (e) { // remove table row $(e.target).parents(".combatantRow").remove(); } /* * Validation functions */ // validate a combatant row form by checking for all conditions, including regular HTML5 validation function validateCombatant() { // get input elements let inputElements = { 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) let valid = true; Object.values(inputElements).forEach(function(input) { if ( ! input.reportValidity() ) { valid = false; } }) if ( ! valid ) { return false; } // 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(); // invalidate if ini, dice and rea are all empty if ( ini == "" && ( dice == "" || rea == "" ) ) { inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three"); inputElements["ini"].reportValidity(); inputElements["ini"].setCustomValidity(""); return false; } // invalidate if dice or rea is empty but not both if ( ( dice == "" ) != ( rea == "" ) ) { inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)"); inputElements["dice"].reportValidity(); inputElements["dice"].setCustomValidity(""); return false; } // ok then return true; } /* * Main functions */ // add new combatant function addCombatant (e) { e.preventDefault(); // validate form if ( ! validateCombatant() ) { return false; } // hide modal $("#combatantModal").modal("hide"); // get values 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( [ '
| ', dice, ' | \n', 'D+ | \n', '', rea, ' | \n', '