329 lines
9.3 KiB
JavaScript
329 lines
9.3 KiB
JavaScript
/*
|
|
* 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;
|
|
// console.log(roll);
|
|
ini += roll;
|
|
}
|
|
return ini + parseInt(rea);
|
|
}
|
|
|
|
// sorts the combatants by ini value
|
|
function sortTable() {
|
|
console.log("OK let's sort");
|
|
let $table = $("table#combatants");
|
|
let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) {
|
|
return parseInt($(b).attr("data-ini")) - parseInt($(a).attr("data-ini"));
|
|
});
|
|
for ( var i = 0; i < $rows.length; i++ ) {
|
|
$table.append($rows[i]);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Event handler functions
|
|
*/
|
|
|
|
// blur handler for input elements (blur is triggered when an element loses focus) that checks if validation is required
|
|
function handleBlur (e) {
|
|
let $tr = $(e.target).parents("tr");
|
|
|
|
// trigger validation check only if focus is not going to another input in the same row
|
|
if ( ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) {
|
|
|
|
// validation check
|
|
if ( ! validateCombRowValues($tr) ) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
// did Ini value stay the same? do nothing then
|
|
if ( $tr.find(".combIni")[0].value == $tr.attr("data-ini") ) {
|
|
return true;
|
|
}
|
|
|
|
// Ini value changed => reposition row
|
|
$tr.attr("data-ini", $tr.find(".combIni")[0].value);
|
|
sortTable()
|
|
}
|
|
}
|
|
|
|
// click handler for add buttons
|
|
function handleAddButtonClick (e) {
|
|
|
|
// restyle modal
|
|
$modal = $("#addCombModal");
|
|
$modal.find(".modal-title").text("Add Combatant");
|
|
$modal.find("#addModalOkButton").show();
|
|
$modal.find("#editModalOkButton").hide();
|
|
|
|
// add handler for enter key
|
|
$("#addCombModal input[class*='comb']").off("keydown");
|
|
$("#addCombModal input[class*='comb']").on("keydown", function (e) {
|
|
if ( e.which == 13 || e.which == 10 ) {
|
|
addCombatant();
|
|
$('#addCombModal').modal("hide");
|
|
}
|
|
});
|
|
|
|
// show modal
|
|
$modal.modal("show");
|
|
}
|
|
|
|
|
|
// click handler for edit buttons
|
|
function handleEditButtonClick (e) {
|
|
|
|
// find current table row
|
|
let $tr = $(e.target).parents("tr.combRow");
|
|
|
|
// restyle modal
|
|
$modal = $("#addCombModal");
|
|
$modal.find(".modal-title").text("Edit Combatant");
|
|
$modal.find("#addModalOkButton").hide();
|
|
$modal.find("#editModalOkButton").show();
|
|
|
|
// populate modal with values from row
|
|
$modal.find(".combName").val($tr.find(".combName").val());
|
|
$modal.find(".combDice").val($tr.find(".combDice").val());
|
|
$modal.find(".combRea").val($tr.find(".combRea").val());
|
|
$modal.find(".combIni").val($tr.find(".combIni").val());
|
|
|
|
// note which row is being edited
|
|
console.log($("tr.combRow").index($tr));
|
|
$modal.attr("data-row", $("tr.combRow").index($tr));
|
|
|
|
// add handler for enter key
|
|
$("#addCombModal input[class*='comb']").off("keydown");
|
|
$("#addCombModal input[class*='comb']").on("keydown", function (e) {
|
|
if ( e.which == 13 || e.which == 10 ) {
|
|
modifyCombatant();
|
|
$('#addCombModal').modal("hide");
|
|
}
|
|
});
|
|
|
|
// show modal
|
|
$modal.modal("show");
|
|
}
|
|
|
|
|
|
// click handler for act buttons
|
|
function handleActButtonClick (e) {
|
|
// find current table row
|
|
let $tr = $(e.target).parents("tr.combRow");
|
|
let input = $tr.find(".combIni")[0];
|
|
|
|
// reduce ini by 10 but not lower than 0
|
|
input.value = Math.max(parseInt(input.value) - 10, 0);
|
|
$tr.attr("data-ini", input.value);
|
|
|
|
// resort table
|
|
sortTable();
|
|
}
|
|
|
|
|
|
// click handler for remove buttons
|
|
function handleRemoveButtonClick (e) {
|
|
// remove table row
|
|
$(e.target).parents("tr.combRow").remove();
|
|
}
|
|
|
|
|
|
/*
|
|
* Validation functions
|
|
*/
|
|
|
|
// validate a combatant row form by checking for all conditions, including regular HTML5 validation
|
|
function validateCombRowValues(tr) {
|
|
|
|
let inputElements = {
|
|
name: $(tr).find("input[class*='combName']").get(0),
|
|
ini: $(tr).find("input[class*='combIni']").get(0),
|
|
dice: $(tr).find("input[class*='combDice']").get(0),
|
|
rea: $(tr).find("input[class*='combRea']").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 some custom validation
|
|
// first get 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 fine
|
|
return true;
|
|
}
|
|
|
|
|
|
/*
|
|
* Main functions
|
|
*/
|
|
|
|
// add new combatant
|
|
function addCombatant (e) {
|
|
if ( ! validateCombRowValues($("#addCombForm")) ) {
|
|
return;
|
|
}
|
|
|
|
// get values
|
|
let name = $("#addCombModal .combName").val().trim();
|
|
let ini = $("#addCombModal .combIni").val().trim();
|
|
let dice = $("#addCombModal .combDice").val().trim();
|
|
let rea = $("#addCombModal .combRea").val().trim();
|
|
|
|
// roll for initiative if ini is empty
|
|
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
|
|
|
|
// construct jQuery object for table row
|
|
let $tr = $($.parseHTML( [
|
|
'<tr class="combRow" data-ini="', ini, '">\n',
|
|
'<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n',
|
|
'<td>\n',
|
|
'<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', name, '" />\n',
|
|
'</td>\n',
|
|
'<td class="col-sm-2">\n',
|
|
'<input type="number" min="0" max="50" class="form-control combIni" title="click to edit" value="', ini, '" />\n',
|
|
'</td>\n',
|
|
'<td class="col-sm-3">\n',
|
|
'<div class="input-group">\n',
|
|
'<input type="number" min="1" max="5" class="form-control combDice" title="click to edit" value="', dice, '" />\n',
|
|
'<span class="input-group-text">D+</span>\n',
|
|
'<input type="number" min="1" max="20" class="form-control combRea" title="click to edit" value="', rea, '" />\n',
|
|
'</div>\n',
|
|
'</td>\n',
|
|
'<td>\n',
|
|
'<div class="btn-group d-flex">\n',
|
|
'<button type="button" class="btn btn-primary w-50 edit-button" title="Edit combatant\'s values">Edit</button> \n',
|
|
'<button type="button" class="btn btn-warning w-50 act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button> \n',
|
|
'<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>\n',
|
|
'</div>\n',
|
|
'</td>\n',
|
|
'</form>\n',
|
|
'</tr>'].join("")
|
|
));
|
|
|
|
// add handlers to table row object
|
|
// $tr.find("input[class*='comb']").on("blur", handleBlur);
|
|
// $tr.find("input[type='number']").bind('keyup input change', handleBlur);
|
|
$tr.find("button.edit-button").on("click", handleEditButtonClick);
|
|
$tr.find("button.act-button").on("click", handleActButtonClick);
|
|
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
|
|
|
|
// insert combatant row
|
|
$("table#combatants").append($tr);
|
|
sortTable();
|
|
|
|
//reset form values
|
|
$("#addCombModal input[class*='comb']").val("");
|
|
}
|
|
|
|
// modify combatant values
|
|
function modifyCombatant (e) {
|
|
|
|
$("#addCombModal").modal("hide");
|
|
|
|
// validate form
|
|
if ( ! validateCombRowValues($("#addCombForm")) ) {
|
|
return;
|
|
}
|
|
|
|
// get values
|
|
let name = $("#addCombModal .combName").val().trim();
|
|
let ini = $("#addCombModal .combIni").val().trim();
|
|
let dice = $("#addCombModal .combDice").val().trim();
|
|
let rea = $("#addCombModal .combRea").val().trim();
|
|
|
|
// roll for initiative if ini is empty
|
|
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
|
|
|
|
// get correct row
|
|
let index = parseInt($("#addCombModal").attr("data-row"));
|
|
$tr = $("tr.combRow").eq(index);
|
|
|
|
// set new values
|
|
$tr.find(".combName").val(name);
|
|
$tr.find(".combDice").val(dice);
|
|
$tr.find(".combRea").val(rea);
|
|
$tr.find(".combIni").val(ini);
|
|
$tr.attr("data-ini", ini);
|
|
|
|
// clean up
|
|
$("#addCombModal").removeAttr("data-row");
|
|
$("#addCombModal input[class*='comb']").val("");
|
|
}
|
|
|
|
|
|
// start a new combat round
|
|
function newRound() {
|
|
|
|
// are there rows at all?
|
|
let $rows = $("tr.combRow");
|
|
if ( $rows.length == 0 ) {
|
|
return;
|
|
}
|
|
|
|
// reset ini values in cloned rows
|
|
$rows.each( function() {
|
|
let $input = $(this).find(".combIni");
|
|
let dice = $(this).find(".combDice").val();
|
|
if ( dice == "" ) {
|
|
$input.val(0);
|
|
} else {
|
|
$input.val(rollForInitiative(dice, $(this).find(".combRea").val()));
|
|
}
|
|
$(this).attr("data-ini", $input.val());
|
|
});
|
|
|
|
// resort table
|
|
sortTable();
|
|
}
|
|
|
|
|
|
/*
|
|
* Initialize document
|
|
*/
|
|
|
|
$(document).ready(function(){
|
|
// add event handlers to initial buttons and input elements
|
|
$("#newCombAddButton").on("click", handleAddButtonClick);
|
|
$("#newroundModalOkButton").on("click", newRound);
|
|
$("#addModalOkButton").on("click", addCombatant);
|
|
$("#editModalOkButton").on("click", modifyCombatant);
|
|
|
|
$('#addCombModal').on('shown.bs.modal', function() {
|
|
$('.combName').focus();
|
|
})
|
|
});
|