|
|
|
|
@ -1,26 +1,9 @@
|
|
|
|
|
/* *****************
|
|
|
|
|
// Register Service Worker
|
|
|
|
|
if (navigator && navigator.serviceWorker) {
|
|
|
|
|
navigator.serviceWorker.register(
|
|
|
|
|
new URL("service-worker.js", import.meta.url),
|
|
|
|
|
{type: "module"}
|
|
|
|
|
).then( (registration) => {
|
|
|
|
|
console.log('ServiceWorker registration successful with scope: ', registration.scope);
|
|
|
|
|
}, (err) => {
|
|
|
|
|
console.log('ServiceWorker registration failed: ', err);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
console.error("Service workers are not supported.");
|
|
|
|
|
}
|
|
|
|
|
***************** */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* import libraries
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
const bs = require("../../node_modules/bootstrap/js/dist/modal.js");
|
|
|
|
|
const $ = require("../../node_modules/jquery/dist/jquery.js");
|
|
|
|
|
const bs = require("../../node_modules/bootstrap/js/dist/modal.js");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
@ -30,7 +13,7 @@ const $ = require("../../node_modules/jquery/dist/jquery.js");
|
|
|
|
|
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 = [
|
|
|
|
|
const $COMBATANT_TABLE_ROW = $($.parseHTML([
|
|
|
|
|
'<tr class="combatant-row" data-true-ini="">\n',
|
|
|
|
|
'<td class="combatant-name" title="Combatant\'s name" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"></td>\n',
|
|
|
|
|
'<td class="combatant-ini" title="Effective initiative (w/ wound penalties)" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"></td>\n',
|
|
|
|
|
@ -41,19 +24,6 @@ const COMBATANT_TABLE_ROW = [
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'<div class="damage-dropdown">\n',
|
|
|
|
|
'<button type="button" class="sr2-button damage-button" title="Take damage"><svg viewbox="0 0 512 512"><use href="#take-damage" /></svg></button>\n',
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'<div class="actions-dropdown">\n',
|
|
|
|
|
'<button type="button" class="sr2-button actions-button" title="More actions"><svg viewbox="0 0 512 512"><use href="#more-actions" /</svg></button>\n',
|
|
|
|
|
'<div class="actions-menu" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
|
|
|
|
|
'<button type="button" class="sr2-button edit-button" title="Edit combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#edit" /></svg></button>\n',
|
|
|
|
|
'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#clone" /></svg></button>\n',
|
|
|
|
|
'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#delete" /></svg></button>\n',
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'</td>\n',
|
|
|
|
|
'</tr>'].join("");
|
|
|
|
|
|
|
|
|
|
const DAMAGE_MONITOR_HTML = [
|
|
|
|
|
'<div class="damage-monitor" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
|
|
|
|
|
'<table>\n',
|
|
|
|
|
'<tr><td><button type="button" class="damage-stun active" title="Light stun damage" tabindex="-1">L</button></td><td><button type="button" class="damage-physical active" title="Light physical damage" tabindex="-1">L</button></td></tr>\n',
|
|
|
|
|
@ -67,16 +37,39 @@ const DAMAGE_MONITOR_HTML = [
|
|
|
|
|
'<tr><td><button type="button" class="damage-stun active" tabindex="-1"> </button></td><td><button type="button" class="damage-physical active" tabindex="-1"> </button></td></tr>\n',
|
|
|
|
|
'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><svg viewbox="0 0 512 512"><use href="#ko" /></svg></button></td><td><button type="button" class="damage-physical active" title="Dead" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#dead" /></svg></button></td></tr>\n',
|
|
|
|
|
'</table>\n',
|
|
|
|
|
'</div>'].join("");
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'<div class="actions-dropdown">\n',
|
|
|
|
|
'<button type="button" class="sr2-button more-actions-button" title="More actions"><svg viewbox="0 0 512 512"><use href="#more-actions" /</svg></button>\n',
|
|
|
|
|
'<div class="actions-menu" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
|
|
|
|
|
'<button type="button" class="sr2-button edit-button" title="Edit combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#edit" /></svg></button>\n',
|
|
|
|
|
'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#clone" /></svg></button>\n',
|
|
|
|
|
'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#delete" /></svg></button>\n',
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'</div>\n',
|
|
|
|
|
'</td>\n',
|
|
|
|
|
'</tr>'].join("")));
|
|
|
|
|
|
|
|
|
|
const STUN_BADGE_HTML = '<sup><span class="badge bg-warning translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
|
|
|
|
|
const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
|
|
|
|
|
const $STUN_BADGE_HTML = $($.parseHTML('<sup><span class="badge bg-warning translate-middle stun-badge" title="Stun damage niveau"></span></sup>'));
|
|
|
|
|
const $PHYSICAL_BADGE_HTML = $($.parseHTML('<sub><span class="badge bg-danger translate-middle physical-badge" title="Physical damage niveau"></span></sub>'));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* helper functions
|
|
|
|
|
* helper class and functions
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// this class generates unique IDs
|
|
|
|
|
// thx to stackoverflow user user1005939 (https://stackoverflow.com/questions/26203453/jquery-generate-unique-ids#comment128736848_33226136)
|
|
|
|
|
class IDGenerator {
|
|
|
|
|
#id = 0;
|
|
|
|
|
|
|
|
|
|
get next() { return this.#id++; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// IDGenerator instance that will be used to generate combatant IDs
|
|
|
|
|
var idGen = new IDGenerator();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// roll for initiative with the given reaction and number of ini dice
|
|
|
|
|
function rollForInitiative(dice, rea) {
|
|
|
|
|
if (isNaN(parseInt(dice)) || isNaN(parseInt(rea))) {
|
|
|
|
|
@ -110,26 +103,59 @@ function whoGoesFirst(a, b) {
|
|
|
|
|
|
|
|
|
|
// compute a combatant's effective ini value (modified by wound penalties)
|
|
|
|
|
function getEffectiveIni(tr) {
|
|
|
|
|
let $tr = $(tr);
|
|
|
|
|
// return 0 if combatant is K.O. or dead
|
|
|
|
|
if ($(tr).hasClass("ko-or-dead")) {
|
|
|
|
|
return 0;
|
|
|
|
|
if ($tr.hasClass("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];
|
|
|
|
|
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
|
|
|
|
|
// $("#add-combatant-button").click();
|
|
|
|
|
$("#combatant-modal-name").val("Eclipse");
|
|
|
|
|
$("#combatant-modal-dice").val(3);
|
|
|
|
|
$("#combatant-modal-rea").val(6);
|
|
|
|
|
// $("#combatant-modal-ini").val(12);
|
|
|
|
|
addCombatant();
|
|
|
|
|
// setTimeout( () => $("#combatant-modal-add-ok-button").click(), 500);
|
|
|
|
|
function getStatsFromCombatantModal() {
|
|
|
|
|
return {
|
|
|
|
|
name: $("#combatant-modal-name").val().trim(),
|
|
|
|
|
ini: $("#combatant-modal-ini").val().trim(),
|
|
|
|
|
dice: $("#combatant-modal-dice").val().trim(),
|
|
|
|
|
rea: $("#combatant-modal-rea").val().trim(),
|
|
|
|
|
stun: $("#combatant-modal-stun").val() || "0",
|
|
|
|
|
physical: $("#combatant-modal-physical").val() || "0"
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function addTestCombatants() {
|
|
|
|
|
// Eclipse
|
|
|
|
|
$("#combatant-modal-name").val("Eclipse");
|
|
|
|
|
$("#combatant-modal-dice").val("3");
|
|
|
|
|
$("#combatant-modal-rea").val("6");
|
|
|
|
|
$("#combatant-modal-stun").val("0");
|
|
|
|
|
$("#combatant-modal-physical").val("0");
|
|
|
|
|
handleCombatantModalAddApplyButtonClick();
|
|
|
|
|
// Solitaire
|
|
|
|
|
$("#combatant-modal-name").val("Solitaire");
|
|
|
|
|
$("#combatant-modal-dice").val("3");
|
|
|
|
|
$("#combatant-modal-rea").val("17");
|
|
|
|
|
$("#combatant-modal-stun").val("0");
|
|
|
|
|
$("#combatant-modal-physical").val("0");
|
|
|
|
|
handleCombatantModalAddApplyButtonClick();
|
|
|
|
|
// Q
|
|
|
|
|
$("#combatant-modal-name").val("Q");
|
|
|
|
|
$("#combatant-modal-dice").val("2");
|
|
|
|
|
$("#combatant-modal-rea").val("9");
|
|
|
|
|
$("#combatant-modal-stun").val("0");
|
|
|
|
|
$("#combatant-modal-physical").val("0");
|
|
|
|
|
handleCombatantModalAddApplyButtonClick();
|
|
|
|
|
// Pie
|
|
|
|
|
$("#combatant-modal-name").val("Pie");
|
|
|
|
|
$("#combatant-modal-dice").val("3");
|
|
|
|
|
$("#combatant-modal-rea").val("19");
|
|
|
|
|
$("#combatant-modal-stun").val("0");
|
|
|
|
|
$("#combatant-modal-physical").val("0");
|
|
|
|
|
handleCombatantModalAddApplyButtonClick();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
@ -140,10 +166,9 @@ function addTestCombatant() {
|
|
|
|
|
function handleActButtonClick(event) {
|
|
|
|
|
// reduce ini by 10 but not lower than 0
|
|
|
|
|
let ini = Math.max(parseInt($(event.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0);
|
|
|
|
|
// set new ini value
|
|
|
|
|
$(event.target).parents(".combatant-row").attr("data-true-ini", ini);
|
|
|
|
|
// resort table
|
|
|
|
|
sortTable();
|
|
|
|
|
updateTable($("#combatants-table"));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// click handler for add button
|
|
|
|
|
@ -152,15 +177,16 @@ function handleAddButtonClick(event) {
|
|
|
|
|
$("#combatant-modal .modal-title").text("Add Combatant");
|
|
|
|
|
$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("display-none");
|
|
|
|
|
$("#combatant-modal-edit-ok-button").addClass("display-none");
|
|
|
|
|
// set default values
|
|
|
|
|
// clear values
|
|
|
|
|
$("#combatant-modal-stun, #combatant-modal-physical").val("0");
|
|
|
|
|
// $("#combatant-modal-name #combatant-modal-ini #combatant-modal-dice #combatant-modal-rea").val("");
|
|
|
|
|
// preset values
|
|
|
|
|
$("#combatant-modal-name").val("Goon 1");
|
|
|
|
|
$("#combatant-modal-dice").val("2");
|
|
|
|
|
$("#combatant-modal-rea").val("7");
|
|
|
|
|
// set damage sliders to zero
|
|
|
|
|
$("#combatant-modal-stun, #combatant-modal-physical").val("0");
|
|
|
|
|
// add handler for enter key
|
|
|
|
|
$("#combatant-modal input[id*='combatant-modal']").off("keydown");
|
|
|
|
|
$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
|
|
|
|
|
$("#combatant-modal input[id*='combatant-modal']").on("keydown", e => {
|
|
|
|
|
if (e.which == 13 || e.which == 10) {
|
|
|
|
|
handleCombatantModalAddOkButtonClick(e);
|
|
|
|
|
}
|
|
|
|
|
@ -195,25 +221,55 @@ function handleCloneButtonClick(event) {
|
|
|
|
|
|
|
|
|
|
// click handler for combatant modal OK button (add mode)
|
|
|
|
|
function handleCombatantModalAddOkButtonClick(event) {
|
|
|
|
|
if (validateCombatant()) {
|
|
|
|
|
bs.getInstance($("#combatant-modal")).hide();
|
|
|
|
|
addCombatant();
|
|
|
|
|
// validate
|
|
|
|
|
if ( ! validateCombatant($("#combatant-form").get(0))) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// hide modal
|
|
|
|
|
bs.getInstance($("#combatant-modal")).hide();
|
|
|
|
|
// everything else can be handled by the apply button handler
|
|
|
|
|
handleCombatantModalAddApplyButtonClick(event);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// click handler for combatant modal Apply button (add mode)
|
|
|
|
|
function handleCombatantModalAddApplyButtonClick(event) {
|
|
|
|
|
if (validateCombatant()) {
|
|
|
|
|
addCombatant();
|
|
|
|
|
// validate
|
|
|
|
|
if ( ! validateCombatant($("#combatant-form").get(0))) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// prepare new table row
|
|
|
|
|
let $tr = $COMBATANT_TABLE_ROW.clone();
|
|
|
|
|
$tr.attr("id", idGen.next);
|
|
|
|
|
$tr.find(".act-button").on("click", handleActButtonClick);
|
|
|
|
|
$tr.find(".damage-button").on("click", handleDamageButtonClick);
|
|
|
|
|
$tr.find(".damage-stun, .damage-physical").on("click", handleDamageLevelClick);
|
|
|
|
|
$tr.find(".more-actions-button").on("click", handleMoreActionsButtonClick);
|
|
|
|
|
$tr.find(".edit-button, .combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
|
|
|
|
|
$tr.find(".clone-button").on("click", handleCloneButtonClick);
|
|
|
|
|
$tr.find(".remove-button").on("click", handleRemoveButtonClick);
|
|
|
|
|
// update table row with stats from modal
|
|
|
|
|
$tr = updateCombatantTablerow(getStatsFromCombatantModal(), $tr);
|
|
|
|
|
// append row to table
|
|
|
|
|
$("#combatants-table").append($tr);
|
|
|
|
|
// update (and sort) table
|
|
|
|
|
updateTable($("#combatants-table"));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// click handler for combatant modal OK button (edit mode)
|
|
|
|
|
function handleCombatantModalEditOkButtonClick(event) {
|
|
|
|
|
if (validateCombatant()) {
|
|
|
|
|
bs.getInstance($("#combatant-modal")).hide();
|
|
|
|
|
editCombatant();
|
|
|
|
|
// validate
|
|
|
|
|
if ( ! validateCombatant($("#combatant-form").get(0)) ) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// hide modal
|
|
|
|
|
bs.getInstance($("#combatant-modal")).hide();
|
|
|
|
|
// update table row
|
|
|
|
|
let id = $("#combatant-modal").data("row-id"),
|
|
|
|
|
$tr = updateCombatantTablerow(getStatsFromCombatantModal(), $(".combatant-row#" + id));
|
|
|
|
|
// update table
|
|
|
|
|
updateTable($("#combatants-table"));
|
|
|
|
|
// clean up
|
|
|
|
|
$("#combatant-modal").data("row-id", "");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// click handler for damage buttons; basically toggles visibility of .damage-monitor
|
|
|
|
|
@ -222,7 +278,7 @@ function handleDamageButtonClick(event) {
|
|
|
|
|
let seenAtClick = $(event.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen");
|
|
|
|
|
// hide all damage monitors and actions menus
|
|
|
|
|
$(".damage-monitor.seen, .actions-menu.seen").removeClass("seen").find("button").attr("tabindex", "-1");
|
|
|
|
|
// if targeted dm was hidden before, show it now
|
|
|
|
|
// if targeted damage monitor was hidden before, show it now
|
|
|
|
|
if (! seenAtClick) {
|
|
|
|
|
$(event.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0");
|
|
|
|
|
}
|
|
|
|
|
@ -231,6 +287,7 @@ function handleDamageButtonClick(event) {
|
|
|
|
|
|
|
|
|
|
// handle click on damage level button in damage monitor and apply damage to combatant
|
|
|
|
|
function handleDamageLevelClick(event) {
|
|
|
|
|
// find button
|
|
|
|
|
let $btn = $(event.target).is("button") ? $(event.target) : $(event.target).closest("button");
|
|
|
|
|
// retrieve new damage level and type from button position and "damage-[type]" class
|
|
|
|
|
let damageLevel = $btn.parent().parent().index();
|
|
|
|
|
@ -239,18 +296,21 @@ function handleDamageLevelClick(event) {
|
|
|
|
|
}
|
|
|
|
|
let damageType = $btn.attr("class").split(" ").filter(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7);
|
|
|
|
|
// add damage level to table row as as data attribute
|
|
|
|
|
$btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel);
|
|
|
|
|
$btn.parents(".combatant-row").attr("data-damage-" + damageType, damageLevel);
|
|
|
|
|
// select/unselect damage buttons above/below
|
|
|
|
|
$btn.toggleClass("active");
|
|
|
|
|
$btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active");
|
|
|
|
|
$btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active");
|
|
|
|
|
sortTable();
|
|
|
|
|
$btn.parent().parent().prevAll().find(".damage-" + damageType).removeClass("active");
|
|
|
|
|
$btn.parent().parent().nextAll().find(".damage-" + damageType).addClass("active");
|
|
|
|
|
updateTable($("#combatants-table"));
|
|
|
|
|
$btn.focus();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// click handler for edit buttons
|
|
|
|
|
function handleEditButtonClick(event) {
|
|
|
|
|
// find current table row
|
|
|
|
|
// save ID of row being edited
|
|
|
|
|
// here it's okay to use the jQuery data() function (which is not the same as using a data attribute) b/c this value is only used with JS, not with HTML or CSS
|
|
|
|
|
let $tr = $(event.target).parents(".combatant-row");
|
|
|
|
|
$("#combatant-modal").data("row-id", $tr.attr("id"));
|
|
|
|
|
// restyle modal
|
|
|
|
|
$("#combatant-modal .modal-title").text("Edit Combatant");
|
|
|
|
|
$("#combatant-modal-edit-ok-button").removeClass("display-none");
|
|
|
|
|
@ -262,8 +322,6 @@ function handleEditButtonClick(event) {
|
|
|
|
|
$("#combatant-modal-ini").val($tr.attr("data-true-ini"));
|
|
|
|
|
$("#combatant-modal-stun").val($tr.attr("data-damage-stun") || "0");
|
|
|
|
|
$("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0");
|
|
|
|
|
// mark which row is being edited
|
|
|
|
|
$("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use the jQuery data() function (which is not the same as using a data attribute) b/c this value is used only in this script and not via HTML or CSS
|
|
|
|
|
// add handler for enter key
|
|
|
|
|
$("#combatant-modal input[id*='combatant-modal']").off("keydown");
|
|
|
|
|
$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
|
|
|
|
|
@ -277,14 +335,12 @@ function handleEditButtonClick(event) {
|
|
|
|
|
function handleMoreActionsButtonClick(event) {
|
|
|
|
|
// get visibility status at click time
|
|
|
|
|
let seenAtClick = $(event.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen");
|
|
|
|
|
|
|
|
|
|
// hide all damage monitors
|
|
|
|
|
$(".actions-menu.seen, .damage-monitor.seen").removeClass("seen").find("button").attr("tabindex", "-1");
|
|
|
|
|
// if targeted dm was seen before, show it now
|
|
|
|
|
// if targeted actions menu was seen before, show it now
|
|
|
|
|
if (! seenAtClick) {
|
|
|
|
|
$(event.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -306,12 +362,13 @@ function handleNewRoundButtonClick(event) {
|
|
|
|
|
|
|
|
|
|
// click handler for remove buttons
|
|
|
|
|
function handleRemoveButtonClick(event) {
|
|
|
|
|
// mark which row is being removed
|
|
|
|
|
let id = $(event.target).parents(".combatant-row").attr("id");
|
|
|
|
|
$("#confirm-modal").data("row-id", id); // again, here it's okay to use jQuery .data() method (see handleEditButtonClick())
|
|
|
|
|
// restyle modal
|
|
|
|
|
$("#confirm-modal .modal-title").text("Remove Combatant");
|
|
|
|
|
$("#confirm-modal-remove-combatant-ok-button").removeClass("display-none");
|
|
|
|
|
$("#confirm-modal-new-round-ok-button").addClass("display-none");
|
|
|
|
|
// mark which row is being removed
|
|
|
|
|
$("#confirm-modal").data("row", $(".combatant-row").index($(event.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value
|
|
|
|
|
// add handler for enter key
|
|
|
|
|
$("#confirm-modal").off("keydown");
|
|
|
|
|
$("#confirm-modal").on("keydown", (e) => {
|
|
|
|
|
@ -327,70 +384,31 @@ function handleRemoveButtonClick(event) {
|
|
|
|
|
* Main functions
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// add new combatant
|
|
|
|
|
function addCombatant() {
|
|
|
|
|
// roll for initiative if necessary
|
|
|
|
|
let ini = $("#combatant-modal-ini").val().trim();
|
|
|
|
|
ini = (ini != "") ? ini : rollForInitiative($("#combatant-modal-dice").val(), $("#combatant-modal-rea").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(".combatant-name").text($("#combatant-modal-name").val().trim());
|
|
|
|
|
$tr.find(".combatant-dice").attr("data-combatant-dice", $("#combatant-modal-dice").val().trim());
|
|
|
|
|
$tr.find(".combatant-rea").attr("data-combatant-rea", $("#combatant-modal-rea").val().trim());
|
|
|
|
|
// retrieve initial damage levels
|
|
|
|
|
$tr.attr("data-damage-stun", $("#combatant-modal-stun").val() || "0");
|
|
|
|
|
$tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active");
|
|
|
|
|
$tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0");
|
|
|
|
|
$tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active");
|
|
|
|
|
// add event handlers
|
|
|
|
|
$tr.find("button.act-button").on("click", handleActButtonClick);
|
|
|
|
|
$tr.find("button.damage-button").on("click", handleDamageButtonClick);
|
|
|
|
|
$tr.find("button.actions-button").on("click", handleMoreActionsButtonClick);
|
|
|
|
|
$tr.find("button.edit-button, .combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
|
|
|
|
|
$tr.find("button.clone-button").on("click", handleCloneButtonClick);
|
|
|
|
|
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
|
|
|
|
|
$tr.find(".damage-stun, .damage-physical").on("click", handleDamageLevelClick);
|
|
|
|
|
// append row to table and sort
|
|
|
|
|
$("#combatants-table").append($tr);
|
|
|
|
|
sortTable();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// edit combatant
|
|
|
|
|
function editCombatant() {
|
|
|
|
|
// get values
|
|
|
|
|
let name = $("#combatant-modal-name").val().trim();
|
|
|
|
|
let ini = $("#combatant-modal-ini").val().trim();
|
|
|
|
|
let dice = $("#combatant-modal-dice").val().trim();
|
|
|
|
|
let rea = $("#combatant-modal-rea").val().trim();
|
|
|
|
|
// roll for initiative if ini is empty
|
|
|
|
|
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
|
|
|
|
|
// get correct row
|
|
|
|
|
let index = parseInt($("#combatant-modal").data("row"));
|
|
|
|
|
let $tr = $("tr.combatant-row").eq(index);
|
|
|
|
|
// set new values
|
|
|
|
|
function updateCombatantTablerow(stats, $tr) {
|
|
|
|
|
// roll for initiative if necessary
|
|
|
|
|
let ini = (stats["ini"] == "") ? rollForInitiative(stats["dice"], stats["rea"]) : stats["ini"];
|
|
|
|
|
// populate table row with combatant stats
|
|
|
|
|
$tr.find(".combatant-name").text(stats["name"]);
|
|
|
|
|
$tr.attr("data-true-ini", ini);
|
|
|
|
|
$tr.find(".combatant-name").text(name);
|
|
|
|
|
$tr.find(".combatant-dice").attr("data-combatant-dice", dice);
|
|
|
|
|
$tr.find(".combatant-rea").attr("data-combatant-rea", rea);
|
|
|
|
|
$tr.attr("data-damage-stun", $("#combatant-modal-stun").val() || "0");
|
|
|
|
|
$tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active");
|
|
|
|
|
$tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0");
|
|
|
|
|
$tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active");
|
|
|
|
|
// sort table
|
|
|
|
|
sortTable();
|
|
|
|
|
// clean up
|
|
|
|
|
$("#combatant-modal").data("row", "");
|
|
|
|
|
$tr.find(".combatant-dice").attr("data-combatant-dice", stats["dice"]);
|
|
|
|
|
$tr.find(".combatant-rea").attr("data-combatant-rea", stats["rea"]);
|
|
|
|
|
// set initial damage levels
|
|
|
|
|
$tr.attr("data-damage-stun", stats["stun"]);
|
|
|
|
|
$tr.find(".damage-stun").addClass("active").slice(0, parseInt(stats["stun"])).removeClass("active");
|
|
|
|
|
$tr.attr("data-damage-physical", stats["physical"]);
|
|
|
|
|
$tr.find(".damage-physical").addClass("active").slice(0, parseInt(stats["physical"])).removeClass("active");
|
|
|
|
|
// done
|
|
|
|
|
return $tr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// remove combatant
|
|
|
|
|
function removeCombatant() {
|
|
|
|
|
// remove correct row
|
|
|
|
|
let index = parseInt($("#confirm-modal").data("row"));
|
|
|
|
|
$(".combatant-row").eq(index).remove();
|
|
|
|
|
sortTable();
|
|
|
|
|
let id = $("#confirm-modal").data("row-id");
|
|
|
|
|
$(".combatant-row#" + id).remove();
|
|
|
|
|
// update table
|
|
|
|
|
updateTable($("#combatants-table"));
|
|
|
|
|
// clean up
|
|
|
|
|
$("#confirm-modal").data("row", "");
|
|
|
|
|
}
|
|
|
|
|
@ -403,98 +421,94 @@ function startNewRound() {
|
|
|
|
|
}
|
|
|
|
|
// reset ini values
|
|
|
|
|
$(".combatant-row").each(function () {
|
|
|
|
|
if ($(this).find(".combatant-dice").attr("data-combatant-dice") == "") {
|
|
|
|
|
$(this).attr("data-true-ini", 1);
|
|
|
|
|
let $this = $(this);
|
|
|
|
|
if ($this.find(".combatant-dice").attr("data-combatant-dice") == "") {
|
|
|
|
|
$this.attr("data-true-ini", 1);
|
|
|
|
|
} else {
|
|
|
|
|
$(this).attr("data-true-ini", rollForInitiative(parseInt($(this).find(".combatant-dice").attr("data-combatant-dice")), parseInt($(this).find(".combatant-rea").attr("data-combatant-rea"))));
|
|
|
|
|
$this.attr("data-true-ini", rollForInitiative(parseInt($this.find(".combatant-dice").attr("data-combatant-dice")), parseInt($this.find(".combatant-rea").attr("data-combatant-rea"))));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// resort table
|
|
|
|
|
sortTable();
|
|
|
|
|
updateTable($("#combatants-table"));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// sort combatants by ini value and add contextual classes
|
|
|
|
|
function sortTable() {
|
|
|
|
|
// do some clean up: remove previous classes from rows, remove effective ini and damage badges
|
|
|
|
|
$(".combatant-row").removeClass("ko-or-dead max-ini zero-ini"); //REGULAR_INI
|
|
|
|
|
$(".combatant-ini").empty();
|
|
|
|
|
// update combatants' table's effective inis, contextual classes, and order
|
|
|
|
|
function updateTable(table) {
|
|
|
|
|
let $table = $(table),
|
|
|
|
|
$rows = $table.find(".combatant-row");
|
|
|
|
|
// do some clean up: remove contextual classes, remove effective ini and damage badges
|
|
|
|
|
$rows.removeClass("ko-or-dead max-ini zero-ini");
|
|
|
|
|
$table.find(".combatant-ini").empty();
|
|
|
|
|
$table.find(".stun-badge .physical-badge").remove();
|
|
|
|
|
// disable all act buttons
|
|
|
|
|
$(".combatant-row").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
|
|
|
|
|
// mark KO or death with class
|
|
|
|
|
$(".combatant-row").each(function() {
|
|
|
|
|
if (parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10) {
|
|
|
|
|
$(this).addClass("ko-or-dead");
|
|
|
|
|
$table.find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
|
|
|
|
|
// mark KO/death with class
|
|
|
|
|
$rows.each(function(i) {
|
|
|
|
|
let $this = $(this);
|
|
|
|
|
if (parseInt($this.attr("data-damage-stun")) == 10 || parseInt($this.attr("data-damage-physical")) == 10) {
|
|
|
|
|
$this.addClass("ko-or-dead");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// compute highest effective ini
|
|
|
|
|
let iniMax = Math.max.apply(null, $.map($(".combatant-row"), function (tr, i) {
|
|
|
|
|
// write current effective ini to table row
|
|
|
|
|
$(tr).find(".combatant-ini").text($(tr).hasClass("ko-or-dead") ? 0 : getEffectiveIni($(tr)));
|
|
|
|
|
return $(tr).find(".combatant-ini").text();
|
|
|
|
|
// compute highest effective ini while writing effective ini to each row
|
|
|
|
|
let iniMax = Math.max.apply(null, $.map($rows, (tr, i) => {
|
|
|
|
|
let $tr = $(tr);
|
|
|
|
|
$tr.find(".combatant-ini").text($tr.hasClass("ko-or-dead") ? 0 : getEffectiveIni($tr));
|
|
|
|
|
return parseInt($tr.find(".combatant-ini").text());
|
|
|
|
|
}));
|
|
|
|
|
// add damage badges and contextual classes
|
|
|
|
|
$(".combatant-row").each(function () {
|
|
|
|
|
// iterate over rows to add damage badges and contextual classes
|
|
|
|
|
$rows.each(function(i) {
|
|
|
|
|
let $this = $(this);
|
|
|
|
|
// damage badges
|
|
|
|
|
if ($(this).attr("data-damage-stun") && $(this).attr("data-damage-stun") != "0") {
|
|
|
|
|
$(this).find(".combatant-ini").append($.parseHTML(STUN_BADGE_HTML));
|
|
|
|
|
$(this).find(".stun-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-stun")]]);
|
|
|
|
|
if ($this.attr("data-damage-stun") && $this.attr("data-damage-stun") != "0") {
|
|
|
|
|
$this.find(".combatant-ini").append($STUN_BADGE_HTML.clone());
|
|
|
|
|
$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(".combatant-ini").append($.parseHTML(PHYSICAL_BADGE_HTML));
|
|
|
|
|
$(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]);
|
|
|
|
|
if ($this.attr("data-damage-physical") && $this.attr("data-damage-physical") != "0") {
|
|
|
|
|
$this.find(".combatant-ini").append($PHYSICAL_BADGE_HTML.clone());
|
|
|
|
|
$this.find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$this.attr("data-damage-physical")]]);
|
|
|
|
|
}
|
|
|
|
|
// K.O./dead -> do nothing
|
|
|
|
|
if ($(this).hasClass("ko-or-dead")) {
|
|
|
|
|
// K.O./dead -> done
|
|
|
|
|
if ($this.hasClass("ko-or-dead")) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
// ini = zero -> set contextual class
|
|
|
|
|
if (parseInt($(this).find(".combatant-ini").text()) == 0) {
|
|
|
|
|
$(this).addClass("zero-ini");
|
|
|
|
|
// ini = zero -> set class and done
|
|
|
|
|
if (parseInt($this.find(".combatant-ini").text()) == 0) {
|
|
|
|
|
$this.addClass("zero-ini");
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
// ini = max and non-zero -> enable act-button
|
|
|
|
|
if (parseInt($(this).find(".combatant-ini").text()) == iniMax && iniMax > 0) {
|
|
|
|
|
$(this).addClass("max-ini").find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
|
|
|
|
|
// ini = max and non-zero -> set class, enable act-button
|
|
|
|
|
if (parseInt($this.find(".combatant-ini").text()) == iniMax && iniMax > 0) {
|
|
|
|
|
$this.addClass("max-ini").find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// sort rows and append them in new order
|
|
|
|
|
let $rows = $(".combatant-row").toArray().sort(whoGoesFirst);
|
|
|
|
|
for (let i = 0; i < $rows.length; i++) {
|
|
|
|
|
$("#combatants-table").append($rows[i]);
|
|
|
|
|
$($rows[i]).css("z-index", 50-i).css("position", "relative");
|
|
|
|
|
rows = $rows.toArray().sort(whoGoesFirst);
|
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
|
|
|
$table.append($(rows[i]).css("z-index", 50-i));
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
return $table;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// validate a combatant row form by checking for all conditions, including regular HTML5 validation
|
|
|
|
|
function validateCombatant() {
|
|
|
|
|
function validateCombatant(form) {
|
|
|
|
|
// do standard HTML5 form validation first
|
|
|
|
|
// (makes sure that name is not empty and that all other values are numbers within their individual ranges)
|
|
|
|
|
if ( ! $("#combatant-form").get(0).reportValidity() ) {
|
|
|
|
|
if ( ! form.reportValidity() ) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// get input elements
|
|
|
|
|
let inputElements = {
|
|
|
|
|
name: $("#combatant-modal-name").get(0),
|
|
|
|
|
ini: $("#combatant-modal-ini").get(0),
|
|
|
|
|
dice: $("#combatant-modal-dice").get(0),
|
|
|
|
|
rea: $("#combatant-modal-rea").get(0)
|
|
|
|
|
};
|
|
|
|
|
// 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();
|
|
|
|
|
// get input values
|
|
|
|
|
let ini = $(form).find("#combatant-modal-ini").get(0).value.trim(),
|
|
|
|
|
dice = $(form).find("#combatant-modal-dice").get(0).value.trim(),
|
|
|
|
|
rea = $(form).find("#combatant-modal-rea").get(0).value.trim();
|
|
|
|
|
// invalidate if ini, dice and rea are all empty
|
|
|
|
|
if (ini == "" && (dice == "" || rea == "")) {
|
|
|
|
|
inputElements["ini"].setCustomValidity("Values required for either initiative, or dice and reaction, or all three");
|
|
|
|
|
inputElements["ini"].reportValidity();
|
|
|
|
|
$(form).find("#combatant-modal-ini").get(0).setCustomValidity("Values required for either initiative, or dice and reaction, or all three");
|
|
|
|
|
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();
|
|
|
|
|
$(form).find("#combatant-modal-ini").get(0).setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// ok then
|
|
|
|
|
@ -514,16 +528,10 @@ $(document).ready(function () {
|
|
|
|
|
$("#combatant-modal-add-apply-button").on("click", handleCombatantModalAddApplyButtonClick);
|
|
|
|
|
$("#combatant-modal-add-ok-button").on("click", handleCombatantModalAddOkButtonClick);
|
|
|
|
|
$("#combatant-modal-edit-ok-button").on("click", handleCombatantModalEditOkButtonClick);
|
|
|
|
|
$("#confirm-modal-new-round-ok-button").on("click", () => {
|
|
|
|
|
startNewRound();
|
|
|
|
|
});
|
|
|
|
|
$("#confirm-modal-remove-combatant-ok-button").on("click", () => {
|
|
|
|
|
removeCombatant();
|
|
|
|
|
});
|
|
|
|
|
// add event handler to certain input elements that removes any custom validity message
|
|
|
|
|
$("#combatant-modal-dice #combatant-modal-rea #combatant-modal-ini").on("input", (event) => {
|
|
|
|
|
event.target.setCustomValidity("");
|
|
|
|
|
});
|
|
|
|
|
$("#confirm-modal-new-round-ok-button").on("click", startNewRound);
|
|
|
|
|
$("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant);
|
|
|
|
|
// add event handler removing custom validity messages in combatant modal
|
|
|
|
|
$("#combatant-modal-dice #combatant-modal-rea #combatant-modal-ini").on("input", (event) => event.target.setCustomValidity(""));
|
|
|
|
|
// add event listeners to damage sliders in combatant modal
|
|
|
|
|
$("#combatant-modal-stun").on("input change", () => {
|
|
|
|
|
if ($("#combatant-modal-stun").val() == "10") {
|
|
|
|
|
@ -544,9 +552,10 @@ $(document).ready(function () {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// always focus name input field when combatant modal appears
|
|
|
|
|
$('#combatant-modal').on('shown.bs.modal', () => $('#combatant-modal-name').focus());
|
|
|
|
|
// (need to use vanilla JS b/c jQuery can't seem to attach event handler correctly)
|
|
|
|
|
document.getElementById('combatant-modal').addEventListener('shown.bs.modal', () => $('#combatant-modal-name').focus());
|
|
|
|
|
// always empty input fields when combatant modal disappears
|
|
|
|
|
$("#combatant-modal").on('hidden.bs.modal', () => $("input[id*='combatant-modal']").val(""));
|
|
|
|
|
document.getElementById('combatant-modal').addEventListener('hidden.bs.modal', () => $("input[id*='combatant-modal']").val(""));
|
|
|
|
|
// Hide damage monitors and actions menus after click somewhere else
|
|
|
|
|
$("html").on("click", (e) => {
|
|
|
|
|
if ($(e.target).parents(".damage-monitor").length == 0) {
|
|
|
|
|
@ -556,7 +565,16 @@ $(document).ready(function () {
|
|
|
|
|
$(".actions-menu.seen").removeClass("seen");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
addTestCombatant();
|
|
|
|
|
// add test combatants when title is held for one second
|
|
|
|
|
// thx to stackoverflow user Šime Vidas (https://stackoverflow.com/a/6091129)
|
|
|
|
|
$("#navbar-title").mousedown(function(e) {
|
|
|
|
|
clearTimeout(this.downTimer);
|
|
|
|
|
this.downTimer = setTimeout(function() {
|
|
|
|
|
addTestCombatants();
|
|
|
|
|
}, 1000);
|
|
|
|
|
}).mouseup(function(e) {
|
|
|
|
|
clearTimeout(this.downTimer);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };
|
|
|
|
|
|
