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

now tracking optional dice/rea values, rolling for initiative, and starting new rounds

Browse Source
This commit is contained in:
Tobias 2022-06-24 21:19:34 +02:00
parent c728923dba
commit 8d9fdb0f6f
1 changed files with 219 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
js/sr2ini.js
View File

@ -1,44 +1,46 @@
/* Notes /*
- different behavior sr2/3; but I'll only implement 2e now * helper functions
- Initiative could also offer to enter Ini dice (1-5) and Reaction (0-20); that way the app itself could roll their ini
- highlight current combatant -> es ist sowieso immer der ganz oben dran (Ausnahme: mehrere mit der gleichen ini)
- how do I handle several combatants with the same ini?
- style mit bootstrap
*/ */
// roll for initiative with the given reaction and number of ini dice
function rollForInitiative(dice, rea) {
// keydown handler for editable ini elements; gets called when for every key press while editing an ini value let ini = 0;
function handleIniKeydown (e) { for ( let i = 0; i < parseInt(dice); i++ ) {
var keycode = e.which; roll = Math.floor(Math.random() * 6) + 1;
console.log(roll);
// not among the allowed keys: ignore the keystroke ini += roll;
if ( !
( keycode == 8 //backspace
|| keycode == 9 //tab
|| keycode == 46 //del
|| keycode == 27 //escape
|| keycode >= 35 && keycode <= 40 //arrows, pos1, end
|| keycode >= 48 && keycode <= 57 && $(this).text().length <= 1 ) ) //number key, and text length is less than 2
{
e.preventDefault();
};
// enter key: trigger blur
// note: keycode is 13 except on safari and iphone where it's 10
if ( keycode == 13 || keycode == 10 ) {
$(this).trigger("blur");
} }
return ini + parseInt(rea);
} }
// keydown handler for editable name elements /*
function handleNameKeydown (e) { * Event handler functions
// enter key: don't add newline, just trigger blur */
// note: keycode is 13 except on safari and iphone where it's 10
if ( e.which == 13 || e.keycode == 10 ) { // 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 the blurred input element is not in #newCombRow and focus is not going to another input in the same row
if ( ( ! $tr.is("#newCombRow") ) && ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) {
// validation check
if ( ! validateCombRowValues($tr) ) {
e.preventDefault(); e.preventDefault();
$(this).trigger("blur"); return false;
}
// did value stay the same? do nothing then
if ( e.target.value == $(e.target).parents("tr").attr("data-ini") ) {
return true;
}
// value changed => reposition row
$(e.target).parents("tr").attr("data-ini", e.target.value);
let $trc = $tr.clone(true);
$tr.remove();
insertCombRow($trc);
} }
} }
@ -47,18 +49,17 @@ function handleNameKeydown (e) {
function handleActButtonClick (e) { function handleActButtonClick (e) {
// find current table row // find current table row
let $tr = $(e.target).parents("tr.combRow").clone(true); let $tr = $(e.target).parents("tr.combRow").clone(true);
let input = $tr.find(".combIni")[0];
// reduce ini by 10 but not lower than 0 // reduce ini by 10 but not lower than 0
let ini = parseInt($tr.find(".ini-editable").text()) - 10; input.value = Math.max(parseInt(input.value) - 10, 0);
if ( ini <= 0 ) { $(input).parents("tr").attr("data-ini", input.value);
ini = 0;
$tr.addClass("ini-zero");
}
$tr.find(".ini-editable").text(ini);
// remove original current table row and insert clone at newly calculated position // remove original current table row and insert clone at newly calculated position
$(e.target).parents("tr.combRow").remove(); $(e.target).parents("tr.combRow").remove();
insertCombRow($tr); insertCombRow($tr);
return;
} }
@ -68,107 +69,224 @@ function handleRemoveButtonClick (e) {
$(e.target).parents("tr.combRow").remove(); $(e.target).parents("tr.combRow").remove();
} }
// Blur handler for ini fields. Sets CSS classes and repositions the combatant row
function handleIniBlur (e) {
// find current table row
let $tr = $(e.target).parents("tr.combRow").clone(true);
// add/remove class ini-zero /*
if ( $tr.find(".ini-editable").text() == "0" ) { * Validation functions
$tr.addClass("ini-zero"); */
} else {
$tr.removeClass("ini-zero"); // validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombRowValues($tr) {
let inputElements = $($tr).find("input[class*='comb']").toArray();
// do standard HTML5 form validation first (validates that name is not empty and that all other values are numbers within their individual ranges)
let valid = true;
for (let input of inputElements) {
if ( ! input.reportValidity() ) {
valid = false;
break
}
}
if ( ! valid ) {
return false;
} }
//reposition // now some custom validation
$(e.target).parents("tr.combRow").remove(); // first get values
insertCombRow($tr); let ini = inputElements[1].value.trim();
let dice = inputElements[2].value.trim();
let rea = inputElements[3].value.trim();
console.log("I/D/R: " + ini + "/" + dice + "/" + rea);
// invalidate if ini, dice and rea are all empty
if ( ini == "" && ( dice == "" || rea == "" ) ) {
inputElements[1].setCustomValidity("Requiring values for initiative, ini dice and reaction, or all three");
inputElements[1].reportValidity();
inputElements[1].setCustomValidity("");
return false;
} }
// invalidate if dice or rea is empty but not both
if ( ( dice == "" ) != ( rea == "" ) ) {
inputElements[2].setCustomValidity("Values required for both dice and reaction, or none (if ini is given)");
inputElements[2].reportValidity();
inputElements[2].setCustomValidity("");
return false;
}
// invalidate if value for ini doesn't align with values for dice+rea
if ( ini != "" && dice != "" && rea != "" ) {
let d = parseInt(dice);
let r = parseInt(rea);
if ( ini < d+r || ini > d*6+r ) {
inputElements[1].setCustomValidity("Impossible to reach initiative " + ini + " with " + dice + "D6+" + rea + ", please adjust ini or leave empty");
inputElements[1].reportValidity();
inputElements[1].setCustomValidity("");
return false;
}
}
// ok fine
return true;
}
/*
* Main functions
*/
// inserts a combatant table row (in form of a jQuery object) at the correct position in the table // inserts a combatant table row (in form of a jQuery object) at the correct position in the table
function insertCombRow($tr) { function insertCombRow($tr) {
let ini = parseInt($tr.find(".ini-editable").text());
let $combRows = $("tr.combRow"); let ini = parseInt($tr.find(".combIni").val());
let $combRows = $("tr.combRow:not(#newCombRow)");
// find correct position for new row // find correct position for new row
// no combatants in table? put the new row below the form row // no combatants in table => put new row below the form row
if ( $combRows.length == 0 ) { if ( $combRows.length == 0 ) {
$("tr#formRow").after($tr); $("tr#newCombRow").after($tr);
} }
// ini is less than the lowest in table? put the new row at the end // ini is less than the lowest in table => put new row at the end
else if ( ini <= parseInt($combRows.last().find(".ini-editable").text() ) ) { else if ( ini < parseInt($combRows.last().find(".combIni").val() ) ) {
$("tbody#sortable").append($tr); $combRows.last().after($tr);
} }
// compare ini with the ones in table from the top down) and put the new row in the first spot where its ini is larger // ok, compare ini with the ones in table (top to bottom)
else { else {
for ( var i = 0; i < $combRows.length; i++ ) { for ( let i = 0; i < $combRows.length; i++ ) {
if ( ini > parseInt($combRows.eq(i).find(".ini-editable").text()) ) { let currentRowIni = parseInt($combRows.eq(i).find(".combIni").val());
$("tr.combRow:eq(" + i + ")").before($tr);
// ini larger than the one already in table? insert before that row
if ( ini > currentRowIni ) {
$combRows.eq(i).before($tr);
break; break;
} }
// ini equal to the one already in table => compare rea
else if ( ini == currentRowIni ) {
let rea = parseInt($tr.find(".combRea").val());
let currentRowRea = parseInt($combRows.eq(i).find(".combRea").val());
console.log("rea is " + rea + " and currentRowRea is " + currentRowRea);
// one or two values for rea missing, or new row rea larger than current row rea => insert before
if ( rea != NaN && currentRowRea != NaN && rea > currentRowRea ) {
$combRows.eq(i).before($tr);
break;
}
// we're already at the last row => insert after
if ( i + 1 == $combRows.length ) {
$combRows.eq(i).after($tr);
}
}
}
} }
} }
return;
}
// add new combatant // add new combatant
function addCombatant (e) { function addCombatant (e) {
// form not validating? return if ( ! validateCombRowValues($("#newCombRow")) ) {
if ( ! ( $("#combForm")[0].checkValidity() ) ) {
console.log("form's not validating :-(");
// do some javascript magic to trigger a form submit which will show validation messages while not actually going through
$('<input type="submit"/>').hide().appendTo("#combForm").click().remove();
return; return;
} }
// strip ini value of leading zero // get values
let ini = $("#combIni").val(); let ini = $("#newCombRow .combIni").val().trim();
if ( ini.length == 2 && ini[0] == "0" ) { let dice = $("#newCombRow .combDice").val().trim();
ini = ini[1]; let rea = $("#newCombRow .combRea").val().trim();
}
console.log("Ini is: " + ini); // roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// construct jQuery object for table row // construct jQuery object for table row
let $tr = $($.parseHTML( [ let $tr = $($.parseHTML( [
'<tr class="combRow', ini == "0" ? ' ini-zero' : '', '">\n', '<tr class="combRow" data-ini="', ini, '">\n',
'<td contenteditable="true" class="ini-editable" title="click to edit">', ini , '</td>', '<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n',
'<td contenteditable="true" class="name-editable" title="click to edit">', $("#combName").val(), '</td>', '<td>\n',
'<td>', '<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', $("#newCombRow .combName").val().trim(), '" />\n',
'<div class="btn-group d-flex">', '</td>\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>', '<td class="col-sm-2">\n',
'&nbsp;', '<input type="number" min="0" max="50" class="form-control combIni" title="click to edit" value="', ini, '" />\n',
'<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>', '</td>\n',
'</div>', '<td class="col-sm-3">\n',
'</td>', '<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-warning w-50 act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>&nbsp;\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("") '</tr>'].join("")
)); ));
// add handlers to table row object // add handlers to table row object
$tr.find(".ini-editable").on("keydown", handleIniKeydown).on("blur", handleIniBlur); $tr.find("input[class*='comb']").on("blur", handleBlur);
$tr.find(".name-editable").on("keydown", handleNameKeydown); $tr.find("button.act-button").on("click", handleActButtonClick);
$tr.find(".act-button").on("click", handleActButtonClick); $tr.find("button.remove-button").on("click", handleRemoveButtonClick);
$tr.find(".remove-button").on("click", handleRemoveButtonClick);
// insert combatant row // insert combatant row
insertCombRow($tr); insertCombRow($tr);
//reset form values //reset form values
$("#combIni, #combName").val(""); $("#newCombRow input[class*='comb']").val("");
return; return;
} }
// start a new combat round
function newRound() {
// are there rows at all?
let $oldRows = $("tr.combRow:not('#newCombRow')");
if ( $oldRows.length == 0 ) {
return;
}
// clone existing rows
let $newRows = $oldRows.clone(true);
// reset ini values in cloned rows
$newRows.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());
});
// remove old rows
$oldRows.remove();
// insert cloned rows
$newRows.each( function() {
insertCombRow($(this));
});
}
/*
* Initialize document
*/
$(document).ready(function(){ $(document).ready(function(){
// add handlers for using the Add button or enter key in the new combatant form // add event handlers to initial buttons and input elements
$("#combAddButton").on("click", addCombatant); $("#newCombAddButton").on("click", addCombatant);
$("#combIni, #combName").on("keydown", function (e) { $("#newRoundOkButton").on("click", newRound);
$("#newCombRow input[class*='comb']").on("blur", handleBlur).on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) { if ( e.which == 13 || e.which == 10 ) {
$("#combAddButton").trigger("click"); addCombatant();
} }
}); });
}); });