From 208738531a275e47510d924723d3af9c98e02fe7 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@unterdemradar.de>
Date: Sat, 4 Feb 2023 00:06:02 +0100
Subject: [PATCH] - streamlined element IDs, function etc. - sortTable() now
 adds contextual classes to combatantRows (depending on their ini value) -
 moved all inline CSS styles to custom.css

---
 css/custom.css |  24 ++--
 index.html     |  54 ++++-----
 js/sr2ini.js   | 309 +++++++++++++++++++++++++------------------------
 3 files changed, 198 insertions(+), 189 deletions(-)
diff --git a/css/custom.css b/css/custom.css
index 62fa49a..61146cc 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1,20 +1,20 @@
-input
-{
+/*input {
 	opacity: 0.65;
 }
-
-/*tr#newCombRow input {
-	background: paleturquoise;
-}*/
-
+*/
 input:invalid {
 	border: 2px solid red;
 }
 
-tr[data-ini='0'] {
-	background: lightgray;
-}
-
-th#combIniHeader, th#combDiceReaHeader, th#combActionsHeader  {
+.header-align-center {
 	text-align: center;
 }
+
+table.diceandrea {
+	padding: 0;
+	margin: 0;
+}
+
+td.combatantDice, td.combatantRea {
+	width: 45%;
+}
diff --git a/index.html b/index.html
index 717fb51..8f5a7e4 100644
--- a/index.html
+++ b/index.html
@@ -24,28 +24,28 @@
 
 	<body>
 		<div class="container">
-			<header class="navbar navbar-expand navbar-light bg-light">
+			<header class="navbar navbar-expand 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" 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="submit" class="btn btn-outline-secondary" id="addCombatantButton" title="Add combatant">Add Combatant</button>
+					<button type="submit" 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>
-					<tr id="combatants-headrow">
-						<th class="col-sm-5" id="combNameHeader" title="Name">Name</th>
-						<th class="col-sm-2" id="combIniHeader" title="Initiative">Initiative</th>
-						<th class="col-sm-3" id="combDiceReaHeader" title="Initiative Dice and Reaction">Ini Dice & REA</th>
-						<th class="col-sm-2" id="combActionsHeader" title="Available Actions">Actions</th>
-					</tr>
-				</thead>
-				<tbody class="align-middle" id="sortable">
-				</tbody>
-			</table>
-		  </div>
+			<div class="table-responsive">
+				<table class="table table-sm" id="combatantsTable">
+					<thead>
+						<tr>
+							<th class="col-sm-5" title="Name">Name</th>
+							<th class="col-sm-2 header-align-center" title="Initiative">Initiative</th>
+							<th class="col-sm-2 header-align-center" title="Initiative Dice and Reaction">Ini Dice & REA</th>
+							<th class="col-sm-3 header-align-center" title="Available Actions">Actions</th>
+						</tr>
+					</thead>
+					<tbody class="align-middle">
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<div class="modal fade" id="newRoundModal" tabindex="-2">
@@ -60,13 +60,13 @@
 					</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="newroundModalOkButton" data-bs-dismiss="modal">OK</button>
+						<button type="submit" class="btn btn-primary" id="newroundModalOkButton" data-bs-dismiss="modal">OK</button>
 					</div>
 				</div>
 			</div>
 		</div>
 
-		<div class="modal fade" id="addCombModal" tabindex="-1">
+		<div class="modal fade" id="combatantModal" tabindex="-1">
 			<div class="modal-dialog">
 				<div class="modal-content modal-sm">
 					<div class="modal-header">
@@ -74,26 +74,26 @@
 						<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;">
+						<form id="combatantForm" name="combatantModalForm" class="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 />
+								<input type="text" maxlength="40" class="form-control" id="combatantModalName" form="combatantModalForm" 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" />
+									<input type="number" min="1" max="5" class="form-control" id="combatantModalDice" form="combatantModalForm" placeholder="Dice" />
 									<span class="input-group-text">D+</span>
-									<input type="number" min="1" max="25" class="form-control combRea" form="addCombModalForm" placeholder="REA" />
+									<input type="number" min="1" max="25" class="form-control" id="combatantModalRea" form="combatantModalForm" 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" />
+								<input type="number" min="0" max="55" class="form-control" id="combatantModalIni" form="combatantModalForm" 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="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>
+						<button type="button" class="btn btn-secondary" id="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button>
+						<button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK (add)</button>
+						<button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK (edit)</button>
 					</div>
 				</div>
 			</div>
diff --git a/js/sr2ini.js b/js/sr2ini.js
index a07633f..83b2391 100644
--- a/js/sr2ini.js
+++ b/js/sr2ini.js
@@ -7,7 +7,6 @@ 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);
@@ -15,14 +14,37 @@ function rollForInitiative(dice, 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"));
+	// sort rows
+	let $rows = $(".combatantRow").toArray().sort(function(a, b) {
+		return parseInt($(b).find(".combatantIni").text()) - parseInt($(a).find(".combatantIni").text());
 	});
+
+	// append rows in sorted order
 	for ( var i = 0; i < $rows.length; i++ ) {
-		$table.append($rows[i]);
+		$("#combatantsTable").append($rows[i]);
 	}
+
+	// compute highest ini 
+	let iniValues = $.map( $(".combatantIni"), function(td, i) {
+		return parseInt($(td).text());
+	});
+	let iniMax = Math.max.apply(null, iniValues);
+
+	// add contextual classes to rows 
+	$(".combatantRow").each( function() {
+		// default: remove previous classes, disable act button
+		$(this).removeClass("table-primary table-secondary").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
+		// ini is zero: add class
+		if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
+			$(this).addClass("table-secondary");
+		}
+		// ini is max and non-zero: add class, enable act button
+		else if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
+			$(this).addClass("table-primary").find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
+		}
+	})
+
+	return;
 }
 
 
@@ -30,108 +52,80 @@ console.log("OK let's sort");
  *	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");
+// click handler for act buttons
+function handleActButtonClick (e) {
+	// find current table row
+	let $tr = $(e.target).parents(".combatantRow");
+	let ini = $tr.find(".combatantIni").text();
 
-	// 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;
-		}
+	// reduce ini by 10 but not lower than 0
+	ini = Math.max(parseInt(ini) - 10, 0);
 
-		// 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()
-	}
+	// set new ini value
+	$tr.find(".combatantIni").text(ini);
+	
+	// resort table
+	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();
+	$("#combatantModal .modal-title").text("Add Combatant");
+	$("#combatantModalAddOkButton").show();
+	$("#combatantModalEditOkButton").hide();
 
 	// add handler for enter key
-	$("#addCombModal input[class*='comb']").off("keydown");
-	$("#addCombModal input[class*='comb']").on("keydown", function (e) {
+	$("#combatantModal input[id*='combatantModal']").off("keydown");
+	$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
 		if ( e.which == 13 || e.which == 10 ) {
-			addCombatant();
-			$('#addCombModal').modal("hide");
+			addCombatant(e);
 		}
 	});
 
 	// show modal
-	$modal.modal("show");
+	$("#combatantModal").modal("show");
 }
 
 
 // click handler for edit buttons
 function handleEditButtonClick (e) {
-
 	// find current table row
-	let $tr = $(e.target).parents("tr.combRow");
+	let $tr = $(e.target).parents(".combatantRow");
 
 	// restyle modal
-	$modal = $("#addCombModal");
-	$modal.find(".modal-title").text("Edit Combatant");
-	$modal.find("#addModalOkButton").hide();
-	$modal.find("#editModalOkButton").show();
+	$("#combatantModal .modal-title").text("Edit Combatant");
+	$("#combatantModalAddOkButton").hide();
+	$("#combatantModalEditOkButton").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());
+	$("#combatantModalName").val($tr.find(".combatantName").text());
+	$("#combatantModalDice").val($tr.find(".combatantDice").text());
+	$("#combatantModalRea").val($tr.find(".combatantRea").text());
+	$("#combatantModalIni").val($tr.find(".combatantIni").text());
 
-	// note which row is being edited
-console.log($("tr.combRow").index($tr));
-	$modal.attr("data-row", $("tr.combRow").index($tr));
+	// mark which row is being edited
+	$("#combatantModal").attr("data-row", $(".combatantRow").index($tr));
 
 	// add handler for enter key
-	$("#addCombModal input[class*='comb']").off("keydown");
-	$("#addCombModal input[class*='comb']").on("keydown", function (e) {
+	$("#combatantModal input[id*='combatantModal']").off("keydown");
+	$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
 		if ( e.which == 13 || e.which == 10 ) {
-			modifyCombatant();
-			$('#addCombModal').modal("hide");
+			editCombatant(e);
 		}
 	});
 	
 	// 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();
+	$("#combatantModal").modal("show");
 }
 
 
 // click handler for remove buttons
 function handleRemoveButtonClick (e) {
 	// remove table row
-	$(e.target).parents("tr.combRow").remove();
+	$(e.target).parents(".combatantRow").remove();
 }
 
 
@@ -140,16 +134,18 @@ function handleRemoveButtonClick (e) {
  */
 
 // validate a combatant row form by checking for all conditions, including regular HTML5 validation
-function validateCombRowValues(tr) {
+function validateCombatant() {
 
+	// get input elements
 	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)
+		name: $("#combatantModalName").get(0),
+		ini: $("#combatantModalIni").get(0),
+		dice: $("#combatantModalDice").get(0),
+		rea: $("#combatantModalRea").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) 
+	// 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() ) {
@@ -160,8 +156,7 @@ function validateCombRowValues(tr) {
 		return false;
 	}
 
-	// now some custom validation
-	// first get values
+	// now for some custom validation; first we need to get the input values
 	let ini = inputElements["ini"].value.trim();
 	let dice = inputElements["dice"].value.trim();
 	let rea = inputElements["rea"].value.trim();
@@ -182,7 +177,7 @@ function validateCombRowValues(tr) {
 		return false;
 	}
 
-	// ok fine
+	// ok then
 	return true;
 }
 
@@ -193,117 +188,122 @@ function validateCombRowValues(tr) {
 
 // add new combatant 
 function addCombatant (e) {
-	if ( ! validateCombRowValues($("#addCombForm")) ) {
-		return;
+
+	e.preventDefault();
+
+	// validate form
+	if ( ! validateCombatant() ) {
+		return false;
 	}
 
+	// hide modal
+	$("#combatantModal").modal("hide");
+
 	// 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();
+	let name = $("#combatantModalName").val().trim();
+	let ini = $("#combatantModalIni").val().trim();
+	let dice =  $("#combatantModalDice").val().trim();
+	let rea = $("#combatantModalRea").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>&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',
-					'</div>\n',
-				'</td>\n',
-			'</form>\n',
+		'<tr class="combatantRow">\n',
+			'<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
+			'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
+			'<td>\n',
+				'<div>\n',
+				'<table class="table table-sm table-borderless diceandrea">\n',
+					'<tr>\n',
+						'<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</td>\n',
+						'<td class="text-center">D+</td>\n',
+						'<td class="combatantRea text-start" title="Reaction">', rea, '</td>\n',
+					'</tr>\n',
+				'</table>\n',
+				'</div>\n',
+			'</td>\n',
+			'<td>\n',
+				'<div class="btn-group d-flex">\n',
+					'<button type="button" class="btn btn-primary btn-rounded w-50 edit-button" title="Edit combatant\'s values">Edit</button>&nbsp;\n',
+					'<button type="button" class="btn btn-warning btn-rounded w-50 act-button" title="Act and reduce ini by 10">-10</button>&nbsp;\n',
+					'<button type="button" class="btn btn-danger btn-rounded w-50 remove-button" title="Remove combatant">X</button>\n',
+				'</div>\n',
+			'</td>\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);
+	// add handlers to table row buttons 
 	$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();
+	// add handlers to table cells (click to edit)
+	$tr.find("[class*='combatant']").on("click", handleEditButtonClick);
 
-	//reset form values
-	$("#addCombModal input[class*='comb']").val("");
+	// add row to table and sort
+	$("#combatantsTable").append($tr);
+	sortTable();
 }
 
-// modify combatant values
-function modifyCombatant (e) {
 
-	$("#addCombModal").modal("hide");
+// edit combatant values
+function editCombatant (e) {
+	e.preventDefault();
 
 	// validate form
-	if ( ! validateCombRowValues($("#addCombForm")) ) {
-		return;
+	if ( ! validateCombatant() ) {
+		return false;
 	}
 
+	// hide modal
+	$("#combatantModal").modal("hide");
+
 	// 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();
+	let name = $("#combatantModalName").val().trim();
+	let ini = $("#combatantModalIni").val().trim();
+	let dice =  $("#combatantModalDice").val().trim();
+	let rea = $("#combatantModalRea").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);
+	let index = parseInt($("#combatantModal").attr("data-row"));
+	$tr = $("tr.combatantRow").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);
+	$tr.find(".combatantName").text(name);
+	$tr.find(".combatantDice").text(dice);
+	$tr.find(".combatantRea").text(rea);
+	$tr.find(".combatantIni").text(ini);
+
+	// sort table
+	sortTable();
 
 	// clean up
-	$("#addCombModal").removeAttr("data-row");
-	$("#addCombModal input[class*='comb']").val("");
+	$("#combatantModal").removeAttr("data-row");
 }
 
 
 // start a new combat round
 function newRound() {
-
 	// are there rows at all?
-	let $rows = $("tr.combRow");
-	if ( $rows.length == 0 ) {
+	if ( $(".combatantRow").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);
+	// reset ini values 
+	$(".combatantRow").each( function() {
+		let $ini = $(this).find(".combatantIni");
+		let $dice = $(this).find(".combatantDice");
+		if ( $dice.text() == "" ) {
+			$ini.text(1);
+			$ini.text(1);
 		} else {
-			$input.val(rollForInitiative(dice, $(this).find(".combRea").val()));
+			$ini.text(rollForInitiative($dice.text(), $(this).find(".combatantRea").text()));
 		}
-		$(this).attr("data-ini", $input.val());
 	});
 
 	// resort table
@@ -316,13 +316,22 @@ function newRound() {
  */
 
 $(document).ready(function(){
-	// add event handlers to initial buttons and input elements
-	$("#newCombAddButton").on("click", handleAddButtonClick);
+	// add event handlers to navbar buttons
+	$("#addCombatantButton").on("click", handleAddButtonClick);
 	$("#newroundModalOkButton").on("click", newRound);
-	$("#addModalOkButton").on("click", addCombatant);
-	$("#editModalOkButton").on("click", modifyCombatant);
 
-	$('#addCombModal').on('shown.bs.modal', function() {
-		$('.combName').focus();
+	// add event handlers to modal buttons
+	$("#combatantModalAddOkButton").on("click", addCombatant);
+	$("#combatantModalEditOkButton").on("click", editCombatant);
+
+	// always focus name input field when combatant modal appears
+	$('#combatantModal').on('shown.bs.modal', function() {
+		$('#combatantModalName').focus();
 	})
+
+	// always empty input fields when combatant modal disappears
+	$("#combatantModal").on('hidden.bs.modal', function (e) {
+		$("#combatantModal input[id*='combatantModal']").val("");
+	})
+
 });
