/* * 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', '\n', 'D+\n', '\n', '
\n', '\n', '\n', '
\n', '\n', '
\n', '
\n', '\n', ''].join(""); const DAMAGE_MONITOR_HTML = [ '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '\n', '
'].join(""); const STUN_BADGE_HTML = ''; const PHYSICAL_BADGE_HTML = ''; const CONTEXTUAL_CLASSES = { MAX_INI: "table-primary", ZERO_INI: "table-secondary", REGULAR_INI: "table-success", KO_OR_DEAD: "ko-or-dead", }; /* * 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 let tmpA = $(a).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(a).find(".combatantIni").text()) || 0; let tmpB = $(b).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(b).find(".combatantIni").text()) || 0; // compare ini let comparer = tmpB - tmpA; if (comparer != 0) { return comparer; } // tie; compare reaction else { if ( $(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "" ) { return 0; } else { return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text()); } } } // returns 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(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) { return -1; } // otherwise compute effective ini (true ini minus wound penalties) let effectiveIni = parseInt($(tr).data("true-ini")) - DAMAGE_PENALTY[parseInt($(tr).data("damage-stun")) || 0] - DAMAGE_PENALTY[parseInt($(tr).data("damage-physical")) || 0]; return Math.max(effectiveIni, 0); } // add test combatant for testing purposes (duh) function addTestCombatant() { // Eclipse $("#addCombatantButton").click(); $("#combatantModalName").val("Eclipse"); $("#combatantModalDice").val(3); $("#combatantModalRea").val(6); // $("#combatantModalIni").val(12); setTimeout(function(){ $("#combatantModalAddOkButton").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 let ini = Math.max(parseInt($(e.target).parents(".combatantRow").data("true-ini")) - 10, 0); // set new ini value $(e.target).parents(".combatantRow").data("true-ini", ini); // resort table sortTable(); } // click handler for add buttons function handleAddButtonClick (e) { // restyle modal $("#combatantModal .modal-title").text("Add Combatant"); $("#combatantModalAddOkButton").removeClass("d-none"); $("#combatantModalEditOkButton").addClass("d-none"); // 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 damage buttons; basically toggles visibility of table.damage-monitor function handleDamageButtonClick (e) { // get visibility status at click time let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none"); // hide all damage monitors $(".damage-monitor:visible").addClass("d-none"); // if targeted dm was hidden before, show it now if ( hiddenAtClick ) { $(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none"); } return false; } // 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").addClass("d-none"); $("#combatantModalEditOkButton").removeClass("d-none"); // 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.data("true-ini")); // show effective ini in modal $("#penalty-stun").text(DAMAGE_PENALTY[parseInt($tr.data("damage-stun")) || 0]); $("#penalty-physical").text(DAMAGE_PENALTY[parseInt($tr.data("damage-physical")) || 0]); // mark which row is being edited $("#combatantModal").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"); } function handleNewRoundButton (e) { // restyle modal $("#confirmModal .modal-title").text("Start new Round"); $("#confirmModalNewRoundOkButton").removeClass("d-none"); $("#confirmModalRemoveCombatantOkButton").addClass("d-none"); // show modal $("#comfirmModal").modal("show"); } // click handler for remove buttons function handleRemoveButtonClick (e) { // restyle modal $("#confirmModal .modal-title").text("Remove Combatant"); $("#confirmModalRemoveCombatantOkButton").removeClass("d-none"); $("#confirmModalNewRoundOkButton").addClass("d-none"); // mark which row is being removed $("#confirmModal").data("row", $(".combatantRow").index($(e.target).parents(".combatantRow"))); // show modal $("#comfirmModal").modal("show"); } /* * Main functions */ // add new combatant function addCombatant (e) { e.preventDefault(); // validate form if ( ! validateCombatant() ) { return false; } // hide modal $("#combatantModal").modal("hide"); // roll for initiative if necessary let ini = $("#combatantModalIni").val().trim(); ini = (ini != "") ? ini : rollForInitiative($("#combatantModalDice").val(), $("#combatantModalRea").val()); // construct jQuery object for table row let $tr = $($.parseHTML(COMBATANT_TABLE_ROW)); $tr.find(".damage-dropdown").append($.parseHTML(DAMAGE_MONITOR_HTML)); // populate table row with values from modal $tr.data("true-ini", ini); $tr.find(".combatantName").text($("#combatantModalName").val().trim()); $tr.find(".combatantDice").text($("#combatantModalDice").val().trim()); $tr.find(".combatantRea").text($("#combatantModalRea").val().trim()); //TODO: retrieve initial damage levels // add handler to table cells (click to edit) $tr.find(".combatantName, .combatantIni, .combatantDiceAndRea").on("click", handleEditButtonClick); // add handlers to action buttons $tr.find("button.edit-button").on("click", handleEditButtonClick); $tr.find("button.act-button").on("click", handleActButtonClick); $tr.find("button.damage-button").on("click", handleDamageButtonClick); $tr.find("button.remove-button").on("click", handleRemoveButtonClick); // add handler to damage monitor $tr.find(".damage-stun, .damage-physical").on("click", applyDamage); // add row to table and sort $("#combatantsTable").append($tr); sortTable(); } // event handler for when any damage monitor is clicked function applyDamage (e) { let $btn = $(e.target); // retrieve new damage level and type from button position and "damage-[type]" class let damageLevel = $btn.parent().parent().index(); let damageType = $btn.attr("class").split(" ").filter(function(cls) { return cls.substr(0, 7) == "damage-" ? cls : false; }).toString().substr(7); // add damage level to table row as as data attribute $btn.parents("tr.combatantRow").data("damage-" + damageType, damageLevel); // select/unselect damage buttons above/below $btn.addClass("active"); $btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active"); $btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active"); // resort sortTable(); } // edit combatant 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").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.data("true-ini", ini); // sort table sortTable(); // clean up $("#combatantModal").removeAttr("data-row"); } // remove combatant function removeCombatant (e) { e.preventDefault(); // hide modal $("#confirmModal").modal("hide"); // remove correct row let index = parseInt($("#confirmModal").data("row")); $(".combatantRow").eq(index).remove(); // clean up $("#confirmModal").removeAttr("data-row"); } // start a new combat round function startNewRound (e) { e.preventDefault(); // hide modal $("#confirmModal").modal("hide"); // are there rows at all? if ( $(".combatantRow").length == 0 ) { return; } // reset ini values $(".combatantRow").each( function() { if ( $(this).find(".combatantDice").text() == "" ) { $(this).data("true-ini", 1); } else { $(this).data("true-ini", rollForInitiative(parseInt($(this).find(".combatantDice").text()), parseInt($(this).find(".combatantRea").text()))); } }); // resort table sortTable(); } // add contextual classes and sort combatants by ini value function sortTable() { // do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges $(".combatantRow").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" ")); $(".combatantRow").find(".act-button").prop("disabled", true).attr("aria-disabled", "true"); $(".combatantIni").empty(); // mark KO or death with class $(".combatantRow").each(function() { if ( parseInt($(this).data("damage-stun")) == 10 || parseInt($(this).data("damage-physical")) == 10 ) { $(this).addClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]); } }); // compute highest effective ini let iniMax = Math.max.apply(null, $.map( $(".combatantRow"), function(tr, i) { // write current effective ini to table row $(tr).find(".combatantIni").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr))); return $(tr).find(".combatantIni").text(); })); // add damage badges and contextual classes $(".combatantRow").each(function() { // damage badges if ( $(this).data("damage-stun") && $(this).data("damage-stun") != "0" ) { $(this).find(".combatantIni").append($.parseHTML(STUN_BADGE_HTML)); $(this).find(".stun-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).data("damage-stun")]]); } if ( $(this).data("damage-physical") && $(this).data("damage-physical") != "0" ) { $(this).find(".combatantIni").append($.parseHTML(PHYSICAL_BADGE_HTML)); $(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).data("damage-physical")]]); } // K.O./dead -> don't add anything if ( $(this).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) { return true; } // ini = zero if ( parseInt($(this).find(".combatantIni").text()) == 0 ) { $(this).addClass(CONTEXTUAL_CLASSES["ZERO_INI"]); return true; } // ini = max and non-zero if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) { $(this).addClass(CONTEXTUAL_CLASSES["MAX_INI"]).find(".act-button").prop("disabled", false).removeAttr("aria-disabled"); return true; } // everything else $(this).addClass(CONTEXTUAL_CLASSES["REGULAR_INI"]); }) // sort rows and append them in new order let $rows = $(".combatantRow").toArray().sort(whoGoesFirst); for ( var i = 0; i < $rows.length; i++ ) { $("#combatantsTable").append($rows[i]); } return; } // 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; } /* * Initialize document */ $(document).ready(function(){ // add event handlers to navbar buttons $("#addCombatantButton").on("click", handleAddButtonClick); $("#newRoundButton").on("click", handleNewRoundButton); // add event handlers to modal buttons $("#combatantModalAddOkButton").on("click", addCombatant); $("#combatantModalEditOkButton").on("click", editCombatant); $("#confirmModalNewRoundOkButton").on("click", startNewRound); $("#confirmModalRemoveCombatantOkButton").on("click", removeCombatant); // 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(""); }); // Hide damage monitors after click somewhere else $("html").on("click", function (e) { if ( $(e.target).parents(".damage-monitor").length == 0 ) { $(".damage-monitor:visible").addClass("d-none"); } }); addTestCombatant(); });