slightly reworked event handling

- event handling and combatant manipulation are now completely separate, i.e. addCombatant() doesn't need an event parameter anymore
- renamed applyDamage() to handleDamageLevelButtonClick() b/c it's an event handler function (which, admittedly, manipulates combatants but only superficially)
- added listeners for "enter" keypress to both modals

TODO.md

@@ -61,20 +61,29 @@
 	-	non-issue, geht doch
 -	x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
 	-	via SVGInject: https://github.com/iconfu/svg-inject  
--	wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
+-	x wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
 	-	korrigiert, indem ich nicht mehr den Buttons data-bs-modal="toggle" mitgebe, sondern das modal via JS in addCombatant() bzw. editCombatant() verstecke
 	-	Problem: dann ist das modal weg, aber der backdrop noch da (ich kann nichts anklicken)
 		-	Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
 	-	bei Apply modal offen lassen
-
+-	x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
+	-	gilt auch für editCombatant, removeCombatant, startNewRound
+		-	applyDamage dagegen nicht, weil es eine echte Handlerfkt. ist -> vllt umbenennen
+	-	validation, modal hide/show und alles weitere kläre ich vorher in einer echten handler function 
+-	x manchmal wird svg-inject nicht geladen und dann sind alle icons weg
+	-	hab's jetzt doch wieder rausgeschmissen
+-	x add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende
+	-	ich könnt's umstellen, aber will ich das?
+	-	nicht mehr aktuell
 ### open
 
--	manchmal wird svg-inject nicht geladen und dann sind alle icons weg
+-	im Chromium sind die Slider für Damage im #combatant-modal ungestylet 
--	im Chromium sind die Slider für Damage im CombatantModal ungestylet 
+-	Seite für größere Screens anpassen (Schrift, Buttons, Icons skalieren)
--	Seite für größere Screens anpassen
+	-	media queries
-	-	Schrift, Buttons, Icons skalieren
+	-	nicht px benutzen, sondern vw/vh/vmin/vmax -> muss aber schauen, ob FF4And das unterstützt
-	-	em und % statt px
+	-	clamp(minsize, relsize, maxsize)
-	-	Tabellenbreite begrenzen
+	-	auch mgl.: calc(0.75em + 1vw) (macht den Vergrößerungseffekt für große Viewports irrelevant)
+	-	Tabellenbreite begrenzen?
 -	make color scheme friendly for people with red green bindness (Felix)
 	-	see here: https://venngage.com/tools/accessible-color-palette-generator
 	-	tests
@@ -92,8 +101,6 @@
 	-	schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event
 	-	jetzt kommt es aber trotzdem manchmal wieder
 	-	vllt. ein timeout-Problem? 
--	add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende
-	-	ich könnt's umstellen, aber will ich das?
 -	wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
 
 

package.json

@@ -46,7 +46,6 @@
   },
   "type": "module",
   "dependencies": {
-    "@iconfu/svg-inject": "^1.2.3",
     "@parcel/service-worker": "^2.8.3",
     "augmented-ui": "^2.0.0",
     "bootstrap": "^5.2.3",

src/css/sr2ini.scss

@@ -113,7 +113,7 @@ header.navbar {
 
 .table-responsive { margin-bottom: 1px; }
 
-.combatants-table {
+#combatants-table {
 	margin-top: .5rem;
 
 	tr {

src/img/icons.svg

@@ -1,65 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icons">
-	<defs>
-		<!-- add combatant -->
-		<symbol id="add" >
-			<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
-			<rect height="96" width="64" x="224" y="0" />
-			<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
-			<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
-			<path d="M 128 272 q 64 32 128 32 v -32 Z" />
-			<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
-			<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
-			<rect x="0" y="448" width="96" height="64" />
-			<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
-			<rect x="192" y="480" width="64" height="32" />
-			<rect x="288" y="368" width="228" height="64" />
-			<rect x="368" y="288" width="64" height="228" />
-	    </symbol>
-		<!-- new round -->
-		<symbol id="newround" >
-			<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
-			<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
-		</symbol>
-		<!-- act (-10) -->
-		<symbol id="act" >
-			<rect x="0" y="272" height="64" width="96" />
-			<path d="M 160 64 h 64 v 384 h -64 v -296 l -64 64 l -40 -40 Z" />
-			<path d="M 352 64 h 96 l 64 64 v 256 l -64 64 h -96 l -64 -64 v -256 l 64 -64 l 32 64 h 32 l 32 32 v 192 l -32 32 h -32 l -32 -32 v -192 l 32 -32" fill-rule="evenodd" />
-		</symbol>
-		<!-- take damage -->
-		<symbol id="take-damage" >
-			<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
-		</symbol>
-		<!-- more actions -->
-		<symbol id="more-actions" >
-			<polygon points="32 32 480 32 256 480" />
-		</symbol>
-		<!-- edit combatant -->
-		<symbol id="edit" >
-			<polygon points="0 512 0 352 224 128 384 288 160 512" />
-			<polygon points="352 0 512 160 416 256 256 96" />
-		</symbol>
-		<!-- clone combatant -->
-		<symbol id="clone" >
-			<rect x="0" y="0" width="512" height="128" />
-			<rect x="0" y="384" width="512" height="128" />
-			<polygon points="128 192 384 192 256 320" />
-		</symbol>
-		<!-- delete combatant -->
-		<symbol id="delete" >
-			<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
-			<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
-		</symbol>
-		<!-- K.O. -->
-		<symbol id="ko" >
-			<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
-			<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
-			<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
-		</symbol>
-		<!-- dead -->
-		<symbol id="dead" >
-			<rect x="208" y="0" width="96" height="512" />
-			<rect x="80" y="112" width="352" height="96" />
-		</symbol>
-	</defs>
-</svg>

src/index.html

@@ -17,7 +17,6 @@
 	<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
 	
 	<script type="module" src="js/sr2ini.js"></script>
-	<script type="module" src="../node_modules/@iconfu/svg-inject/dist/svg-inject.js"></script>
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
@@ -30,8 +29,7 @@
 </head>
 
 <body>
-	<img src="img/icons.svg" onload="SVGInject(this, {'makeIdsUnique': false})" />
+	<!-- navbar -->
-
 	<div class="container">
 		<header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
 			<span class="navbar-brand ps-4">SR2 Initiative Tracker</span>
@@ -44,9 +42,10 @@
 		</header>
 	</div>
 
+	<!-- combatants table -->
 	<div class="container">
 		<main class="table-responsive overflow-visible">
-			<table class="table table-sm table-borderless combatants-table">
+			<table class="table table-sm table-borderless" id="combatants-table">
 				<thead>
 					<tr data-augmented-ui="tl-2-clip-y r-clip-y">
 						<th class="col th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
@@ -61,12 +60,7 @@
 		</main>
 	</div>
 
-	<div class="footer-container">
+	<!-- confirm modal -->
-		<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
-			<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
-		</footer>
-	</div>
-
 	<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
 		<div class="modal-dialog modal-sm" role="document">
 			<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
@@ -86,6 +80,7 @@
 		</div>
 	</div>
 
+	<!-- combatant modal (add & edit) -->
 	<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
 		<div class="modal-dialog modal-sm" role="document">
 			<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
@@ -129,5 +124,78 @@
 		</div>
 	</div>
 
+	<!-- SVG icon <symbol> definitions (for later <use>)-->
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="d-none">
+		<defs>
+			<!-- add combatant -->
+			<symbol id="add" >
+				<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
+				<rect height="96" width="64" x="224" y="0" />
+				<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
+				<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
+				<path d="M 128 272 q 64 32 128 32 v -32 Z" />
+				<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
+				<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
+				<rect x="0" y="448" width="96" height="64" />
+				<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
+				<rect x="192" y="480" width="64" height="32" />
+				<rect x="288" y="368" width="228" height="64" />
+				<rect x="368" y="288" width="64" height="228" />
+		    </symbol>
+			<!-- new round -->
+			<symbol id="newround" >
+				<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
+				<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
+			</symbol>
+			<!-- act (-10) -->
+			<symbol id="act" >
+				<rect x="0" y="272" height="64" width="96" />
+				<path d="M 160 64 h 64 v 384 h -64 v -296 l -64 64 l -40 -40 Z" />
+				<path d="M 352 64 h 96 l 64 64 v 256 l -64 64 h -96 l -64 -64 v -256 l 64 -64 l 32 64 h 32 l 32 32 v 192 l -32 32 h -32 l -32 -32 v -192 l 32 -32" fill-rule="evenodd" />
+			</symbol>
+			<!-- take damage -->
+			<symbol id="take-damage" >
+				<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
+			</symbol>
+			<!-- more actions -->
+			<symbol id="more-actions" >
+				<polygon points="32 32 480 32 256 480" />
+			</symbol>
+			<!-- edit combatant -->
+			<symbol id="edit" >
+				<polygon points="0 512 0 352 224 128 384 288 160 512" />
+				<polygon points="352 0 512 160 416 256 256 96" />
+			</symbol>
+			<!-- clone combatant -->
+			<symbol id="clone" >
+				<rect x="0" y="0" width="512" height="128" />
+				<rect x="0" y="384" width="512" height="128" />
+				<polygon points="128 192 384 192 256 320" />
+			</symbol>
+			<!-- delete combatant -->
+			<symbol id="delete" >
+				<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
+				<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
+			</symbol>
+			<!-- K.O. -->
+			<symbol id="ko" >
+				<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
+				<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
+				<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
+			</symbol>
+			<!-- dead -->
+			<symbol id="dead" >
+				<rect x="208" y="0" width="96" height="512" />
+				<rect x="80" y="112" width="352" height="96" />
+			</symbol>
+		</defs>
+	</svg>
+
+	<!-- footer -->
+	<div class="footer-container">
+		<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
+			<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
+		</footer>
+	</div>
 </body>
 </html>

src/js/sr2ini.js

@@ -60,7 +60,7 @@ const DAMAGE_MONITOR_HTML = [
 		'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
 		'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
 		'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><svg viewbox="0 0 512 512"><use href="#ko" /></svg></button></td><td><button type="button" class="damage-physical active" title="Dead" tabindex="-1"	><svg viewbox="0 0 512 512"><use href="#dead" /></svg></button></td></tr>\n',
+		'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><svg viewbox="0 0 512 512"><use href="#ko" /></svg></button></td><td><button type="button" class="damage-physical active" title="Dead" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#dead" /></svg></button></td></tr>\n',
 	'</table>\n',
 '</div>'].join("");
 
@@ -132,17 +132,17 @@ function addTestCombatant() {
  */
 
 // click handler for act buttons; reduces ini by 10
-function handleActButtonClick(e) {
+function handleActButtonClick(event) {
 	// reduce ini by 10 but not lower than 0
-	let ini = Math.max(parseInt($(e.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0);
+	let ini = Math.max(parseInt($(event.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0);
 	// set new ini value
-	$(e.target).parents(".combatant-row").attr("data-true-ini", ini);
+	$(event.target).parents(".combatant-row").attr("data-true-ini", ini);
 	// resort table
 	sortTable();
 }
 
-// click handler for add buttons
+// click handler for add button
-function handleAddButtonClick(e) {
+function handleAddButtonClick(event) {
 	// restyle modal
 	$("#combatant-modal .modal-title").text("Add Combatant");
 	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
@@ -155,13 +155,17 @@ function handleAddButtonClick(e) {
 	$("#combatant-modal-stun, #combatant-modal-physical").val("0");
 	// add handler for enter key
 	$("#combatant-modal input[id*='combatant-modal']").off("keydown");
-	$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) =>	{ if (e.which == 13 || e.which == 10) { addCombatant(e); } });
+	$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) =>	{
+		if (e.which == 13 || e.which == 10) { 
+			handleCombatantModalAddOkButtonClick(e);
+		} 
+	});
 }
 
 // click handler for clone buttons -> like handleAddButtonClick but with a pre-filled modal
-function handleCloneButtonClick(e) {
+function handleCloneButtonClick(event) {
 	// find current table row
-	let $tr = $(e.target).parents(".combatant-row");
+	let $tr = $(event.target).parents(".combatant-row");
 	// hide actions menu
 	$tr.find(".actions-menu").removeClass("seen");	
 	// restyle modal
@@ -177,26 +181,72 @@ function handleCloneButtonClick(e) {
 	$("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0");
 	// add handler for enter key
 	$("#combatant-modal input[id*='combatant-modal']").off("keydown");
-	$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { if (e.which == 13 || e.which == 10) { addCombatant(e); } });
+	$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
+		if (e.which == 13 || e.which == 10) { 
+			handleCombatantModalAddOkButtonClick(e);
+		} 
+	});
 }
 
-// click handler for damage buttons; basically toggles visibility of table.damage-monitor
+// click handler for combatant modal OK button (add mode)
-function handleDamageButtonClick(e) {
+function handleCombatantModalAddOkButtonClick(event) {
+	if (validateCombatant()) {
+		bs.getInstance($("#combatant-modal")).hide();
+		addCombatant();
+	}
+}
+
+// click handler for combatant modal Apply button (add mode) 
+function handleCombatantModalAddApplyButtonClick(event) {
+	if (validateCombatant()) {
+		addCombatant();
+	}
+}
+
+// click handler for combatant modal OK button (edit mode)
+function handleCombatantModalEditOkButtonClick(event) {
+	if (validateCombatant()) {
+		bs.getInstance($("#combatant-modal")).hide();
+		editCombatant();
+	}
+}
+
+// click handler for damage buttons; basically toggles visibility of .damage-monitor
+function handleDamageButtonClick(event) {
 	// get visibility status at click time
-	let seenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen");
+	let seenAtClick = $(event.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen");
 	// hide all damage monitors and actions menus
 	$(".damage-monitor.seen, .actions-menu.seen").removeClass("seen").find("button").attr("tabindex", "-1");
 	// if targeted dm was hidden before, show it now
 	if (! seenAtClick) {
-		$(e.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0");
+		$(event.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0");
 	}
 	return false;
 }
 
+// handle click on damage level button in damage monitor and apply damage to combatant
+function handleDamageLevelClick(event) {
+	let $btn = $(event.target).is("button") ? $(event.target) : $(event.target).closest("button");
+	// retrieve new damage level and type from button position and "damage-[type]" class
+	let damageLevel = $btn.parent().parent().index();
+	if ( $btn.hasClass("active") ) {
+		damageLevel += 1;
+	}
+	let damageType = $btn.attr("class").split(" ").filter(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7);
+console.log("damageType is", damageType);
+	// add damage level to table row as as data attribute
+	$btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel);
+	// select/unselect damage buttons above/below
+	$btn.toggleClass("active");
+	$btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active");
+	$btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active");
+	sortTable();
+}
+
 // click handler for edit buttons
-function handleEditButtonClick(e) {
+function handleEditButtonClick(event) {
 	// find current table row
-	let $tr = $(e.target).parents(".combatant-row");
+	let $tr = $(event.target).parents(".combatant-row");
 	// restyle modal
 	$("#combatant-modal .modal-title").text("Edit Combatant");
 	$("#combatant-modal-edit-ok-button").removeClass("d-none");
@@ -212,40 +262,60 @@ function handleEditButtonClick(e) {
 	$("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use the jQuery data() function (which is not the same as using a data attribute) b/c this value is used only in this script and not via HTML or CSS
 	// add handler for enter key
 	$("#combatant-modal input[id*='combatant-modal']").off("keydown");
-	$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { if (e.which == 13 || e.which == 10) {	editCombatant(e); }	});
+	$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
+		if (e.which == 13 || e.which == 10) {	
+			handleCombatantModalEditOkButtonClick(e);
+		}
+	});
 }
 
 // click handler for the more-actions menus
-function handleMoreActionsButtonClick(e) {
+function handleMoreActionsButtonClick(event) {
 	// get visibility status at click time
-	let seenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen");
+	let seenAtClick = $(event.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen");
 
 	// hide all damage monitors
 	$(".actions-menu.seen, .damage-monitor.seen").removeClass("seen").find("button").attr("tabindex", "-1");
 	// if targeted dm was seen before, show it now
 	if (! seenAtClick) {
-		$(e.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0");
+		$(event.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0");
 	}
 
 	return false;
 }
 
 // click handler for new round button
-function handleNewRoundButton(e) {
+function handleNewRoundButtonClick(event) {
 	// restyle modal
 	$("#confirm-modal .modal-title").text("Start new Round");
 	$("#confirm-modal-new-round-ok-button").removeClass("d-none");
 	$("#confirm-modal-remove-combatant-ok-button").addClass("d-none");
+	// add handler for enter key
+	$("#confirm-modal").off("keydown");
+	$("#confirm-modal").on("keydown", (e) => {
+		if (e.which == 13 || e.which == 10) {
+			bs.getInstance($("#confirm-modal")).hide();
+			startNewRound();
+		} 
+	});
 }
 
 // click handler for remove buttons
-function handleRemoveButtonClick(e) {
+function handleRemoveButtonClick(event) {
 	// restyle modal
 	$("#confirm-modal .modal-title").text("Remove Combatant");
 	$("#confirm-modal-remove-combatant-ok-button").removeClass("d-none");
 	$("#confirm-modal-new-round-ok-button").addClass("d-none");
 	// mark which row is being removed
-	$("#confirm-modal").data("row", $(".combatant-row").index($(e.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value
+	$("#confirm-modal").data("row", $(".combatant-row").index($(event.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value
+	// add handler for enter key
+	$("#confirm-modal").off("keydown");
+	$("#confirm-modal").on("keydown", (e) => { 
+		if (e.which == 13 || e.which == 10) {
+			bs.getInstance($("#confirm-modal")).hide();
+			removeCombatant();
+		} 
+	});
 }
 
 
@@ -254,16 +324,7 @@ function handleRemoveButtonClick(e) {
  */
 
 // add new combatant 
-function addCombatant(e) {
+function addCombatant() {
-//	e.preventDefault();
-	// validate form
-	if (!validateCombatant()) {
-		return false;
-	}
-	// hide modal if OK was pressed, but not on Apply
-	if (e.target.id != "combatant-modal-add-apply-button") {
-		bs.getInstance($("#combatant-modal")).hide();
-	}
 	// roll for initiative if necessary
 	let ini = $("#combatant-modal-ini").val().trim();
 	ini = (ini != "") ? ini : rollForInitiative($("#combatant-modal-dice").val(), $("#combatant-modal-rea").val());
@@ -287,42 +348,14 @@ function addCombatant(e) {
 	$tr.find("button.edit-button, .combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
 	$tr.find("button.clone-button").on("click", handleCloneButtonClick);
 	$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
-	// add event handler to damage monitor
+	$tr.find(".damage-stun, .damage-physical").on("click", handleDamageLevelClick);
-	$tr.find(".damage-stun, .damage-physical").on("click", applyDamage);
 	// append row to table and sort
 	$(".combatants-table").append($tr);
 	sortTable();
 }
 
-// apply damage to combatant
-function applyDamage(e) {
-	let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).closest("button");
-	// retrieve new damage level and type from button position and "damage-[type]" class
-	let damageLevel = $btn.parent().parent().index();
-	if ( $btn.hasClass("active") ) {
-		damageLevel += 1;
-	}
-	let damageType = $btn.attr("class").split(" ").filter(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7);
-console.log("damageType is", damageType);
-	// add damage level to table row as as data attribute
-	$btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel);
-	// select/unselect damage buttons above/below
-	$btn.toggleClass("active");
-	$btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active");
-	$btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active");
-	sortTable();
-}
-
 // edit combatant
-function editCombatant(e) {
+function editCombatant() {
-console.log("editing combatant …")
-	//	e.preventDefault();
-	// validate form
-	if (!validateCombatant()) {
-		return false;
-	}
-	// hide modal 
-	bs.getInstance($("#combatant-modal")).hide();
 	// get values
 	let name = $("#combatant-modal-name").val().trim();
 	let ini = $("#combatant-modal-ini").val().trim();
@@ -351,8 +384,7 @@ console.log("row is", $tr);
 }
 
 // remove combatant
-function removeCombatant(e) {
+function removeCombatant() {
-	e.preventDefault();
 	// remove correct row
 	let index = parseInt($("#confirm-modal").data("row"));
 	$(".combatant-row").eq(index).remove();
@@ -362,8 +394,7 @@ function removeCombatant(e) {
 }
 
 // start a new combat round
-function startNewRound(e) {
+function startNewRound() {
-	e.preventDefault();
 	// are there rows at all?
 	if ($(".combatant-row").length == 0) {
 		return;
@@ -479,13 +510,17 @@ function validateCombatant() {
 $(document).ready(function () {
 	// add event handlers to navbar buttons
 	$("#add-combatant-button").on("click", handleAddButtonClick);
-	$("#new-round-button").on("click", handleNewRoundButton);
+	$("#new-round-button").on("click", handleNewRoundButtonClick);
 	// add event handlers to modal buttons
-	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").on("click", addCombatant);
+	$("#combatant-modal-add-apply-button").on("click", handleCombatantModalAddApplyButtonClick);
-	$("#combatant-modal-edit-ok-button").on("click", editCombatant);
+	$("#combatant-modal-add-ok-button").on("click", handleCombatantModalAddOkButtonClick);
-	$("#confirm-modal-new-round-ok-button").on("click", startNewRound);
+	$("#combatant-modal-edit-ok-button").on("click", handleCombatantModalEditOkButtonClick);
-	$("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant);
+	$("#confirm-modal-new-round-ok-button").on("click", () => {
-
+		startNewRound();
+	});
+	$("#confirm-modal-remove-combatant-ok-button").on("click", () => {
+		removeCombatant();
+	});
 	// add event listeners to damage sliders in combatant modal
 	$("#combatant-modal-stun").on("change", () => {
 		if ($("#combatant-modal-stun").val() == "10") {
@@ -515,7 +550,7 @@ $(document).ready(function () {
 			$(".actions-menu.seen").removeClass("seen");
 		}
 	});
-//	addTestCombatant();
+	addTestCombatant();
 });
 
-module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };
+//module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };