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

removed row for adding combatants; this is now done via modal

Browse Source 
added navbar
This commit is contained in:
Tobias 2023-02-02 15:19:56 +01:00
parent cfee510e38
commit 9b7826568b
2 changed files with 91 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
index.html
View File

@ -23,8 +23,15 @@
</head> </head>
<body> <body>
<br/>
<div class="container"> <div class="container">
<header class="navbar navbar-expand navbar-light bg-light">
<span class="navbar-brand">Shadowrun 2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
<button type="button" class="btn btn-outline-secondary" id="newCombAddButton" data-bs-toggle="modal" data-bs-target="#addCombModal" title="Add combatant to fight">Add Combatant …</button>
<button type="button" class="btn btn-outline-secondary" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="begin new round">New Round</button>
</nav>
</header>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-sm table-borderless" id="combatants"> <table class="table table-sm table-borderless" id="combatants">
<thead> <thead>
@ -37,38 +44,7 @@
</thead> </thead>
<tbody class="align-middle" id="sortable"> <tbody class="align-middle" id="sortable">
<tr class="table-primary combRow" id="newCombRow">
<form name="newCombForm" class="combForm was-validated" onsubmit="return false;">
<td>
<input type="text" maxlength="40" class="form-control combName" form="newCombForm" placeholder="Name" required />
</td>
<td class="col-sm-2">
<input type="number" min="0" max="50" class="form-control combIni" form="newCombForm" placeholder="Ini" />
</td>
<td class="col-sm-3">
<div class="input-group">
<input type="number" min="1" max="5" class="form-control combDice" form="newCombForm" placeholder="Dice" />
<span class="input-group-text">D+</span>
<input type="number" min="1" max="20" class="form-control combRea" form="newCombForm" placeholder="REA" />
</div>
</td>
<td>
<div class="btn-group d-flex">
<button type="button" class="btn btn-primary" id="newCombAddButton" title="Add combatant to fight" form="newComForm">Add</button>
</div>
</td>
</form>
</tr>
<tr id="newRoundRow">
<td colspan="3" />
<td>
<div class="btn-group d-flex">
<button type="button" class="btn btn-secondary" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="begin new round">New Round</button>
</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
@ -91,5 +67,38 @@
</div> </div>
</div> </div>
<div class="modal fade" id="addCombModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content modal-sm">
<div class="modal-header">
<h5 class="modal-title">Add New Combatant</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="addCombForm" name="addCombModalForm" class="combForm was-validated" onsubmit="return false;">
<div class="form-outline mb-4">
<input type="text" maxlength="40" class="form-control combName" form="addCombModalForm" id="newCombName" placeholder="Name" required />
</div>
<div class="form-outline mb-4">
<div class="input-group">
<input type="number" min="1" max="5" class="form-control combDice" form="addCombModalForm" placeholder="Dice" />
<span class="input-group-text">D+</span>
<input type="number" min="1" max="25" class="form-control combRea" form="addCombModalForm" placeholder="REA" />
</div>
<div class="form-outline mb-4">
</div>
<input type="number" min="0" max="55" class="form-control combIni" form="addCombModalForm" placeholder="Ini" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="addCombModalButton" data-bs-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

81
js/sr2ini.js
View File

@ -7,7 +7,7 @@ function rollForInitiative(dice, rea) {
let ini = 0; let ini = 0;
for ( let i = 0; i < parseInt(dice); i++ ) { for ( let i = 0; i < parseInt(dice); i++ ) {
roll = Math.floor(Math.random() * 6) + 1; roll = Math.floor(Math.random() * 6) + 1;
console.log(roll); // console.log(roll);
ini += roll; ini += roll;
} }
return ini + parseInt(rea); return ini + parseInt(rea);
@ -22,8 +22,8 @@ function rollForInitiative(dice, rea) {
function handleBlur (e) { function handleBlur (e) {
let $tr = $(e.target).parents("tr"); 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 // trigger validation check only if focus is not going to another input in the same row
if ( ( ! $tr.is("#newCombRow") ) && ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) { if ( ( ! ( $(e.relatedTarget).is("input") && $(e.relatedTarget).parents("tr") == $tr ) ) ) {
// validation check // validation check
if ( ! validateCombRowValues($tr) ) { if ( ! validateCombRowValues($tr) ) {
@ -75,42 +75,55 @@ function handleRemoveButtonClick (e) {
*/ */
// validate a combatant row form by checking for all conditions, including regular HTML5 validation // validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombRowValues($tr) { function validateCombRowValues(tr) {
let inputElements = $($tr).find("input[class*='comb']").toArray(); // let inputElements = $($tr).find("input[class*='comb']").toArray();
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 (validates that name is not empty and that all other values are numbers within their individual ranges) // 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; let valid = true;
for (let input of inputElements) { Object.values(inputElements).forEach(function(input) {
console.log(input);
if ( ! input.reportValidity() ) {
valid = false;
}
})
/* for (let input in inputElements) {
if ( ! input.reportValidity() ) { if ( ! input.reportValidity() ) {
valid = false; valid = false;
break break
} }
} } */
if ( ! valid ) { if ( ! valid ) {
return false; return false;
} }
// now some custom validation // now some custom validation
// first get values // first get values
let ini = inputElements[1].value.trim(); let ini = inputElements["ini"].value.trim();
let dice = inputElements[2].value.trim(); let dice = inputElements["dice"].value.trim();
let rea = inputElements[3].value.trim(); let rea = inputElements["rea"].value.trim();
console.log("I/D/R: " + ini + "/" + dice + "/" + rea); console.log("I/D/R: " + ini + "/" + dice + "/" + rea);
// invalidate if ini, dice and rea are all empty // invalidate if ini, dice and rea are all empty
if ( ini == "" && ( dice == "" || rea == "" ) ) { if ( ini == "" && ( dice == "" || rea == "" ) ) {
inputElements[1].setCustomValidity("Requiring values for initiative, ini dice and reaction, or all three"); inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three");
inputElements[1].reportValidity(); inputElements["ini"].reportValidity();
inputElements[1].setCustomValidity(""); inputElements["ini"].setCustomValidity("");
return false; return false;
} }
// invalidate if dice or rea is empty but not both // invalidate if dice or rea is empty but not both
if ( ( dice == "" ) != ( rea == "" ) ) { if ( ( dice == "" ) != ( rea == "" ) ) {
inputElements[2].setCustomValidity("Values required for both dice and reaction, or none (if ini is given)"); inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
inputElements[2].reportValidity(); inputElements["dice"].reportValidity();
inputElements[2].setCustomValidity(""); inputElements["dice"].setCustomValidity("");
return false; return false;
} }
@ -119,9 +132,9 @@ console.log("I/D/R: " + ini + "/" + dice + "/" + rea);
let d = parseInt(dice); let d = parseInt(dice);
let r = parseInt(rea); let r = parseInt(rea);
if ( ini < d+r || ini > d*6+r ) { 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["ini"].setCustomValidity("Impossible to reach initiative " + ini + " with " + dice + "D6+" + rea + ", please adjust ini or leave empty");
inputElements[1].reportValidity(); inputElements["ini"].reportValidity();
inputElements[1].setCustomValidity(""); inputElements["ini"].setCustomValidity("");
return false; return false;
} }
}*/ }*/
@ -139,13 +152,15 @@ console.log("I/D/R: " + ini + "/" + dice + "/" + rea);
function insertCombRow($tr) { function insertCombRow($tr) {
let ini = parseInt($tr.find(".combIni").val()); let ini = parseInt($tr.find(".combIni").val());
let $combRows = $("tr.combRow:not(#newCombRow)"); let $combRows = $("tr.combRow");
console.log($("tbody#sortable"));
// find correct position for new row // find correct position for new row
// no combatants in table => put 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#newCombRow").after($tr); $("tbody#sortable").append($tr);
} }
// ini is less than the lowest in table => put new row at the end // ini is less than the lowest in table => put new row at the end
@ -188,14 +203,14 @@ console.log("rea is " + rea + " and currentRowRea is " + currentRowRea);
// add new combatant // add new combatant
function addCombatant (e) { function addCombatant (e) {
if ( ! validateCombRowValues($("#newCombRow")) ) { if ( ! validateCombRowValues($("#addCombForm")) ) {
return; return;
} }
// get values // get values
let ini = $("#newCombRow .combIni").val().trim(); let ini = $("#addCombModal .combIni").val().trim();
let dice = $("#newCombRow .combDice").val().trim(); let dice = $("#addCombModal .combDice").val().trim();
let rea = $("#newCombRow .combRea").val().trim(); let rea = $("#addCombModal .combRea").val().trim();
// roll for initiative if ini is empty // roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea); ini = (ini != "") ? ini : rollForInitiative(dice, rea);
@ -205,7 +220,7 @@ function addCombatant (e) {
'<tr class="combRow" data-ini="', ini, '">\n', '<tr class="combRow" data-ini="', ini, '">\n',
'<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n', '<form name="combForm" class="combForm needs-validation" onsubmit="return false;">\n',
'<td>\n', '<td>\n',
'<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', $("#newCombRow .combName").val().trim(), '" />\n', '<input type="text" required="" maxlength="40" class="form-control combName" title="click to edit" value="', $("#addCombModal .combName").val().trim(), '" />\n',
'</td>\n', '</td>\n',
'<td class="col-sm-2">\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', '<input type="number" min="0" max="50" class="form-control combIni" title="click to edit" value="', ini, '" />\n',
@ -237,7 +252,7 @@ function addCombatant (e) {
insertCombRow($tr); insertCombRow($tr);
//reset form values //reset form values
$("#newCombRow input[class*='comb']").val(""); $("#addCombModal input[class*='comb']").val("");
return; return;
} }
@ -247,7 +262,7 @@ function addCombatant (e) {
function newRound() { function newRound() {
// are there rows at all? // are there rows at all?
let $oldRows = $("tr.combRow:not('#newCombRow')"); let $oldRows = $("tr.combRow");
if ( $oldRows.length == 0 ) { if ( $oldRows.length == 0 ) {
return; return;
} }
@ -283,11 +298,15 @@ function newRound() {
$(document).ready(function(){ $(document).ready(function(){
// add event handlers to initial buttons and input elements // add event handlers to initial buttons and input elements
$("#newCombAddButton").on("click", addCombatant); $("#addCombModalButton").on("click", addCombatant);
$("#newRoundOkButton").on("click", newRound); $("#newRoundOkButton").on("click", newRound);
$("#newCombRow input[class*='comb']").on("blur", handleBlur).on("keydown", function (e) { $("#addCombModal input[class*='comb']").on("keydown", function (e) {
if ( e.which == 13 || e.which == 10 ) { if ( e.which == 13 || e.which == 10 ) {
addCombatant(); addCombatant();
$('#addCombModal').modal("hide");
} }
}); });
$('#addCombModal').on('shown.bs.modal', function() {
$('.combName').focus();
})
}); });