diff --git a/css/custom.css b/css/custom.css index 56f7869..a669d45 100644 --- a/css/custom.css +++ b/css/custom.css @@ -21,7 +21,7 @@ input:invalid { border: 2px solid red; } -.out-of-commission { +.ko-or-dead { color: coral; text-decoration: line-through; background-color: darkslategray; diff --git a/index.html b/index.html index 92f4429..8095219 100644 --- a/index.html +++ b/index.html @@ -88,6 +88,7 @@
+
diff --git a/js/sr2ini.js b/js/sr2ini.js index 75ed395..7178abc 100644 --- a/js/sr2ini.js +++ b/js/sr2ini.js @@ -1,3 +1,7 @@ +/* + * constants definitions + */ + const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4]; const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"]; @@ -36,9 +40,16 @@ const DAMAGE_MONITOR_HTML = [ '\n', ''].join(""); -const MAX_INI_CLASS = "table-primary"; -const ZERO_INI_CLASS = "table-secondary"; -const REGULAR_INI_CLASS = "table-success"; +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 @@ -47,7 +58,6 @@ const REGULAR_INI_CLASS = "table-success"; // 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)); -console.log(diceRolls); return diceRolls.reduce((a, b) => a + b, 0) + parseInt(rea); } @@ -56,90 +66,49 @@ console.log(diceRolls); function whoGoesFirst(a, b) { // check for K.O./death - let tmpA = $(a).hasClass("out-of-commission") ? -1 : parseInt($(a).find(".combatantIni").text()) || 0; - let tmpB = $(b).hasClass("out-of-commission") ? -1 : parseInt($(b).find(".combatantIni").text()) || 0; + 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; - } else + } // tie; compare reaction - { - tmpA = parseInt($(a).find(".combatantRea").text()) || 0; - tmpB = parseInt($(b).find(".combatantRea").text()) || 0 - return tmpB - tmpA; + else { + if ( $(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "" ) { + return 0; + } else { + return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text()); + } } } -// add contextual classes and sort combatants by ini value -function sortTable() { - - // remove previous classes from rows, disable act buttons - $(".combatantRow").removeClass(MAX_INI_CLASS + " " + ZERO_INI_CLASS + " " + REGULAR_INI_CLASS).find(".act-button").prop("disabled", true).attr("aria-disabled", "true"); - - // get ini value for every combatant; set to 0 if K.O./dead - let iniValues = $.map( $(".combatantRow"), function(tr, i) { -//TODO: don't rely on class out-of-commission being set, check and set it here instead - return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text()); - }); - - // compute highest ini - let iniMax = Math.max.apply(null, iniValues); - - // add contextual classes -//TODO: I should probably add badges here as well, maybe even effectiveIni - $(".combatantRow").each( function() { - // K.O./dead -> don't add anything - if ( $(this).hasClass("out-of-commission") ) { - return true; - } - // ini = zero - if ( parseInt($(this).find(".combatantIni").text()) == 0 ) { - $(this).addClass(ZERO_INI_CLASS); - return true; - } - // ini = max and non-zero - if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) { - $(this).addClass(MAX_INI_CLASS).find(".act-button").prop("disabled", false).removeAttr("aria-disabled"); - return true; - } - // everything else - $(this).addClass(REGULAR_INI_CLASS); - }) - - // 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; -} - - // returns a combatant's effective ini value (modified by wound penalties) -function getEffectiveIni(value, damageLevel1, damageLevel2) { - let effectiveIni; +function getEffectiveIni(tr) { + // return -1 if combatant is K.O. or dead + if ($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) { + return -1; + } - // was function called with 1 argument (tr jQuery object)? - if ( arguments.length == 1 && $(value).is("tr.combatantRow") ) { - let trueIni = parseInt($(value).attr("data-true-ini")); - let damageStun = parseInt($(value).attr("data-damage-stun")) || 0; - let damagePhysical = parseInt($(value).attr("data-damage-physical")) || 0; - effectiveIni = trueIni - DAMAGE_PENALTY[damageStun] - DAMAGE_PENALTY[damagePhysical]; - } - // or with 3 arguments (ini and damage levels)? - else if ( arguments.length == 3 ) { - effectiveIni = parseInt(value) - DAMAGE_PENALTY[parseInt(damageLevel1)] - DAMAGE_PENALTY[parseInt(damageLevel2)]; - } - // - else { - return NaN; - } -//TODO: maybe check here for out-of-commission and return 'dead' or something instead of integer - return effectiveIni < 0 ? 0 : effectiveIni; + // otherwise compute effective ini (true ini minus wound penalties) + 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 + $("#addCombatantButton").click(); + $("#combatantModalName").val("Eclipse"); + $("#combatantModalDice").val(3); + $("#combatantModalRea").val(6); +// $("#combatantModalIni").val(12); + setTimeout(function(){ + $("#combatantModalAddOkButton").click(); + },500); } @@ -147,19 +116,14 @@ function getEffectiveIni(value, damageLevel1, damageLevel2) { * Event handler functions */ -// click handler for act buttons +// click handler for act buttons; reduces ini by 10 function handleActButtonClick (e) { - // find current table row - let $tr = $(e.target).parents(".combatantRow"); - let ini = $tr.attr("data-true-ini"); // reduce ini by 10 but not lower than 0 - ini = Math.max(parseInt(ini) - 10, 0); + let ini = Math.max(parseInt($(e.target).parents(".combatantRow").attr("data-true-ini")) - 10, 0); // set new ini value - // can't use text() here because that would delete wound badges - $tr.attr("data-true-ini", ini); - $tr.find(".combatantIni").contents()[0].data = getEffectiveIni($tr); + $(e.target).parents(".combatantRow").attr("data-true-ini", ini); // resort table sortTable(); @@ -186,8 +150,10 @@ function handleAddButtonClick (e) { $("#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"); @@ -204,55 +170,28 @@ function handleDamageButtonClick (e) { // click handler for damage monitor fields function handleDamageMonitorClick (e) { - let $btn = $(e.target); - let $tr = $btn.parents("tr.combatantRow"); - let damageType; - let otherDamageLevel - // calculate new damage level and type + let $btn = $(e.target); + + // retrieve new damage level and type from button position and "damage-[type]" class let damageLevel = $btn.parent().parent().index(); -console.log("damage level is", damageLevel); - if ( $btn.hasClass("damage-stun") ) { - damageType = "stun"; - otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0; - } else if ( $btn.hasClass("damage-physical") ) { - damageType = "physical"; - otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0; - } else { - return false; - } + 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 - $tr.attr("data-damage-" + damageType, damageLevel); -//TODO: class out-of-commission should be set in sortTable() with the other contextual classes - if ( damageLevel == 10 || otherDamageLevel == 10 ) { - $tr.addClass("out-of-commission"); - } else { - $tr.removeClass("out-of-commission"); - } - - // select/unselect damage boxes + $btn.parents("tr.combatantRow").attr("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"); - // recalculate effective ini - $tr.find(".combatantIni").text(getEffectiveIni($tr)); - - // add damage level badges - if ( $tr.attr("data-damage-stun") && $tr.attr("data-damage-stun") != "0" ) { - $tr.find(".combatantIni").append('' + DAMAGE_NIVEAU[DAMAGE_PENALTY[$tr.attr("data-damage-stun")]] + ''); - } - if ( $tr.attr("data-damage-physical") && $tr.attr("data-damage-physical") != "0" ) { - $tr.find(".combatantIni").append('' + DAMAGE_NIVEAU[DAMAGE_PENALTY[$tr.attr("data-damage-physical")]] + ''); - } - // resort sortTable(); - -// return false; } + // click handler for edit buttons function handleEditButtonClick (e) { // find current table row @@ -268,8 +207,11 @@ function handleEditButtonClick (e) { $("#combatantModalDice").val($tr.find(".combatantDice").text()); $("#combatantModalRea").val($tr.find(".combatantRea").text()); $("#combatantModalIni").val($tr.attr("data-true-ini")); - //TODO: show effective ini in modal + // show effective ini in modal + $("#penalty-stun").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-stun")) || 0]); + $("#penalty-physical").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-physical")) || 0]); + // mark which row is being edited $("#combatantModal").attr("data-row", $(".combatantRow").index($tr)); @@ -312,58 +254,6 @@ function handleRemoveButtonClick (e) { } -/* - * 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 @@ -393,7 +283,6 @@ function addCombatant (e) { // populate table row with values from modal $tr.attr("data-true-ini", ini); $tr.find(".combatantName").text($("#combatantModalName").val().trim()); - $tr.find(".combatantIni").text(getEffectiveIni(ini, 0, 0)); // don't need to use contents()[0].data here b/c wound badges are added later $tr.find(".combatantDice").text($("#combatantModalDice").val().trim()); $tr.find(".combatantRea").text($("#combatantModalRea").val().trim()); @@ -448,8 +337,6 @@ function editCombatant (e) { $tr.find(".combatantDice").text(dice); $tr.find(".combatantRea").text(rea); $tr.attr("data-true-ini", ini); - $tr.find(".combatantIni").text(getEffectiveIni($tr)); -//TODO: add badges // sort table sortTable(); @@ -488,13 +375,11 @@ function startNewRound (e) { // reset ini values $(".combatantRow").each( function() { - let dice = $(this).find(".combatantDice").text(); - if ( dice == "" ) { - $(this).attr("data-true-ini", "1"); + if ( $(this).find(".combatantDice").text() == "" ) { + $(this).attr("data-true-ini", 1); } else { - $(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text())); + $(this).attr("data-true-ini", rollForInitiative(parseInt($(this).find(".combatantDice").text()), parseInt($(this).find(".combatantRea").text()))); } - $(this).find(".combatantIni").contents()[0].data = getEffectiveIni($(this)); }); // resort table @@ -502,19 +387,116 @@ function startNewRound (e) { } -// 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); +// 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).attr("data-damage-stun")) == 10 || parseInt($(this).attr("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).attr("data-damage-stun") && $(this).attr("data-damage-stun") != "0" ) { + $(this).find(".combatantIni").append($.parseHTML(STUN_BADGE_HTML)); + $(this).find(".stun-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-stun")]]); + } + if ( $(this).attr("data-damage-physical") && $(this).attr("data-damage-physical") != "0" ) { + $(this).find(".combatantIni").append($.parseHTML(PHYSICAL_BADGE_HTML)); + $(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("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 */