557 lines
18 KiB
JavaScript
557 lines
18 KiB
JavaScript
const penalty = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
|
|
const dmg = ["", "L", "M", "S", "D"];
|
|
|
|
const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center align-middle">\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 maxIniClass = "table-primary";
|
|
const zeroIniClass = "table-secondary";
|
|
const regularClass = "table-success";
|
|
|
|
/*
|
|
* helper functions
|
|
*/
|
|
|
|
// roll for initiative with the given reaction and number of ini dice
|
|
function rollForInitiative(dice, rea) {
|
|
let ini = 0;
|
|
for ( let i = 0; i < parseInt(dice); i++ ) {
|
|
roll = Math.floor(Math.random() * 6) + 1;
|
|
ini += roll;
|
|
}
|
|
return ini + 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("out-of-commission") ? -1 : parseInt($(a).find(".combatantIni").text()) || 0;
|
|
let tmpB = $(b).hasClass("out-of-commission") ? -1 : parseInt($(b).find(".combatantIni").text()) || 0;
|
|
|
|
console.log("iniA, iniB are", tmpA, tmpB);
|
|
// 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
|
|
console.log("Reaction values are: ", tmpA, tmpB);
|
|
return tmpB - tmpA;
|
|
}
|
|
}
|
|
|
|
|
|
// add contextual classes and sort combatants by ini value
|
|
function sortTable() {
|
|
|
|
// remove previous classes from rows, disable act buttons
|
|
$(".combatantRow").removeClass(maxIniClass + " " + zeroIniClass + " " + regularClass).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) {
|
|
console.log($(tr).find(".combatantIni"));
|
|
return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text());
|
|
});
|
|
console.log(iniValues);
|
|
//TODO: maxIni wid nicht vergeben wenn damage > 0
|
|
|
|
// compute highest ini
|
|
let iniMax = Math.max.apply(null, iniValues);
|
|
console.log(iniValues);
|
|
|
|
// add contextual classes
|
|
$(".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(zeroIniClass);
|
|
return true;
|
|
}
|
|
// ini = max and non-zero
|
|
if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
|
|
$(this).addClass(maxIniClass).find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
|
|
return true;
|
|
}
|
|
// everything else
|
|
$(this).addClass(regularClass);
|
|
})
|
|
|
|
// 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, dmgLvl1, dmgLvl2) {
|
|
let effectiveIni;
|
|
|
|
// 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 dmgStun = parseInt($(value).attr("data-damage-stun")) || 0;
|
|
let dmgPhysical = parseInt($(value).attr("data-damage-physical")) || 0;
|
|
effectiveIni = trueIni - penalty[dmgStun] - penalty[dmgPhysical];
|
|
}
|
|
// or with 3 arguments (ini and dmg levels)?
|
|
else if ( arguments.length == 3 ) {
|
|
effectiveIni = parseInt(value) - penalty[parseInt(dmgLvl1)] - penalty[parseInt(dmgLvl2)];
|
|
}
|
|
//
|
|
else {
|
|
return NaN;
|
|
}
|
|
return effectiveIni < 0 ? 0 : effectiveIni;
|
|
}
|
|
|
|
|
|
/*
|
|
* Event handler functions
|
|
*/
|
|
|
|
// click handler for act buttons
|
|
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);
|
|
|
|
// 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);
|
|
|
|
// resort table
|
|
sortTable();
|
|
}
|
|
|
|
|
|
// click handler for add buttons
|
|
function handleAddButtonClick (e) {
|
|
|
|
// restyle modal
|
|
$("#combatantModal .modal-title").text("Add Combatant");
|
|
$("#combatantModalAddOkButton").show();
|
|
$("#combatantModalEditOkButton").hide();
|
|
|
|
// 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 visAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display");
|
|
|
|
// hide all damage monitors
|
|
$(".damage-monitor:visible").css("display", "none");
|
|
|
|
// if targeted dm was hidden before, show it now
|
|
if ( visAtClick == "none" ) {
|
|
$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", "block");
|
|
}
|
|
return false;
|
|
}
|
|
|
|
|
|
// 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 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;
|
|
}
|
|
|
|
// add damage level to table row as as data attribute
|
|
$tr.attr("data-damage-" + damageType, damageLevel);
|
|
if ( damageLevel == 10 || otherDamageLevel == 10 ) {
|
|
$tr.addClass("out-of-commission");
|
|
} else {
|
|
$tr.removeClass("out-of-commission");
|
|
}
|
|
|
|
// select/unselect damage boxes
|
|
$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('<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();
|
|
|
|
// 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").hide();
|
|
$("#combatantModalEditOkButton").show();
|
|
|
|
// 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"));
|
|
//TODO: show effective ini in modal
|
|
|
|
// 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").show();
|
|
$("#confirmModalRemoveCombatantOkButton").hide();
|
|
|
|
// show modal
|
|
$("#comfirmModal").modal("show");
|
|
}
|
|
|
|
|
|
// click handler for remove buttons
|
|
function handleRemoveButtonClick (e) {
|
|
// restyle modal
|
|
$("#confirmModal .modal-title").text("Remove Combatant");
|
|
$("#confirmModalRemoveCombatantOkButton").show();
|
|
$("#confirmModalNewRoundOkButton").hide();
|
|
|
|
// mark which row is being removed
|
|
$("#confirmModal").attr("data-row", $(".combatantRow").index($(e.target).parents(".combatantRow")));
|
|
|
|
// show modal
|
|
$("#comfirmModal").modal("show");
|
|
}
|
|
|
|
|
|
/*
|
|
* 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
|
|
*/
|
|
|
|
// add new combatant
|
|
function addCombatant (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();
|
|
//TODO: retrieve initial damage levels
|
|
|
|
// roll for initiative if necessary
|
|
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
|
|
|
|
// get effective initiative value (modified by wound penalties)
|
|
let effectiveIni = getEffectiveIni(ini, 0, 0);
|
|
|
|
// construct jQuery object for table row
|
|
let $tr = $($.parseHTML( [
|
|
'<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="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-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/check.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/explosion.png" /></button>\n',
|
|
damageMonitorHTML + "\n",
|
|
'</div>\n',
|
|
'</div>\n',
|
|
'</td>\n',
|
|
'</tr>'].join("")
|
|
));
|
|
|
|
//TODO: mark initial damage levels with active class
|
|
|
|
// add handlers to table row 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 table cells (click to edit)
|
|
$tr.find(".combatantName, .combatantIni, .combatantDiceAndRea").on("click", handleEditButtonClick);
|
|
|
|
// 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);
|
|
$tr.find(".combatantIni").text(getEffectiveIni($tr));
|
|
//TODO: add badges
|
|
|
|
// 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() {
|
|
let dice = $(this).find(".combatantDice").text();
|
|
if ( dice == "" ) {
|
|
$(this).attr("data-true-ini", "1");
|
|
} else {
|
|
$(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text()));
|
|
}
|
|
$(this).find(".combatantIni").contents()[0].data = getEffectiveIni($(this));
|
|
});
|
|
|
|
// resort table
|
|
sortTable();
|
|
}
|
|
|
|
|
|
// add test combatant for testing purposes (duh)
|
|
function addTestCombatant() {
|
|
$("#addCombatantButton").click();
|
|
$("#combatantModalName").val("Goon1");
|
|
$("#combatantModalDice").val(2);
|
|
$("#combatantModalRea").val(6);
|
|
$("#combatantModalIni").val(12);
|
|
setTimeout(function(){
|
|
$("#combatantModalAddOkButton").click();
|
|
},500);
|
|
}
|
|
|
|
|
|
/*
|
|
* 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").css("display", "none");
|
|
}
|
|
|
|
});
|
|
|
|
addTestCombatant();
|
|
|
|
});
|