Combatant order is now established by re-sorting table after every value change (instead of re-positioning the modified row)

js/sr2ini.js

@@ -13,6 +13,18 @@ function rollForInitiative(dice, rea) {
 	return ini + parseInt(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 $(b).attr("data-ini") - $(a).attr("data-ini");
+	});
+	for ( var i = 0; i < $rows.length; i++ ) {
+		$table.append($rows[i]);
+	}
+}
+
 
 /*
  *	Event handler functions
@@ -38,9 +50,7 @@ function handleBlur (e) {
 					
 		// Ini value changed => reposition row
 		$tr.attr("data-ini", $tr.find(".combIni")[0].value);
-		let $trc = $tr.clone(true);
-		$tr.remove();
-		insertCombRow($trc);
+		sortTable()
 	}
 }
 
@@ -48,18 +58,15 @@ function handleBlur (e) {
 // click handler for act buttons
 function handleActButtonClick (e) {
 	// find current table row
-	let $tr = $(e.target).parents("tr.combRow").clone(true);
+	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);
-	$(input).parents("tr").attr("data-ini", input.value);
+	$tr.attr("data-ini", input.value);
 
-	// remove original current table row and insert clone at newly calculated position 
-	$(e.target).parents("tr.combRow").remove();
-	insertCombRow($tr);
-
-	return;
+	// resort table
+	sortTable();
 }
 
 
@@ -88,7 +95,6 @@ function validateCombRowValues(tr) {
 	// 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) {
-console.log(input);
 		if ( ! input.reportValidity() ) {
 			valid = false;
 		}
@@ -109,7 +115,6 @@ console.log(input);
 	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 == "" ) ) {
@@ -148,6 +153,7 @@ console.log("I/D/R: " + ini + "/" + dice + "/" + rea);
  *	Main functions
  */
 
+/*
 // inserts a combatant table row (in form of a jQuery object) at the correct position in the table 
 function insertCombRow($tr) {
 
@@ -199,7 +205,7 @@ console.log("rea is " + rea + " and currentRowRea is " + currentRowRea);
 		}
 	}
 }
-
+*/
 
 // add new combatant 
 function addCombatant (e) {
@@ -208,6 +214,7 @@ function addCombatant (e) {
 	}
 
 	// 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();
@@ -220,7 +227,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="', $("#addCombModal .combName").val().trim(), '" />\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',
@@ -244,17 +251,16 @@ function addCombatant (e) {
 
 	// add handlers to table row object
 	$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.act-button").on("click", handleActButtonClick);
 	$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
 
 	// insert combatant row
-	insertCombRow($tr);
+	$("table#combatants").append($tr);
+	sortTable();
 
 	//reset form values
 	$("#addCombModal input[class*='comb']").val("");
-	
-	return;
 }
 
 
@@ -262,16 +268,13 @@ function addCombatant (e) {
 function newRound() {
 
 	// are there rows at all?
-	let $oldRows = $("tr.combRow");
-	if ( $oldRows.length == 0 ) {
+	let $rows = $("tr.combRow");
+	if ( $rows.length == 0 ) {
 		return;
 	}
 
-	// clone existing rows 
-	let $newRows = $oldRows.clone(true);
-
 	// reset ini values in cloned rows
-	$newRows.each( function() {
+	$rows.each( function() {
 		let $input = $(this).find(".combIni");
 		let dice = $(this).find(".combDice").val();
 		if ( dice == "" ) {
@@ -282,13 +285,8 @@ function newRound() {
 		$(this).attr("data-ini", $input.val());
 	});
 
-	// remove old rows
-	$oldRows.remove();
-
-	// insert cloned rows
-	$newRows.each( function() {
-		insertCombRow($(this));
-	});
+	// resort table
+	sortTable();
 }