From a7415f5d96d3f43ebb5db3d043886026307118db Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 6 Sep 2023 10:30:14 +0200 Subject: [PATCH] slightly reworked event handling - event handling and combatant manipulation are now completely separate, i.e. addCombatant() doesn't need an event parameter anymore - renamed applyDamage() to handleDamageLevelButtonClick() b/c it's an event handler function (which, admittedly, manipulates combatants but only superficially) - added listeners for "enter" keypress to both modals --- src/js/sr2ini.js | 185 ++++++++++++++++++++++++++++------------------- 1 file changed, 110 insertions(+), 75 deletions(-) diff --git a/src/js/sr2ini.js b/src/js/sr2ini.js index e62d1ef..cd09ac7 100644 --- a/src/js/sr2ini.js +++ b/src/js/sr2ini.js @@ -60,7 +60,7 @@ const DAMAGE_MONITOR_HTML = [ '\n', '\n', '\n', - '\n', + '\n', '\n', ''].join(""); @@ -132,17 +132,17 @@ function addTestCombatant() { */ // click handler for act buttons; reduces ini by 10 -function handleActButtonClick(e) { +function handleActButtonClick(event) { // reduce ini by 10 but not lower than 0 - let ini = Math.max(parseInt($(e.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0); + let ini = Math.max(parseInt($(event.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0); // set new ini value - $(e.target).parents(".combatant-row").attr("data-true-ini", ini); + $(event.target).parents(".combatant-row").attr("data-true-ini", ini); // resort table sortTable(); } -// click handler for add buttons -function handleAddButtonClick(e) { +// click handler for add button +function handleAddButtonClick(event) { // restyle modal $("#combatant-modal .modal-title").text("Add Combatant"); $("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none"); @@ -155,13 +155,17 @@ function handleAddButtonClick(e) { $("#combatant-modal-stun, #combatant-modal-physical").val("0"); // add handler for enter key $("#combatant-modal input[id*='combatant-modal']").off("keydown"); - $("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { if (e.which == 13 || e.which == 10) { addCombatant(e); } }); + $("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { + if (e.which == 13 || e.which == 10) { + handleCombatantModalAddOkButtonClick(e); + } + }); } // click handler for clone buttons -> like handleAddButtonClick but with a pre-filled modal -function handleCloneButtonClick(e) { +function handleCloneButtonClick(event) { // find current table row - let $tr = $(e.target).parents(".combatant-row"); + let $tr = $(event.target).parents(".combatant-row"); // hide actions menu $tr.find(".actions-menu").removeClass("seen"); // restyle modal @@ -177,26 +181,72 @@ function handleCloneButtonClick(e) { $("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0"); // add handler for enter key $("#combatant-modal input[id*='combatant-modal']").off("keydown"); - $("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { if (e.which == 13 || e.which == 10) { addCombatant(e); } }); + $("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { + if (e.which == 13 || e.which == 10) { + handleCombatantModalAddOkButtonClick(e); + } + }); } -// click handler for damage buttons; basically toggles visibility of table.damage-monitor -function handleDamageButtonClick(e) { +// click handler for combatant modal OK button (add mode) +function handleCombatantModalAddOkButtonClick(event) { + if (validateCombatant()) { + bs.getInstance($("#combatant-modal")).hide(); + addCombatant(); + } +} + +// click handler for combatant modal Apply button (add mode) +function handleCombatantModalAddApplyButtonClick(event) { + if (validateCombatant()) { + addCombatant(); + } +} + +// click handler for combatant modal OK button (edit mode) +function handleCombatantModalEditOkButtonClick(event) { + if (validateCombatant()) { + bs.getInstance($("#combatant-modal")).hide(); + editCombatant(); + } +} + +// click handler for damage buttons; basically toggles visibility of .damage-monitor +function handleDamageButtonClick(event) { // get visibility status at click time - let seenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen"); + let seenAtClick = $(event.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen"); // hide all damage monitors and actions menus $(".damage-monitor.seen, .actions-menu.seen").removeClass("seen").find("button").attr("tabindex", "-1"); // if targeted dm was hidden before, show it now if (! seenAtClick) { - $(e.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0"); + $(event.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0"); } return false; } +// handle click on damage level button in damage monitor and apply damage to combatant +function handleDamageLevelClick(event) { + let $btn = $(event.target).is("button") ? $(event.target) : $(event.target).closest("button"); + // retrieve new damage level and type from button position and "damage-[type]" class + let damageLevel = $btn.parent().parent().index(); + if ( $btn.hasClass("active") ) { + damageLevel += 1; + } + let damageType = $btn.attr("class").split(" ").filter(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7); +console.log("damageType is", damageType); + // add damage level to table row as as data attribute + $btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel); + // select/unselect damage buttons above/below + $btn.toggleClass("active"); + $btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active"); + $btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active"); + sortTable(); +} + // click handler for edit buttons -function handleEditButtonClick(e) { +function handleEditButtonClick(event) { // find current table row - let $tr = $(e.target).parents(".combatant-row"); + let $tr = $(event.target).parents(".combatant-row"); // restyle modal $("#combatant-modal .modal-title").text("Edit Combatant"); $("#combatant-modal-edit-ok-button").removeClass("d-none"); @@ -212,40 +262,60 @@ function handleEditButtonClick(e) { $("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use the jQuery data() function (which is not the same as using a data attribute) b/c this value is used only in this script and not via HTML or CSS // add handler for enter key $("#combatant-modal input[id*='combatant-modal']").off("keydown"); - $("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { if (e.which == 13 || e.which == 10) { editCombatant(e); } }); + $("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { + if (e.which == 13 || e.which == 10) { + handleCombatantModalEditOkButtonClick(e); + } + }); } // click handler for the more-actions menus -function handleMoreActionsButtonClick(e) { +function handleMoreActionsButtonClick(event) { // get visibility status at click time - let seenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen"); + let seenAtClick = $(event.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen"); // hide all damage monitors $(".actions-menu.seen, .damage-monitor.seen").removeClass("seen").find("button").attr("tabindex", "-1"); // if targeted dm was seen before, show it now if (! seenAtClick) { - $(e.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0"); + $(event.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0"); } return false; } // click handler for new round button -function handleNewRoundButton(e) { +function handleNewRoundButtonClick(event) { // restyle modal $("#confirm-modal .modal-title").text("Start new Round"); $("#confirm-modal-new-round-ok-button").removeClass("d-none"); $("#confirm-modal-remove-combatant-ok-button").addClass("d-none"); + // add handler for enter key + $("#confirm-modal").off("keydown"); + $("#confirm-modal").on("keydown", (e) => { + if (e.which == 13 || e.which == 10) { + bs.getInstance($("#confirm-modal")).hide(); + startNewRound(); + } + }); } // click handler for remove buttons -function handleRemoveButtonClick(e) { +function handleRemoveButtonClick(event) { // restyle modal $("#confirm-modal .modal-title").text("Remove Combatant"); $("#confirm-modal-remove-combatant-ok-button").removeClass("d-none"); $("#confirm-modal-new-round-ok-button").addClass("d-none"); // mark which row is being removed - $("#confirm-modal").data("row", $(".combatant-row").index($(e.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value + $("#confirm-modal").data("row", $(".combatant-row").index($(event.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value + // add handler for enter key + $("#confirm-modal").off("keydown"); + $("#confirm-modal").on("keydown", (e) => { + if (e.which == 13 || e.which == 10) { + bs.getInstance($("#confirm-modal")).hide(); + removeCombatant(); + } + }); } @@ -254,16 +324,7 @@ function handleRemoveButtonClick(e) { */ // add new combatant -function addCombatant(e) { -// e.preventDefault(); - // validate form - if (!validateCombatant()) { - return false; - } - // hide modal if OK was pressed, but not on Apply - if (e.target.id != "combatant-modal-add-apply-button") { - bs.getInstance($("#combatant-modal")).hide(); - } +function addCombatant() { // roll for initiative if necessary let ini = $("#combatant-modal-ini").val().trim(); ini = (ini != "") ? ini : rollForInitiative($("#combatant-modal-dice").val(), $("#combatant-modal-rea").val()); @@ -287,42 +348,14 @@ function addCombatant(e) { $tr.find("button.edit-button, .combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick); $tr.find("button.clone-button").on("click", handleCloneButtonClick); $tr.find("button.remove-button").on("click", handleRemoveButtonClick); - // add event handler to damage monitor - $tr.find(".damage-stun, .damage-physical").on("click", applyDamage); + $tr.find(".damage-stun, .damage-physical").on("click", handleDamageLevelClick); // append row to table and sort $(".combatants-table").append($tr); sortTable(); } -// apply damage to combatant -function applyDamage(e) { - let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).closest("button"); - // retrieve new damage level and type from button position and "damage-[type]" class - let damageLevel = $btn.parent().parent().index(); - if ( $btn.hasClass("active") ) { - damageLevel += 1; - } - let damageType = $btn.attr("class").split(" ").filter(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7); -console.log("damageType is", damageType); - // add damage level to table row as as data attribute - $btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel); - // select/unselect damage buttons above/below - $btn.toggleClass("active"); - $btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active"); - $btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active"); - sortTable(); -} - // edit combatant -function editCombatant(e) { -console.log("editing combatant …") - // e.preventDefault(); - // validate form - if (!validateCombatant()) { - return false; - } - // hide modal - bs.getInstance($("#combatant-modal")).hide(); +function editCombatant() { // get values let name = $("#combatant-modal-name").val().trim(); let ini = $("#combatant-modal-ini").val().trim(); @@ -351,8 +384,7 @@ console.log("row is", $tr); } // remove combatant -function removeCombatant(e) { - e.preventDefault(); +function removeCombatant() { // remove correct row let index = parseInt($("#confirm-modal").data("row")); $(".combatant-row").eq(index).remove(); @@ -362,8 +394,7 @@ function removeCombatant(e) { } // start a new combat round -function startNewRound(e) { - e.preventDefault(); +function startNewRound() { // are there rows at all? if ($(".combatant-row").length == 0) { return; @@ -479,13 +510,17 @@ function validateCombatant() { $(document).ready(function () { // add event handlers to navbar buttons $("#add-combatant-button").on("click", handleAddButtonClick); - $("#new-round-button").on("click", handleNewRoundButton); + $("#new-round-button").on("click", handleNewRoundButtonClick); // add event handlers to modal buttons - $("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").on("click", addCombatant); - $("#combatant-modal-edit-ok-button").on("click", editCombatant); - $("#confirm-modal-new-round-ok-button").on("click", startNewRound); - $("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant); - + $("#combatant-modal-add-apply-button").on("click", handleCombatantModalAddApplyButtonClick); + $("#combatant-modal-add-ok-button").on("click", handleCombatantModalAddOkButtonClick); + $("#combatant-modal-edit-ok-button").on("click", handleCombatantModalEditOkButtonClick); + $("#confirm-modal-new-round-ok-button").on("click", () => { + startNewRound(); + }); + $("#confirm-modal-remove-combatant-ok-button").on("click", () => { + removeCombatant(); + }); // add event listeners to damage sliders in combatant modal $("#combatant-modal-stun").on("change", () => { if ($("#combatant-modal-stun").val() == "10") { @@ -515,7 +550,7 @@ $(document).ready(function () { $(".actions-menu.seen").removeClass("seen"); } }); -// addTestCombatant(); + addTestCombatant(); }); -module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni }; \ No newline at end of file +//module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni }; \ No newline at end of file