eclipse/sr2ini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

further improved damage tracking functionality

Browse Source
This commit is contained in:
Tobias 2023-02-07 17:52:45 +01:00
parent 86f1f4bad3
commit 8517c7f7e8
2 changed files with 63 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/custom.css
View File

@ -19,6 +19,18 @@ input:invalid {
font-weight: bold; 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) */ /* Dropdown Content (Hidden by Default) */
.damage-monitor { .damage-monitor {
display: none; display: none;
@ -32,7 +44,7 @@ input:invalid {
.damage-monitor th { .damage-monitor th {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: white; /* background-color: white;*/
border: solid darkgray 1px; border: solid darkgray 1px;
padding: 3px; padding: 3px;
} }
@ -40,20 +52,14 @@ input:invalid {
.damage-monitor td { .damage-monitor td {
width: 30px; width: 30px;
height: 24px; 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%);
}

64
js/sr2ini.js
View File

@ -3,23 +3,23 @@
*/ */
const penalty = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4]; const penalty = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
const dmg = ["", "L", "M", "S", "D"];
const damageMonitorHTML = ['<table class="damage-monitor text-center">\n', const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center">\n',
'<thead>\n', '<thead>\n',
'<tr><th title="Stun damage"><img src="img/zzz.png" /></th><th title="Physical Damage"><img src="img/skull.png" /></th></tr>\n', '<tr><th title="Stun damage"><img src="img/zzz.png" /></th><th title="Physical Damage"><img src="img/skull.png" /></th></tr>\n',
'</thead>\n', '</thead>\n',
'<tbody>\n', '<tbody>\n',
'<tr><td class="damage-stun selected" title="0">0</td><td class="damage-physical selected" title="0">0</td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-1">L</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-1">L</button></td></tr>\n',
'<tr><td class="damage-stun" title="-1">L</td><td class="damage-physical" title="-1">L</td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-1"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-1"></button></td></tr>\n',
'<tr><td class="damage-stun" title="-1"></td><td class="damage-physical" title="-1"></td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-2">M</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2">M</button></td></tr>\n',
'<tr><td class="damage-stun" title="-2">M</td><td class="damage-physical" title="-2">M</td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-2"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2"></button></td></tr>\n',
'<tr><td class="damage-stun" title="-2"></td><td class="damage-physical" title="-2"></td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-2"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2"></button></td></tr>\n',
'<tr><td class="damage-stun" title="-2"></td><td class="damage-physical" title="-2"></td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3">S</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3">S</button></td></tr>\n',
'<tr><td class="damage-stun" title="-3">S</td><td class="damage-physical" title="-3">S</td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
'<tr><td class="damage-stun" title="-3"></td><td class="damage-physical" title="-3"></td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
'<tr><td class="damage-stun" title="-3"></td><td class="damage-physical" title="-3"></td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
'<tr><td class="damage-stun" title="-3"></td><td class="damage-physical" title="-3"></td></tr>\n', '<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="K.O.">D</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="dead">D</button></td></tr>\n',
'<tr><td class="damage-stun" title="knocked out">D</td><td class="damage-physical" title="dead">D</td></tr>\n',
'</tbody>\n', '</tbody>\n',
'</table>'].join(""); '</table>'].join("");
@ -116,7 +116,9 @@ function getEffectiveIni(value, dmgLvl1, dmgLvl2) {
effectiveIni = parseInt(value) - penalty[parseInt(dmgLvl1)] - penalty[parseInt(dmgLvl2)]; effectiveIni = parseInt(value) - penalty[parseInt(dmgLvl1)] - penalty[parseInt(dmgLvl2)];
} }
// //
else { return NaN; } else {
return NaN;
}
return effectiveIni < 0 ? 0 : effectiveIni; return effectiveIni < 0 ? 0 : effectiveIni;
} }
@ -173,17 +175,17 @@ function handleDamageButtonClick (e) {
// click handler for damage monitor fields // click handler for damage monitor fields
function handleDamageMonitorClick (e) { function handleDamageMonitorClick (e) {
let $td = $(e.target); let $btn = $(e.target);
let $tr = $td.parents("tr.combatantRow"); let $tr = $btn.parents("tr.combatantRow");
let damageType; let damageType;
let otherDamageLevel let otherDamageLevel
// calculate new damage level and type // calculate new damage level and type
let damageLevel = $td.parent().index(); let damageLevel = $btn.parent().parent().index() + 1;
if ( $td.hasClass("damage-stun") ) { if ( $btn.parent().hasClass("damage-stun") ) {
damageType = "stun"; damageType = "stun";
otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0; 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"; damageType = "physical";
otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0; otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0;
} else { } else {
@ -199,12 +201,22 @@ function handleDamageMonitorClick (e) {
} }
// select/unselect damage boxes // select/unselect damage boxes
$td.addClass("selected"); $btn.addClass("active");
$td.parent().nextAll().children("td.damage-" + damageType).removeClass("selected"); $btn.parent().parent().nextAll().find("td.damage-" + damageType + " button").removeClass("active");
$td.parent().prevAll().children("td.damage-" + damageType).addClass("selected"); $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)); $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('<sup><span class="badge bg-warning position-absolute translate-middle" title="Stun damage level">' + dmg[penalty[$tr.attr("data-damage-stun")]] + '</span></sup>');
}
if ( $tr.attr("data-damage-physical") && $tr.attr("data-damage-physical") != "0" ) {
$tr.find(".combatantIni").append('<sub><span class="badge bg-danger position-absolute translate-middle">' + dmg[penalty[$tr.attr("data-damage-physical")]] + '<span class="visually-hidden">Physical damage level</span></span></sub>');
}
// resort
sortTable(); sortTable();
// return false; // return false;
@ -337,7 +349,7 @@ function addCombatant (e) {
let $tr = $($.parseHTML( [ let $tr = $($.parseHTML( [
'<tr class="combatantRow align-middle" data-true-ini="', ini, '">\n', //TODO: add data-damage-* attributes with initial damage levels '<tr class="combatantRow align-middle" data-true-ini="', ini, '">\n', //TODO: add data-damage-* attributes with initial damage levels
'<td class="combatantName" title="Combatant\'s name">', name, '</td>\n', '<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
'<td class="combatantIni text-center" title="Initiative">', effectiveIni, '</td>\n', '<td class="combatantIni text-center" title="Effective initiative (w/ wound penalties)">', effectiveIni, '</td>\n',
'<td class="text-center combatantDiceAndRea" title="Iniative dice and reaction"><span class="combatantDice">', dice, '</span>D+<span class="combatantRea">', rea, '</span></td>\n', '<td class="text-center combatantDiceAndRea" title="Iniative dice and reaction"><span class="combatantDice">', dice, '</span>D+<span class="combatantRea">', rea, '</span></td>\n',
'<td class="text-end">\n', '<td class="text-end">\n',
'<div class="btn-group">\n', '<div class="btn-group">\n',
@ -352,7 +364,7 @@ function addCombatant (e) {
'</tr>'].join("") '</tr>'].join("")
)); ));
//TODO: mark initial damage levels with .selected class //TODO: mark initial damage levels with active class
// add handlers to table row buttons // add handlers to table row buttons
$tr.find("button.edit-button").on("click", handleEditButtonClick); $tr.find("button.edit-button").on("click", handleEditButtonClick);
@ -421,7 +433,6 @@ function newRound() {
// reset ini values // reset ini values
$(".combatantRow").each( function() { $(".combatantRow").each( function() {
let effectiveIni = $(this).find(".combatantIni").text();
let dice = $(this).find(".combatantDice").text(); let dice = $(this).find(".combatantDice").text();
if ( dice == "" ) { if ( dice == "" ) {
$(this).attr("data-true-ini", "1"); $(this).attr("data-true-ini", "1");
@ -429,6 +440,7 @@ function newRound() {
$(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text())); $(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text()));
} }
$(this).find(".combatantIni").text(getEffectiveIni($(this))); $(this).find(".combatantIni").text(getEffectiveIni($(this)));
let effectiveIni = $(this).find(".combatantIni").text();
}); });
// resort table // resort table
@ -473,7 +485,9 @@ $(document).ready(function(){
// Hide damage monitors if mouse is clicked outside // Hide damage monitors if mouse is clicked outside
$("html").on("click", function(e) { $("html").on("click", function(e) {
if (! $(e.target).is("td[class*='damage-'] > button") ) {
$(".damage-monitor:visible").css("display", "none"); $(".damage-monitor:visible").css("display", "none");
}
}); });
addTestCombatant(); addTestCombatant();