- streamlined handling of contextual classes and damage badges; these are now all being applied in sortTable only

- combatantModal now displays wound penalties
- when two combatants have the same ini: only compare reaction values if both are set, report tie otherwise
- elegantified certain commands, e.g. retrieving damage type in applyDamage (formerly handleDamageMonitorClick)
- rearranged some of the functions in sr2ini.js

css/custom.css

@@ -21,7 +21,7 @@ input:invalid {
 	border: 2px solid red;
 }
 
-.out-of-commission {
+.ko-or-dead {
 	color: coral;
 	text-decoration: line-through;
 	background-color: darkslategray;

index.html

@@ -88,6 +88,7 @@
 							</div>
 							<div class="my-2">
 								<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" />
+								<label for="combatantModalIni" class="form-label">Wound penalties: -<span id="penalty-stun">0</span> (stun) and -<span id="penalty-physical">0</span> (physical)</label>
 							</div>
 						</form>
 					</div>

js/sr2ini.js

@@ -1,3 +1,7 @@
+/*
+ *	constants definitions
+ */
+
 const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
 const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"];
 
@@ -36,9 +40,16 @@ const DAMAGE_MONITOR_HTML = [
 	'<tr><th colspan="2"><button type)"submit" class="btn btn-sm btn-light remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirmModal"><img src="img/trash.png" /></button></th></tr>\n',
 '</table>'].join("");
 
-const MAX_INI_CLASS = "table-primary";
+const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
-const ZERO_INI_CLASS = "table-secondary";
+const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
-const REGULAR_INI_CLASS = "table-success";
+
+const CONTEXTUAL_CLASSES = {
+	MAX_INI: "table-primary",
+	ZERO_INI: "table-secondary",
+	REGULAR_INI: "table-success",
+	KO_OR_DEAD: "ko-or-dead",
+};
+
 
 /*
  *	helper functions
@@ -47,7 +58,6 @@ const REGULAR_INI_CLASS = "table-success";
 // roll for initiative with the given reaction and number of ini dice  
 function rollForInitiative(dice, rea) {
 	let diceRolls = Array.from({length: parseInt(dice)}, () => Math.ceil(Math.random() * 6));	
-console.log(diceRolls);
 	return diceRolls.reduce((a, b) => a + b, 0) + parseInt(rea);
 }
 
@@ -56,90 +66,49 @@ console.log(diceRolls);
 function whoGoesFirst(a, b) {
 
 	// check for K.O./death
-	let tmpA = $(a).hasClass("out-of-commission") ? -1 : parseInt($(a).find(".combatantIni").text()) || 0;
+	let tmpA = $(a).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(a).find(".combatantIni").text()) || 0;
-	let tmpB = $(b).hasClass("out-of-commission") ? -1 : parseInt($(b).find(".combatantIni").text()) || 0;
+	let tmpB = $(b).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(b).find(".combatantIni").text()) || 0;
 
 	// compare ini
 	let comparer = tmpB - tmpA;
 	if (comparer != 0) {
 		return comparer;
-	} else
+	} 
 	// tie; compare reaction
-	{
+	else {
-		tmpA = parseInt($(a).find(".combatantRea").text()) || 0;
+		if ( $(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "" ) {
-		tmpB = parseInt($(b).find(".combatantRea").text()) || 0
+			return 0;
-		return tmpB - tmpA;
+		} else {
+			return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text());
 		}
 	}
-
-
-// add contextual classes and sort combatants by ini value
-function sortTable() {
-	
-	// remove previous classes from rows, disable act buttons
-	$(".combatantRow").removeClass(MAX_INI_CLASS + " " + ZERO_INI_CLASS + " " + REGULAR_INI_CLASS).find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
-
-	// get ini value for every combatant; set to 0 if K.O./dead
-	let iniValues = $.map( $(".combatantRow"), function(tr, i) {
-//TODO: don't rely on class out-of-commission being set, check and set it here instead
-		return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text());
-	});
-
-	// compute highest ini
-	let iniMax = Math.max.apply(null, iniValues);
-
-	// add contextual classes
-//TODO: I should probably add badges here as well, maybe even effectiveIni
-	$(".combatantRow").each( function() {
-		// K.O./dead -> don't add anything
-		if ( $(this).hasClass("out-of-commission") ) {
-			return true;
-		}
-		// ini = zero
-		if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
-			$(this).addClass(ZERO_INI_CLASS);
-			return true;
-		}
-		// ini = max and non-zero 
-		if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
-			$(this).addClass(MAX_INI_CLASS).find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
-			return true;
-		}
-		// everything else
-		$(this).addClass(REGULAR_INI_CLASS);
-	})
-
-	// sort rows and append them in new order
-	let $rows = $(".combatantRow").toArray().sort(whoGoesFirst);
-	for ( var i = 0; i < $rows.length; i++ ) {
-		$("#combatantsTable").append($rows[i]);
-	}
-
-	return;
 }
 
 
 // returns a combatant's effective ini value (modified by wound penalties)
-function getEffectiveIni(value, damageLevel1, damageLevel2) {
+function getEffectiveIni(tr) {
-	let effectiveIni;
+	// return -1 if combatant is K.O. or dead
+	if ($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) {
+		return -1;
+	}
 
-	// was function called with 1 argument (tr jQuery object)?
+	// otherwise compute effective ini (true ini minus wound penalties)
-	if ( arguments.length == 1 && $(value).is("tr.combatantRow") ) {
+	let effectiveIni = parseInt($(tr).attr("data-true-ini")) - DAMAGE_PENALTY[parseInt($(tr).attr("data-damage-stun")) || 0] - DAMAGE_PENALTY[parseInt($(tr).attr("data-damage-physical")) || 0];
-		let trueIni = parseInt($(value).attr("data-true-ini"));
+	return Math.max(effectiveIni, 0);
-		let damageStun = parseInt($(value).attr("data-damage-stun")) || 0;
-		let damagePhysical = parseInt($(value).attr("data-damage-physical")) || 0;
-		effectiveIni = trueIni - DAMAGE_PENALTY[damageStun] - DAMAGE_PENALTY[damagePhysical];
 }
-	// or with 3 arguments (ini and damage levels)?
+
-	else if ( arguments.length == 3 ) {
+
-		effectiveIni = parseInt(value) - DAMAGE_PENALTY[parseInt(damageLevel1)] - DAMAGE_PENALTY[parseInt(damageLevel2)];
+// add test combatant for testing purposes (duh)
-	}
+function addTestCombatant() {
-	// 
+	// Eclipse
-	else {
+	$("#addCombatantButton").click();
-		return NaN;
+	$("#combatantModalName").val("Eclipse");
-	}
+	$("#combatantModalDice").val(3);
-//TODO: maybe check here for out-of-commission and return 'dead' or something instead of integer
+	$("#combatantModalRea").val(6);
-	return effectiveIni < 0 ? 0 : effectiveIni;
+//	$("#combatantModalIni").val(12);
+	setTimeout(function(){
+		$("#combatantModalAddOkButton").click();
+	},500);
 }
 
 
@@ -147,19 +116,14 @@ function getEffectiveIni(value, damageLevel1, damageLevel2) {
  *	Event handler functions
  */
 
-// click handler for act buttons
+// click handler for act buttons; reduces ini by 10
 function handleActButtonClick (e) {
-	// find current table row
-	let $tr = $(e.target).parents(".combatantRow");
-	let ini = $tr.attr("data-true-ini");
 
 	// reduce ini by 10 but not lower than 0
-	ini = Math.max(parseInt(ini) - 10, 0);
+	let ini = Math.max(parseInt($(e.target).parents(".combatantRow").attr("data-true-ini")) - 10, 0);
 
 	// set new ini value
-	// can't use text() here because that would delete wound badges
+	$(e.target).parents(".combatantRow").attr("data-true-ini", ini);
-	$tr.attr("data-true-ini", ini);
-	$tr.find(".combatantIni").contents()[0].data = getEffectiveIni($tr);
 	
 	// resort table
 	sortTable();
@@ -186,8 +150,10 @@ function handleAddButtonClick (e) {
 	$("#combatantModal").modal("show");
 }
 
+
 // click handler for damage buttons; basically toggles visibility of table.damage-monitor
 function handleDamageButtonClick (e) {
+
 	// get visibility status at click time
 	let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none");
 
@@ -204,55 +170,28 @@ function handleDamageButtonClick (e) {
 
 // click handler for damage monitor fields
 function handleDamageMonitorClick (e) {
-	let $btn = $(e.target);
-	let $tr = $btn.parents("tr.combatantRow");
-	let damageType;
-	let otherDamageLevel
 
-	// calculate new damage level and type
+	let $btn = $(e.target);
+
+	// retrieve new damage level and type from button position and "damage-[type]" class
 	let damageLevel = $btn.parent().parent().index();
-console.log("damage level is", damageLevel);
+	let damageType = $btn.attr("class").split(" ").filter(function(cls) {
-	if ( $btn.hasClass("damage-stun") ) {
+		return cls.substr(0, 7) == "damage-" ? cls : false;
-		damageType = "stun";
+	}).toString().substr(7);
-		otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0;
-	} else if ( $btn.hasClass("damage-physical") ) {
-		damageType = "physical";
-		otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0;
-	} else {
-		return false;
-	}
 
 	// add damage level to table row as as data attribute
-	$tr.attr("data-damage-" + damageType, damageLevel);
+	$btn.parents("tr.combatantRow").attr("data-damage-" + damageType, damageLevel);
-//TODO: class out-of-commission should be set in sortTable() with the other contextual classes
-	if ( damageLevel == 10 || otherDamageLevel == 10 ) {
-		$tr.addClass("out-of-commission");
-	} else {
-		$tr.removeClass("out-of-commission");
-	}
 
-	// select/unselect damage boxes 
+	// select/unselect damage buttons above/below
 	$btn.addClass("active");
 	$btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active");
 	$btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active");
 
-	// recalculate effective ini
-	$tr.find(".combatantIni").text(getEffectiveIni($tr));	
-
-	// add damage level badges
-	if ( $tr.attr("data-damage-stun") && $tr.attr("data-damage-stun") != "0" ) {
-		$tr.find(".combatantIni").append('<sup><span class="badge bg-warning position-absolute translate-middle" title="Stun damage niveau">' + DAMAGE_NIVEAU[DAMAGE_PENALTY[$tr.attr("data-damage-stun")]] + '</span></sup>');
-	} 
-	if ( $tr.attr("data-damage-physical") && $tr.attr("data-damage-physical") != "0" ) {
-		$tr.find(".combatantIni").append('<sub><span class="badge bg-danger position-absolute translate-middle" title="Physical damage niveau">' + DAMAGE_NIVEAU[DAMAGE_PENALTY[$tr.attr("data-damage-physical")]] + '</span></sub>');
-	} 
-
 	// resort
 	sortTable();
-	
-//	return false;
 }
 
+
 // click handler for edit buttons
 function handleEditButtonClick (e) {
 	// find current table row
@@ -268,7 +207,10 @@ function handleEditButtonClick (e) {
 	$("#combatantModalDice").val($tr.find(".combatantDice").text());
 	$("#combatantModalRea").val($tr.find(".combatantRea").text());
 	$("#combatantModalIni").val($tr.attr("data-true-ini"));
-	//TODO: show effective ini in modal
+
+	// show effective ini in modal
+	$("#penalty-stun").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-stun")) || 0]);
+	$("#penalty-physical").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-physical")) || 0]);
 	
 	// mark which row is being edited
 	$("#combatantModal").attr("data-row", $(".combatantRow").index($tr));
@@ -312,58 +254,6 @@ function handleRemoveButtonClick (e) {
 }
 
 
-/*
- *	Validation functions
- */
-
-// validate a combatant row form by checking for all conditions, including regular HTML5 validation
-function validateCombatant() {
-
-	// get input elements
-	let inputElements = {
-		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) 
-	let valid = true;
-	Object.values(inputElements).forEach(function(input) {
-		if ( ! input.reportValidity() ) {
-			valid = false;
-		}
-	})
-	if ( ! valid ) {
-		return false;
-	}
-
-	// 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();
-
-	// invalidate if ini, dice and rea are all empty
-	if ( ini == "" && ( dice == "" || rea == "" ) ) {
-		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["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;
-	}
-
-	// ok then
-	return true;
-}
-
 
 /*
  *	Main functions
@@ -393,7 +283,6 @@ function addCombatant (e) {
 	// populate table row with values from modal
 	$tr.attr("data-true-ini", ini);
 	$tr.find(".combatantName").text($("#combatantModalName").val().trim());  
-	$tr.find(".combatantIni").text(getEffectiveIni(ini, 0, 0)); // don't need to use contents()[0].data here b/c wound badges are added later
 	$tr.find(".combatantDice").text($("#combatantModalDice").val().trim());
 	$tr.find(".combatantRea").text($("#combatantModalRea").val().trim());
 
@@ -448,8 +337,6 @@ function editCombatant (e) {
 	$tr.find(".combatantDice").text(dice);
 	$tr.find(".combatantRea").text(rea);
 	$tr.attr("data-true-ini", ini);
-	$tr.find(".combatantIni").text(getEffectiveIni($tr));
-//TODO: add badges
 
 	// sort table
 	sortTable();
@@ -488,13 +375,11 @@ function startNewRound (e) {
 
 	// reset ini values 
 	$(".combatantRow").each( function() {
-		let dice = $(this).find(".combatantDice").text();
+		if ( $(this).find(".combatantDice").text() == "" ) {
-		if ( dice == "" ) {
+			$(this).attr("data-true-ini", 1);
-			$(this).attr("data-true-ini", "1");
 		} else {
-			$(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text()));
+			$(this).attr("data-true-ini", rollForInitiative(parseInt($(this).find(".combatantDice").text()), parseInt($(this).find(".combatantRea").text())));
 		}
-		$(this).find(".combatantIni").contents()[0].data = getEffectiveIni($(this));
 	});
 
 	// resort table
@@ -502,18 +387,115 @@ function startNewRound (e) {
 }
 
 
-// add test combatant for testing purposes (duh)
+// add contextual classes and sort combatants by ini value
-function addTestCombatant() {
+function sortTable() {
-	// Eclipse
+	// do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges
-	$("#addCombatantButton").click();
+	$(".combatantRow").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" "));
-	$("#combatantModalName").val("Eclipse");
+	$(".combatantRow").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
-	$("#combatantModalDice").val(3);
+	$(".combatantIni").empty();
-	$("#combatantModalRea").val(6);
+
-//	$("#combatantModalIni").val(12);
+	// mark KO or death with class
-	setTimeout(function(){
+	$(".combatantRow").each(function() {
-		$("#combatantModalAddOkButton").click();
+		if ( parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10 ) {
-	},500);
+			$(this).addClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]);
 		}
+	});
+
+	// compute highest effective ini
+	let iniMax = Math.max.apply(null, $.map( $(".combatantRow"), function(tr, i) {
+		// write current effective ini to table row  
+		$(tr).find(".combatantIni").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr)));
+		return $(tr).find(".combatantIni").text();
+	}));
+
+	// add damage badges and contextual classes
+	$(".combatantRow").each(function() {
+		// damage badges
+		if ( $(this).attr("data-damage-stun") && $(this).attr("data-damage-stun") != "0" ) {
+			$(this).find(".combatantIni").append($.parseHTML(STUN_BADGE_HTML));
+			$(this).find(".stun-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-stun")]]);
+		} 
+		if ( $(this).attr("data-damage-physical") && $(this).attr("data-damage-physical") != "0" ) {
+			$(this).find(".combatantIni").append($.parseHTML(PHYSICAL_BADGE_HTML));
+			$(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]);
+		}
+		
+		// K.O./dead -> don't add anything
+		if ( $(this).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) {
+			return true;
+		}
+		// ini = zero
+		if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
+			$(this).addClass(CONTEXTUAL_CLASSES["ZERO_INI"]);
+			return true;
+		}
+		// ini = max and non-zero 
+		if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
+			$(this).addClass(CONTEXTUAL_CLASSES["MAX_INI"]).find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
+			return true;
+		}
+		// everything else
+		$(this).addClass(CONTEXTUAL_CLASSES["REGULAR_INI"]);
+	})
+
+	// sort rows and append them in new order
+	let $rows = $(".combatantRow").toArray().sort(whoGoesFirst);
+	for ( var i = 0; i < $rows.length; i++ ) {
+		$("#combatantsTable").append($rows[i]);
+	}
+
+	return;
+}
+
+
+// validate a combatant row form by checking for all conditions, including regular HTML5 validation
+function validateCombatant() {
+
+	// get input elements
+	let inputElements = {
+		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) 
+	let valid = true;
+	Object.values(inputElements).forEach(function(input) {
+		if ( ! input.reportValidity() ) {
+			valid = false;
+		}
+	})
+	if ( ! valid ) {
+		return false;
+	}
+
+	// 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();
+
+	// invalidate if ini, dice and rea are all empty
+	if ( ini == "" && ( dice == "" || rea == "" ) ) {
+		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["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;
+	}
+
+	// ok then
+	return true;
+}
+
 
 /*
  *	Initialize document