sr2ini/js/sr2ini.js
Tobias 493d7160b6 - streamlined handling of contextual classes and damage badges; these are now all being applied in sortTable only
- combatantModal now displays wound penalties
- when two combatants have the same ini: only compare reaction values if both are set, report tie otherwise
- elegantified certain commands, e.g. retrieving damage type in applyDamage (formerly handleDamageMonitorClick)
- rearranged some of the functions in sr2ini.js
2023-02-09 14:26:51 +01:00

535 lines
18 KiB
JavaScript

/*
* 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 = [
'<tr class="combatantRow align-middle" data-true-ini="">\n', //TODO: add data-damage-* attributes with initial damage levels
'<td class="combatantName" title="Combatant\'s name"></td>\n',
'<td class="combatantIni text-center" title="Effective initiative (w/ wound penalties)"></td>\n',
'<td class="text-center combatantDiceAndRea" title="Iniative dice and reaction"><span class="combatantDice"></span>D+<span class="combatantRea"></span></td>\n',
'<td class="text-end">\n',
'<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values"><img src="img/edit.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 act-button" title="Act and reduce ini by 10"><img src="img/act.png" /></button>\n',
'<div class="damage-dropdown">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 damage-button" title="Take damage"><img src="img/damage.png" /></button>\n',
'</div>\n',
'</div>\n',
'</td>\n',
'</tr>'].join("");
const DAMAGE_MONITOR_HTML = [
'<table class="bg-light damage-monitor text-center align-middle d-none">\n',
'<tr>\n',
'<td><button class="btn btn-sm btn-warning damage-stun active" title="+/-0">0</button></td>\n',
'<td><button class="btn btn-sm btn-danger damage-physical active" title="+/-0">0</button></td>\n',
'</tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Light stun damage">L</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Light physical damage">L</button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Medium stun damage">M</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Medium physical damage">M</button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Severe stun damage">S</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Severe physical damage">S</button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="K.O.">D</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="dead">D</button></td></tr>\n',
'<tr><th colspan="2"><button type)"submit" class="btn btn-sm btn-light remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirmModal"><img src="img/trash.png" /></button></th></tr>\n',
'</table>'].join("");
const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
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).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);
}
/*
* 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").attr("data-true-ini")) - 10, 0);
// set new ini value
$(e.target).parents(".combatantRow").attr("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 damage monitor fields
function handleDamageMonitorClick (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").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");
// resort
sortTable();
}
// 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.attr("data-true-ini"));
// 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));
// 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").attr("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.attr("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
//TODO: mark initial damage levels with active class -> what? don't know what this means
// 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", handleDamageMonitorClick);
// add row to table and sort
$("#combatantsTable").append($tr);
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").attr("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.attr("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").attr("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).attr("data-true-ini", 1);
} else {
$(this).attr("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).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
*/
$(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();
});