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

Introduced edit button in each combRows that lets the user modify values through the modal

Browse Source
This commit is contained in:
Tobias 2023-02-03 01:27:59 +01:00
parent 75d6a54e57
commit 07747b3b18
2 changed files with 107 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -27,7 +27,7 @@
<header class="navbar navbar-expand navbar-light bg-light"> <header class="navbar navbar-expand navbar-light bg-light">
<span class="navbar-brand">Shadowrun 2 Initiative Tracker</span> <span class="navbar-brand">Shadowrun 2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation"> <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="newCombAddButton" 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> <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> </nav>
</header> </header>
@ -42,14 +42,13 @@
<th class="col-sm-2" id="combActionsHeader" title="Available Actions">Actions</th> <th class="col-sm-2" id="combActionsHeader" title="Available Actions">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody class="align-middle" id="sortable"> <tbody class="align-middle" id="sortable">
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="modal fade" id="newRoundModal" tabindex="-1"> <div class="modal fade" id="newRoundModal" tabindex="-2">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content modal-sm"> <div class="modal-content modal-sm">
<div class="modal-header"> <div class="modal-header">
@ -61,7 +60,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="newRoundOkButton" data-bs-dismiss="modal">OK</button> <button type="button" class="btn btn-primary" id="newroundModalOkButton" data-bs-dismiss="modal">OK</button>
</div> </div>
</div> </div>
</div> </div>
@ -93,7 +92,8 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <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> <button type="button" class="btn btn-primary" id="addModalOkButton" data-bs-dismiss="modal">OK (add)</button>
<button type="button" class="btn btn-primary" id="editModalOkButton" data-bs-dismiss="modal" style="display: none">OK (edit)</button>
</div> </div>
</div> </div>
</div> </div>

186
js/sr2ini.js
View File

@ -18,7 +18,7 @@ function sortTable() {
console.log("OK let's sort"); console.log("OK let's sort");
let $table = $("table#combatants"); let $table = $("table#combatants");
let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) { let $rows = $table.find("tr.combRow").toArray().sort(function(a, b) {
return $(b).attr("data-ini") - $(a).attr("data-ini"); return parseInt($(b).attr("data-ini")) - parseInt($(a).attr("data-ini"));
}); });
for ( var i = 0; i < $rows.length; i++ ) { for ( var i = 0; i < $rows.length; i++ ) {
$table.append($rows[i]); $table.append($rows[i]);
@ -54,6 +54,64 @@ function handleBlur (e) {
} }
} }
// 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 // click handler for act buttons
function handleActButtonClick (e) { function handleActButtonClick (e) {
@ -84,7 +142,6 @@ 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 = { let inputElements = {
name: $(tr).find("input[class*='combName']").get(0), name: $(tr).find("input[class*='combName']").get(0),
ini: $(tr).find("input[class*='combIni']").get(0), ini: $(tr).find("input[class*='combIni']").get(0),
@ -99,13 +156,6 @@ function validateCombRowValues(tr) {
valid = false; valid = false;
} }
}) })
/* for (let input in inputElements) {
if ( ! input.reportValidity() ) {
valid = false;
break
}
} */
if ( ! valid ) { if ( ! valid ) {
return false; return false;
} }
@ -132,18 +182,6 @@ function validateCombRowValues(tr) {
return false; 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["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;
}
}*/
// ok fine // ok fine
return true; return true;
} }
@ -153,60 +191,6 @@ function validateCombRowValues(tr) {
* Main functions * Main functions
*/ */
/*
// inserts a combatant table row (in form of a jQuery object) at the correct position in the table
function insertCombRow($tr) {
let ini = parseInt($tr.find(".combIni").val());
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 ) {
$("tbody#sortable").append($tr);
}
// ini is less than the lowest in table => put new row at the end
else if ( ini < parseInt($combRows.last().find(".combIni").val() ) ) {
$combRows.last().after($tr);
}
// ok, compare ini with the ones in table (top to bottom)
else {
for ( let i = 0; i < $combRows.length; i++ ) {
let currentRowIni = parseInt($combRows.eq(i).find(".combIni").val());
// ini larger than the one already in table? insert before that row
if ( ini > currentRowIni ) {
$combRows.eq(i).before($tr);
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);
}
}
}
}
}
*/
// add new combatant // add new combatant
function addCombatant (e) { function addCombatant (e) {
if ( ! validateCombRowValues($("#addCombForm")) ) { if ( ! validateCombRowValues($("#addCombForm")) ) {
@ -241,6 +225,7 @@ function addCombatant (e) {
'</td>\n', '</td>\n',
'<td>\n', '<td>\n',
'<div class="btn-group d-flex">\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>&nbsp;\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-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', '<button type="button" class="btn btn-danger w-50 remove-button" title="Remove combatant">X</button>\n',
'</div>\n', '</div>\n',
@ -250,8 +235,9 @@ function addCombatant (e) {
)); ));
// add handlers to table row object // add handlers to table row object
$tr.find("input[class*='comb']").on("blur", handleBlur); // $tr.find("input[class*='comb']").on("blur", handleBlur);
// $tr.find("input[type='number']").bind('keyup input change', 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.act-button").on("click", handleActButtonClick);
$tr.find("button.remove-button").on("click", handleRemoveButtonClick); $tr.find("button.remove-button").on("click", handleRemoveButtonClick);
@ -263,6 +249,41 @@ function addCombatant (e) {
$("#addCombModal input[class*='comb']").val(""); $("#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 // start a new combat round
function newRound() { function newRound() {
@ -296,14 +317,11 @@ 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
$("#addCombModalButton").on("click", addCombatant); $("#newCombAddButton").on("click", handleAddButtonClick);
$("#newRoundOkButton").on("click", newRound); $("#newroundModalOkButton").on("click", newRound);
$("#addCombModal input[class*='comb']").on("keydown", function (e) { $("#addModalOkButton").on("click", addCombatant);
if ( e.which == 13 || e.which == 10 ) { $("#editModalOkButton").on("click", modifyCombatant);
addCombatant();
$('#addCombModal').modal("hide");
}
});
$('#addCombModal').on('shown.bs.modal', function() { $('#addCombModal').on('shown.bs.modal', function() {
$('.combName').focus(); $('.combName').focus();
}) })