removed row for adding combatants; this is now done via modal
added navbar
This commit is contained in:
parent
cfee510e38
commit
9b7826568b
73
index.html
73
index.html
@ -23,8 +23,15 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<br/>
|
||||
<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">
|
||||
<table class="table table-sm table-borderless" id="combatants">
|
||||
<thead>
|
||||
@ -37,38 +44,7 @@
|
||||
</thead>
|
||||
|
||||
<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>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,5 +67,38 @@
|
||||
</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>
|
||||
</html>
|
||||
|
||||
81
js/sr2ini.js
81
js/sr2ini.js
@ -7,7 +7,7 @@ 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);
|
||||
// console.log(roll);
|
||||
ini += roll;
|
||||
}
|
||||
return ini + parseInt(rea);
|
||||
@ -22,8 +22,8 @@ function rollForInitiative(dice, rea) {
|
||||
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 ) ) ) {
|
||||
// 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) ) {
|
||||
@ -75,42 +75,55 @@ function handleRemoveButtonClick (e) {
|
||||
*/
|
||||
|
||||
// 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;
|
||||
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() ) {
|
||||
valid = false;
|
||||
break
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
if ( ! valid ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// now some custom validation
|
||||
// first get values
|
||||
let ini = inputElements[1].value.trim();
|
||||
let dice = inputElements[2].value.trim();
|
||||
let rea = inputElements[3].value.trim();
|
||||
let ini = inputElements["ini"].value.trim();
|
||||
let dice = inputElements["dice"].value.trim();
|
||||
let rea = inputElements["rea"].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("");
|
||||
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[2].setCustomValidity("Values required for both dice and reaction, or none (if ini is given)");
|
||||
inputElements[2].reportValidity();
|
||||
inputElements[2].setCustomValidity("");
|
||||
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;
|
||||
}
|
||||
|
||||
@ -119,9 +132,9 @@ console.log("I/D/R: " + 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("");
|
||||
inputElements["ini"].setCustomValidity("Impossible to reach initiative " + ini + " with " + dice + "D6+" + rea + ", please adjust ini or leave empty");
|
||||
inputElements["ini"].reportValidity();
|
||||
inputElements["ini"].setCustomValidity("");
|
||||
return false;
|
||||
}
|
||||
}*/
|
||||
@ -139,13 +152,15 @@ console.log("I/D/R: " + ini + "/" + dice + "/" + rea);
|
||||
function insertCombRow($tr) {
|
||||
|
||||
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
|
||||
|
||||
// no combatants in table => put new row below the form row
|
||||
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
|
||||
@ -188,14 +203,14 @@ console.log("rea is " + rea + " and currentRowRea is " + currentRowRea);
|
||||
|
||||
// add new combatant
|
||||
function addCombatant (e) {
|
||||
if ( ! validateCombRowValues($("#newCombRow")) ) {
|
||||
if ( ! validateCombRowValues($("#addCombForm")) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// get values
|
||||
let ini = $("#newCombRow .combIni").val().trim();
|
||||
let dice = $("#newCombRow .combDice").val().trim();
|
||||
let rea = $("#newCombRow .combRea").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);
|
||||
@ -205,7 +220,7 @@ function addCombatant (e) {
|
||||
'<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="', $("#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 class="col-sm-2">\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);
|
||||
|
||||
//reset form values
|
||||
$("#newCombRow input[class*='comb']").val("");
|
||||
$("#addCombModal input[class*='comb']").val("");
|
||||
|
||||
return;
|
||||
}
|
||||
@ -247,7 +262,7 @@ function addCombatant (e) {
|
||||
function newRound() {
|
||||
|
||||
// are there rows at all?
|
||||
let $oldRows = $("tr.combRow:not('#newCombRow')");
|
||||
let $oldRows = $("tr.combRow");
|
||||
if ( $oldRows.length == 0 ) {
|
||||
return;
|
||||
}
|
||||
@ -283,11 +298,15 @@ function newRound() {
|
||||
|
||||
$(document).ready(function(){
|
||||
// add event handlers to initial buttons and input elements
|
||||
$("#newCombAddButton").on("click", addCombatant);
|
||||
$("#addCombModalButton").on("click", addCombatant);
|
||||
$("#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 ) {
|
||||
addCombatant();
|
||||
$('#addCombModal').modal("hide");
|
||||
}
|
||||
});
|
||||
$('#addCombModal').on('shown.bs.modal', function() {
|
||||
$('.combName').focus();
|
||||
})
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user