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
This commit is contained in:
parent
5324adf189
commit
a7415f5d96
183
src/js/sr2ini.js
183
src/js/sr2ini.js
@ -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 };
|
||||
//module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };
|
||||
Loading…
Reference in New Issue
Block a user