diff --git a/src/js/sr2ini.js b/src/js/sr2ini.js index 2d94375..d5ee8f4 100644 --- a/src/js/sr2ini.js +++ b/src/js/sr2ini.js @@ -15,14 +15,18 @@ if ("serviceWorker" in navigator) { /* * import libraries */ + const bs = require("../../node_modules/bootstrap/js/dist/modal.js"); const $ = require("../../node_modules/jquery/dist/jquery.js"); + /* * constants definitions */ + const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4]; const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"]; + const COMBATANT_TABLE_ROW = [ '\n', //TODO: add data-damage-* attributes with initial damage levels '\n', @@ -30,7 +34,6 @@ const COMBATANT_TABLE_ROW = [ 'D+\n', '\n', '\n', -// '
\n', '\n', '
\n', @@ -44,6 +47,7 @@ const COMBATANT_TABLE_ROW = [ '\n', '\n', ''].join(""); + const DAMAGE_MONITOR_HTML = [ '
\n', '\n', @@ -59,16 +63,21 @@ const DAMAGE_MONITOR_HTML = [ '\n', '
\n', '
'].join(""); + const STUN_BADGE_HTML = ''; const PHYSICAL_BADGE_HTML = ''; + + /* * helper functions */ + // roll for initiative with the given reaction and number of ini dice function rollForInitiative(dice, rea) { let diceRolls = Array.from({ length: parseInt(dice) }, () => Math.ceil(Math.random() * 6)); return diceRolls.reduce((a, b) => a + b, 0) + parseInt(rea); } + // figure out whose action comes first out of two combatants a and b function whoGoesFirst(a, b) { // check for K.O./death @@ -88,7 +97,8 @@ function whoGoesFirst(a, b) { } } } -// returns a combatant's effective ini value (modified by wound penalties) + +// compute a combatant's effective ini value (modified by wound penalties) function getEffectiveIni(tr) { // return -1 if combatant is K.O. or dead if ($(tr).hasClass("ko-or-dead")) { @@ -98,6 +108,7 @@ function getEffectiveIni(tr) { let effectiveIni = parseInt($(tr).attr("data-true-ini")) - DAMAGE_PENALTY[parseInt($(tr).attr("data-damage-stun")) || 0] - DAMAGE_PENALTY[parseInt($(tr).attr("data-damage-physical")) || 0]; return Math.max(effectiveIni, 0); } + // add test combatant for testing purposes (duh) function addTestCombatant() { // Eclipse @@ -108,9 +119,12 @@ function addTestCombatant() { // $("#combatant-modal-ini").val(12); setTimeout( () => $("#combatant-modal-add-ok-button").click(), 500); } + + /* * Event handler functions */ + // click handler for act buttons; reduces ini by 10 function handleActButtonClick(e) { // reduce ini by 10 but not lower than 0 @@ -120,6 +134,7 @@ function handleActButtonClick(e) { // resort table sortTable(); } + // click handler for add buttons function handleAddButtonClick(e) { // restyle modal @@ -132,6 +147,7 @@ function handleAddButtonClick(e) { $("#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); } }); } + // click handler for clone buttons -> like handleAddButtonClick but with a pre-filled modal function handleCloneButtonClick(e) { // find current table row @@ -153,6 +169,7 @@ function handleCloneButtonClick(e) { $("#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); } }); } + // click handler for damage buttons; basically toggles visibility of table.damage-monitor function handleDamageButtonClick(e) { // get visibility status at click time @@ -165,14 +182,15 @@ function handleDamageButtonClick(e) { } return false; } + // click handler for edit buttons function handleEditButtonClick(e) { // find current table row let $tr = $(e.target).parents(".combatant-row"); // restyle modal $("#combatant-modal .modal-title").text("Edit Combatant"); - $("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("seen"); $("#combatant-modal-edit-ok-button").removeClass("d-none"); + $("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").addClass("d-none"); // populate modal with values from row $("#combatant-modal-name").val($tr.find(".combatant-name").text()); $("#combatant-modal-dice").val($tr.find(".combatant-dice").attr("data-combatant-dice")); @@ -181,11 +199,12 @@ function handleEditButtonClick(e) { $("#combatant-modal-stun").val($tr.attr("data-damage-stun") || "0"); $("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0"); // mark which row is being edited - $("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use .data() b/c HTML/CSS does not care about this value + $("#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); } }); } + // click handler for the more-actions menus function handleMoreActionsButtonClick(e) { // get visibility status at click time @@ -217,9 +236,12 @@ function handleRemoveButtonClick(e) { // 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 } + + /* * Main functions */ + // add new combatant function addCombatant(e) { // e.preventDefault(); @@ -243,22 +265,21 @@ function addCombatant(e) { $tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active"); $tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0"); $tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active"); - // add click handler to table cells - $tr.find(".combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick); - // add handlers to action buttons + // add event handlers $tr.find("button.act-button").on("click", handleActButtonClick); $tr.find("button.damage-button").on("click", handleDamageButtonClick); $tr.find("button.actions-button").on("click", handleMoreActionsButtonClick); - $tr.find("button.edit-button").on("click", handleEditButtonClick); + $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 handler to damage monitor + // add event handler to damage monitor $tr.find(".damage-stun, .damage-physical").on("click", applyDamage); - // add row to table and sort + // append row to table and sort $(".combatants-table").append($tr); sortTable(); } -// event handler for when any damage monitor is clicked + +// apply damage to combatant function applyDamage(e) { let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).parent(); // retrieve new damage level and type from button position and "damage-[type]" class @@ -276,6 +297,7 @@ console.log("damageType is", damageType); $btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active"); sortTable(); } + // edit combatant function editCombatant(e) { // e.preventDefault(); @@ -307,6 +329,7 @@ function editCombatant(e) { // clean up $("#combatant-modal").data("row", ""); } + // remove combatant function removeCombatant(e) { e.preventDefault(); @@ -317,6 +340,7 @@ function removeCombatant(e) { // clean up $("#confirm-modal").data("row", ""); } + // start a new combat round function startNewRound(e) { e.preventDefault(); @@ -335,14 +359,15 @@ function startNewRound(e) { // resort table sortTable(); } -// add contextual classes and sort combatants by ini value + +// sort combatants by ini value and add contextual classes function sortTable() { // do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges $(".combatant-row").removeClass("ko-or-dead max-ini zero-ini"); //REGULAR_INI $(".combatant-row").find(".act-button").prop("disabled", true).attr("aria-disabled", "true"); $(".combatant-ini").empty(); // mark KO or death with class - $(".combatant-row").each( () => { + $(".combatant-row").each(function() { if (parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10) { $(this).addClass("ko-or-dead"); } @@ -387,6 +412,7 @@ function sortTable() { } return; } + // validate a combatant row form by checking for all conditions, including regular HTML5 validation function validateCombatant() { // get input elements @@ -424,9 +450,12 @@ function validateCombatant() { // ok then return true; } + + /* * Initialize document */ + $(document).ready(function () { // add event handlers to navbar buttons $("#add-combatant-button").on("click", handleAddButtonClick);