From c82a3e41d8443f742aac49bac6c16491abd04923 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@unterdemradar.de>
Date: Wed, 8 Feb 2023 00:01:23 +0100
Subject: [PATCH] - added working remove button - remove now asks to confirm -
 only one damage monitor is open at any time

---
 css/custom.css |  14 +++--
 img/skull.png  | Bin 827 -> 0 bytes
 img/trash.png  | Bin 0 -> 549 bytes
 img/zzz.png    | Bin 719 -> 0 bytes
 index.html     |   7 +--
 js/sr2ini.js   | 136 ++++++++++++++++++++++++++++++++++---------------
 6 files changed, 110 insertions(+), 47 deletions(-)
 delete mode 100644 img/skull.png
 create mode 100644 img/trash.png
 delete mode 100644 img/zzz.png

diff --git a/css/custom.css b/css/custom.css
index 8dbbbae..c50d853 100644
--- a/css/custom.css
+++ b/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;
-	height: 30px;
+	width: 28px;
+	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";
+*/
diff --git a/img/skull.png b/img/skull.png
deleted file mode 100644
index 86d3c84dedcc9e4ea52d2eeafa813fe7a060ed7f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 827
zcmV-B1H}A^P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm00027
z000270mdy!jQ{`u8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10?0{3
zK~zYImDOE{mQ@f3@ZY=pM&VkbwS{4(EE}i<8hTaag|%&@E`D8P3#p*kt`~x71YL9)
zb=e1+qDw_}rK0JLx?YHaUzuqN7J*0@gwo0?g0gin^Y%Xb@b2ag95~OM|IC^BpP6|o
z>hcMm#~|LuZDW%b^x;ulz-DO5!&fjKoj8o8V{{J7)3!4&Spe0Hd;-2q;5hs~N|ZFt
z?oZ6j{SK_dYt>Y~Q2_piML3k-uVXbPVgUCr3AY3#2NJiiU~?wd!7A=xy`bm{_Td?9
z!xWsuM*LBV_z7&lJ9&0KZ5QJ?@s@)%O1cGipQ9%o|BTrUs3^+}oW--~O&^_jD}4`>
z3O>apQBe;n({V9vE5(E65x_r*bRSgy7IfUf$^Qc%$3tUqUXx}VX{0R5biwIf(IanS
z1%`07gnbEXFj-JKgn9TCH*27#lF>}TB~i;0u}3^ucLCQex_v($$M)2Jh-)J!8Qr)F
zt@x^x>9WH24~A#|wJ6&zbQB$yGq{eaBHe01UlHv;l5I6@=HkX^7hDtXa6?qa7Qyu{
zQ6-P$>cdXFjQ0|MQ}oYYMTf&`R&aYC-{;vP@h*o&>+ee3YP=wZ<YhtGKUkRo>@22M
zltDp}G}x!!4+}H83YLh+|FLBMlo)#dN%?{UI4JtydPe$cp1p`Uxxbeez%hJ*r^OuV
z9PNVpV&JuAB*j_szQ)p&s};ZCZW+)bxbMhFdQ#u3KKDOB8|LR~OP$2@=DsI=bjV@X
zjPFF3P7`zFn~Z3dps5M%qFdYXn5de0;z0*Qv$du3=CmEcCg?9^)P;9*KS7M&Gl@Hq
zs~@NFSz>BaxU1x=zbYzWJGP3s-i}iV7$~Gq{FKNaNlEsrkNCObCw8`)(JsK+yx^9Y
zL5-x5<C;9F{=jSTtr9yQi*ehBhevTVlC)qqj^d-5@?V=Op8P&k{`dd@002ovPDHLk
FV1o5fh{XT^

diff --git a/img/trash.png b/img/trash.png
new file mode 100644
index 0000000000000000000000000000000000000000..d671f254c56bf247ade5d7fe0db028708b7888d6
GIT binary patch
literal 549
zcmV+=0^0qFP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00004b3#c}2nYxW
zd<bNS00009a7bBm00027000270mdy!jQ{`u8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10isDnK~zYIrPaHN6hRaQ;BUtEl8G!kt|*Ea87&xTrl1d?D~6^U
z2qI{pfq^Ezfe&CLBIpBXzK>vFV6ZGY;|(!bbVY-zW@~Dyr`nxA={~3bbN)J)sTru_
z2woKYe{lofd*qmlHLMr>>$p}6Zj$%YI8)%9!vL2v|0$frk3!6Qd=LZS0v_X~Q2HVm
z;5r^+qpjdPp5oPl$y-cf&W*N$qj-kj_=V^Agj@faxWR$=yoqs6xQB~-Ida4$+)W+B
zj4;M%0fCY1)VaVU6WE`9-&cr9Iir}PQ(%nc#D0L)#9k9Nq{V9Fv{=@of>hueRua20
z{o6T)ubDu#g3%m1N8a;li?(rS0fB=tN2frJyk$9NT9TtCkPp2ikXA5r&6EUo?5^Gy
zEX@&EvODBPxCyEPlO*XMVfVW*j2uEWpZf}=gB=t&rEiDvv5!El?_GF@N4c{p5c3K)
zBX0*kv)IkVzA6m)b?qcqaJzcmS=@=SQz*4)3n%s<a6HCVF~nQpPpB_e@J3-Fx;Er2
no(R{*yfr1P={D{QgPy`aosdjbf%@QN00000NkvXXu0mjfvOew_

literal 0
HcmV?d00001

diff --git a/img/zzz.png b/img/zzz.png
deleted file mode 100644
index da68fa86d26cc2fea0ea446403c2f6483cff12b2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 719
zcmV;=0x<oFP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00004b3#c}2nYxW
zd<bNS00009a7bBm0001{0001{0o{H7H~;_u8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10!&FnK~zYIt<+73mQ@r7@ZT{t6J2P7P9?N(7NLbqGy{TY%>*rk
z!jDzDQCkEGMvx#RiQuM1ANWCSrVnx;(S<O6EGz}3h3&+J3pa{L8?iv5H0QXu*Wux9
z=AD^$JaBo=z0Z06=REg+&Ob6!Cl(Q3Vig{=3G12N5qhyjct11$Xj8<wnIwR>BH~`l
z+11Rv^JFt?2H=OW6t6VaQS?AWyn#nD^QkQC#3$8Xf=lRnTHvqa$Li0)IrL_x>43~a
zANHcZao&Yxm|ORU6!K+edk!L^Cn7$Kh~qem4Y-LN_5C~?LuTfKh}edIGjn(hWP)m6
z#&4Chjabz3{!D#-kHPBqV+7AMV`IEQtCbCB=EjJ432$QnpW<%})jyh_nP1fS8#sfz
z4XD4yorBE$Cn7||Y23yItiT=Y!MAu9`y27^C<Hg{NLx}H{sw$p0e(T?8+1?77!yx&
zW{x(tJFo?taUwG_B5vZRi1=?J3@n~Xd-me%Clx984liQiq~EuIEyEA^pmFvcmSZ(8
z;wzk22>onI3Gf{DDQ&i@R{Ff6H9yywH?bQl8xwnWvIMguViR^L;x&T%O6NR_dHAz(
zaxo&VU~NQf$7{IO=Kja*cdS&p;<_?eBaJKiRgs5NIEjz&>NF(AU<K*J=e4qCf&r|-
zoQ{OBCEH0wYKPIS4AlBgfF}~W`FNrJ#gL*k`y!%sLZ@tFgBB5iQAJA*R6Y(W9W^@c
z*V9Q*{RMc4b$AcEGV@la;P@X0TX7j{W^(V%^%zVFz=qf`0xSRk002ovPDHLkV1ko-
BKT-ey

diff --git a/index.html b/index.html
index d799084..660bba3 100644
--- a/index.html
+++ b/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>
diff --git a/js/sr2ini.js b/js/sr2ini.js
index 1ffdb7b..ad711a6 100644
--- a/js/sr2ini.js
+++ b/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',
-	'<thead>\n',
-		'<tr><th title="Stun damage"><img src="img/zzz.png" /></th><th title="Physical Damage"><img src="img/skull.png" /></th></tr>\n',
-	'</thead>\n',
-	'<tbody>\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 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 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 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 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 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 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 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 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 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',
-	'</tbody>\n',
+const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center align-middle">\n',
+	'<tr>\n',
+		'<td><button class="btn btn-sm btn-warning damage-stun active" title="+/-0">0</button></td>\n',
+		'<td><button class="btn btn-sm btn-danger damage-physical active" title="+/-0">0</button></td>\n',
+	'</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><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><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><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><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><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><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><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><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><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',
+	'<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) {
-		return $(td).parents(".combatantRow").hasClass("out-of-commission") ? 0 : parseInt($(td).text());
+	let iniValues = $.map( $(".combatantRow"), function(tr, i) {
+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");
-	$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", display == "block" ? "none" : "block");
+	// get visibility status at click time
+	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;
-	if ( $btn.parent().hasClass("damage-stun") ) {
+	let damageLevel = $btn.parent().parent().index();
+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().prevAll().find("td.damage-" + damageType + " button").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));	
@@ -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
-	$(e.target).parents(".combatantRow").remove();
+	// restyle modal
+	$("#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
-	$("html").on("click", function(e) {
-		if (! $(e.target).is("td[class*='damage-'] > button") ) {
+	// Hide damage monitors after click somewhere else
+	$("html").on("click", function (e) {
+		if ( $(e.target).parents(".damage-monitor").length == 0 ) {
 			$(".damage-monitor:visible").css("display", "none");
 		}
+
 	});
 
 	addTestCombatant();