diff --git a/css/custom.css b/css/custom.css index 60e65ae..8dbbbae 100644 --- a/css/custom.css +++ b/css/custom.css @@ -19,6 +19,18 @@ input:invalid { font-weight: bold; } +.badge.bg-warning { + left: 12px; + bottom: -4px; + width: 20px; +} + +.badge.bg-danger { + left: 12px; + top: 12px; + width: 20px; +} + /* Dropdown Content (Hidden by Default) */ .damage-monitor { display: none; @@ -32,7 +44,7 @@ input:invalid { .damage-monitor th { width: 30px; height: 30px; - background-color: white; +/* background-color: white;*/ border: solid darkgray 1px; padding: 3px; } @@ -40,20 +52,14 @@ input:invalid { .damage-monitor td { width: 30px; height: 24px; - border: solid darkgray 1px; - font-size: smaller; - user-select: none; } -.damage-monitor td::selection { background: none; } -.damage-monitor td::-moz-selection { background: none; } - -td.damage-stun { background-color: cornflowerblue; } -td.damage-stun.selected { background-color: dodgerblue; } -td.damage-physical { background-color: indianred; } -td.damage-physical.selected { background-color: tomato; } - -/* bgcolors: default, active, hover - phys: darkred, red, tomato, coral, lightcoral, indianred, orangered - stun: cornflowerblue, lightskyblue, mediumlateblue, steelblue, royalblue -*/ +.damage-monitor button { + font-size: smaller; + height: 24px; + width: 30px; + padding: 2px; +} +.damage-monitor button.active { + filter: brightness(91%); +} diff --git a/js/sr2ini.js b/js/sr2ini.js index 8a0110e..1ffdb7b 100644 --- a/js/sr2ini.js +++ b/js/sr2ini.js @@ -3,23 +3,23 @@ */ const penalty = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4]; +const dmg = ["", "L", "M", "S", "D"]; -const damageMonitorHTML = ['\n', +const damageMonitorHTML = ['
\n', '\n', '\n', '\n', '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', '\n', '
00
LL
MM
SS
DD
'].join(""); @@ -116,7 +116,9 @@ function getEffectiveIni(value, dmgLvl1, dmgLvl2) { effectiveIni = parseInt(value) - penalty[parseInt(dmgLvl1)] - penalty[parseInt(dmgLvl2)]; } // - else { return NaN; } + else { + return NaN; + } return effectiveIni < 0 ? 0 : effectiveIni; } @@ -173,17 +175,17 @@ function handleDamageButtonClick (e) { // click handler for damage monitor fields function handleDamageMonitorClick (e) { - let $td = $(e.target); - let $tr = $td.parents("tr.combatantRow"); + let $btn = $(e.target); + let $tr = $btn.parents("tr.combatantRow"); let damageType; let otherDamageLevel // calculate new damage level and type - let damageLevel = $td.parent().index(); - if ( $td.hasClass("damage-stun") ) { + let damageLevel = $btn.parent().parent().index() + 1; + if ( $btn.parent().hasClass("damage-stun") ) { damageType = "stun"; otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0; - } else if ( $td.hasClass("damage-physical") ) { + } else if ( $btn.parent().hasClass("damage-physical") ) { damageType = "physical"; otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0; } else { @@ -199,12 +201,22 @@ function handleDamageMonitorClick (e) { } // select/unselect damage boxes - $td.addClass("selected"); - $td.parent().nextAll().children("td.damage-" + damageType).removeClass("selected"); - $td.parent().prevAll().children("td.damage-" + damageType).addClass("selected"); + $btn.addClass("active"); + $btn.parent().parent().nextAll().find("td.damage-" + damageType + " button").removeClass("active"); + $btn.parent().parent().prevAll().find("td.damage-" + damageType + " button").addClass("active"); - // recalculate effective ini and resort + // 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('' + dmg[penalty[$tr.attr("data-damage-stun")]] + ''); + } + if ( $tr.attr("data-damage-physical") && $tr.attr("data-damage-physical") != "0" ) { + $tr.find(".combatantIni").append('' + dmg[penalty[$tr.attr("data-damage-physical")]] + ''); + } + + // resort sortTable(); // return false; @@ -337,7 +349,7 @@ function addCombatant (e) { let $tr = $($.parseHTML( [ '\n', //TODO: add data-damage-* attributes with initial damage levels '', name, '\n', - '', effectiveIni, '\n', + '', effectiveIni, '\n', '', dice, 'D+', rea, '\n', '\n', '
\n', @@ -352,7 +364,7 @@ function addCombatant (e) { ''].join("") )); -//TODO: mark initial damage levels with .selected class +//TODO: mark initial damage levels with active class // add handlers to table row buttons $tr.find("button.edit-button").on("click", handleEditButtonClick); @@ -365,7 +377,7 @@ function addCombatant (e) { // add handler to damage monitor $tr.find(".damage-stun, .damage-physical").on("click", handleDamageMonitorClick); - + // add row to table and sort $("#combatantsTable").append($tr); sortTable(); @@ -421,7 +433,6 @@ function newRound() { // reset ini values $(".combatantRow").each( function() { - let effectiveIni = $(this).find(".combatantIni").text(); let dice = $(this).find(".combatantDice").text(); if ( dice == "" ) { $(this).attr("data-true-ini", "1"); @@ -429,6 +440,7 @@ function newRound() { $(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text())); } $(this).find(".combatantIni").text(getEffectiveIni($(this))); + let effectiveIni = $(this).find(".combatantIni").text(); }); // resort table @@ -473,7 +485,9 @@ $(document).ready(function(){ // Hide damage monitors if mouse is clicked outside $("html").on("click", function(e) { - $(".damage-monitor:visible").css("display", "none"); + if (! $(e.target).is("td[class*='damage-'] > button") ) { + $(".damage-monitor:visible").css("display", "none"); + } }); addTestCombatant();