- added working remove button

- remove now asks to confirm
- only one damage monitor is open at any time

css/custom.css

@@ -15,7 +15,7 @@ input:invalid {
 	background-color: darkslategray;
 }
 
-.max-ini {
+.table-primary {
 	font-weight: bold;
 }
 
@@ -42,10 +42,10 @@ input:invalid {
 }
 
 .damage-monitor th {
-	width: 30px;
+	width: 28px;
-	height: 30px;
+	height: 28px;
 /*	background-color: white;*/
-	border: solid darkgray 1px;
+/*	border: solid darkgray 1px;*/
 	padding: 3px;
 }
 	
@@ -54,6 +54,8 @@ input:invalid {
 	height: 24px;
 }
 
+
+
 .damage-monitor button {
 	font-size: smaller;
 	height: 24px;
@@ -63,3 +65,7 @@ input:invalid {
 .damage-monitor button.active {
 	filter: brightness(91%);
 }
+
+/*$light: steelblue;
+@import "bootstrap";
+*/

index.html

@@ -28,7 +28,7 @@
 				<span class="navbar-brand text-bold ps-4">SR2 Initiative Tracker</span>
 				<nav class="container-fluid justify-content-end" aria-label="Main navigation">
 					<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="addCombatantButton" title="Add combatant"><img src="img/add.png" /></button>
-					<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="img/refresh.png" /></button>
+					<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#confirmModal" title="Start new round"><img src="img/refresh.png" /></button>
 				</nav>
 			</header>
 			</br>
@@ -51,7 +51,7 @@
 			</div>
 		</div>
 
-		<div class="modal fade" id="newRoundModal" tabindex="-2">
+		<div class="modal fade" id="confirmModal" tabindex="-2">
 			<div class="modal-dialog modal-sm">
 				<div class="modal-content">
 					<div class="modal-header">
@@ -63,7 +63,8 @@
 					</div>
 					<div class="modal-footer">
 						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-						<button type="submit" class="btn btn-primary" id="newroundModalOkButton" data-bs-dismiss="modal">OK</button>
+						<button type="submit" class="btn btn-primary" id="confirmModalNewRoundOkButton" data-bs-dismiss="modal">OK</button>
+						<button type="submit" class="btn btn-primary" id="confirmModalRemoveCombatantOkButton" data-bs-dismiss="modal" style="display: none">OK</button>
 					</div>
 				</div>
 			</div>

js/sr2ini.js

@@ -1,32 +1,32 @@
-/*
- *	helper functions
- */
-
 const penalty = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
 const dmg = ["", "L", "M", "S", "D"];
 
-const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center">\n',
+const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center align-middle">\n',
-	'<thead>\n',
+	'<tr>\n',
-		'<tr><th title="Stun damage"><img src="img/zzz.png" /></th><th title="Physical Damage"><img src="img/skull.png" /></th></tr>\n',
+		'<td><button class="btn btn-sm btn-warning damage-stun active" title="+/-0">0</button></td>\n',
-	'</thead>\n',
+		'<td><button class="btn btn-sm btn-danger damage-physical active" title="+/-0">0</button></td>\n',
-	'<tbody>\n',
+	'</tr>\n',
-		'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-1">L</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-1">L</button></td></tr>\n',
+	'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Light stun damage">L</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Light physical damage">L</button></td></tr>\n',
-		'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-1"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-1"></button></td></tr>\n',
+	'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-2">M</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2">M</button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun" title="Medium stun damage">M</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Medium physical damage">M</button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-2"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2"></button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-2"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2"></button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-3">S</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3">S</button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun" title="Severe stun damage">S</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Severe physical damage">S</button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
-		'<tr><td class="damage-stun"><button  class="btn btn-sm btn-warning align-middle" title="K.O.">D</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="dead">D</button></td></tr>\n',
+	'<tr><td><button  class="btn btn-sm btn-warning damage-stun" title="K.O.">D</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="dead">D</button></td></tr>\n',
-	'</tbody>\n',
+	'<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 maxIniClass = "max-ini";
+const maxIniClass = "table-primary";
 const zeroIniClass = "table-secondary";
 
 
+/*
+ *	helper functions
+ */
+
 // roll for initiative with the given reaction and number of ini dice  
 function rollForInitiative(dice, rea) {
 	let ini = 0;
@@ -67,12 +67,16 @@ function sortTable() {
 	$(".combatantRow").removeClass(maxIniClass + " " + zeroIniClass).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( $(".combatantIni"), function(td, i) {
+	let iniValues = $.map( $(".combatantRow"), function(tr, i) {
-		return $(td).parents(".combatantRow").hasClass("out-of-commission") ? 0 : parseInt($(td).text());
+console.log($(tr).find(".combatantIni"));
+		return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text());
 	});
+console.log(iniValues);
+//TODO: maxIni wid nicht vergeben wenn damage > 0
 
 	// compute highest ini
 	let iniMax = Math.max.apply(null, iniValues);
+console.log(iniValues);
 
 	// add contextual classes 
 	$(".combatantRow").each( function() {
@@ -165,10 +169,18 @@ function handleAddButtonClick (e) {
 	$("#combatantModal").modal("show");
 }
 
-// click handler for damage buttons
+// click handler for damage buttons; basically toggles visibility of table.damage-monitor
 function handleDamageButtonClick (e) {
-	let display = $(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display");
+	// get visibility status at click time
-	$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", display == "block" ? "none" : "block");
+	let visAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display");
+
+	// hide all damage monitors
+	$(".damage-monitor:visible").css("display", "none");
+
+	// if targeted dm was hidden before, show it now
+	if ( visAtClick == "none" ) {
+		$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", "block");
+	}
 	return false;
 }
 
@@ -181,11 +193,12 @@ function handleDamageMonitorClick (e) {
 	let otherDamageLevel
 
 	// calculate new damage level and type
-	let damageLevel = $btn.parent().parent().index() + 1;
+	let damageLevel = $btn.parent().parent().index();
-	if ( $btn.parent().hasClass("damage-stun") ) {
+console.log("damage level is", damageLevel);
+	if ( $btn.hasClass("damage-stun") ) {
 		damageType = "stun";
 		otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0;
-	} else if ( $btn.parent().hasClass("damage-physical") ) {
+	} else if ( $btn.hasClass("damage-physical") ) {
 		damageType = "physical";
 		otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0;
 	} else {
@@ -202,8 +215,8 @@ function handleDamageMonitorClick (e) {
 	
 	// select/unselect damage boxes 
 	$btn.addClass("active");
-	$btn.parent().parent().nextAll().find("td.damage-" + damageType + " button").removeClass("active");
+	$btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active");
-	$btn.parent().parent().prevAll().find("td.damage-" + damageType + " button").addClass("active");
+	$btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active");
 
 	// recalculate effective ini
 	$tr.find(".combatantIni").text(getEffectiveIni($tr));	
@@ -255,10 +268,29 @@ function handleEditButtonClick (e) {
 }
 
 
+function handleNewRoundButton (e) {
+	// restyle modal
+	$("#confirmModal .modal-title").text("Start new Round");
+	$("#confirmModalNewRoundOkButton").show();
+	$("#confirmModalRemoveCombatantOkButton").hide();
+
+	// show modal
+	$("#comfirmModal").modal("show");
+}
+
+
 // click handler for remove buttons
 function handleRemoveButtonClick (e) {
-	// remove table row
+	// restyle modal
-	$(e.target).parents(".combatantRow").remove();
+	$("#confirmModal .modal-title").text("Remove Combatant");
+	$("#confirmModalRemoveCombatantOkButton").show();
+	$("#confirmModalNewRoundOkButton").hide();
+
+	// mark which row is being removed
+	$("#confirmModal").attr("data-row", $(".combatantRow").index($(e.target).parents(".combatantRow")));
+
+	// show modal
+	$("#comfirmModal").modal("show");
 }
 
 
@@ -369,8 +401,8 @@ function addCombatant (e) {
 	// 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);
 	$tr.find("button.damage-button").on("click", handleDamageButtonClick);
+	$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
 
 	// add handler to table cells (click to edit)
 	$tr.find(".combatantName, .combatantIni, .combatantDiceAndRea").on("click", handleEditButtonClick);
@@ -384,7 +416,7 @@ function addCombatant (e) {
 }
 
 
-// edit combatant values
+// edit combatant
 function editCombatant (e) {
 	e.preventDefault();
 
@@ -423,9 +455,29 @@ function editCombatant (e) {
 	$("#combatantModal").removeAttr("data-row");
 }
 
+// remove combatant
+function removeCombatant (e) {
+	e.preventDefault();
+
+	// hide modal
+	$("#confirmModal").modal("hide");
+
+	// remove correct row
+	let index = parseInt($("#confirmModal").attr("data-row"));
+	$(".combatantRow").eq(index).remove();
+
+	// clean up
+	$("#confirmModal").removeAttr("data-row");
+}
+
 
 // start a new combat round
-function newRound() {
+function startNewRound (e) {
+	e.preventDefault();
+
+	// hide modal
+	$("#confirmModal").modal("hide");
+
 	// are there rows at all?
 	if ( $(".combatantRow").length == 0 ) {
 		return;
@@ -468,26 +520,30 @@ function addTestCombatant() {
 $(document).ready(function(){
 	// add event handlers to navbar buttons
 	$("#addCombatantButton").on("click", handleAddButtonClick);
-	$("#newroundModalOkButton").on("click", newRound);
+	$("#newRoundButton").on("click", handleNewRoundButton);
 
 	// add event handlers to modal buttons
 	$("#combatantModalAddOkButton").on("click", addCombatant);
 	$("#combatantModalEditOkButton").on("click", editCombatant);
+	$("#confirmModalNewRoundOkButton").on("click", startNewRound);
+	$("#confirmModalRemoveCombatantOkButton").on("click", removeCombatant);
 
 	// 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("");
 	});
 
-	// Hide damage monitors if mouse is clicked outside
+	// Hide damage monitors after click somewhere else
-	$("html").on("click", function(e) {
+	$("html").on("click", function (e) {
-		if (! $(e.target).is("td[class*='damage-'] > button") ) {
+		if ( $(e.target).parents(".damage-monitor").length == 0 ) {
 			$(".damage-monitor:visible").css("display", "none");
 		}
+
 	});
 
 	addTestCombatant();