/* * 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( [ '\n', '', name, '\n', '', ini, '\n', '\n', '
\n', '\n', '\n', '\n', '\n', '\n', '\n', '
', dice, 'D+', rea, '
\n', '
\n', '\n', '\n', '
\n', ' \n', ' \n', '\n', '
\n', '\n', ''].join("") )); // 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); // add handlers to table cells (click to edit) $tr.find("[class*='combatant']").on("click", handleEditButtonClick); // add row to table and sort $("#combatantsTable").append($tr); sortTable(); } // edit combatant values function editCombatant (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); // get correct row let index = parseInt($("#combatantModal").attr("data-row")); $tr = $("tr.combatantRow").eq(index); // set new values $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 $("#combatantModal").removeAttr("data-row"); } // start a new combat round function newRound() { // are there rows at all? if ( $(".combatantRow").length == 0 ) { return; } // 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 { $ini.text(rollForInitiative($dice.text(), $(this).find(".combatantRea").text())); } }); // resort table sortTable(); } /* * Initialize document */ $(document).ready(function(){ // add event handlers to navbar buttons $("#addCombatantButton").on("click", handleAddButtonClick); $("#newroundModalOkButton").on("click", newRound); // 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(""); }) });