- mostly finished redesign (only details left to do)

- you can now view and edit damage levels in the combatant modal - added Apply button to combatant modal - added submenu to action buttons - added clone button to actions - moved remove button from damage monitor to submenu
2023-02-23 22:42:02 +01:00 · 2023-02-23 22:42:02 +01:00 · 382f0668c7
commit 382f0668c7
parent f56c665b0c
4 changed files with 339 additions and 100 deletions
--- a/TODO.md
+++ b/TODO.md
@ -27,21 +27,19 @@
 	-	musste den clip-path von tr und td auf none setzen
 -	x jetzt kann ich den damage-monitor zwar aufklappen, aber die Buttons der weiter unten liegenden combatant-rows überdecken ihn jedesmal.
 -	x wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem 
-
-	Output vom HTML Validator: 
+-	x wenn die Navbar borders hat, sollte sie nicht direkt am oberen Bildrand anfangen, sondern ein paar Pixel weiter unten 
+-	x Unterschied zwischen enabled und disabled button nicht gut erkennbar
+-	x Output vom HTML Validator: 
 	-	img elements müssen alt attributes haben
 	-	The form attribute must refer to a form element. (bei den Input Elementen im combatant-modal) -> muss nachsehen, was ich dann genau da eintragen muss
-	wenn die Navbar borders hat, sollte sie nicht direkt am oberen Bildrand anfangen, sondern ein paar Pixel weiter unten 
+
 -	nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht 
 	-	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?
-	Unterschied zwischen enabled und disabled button nicht gut erkennbar
 -	wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
-	navbar bei größerem viewport
-	brand-name nicht mittig
 -	Bug: rea editieren ändert nicht die ini -> da muss ich die Würfelergebnisse für speichern


@ -52,7 +50,25 @@
 	-	Verwalte sie jetzt komplett mit der data-* API; verwende dafür ausschließlich .attr() als Getter/Setter
 	-	Füge die Werte aus dem Attribut per CSS direkt ins Element ein (::after und content). 
 -	x prettify code: alle HTML class names von camelCale zu dash-case komvertieren
-	neue Icons: act add cross damage dice edit newround trash zzz clone
+-	x Design cyberpunkig machen
+-	x im modal soll man die damage levels einstellen/verändern können
+	-	input type=range
+	-	Werte sollen dazu angezeigt werden -> https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input#26613443
+	-	ein label über die range, eins darunter 
+-	x Im modal, wenn ich die wound penalties anzeige, die Fälle KO und Tod gesondert behandeln
+-	x clone button
+	-	x und im combatant-modal ein weiterer OK-Button, der das Modal offenlässt  
+
+-	noch mehr Design
+	-	favicon -> https://stackoverflow.com/questions/48956465/favicon-standard-2023-svg-ico-png-and-dimensions
+	-	imput[type=range] schicker machen
+	-	input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
+	-	Seite für größere Screens anpassen
+		-	Schrift, Buttons und Icons skalieren
+		-	Tabellenbreite begrenzen
+		-	styling der contextual classes, disabled elements etc.
+	-	Animationen? Transitions?
+-	neue Icons: (act) add clone dead takedamage die rolldice edit newround trash zzz menu, ggf. favicon
 	-	attribution
 		-	noun project: Icons by Febrian Hidayat from <a href="https://thenounproject.com/icons" target="_blank" title="Icons">Noun Project</a>
 		-	iconfinder: CC4.0
@ -61,10 +77,8 @@
 	-	warum sind im dist/-Folder immer zwei Versionen der gleichen Datei?
 	-	HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
 	-	bootstrap, jquery etc lokal vorhalten?
-	Im modal, wenn ich die wound penalties anzeige, die Fälle KO und Tod gesondert behandeln
-	im modal soll man die damage levels einstellen/verändern können
-	"clone this combatant" button: 
 -	Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
-	Design cyberpunkig machen
 -	docstrings
-	
+-	parcel soll aus dem HTML code nicht die Newlines rausnehmen -> macht er das überhaupt noch?
+	-	falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace 
+-	progressive web app draus machen? -> https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@ -26,12 +26,23 @@ $sr2-fg: deeppink;
@mixin button() {
 	border: 0;
 	border-radius: 1px;
-	padding-right: 2px;
-	padding-left: 2px;
+	padding-inline: 0px;

 	border: 1px solid cyan;
 	background: transparent;
 	box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan;
+
+	color: deeppink;
+
+	img {
+		filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
+	}
+}
+
+.sr2-button:focus-visible {
+	outline: none;
+	border: 2px solid cyan !important;
+	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
 }

 html, 
@ -51,14 +62,13 @@ body {

 }

-:focus-visible {
-	outline: none;
-	border: 2px solid cyan !important;
-	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
+div.container {
+	position: relative;
+	padding: 4px;
 }

 header.navbar {
-	margin-top: 4px;
+//	margin-top: 4px;
 	padding-right: .6rem;;
 	@include border;
 	@include inlay;
@ -78,18 +88,16 @@ header.navbar {

 	button {
 		@include button;
+		width: 38px;
+		height: 38px;
 		margin-right: 3px;
 		margin-left: 3px;

-		> img {
-			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
-		}
 	}
 }

-
-div.container {
-	position: relative;
+.table-responsive {
+	margin-bottom: 1px;
 }

 #combatants-table {
@ -163,20 +171,36 @@ div.container {
 		--aug-border-bottom: 2px;
 	}

-	> tbody > tr > td > button,
-	> tbody > tr > td > div > button, {
+	.sr2-button {
 		@include button;
-		padding: 0px;
+//		padding: 1px;
 		width: 24px;
 		height: 24px;

+
 		img {
 			position: relative;
 			bottom: 3px;
 			width: 16px;
 			height: 16px;
-			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%);
 		}
+
+		&:disabled {
+			box-shadow: none;
+			border-color: darkcyan;
+
+			img {
+				filter: invert(6%) sepia(93%) saturate(7363%) hue-rotate(2deg) brightness(80%) contrast(105%);
+			}
+
+		}
+	}
+
+	.act-button {
+		line-height: 24px;
+		font-size: 12px;
+		position: relative;
+		bottom: 1px
 	}
 }

@ -223,11 +247,11 @@ div.container {
 	width: 20px;
 }

-.damage-dropdown {
+.damage-dropdown, .actions-dropdown {
 	display: inline-block;
 }

-.damage-monitor {
+.damage-monitor, .actions-menu {
 	position: absolute;
 	z-index: 200;

@ -241,7 +265,9 @@ div.container {

 	padding-top: 10px;
 	padding-bottom: 10px;
+}

+.damage-monitor {
 	button {
 		font-size: smaller;
 		width: 24px;
@ -250,6 +276,11 @@ div.container {
 		border: none;
 		margin: 0px 2px;
 		border-radius: 0;
+
+		&:focus-visible {
+			filter: brightness(150%) !important;
+			outline: none;
+		}
 	}

 	.damage-stun {
@ -268,6 +299,10 @@ div.container {
 		background: radial-gradient(circle at center, deeppink, maroon);
 		box-shadow: none;
 		transition: background .5s, box-shadow .5s;
+
+		&:focus-visible {
+			outline: deeppink !important;
+		}
 	}

 	.damage-physical.active {
@ -275,13 +310,6 @@ div.container {
 		box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
 	}

-	.remove-button {
-		width: 56px;
-		height: 28px;
-		margin-top: 4px;
-		@include button;
-	}
-
 	td button img {
 		position: relative;
 		top: -2px;
@ -298,6 +326,60 @@ div.container {
 */
 }

+.actions-menu {
+	display: flex;
+	flex-flow: column;
+	padding: 6px;
+
+
+	button {
+		@include button;
+		width: 24px;
+		height: 24px;
+		margin: 4px;
+
+		img {
+			position: relative;
+			bottom: 3px;
+			width: 16px;
+			height: 16px;
+		}
+	}
+}
+
+
+.footer-container {
+	position: fixed;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+}
+footer {
+//	z-index: -10 !important;
+
+	@include aug;
+	@include inlay;
+	--aug-tl: 10px;
+	--aug-tr: 10px;
+	--aug-border-bg: cyan !important; // "sr2-border doesn't work"
+	--aug-border-opacity: .5 !important;
+	--aug-border-all: 2px !important;
+	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
+
+	p {
+		font-size: xx-small;
+		margin: .25rem;
+		color: cyan;
+		user-select: auto;
+
+		a {
+			color: hotpink;
+			text-decoration: none;
+		}
+	}
+
+}
+

 .sr2-modal {
 	@include border;
@ -305,6 +387,10 @@ div.container {
 	color: cyan;
 	pointer-events: auto;

+	button {
+		@include button;
+	}
+
 	.modal-header {
 		text-transform: uppercase;
 		border-bottom: none;
@ -334,8 +420,26 @@ div.container {
 		}
 	}

+	label {
+		margin: 0;
+	}
+
+	.label-swap {
+		display: flex;
+		flex-flow: column;
+	
+		label {
+			order: 2;
+			text-align: right;
+		}
+
+		input {
+			order: 1;
+		}
+
+	}
+
 	input {
-		@include button;
 		background-color: transparent;
 		color: deeppink;
 		user-select: text;
@ -350,6 +454,18 @@ div.container {
 			color: deeppink;
 		}

+		&:focus-visible {
+			background-color: transparent;
+			color: deeppink;
+		}
+
+	 	&:valid {
+	 	}
+	 	&:invalid {
+	 		border: 1px solid deeppink;
+			box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
+	 	}
+
 		&[type=number]::-webkit-inner-spin-button,
 		&[type=number]::-webkit-outer-spin-button { 
 			-webkit-appearance: none; 
@ -362,16 +478,56 @@ div.container {
 	 		margin: 0; 
 	 	}

-	 	&:invalid {
-	 		border: 1px solid deeppink;
-			box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
+	 	&[type=range] {
+//			-webkit-appearance: none;
+			width: 91%;
+			margin-left: calc(4.5% - 2px);
+
+	 		+ datalist {
+	 			display: block;
+	 			width: 100%;
+
+	 			option {
+	 				display: inline-block;
+	 				margin: 0;
+	 				width: 9%;
+	 				text-align: center;
+	 			}
+	 		}
+
+	 		&::-moz-range-track {
+	 			height: 2px;
+	 			border: 1px;
+	 			border-radius: 1px;
+	 		}
+	 		
+ 			&::-moz-range-thumb {
+ 				width: 4px;
+	 			height: 20px;
+	 		}
+
+	 		&#combatant-modal-stun {
+
+		 		&::-moz-range-track {
+		 			color: darkcyan !important;
+		 		}
+
+	 			&::-moz-range-thumb {
+		 			background-color: cyan;
+		 		}
+	 		}
+
+ 	 		&#combatant-modal-physical {
+
+		 		&::-moz-range-track {
+		 			color: maroon;
+		 		}
+
+ 	 			&::-moz-range-thumb {
+	 				background-color: deeppink;
+	 			}
+	 		}
 	 	}
-
-	}
-
-	button {
-		@include button;
-		color: deeppink;
 	}

 	span.input-group-text {
@ -384,21 +540,12 @@ div.container {



-footer {
-	z-index: -10 !important;
-
-	p {
-		font-size: x-small;
-		margin-bottom: .5rem;
-	}

+/*
 	hr {
 		margin: .5rem 0;
 	}
-}

-
-/*
 th span{
    position: absolute;
    display: block;
--- a/src/index.html
+++ b/src/index.html
@ -30,17 +30,18 @@
 		<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 text-bold ps-4">SR2 Initiative Tracker</span>
 			<nav class="container-fluid justify-content-end" aria-label="Main navigation">
-				<button type="submit" class="" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="img/add.png"></button>
-				<button type="submit" class="" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="img/newround.png"></button>
+				<button type="submit" class="sr2-button" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="img/add.png" alt="user outline with a plus sign"></button>
+				<button type="submit" class="sr2-button" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="img/newround.png" alt="a die being rolled"></button>
 			</nav>
 		</header>
+
 		<div class="table-responsive overflow-visible">
 			<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 text-start th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
 						<th class="col-2 text-center th-ini" data-augmented-ui="both" title="Initiative">Ini</th>
-						<th class="col-2 text-center th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction"><img src="img/dice.png">+R</th>
+						<th class="col-2 text-center th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction"><img src="img/dice.png" alt="a single die">+R</th>
 						<th class="col-3 text-center th-actions" data-augmented-ui="r-clip-y both" title="Actions">Actions</th>
 					</tr>
 				</thead>
@ -50,20 +51,27 @@
 		</div>
 	</div>

+	<div class="footer-container">
+		<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
+			<p class="text-center">code & design by <a href="https://tobias-radloff.de/" tabindex="-1" title="Eclipse">Eclipse</a> | Shadowrun trademarked by <a href="https://www.topps.com/" tabindex="-1" title="Topps">Topps</a><br>
+			icons by <a href="https://www.freepik.com" tabindex="-1" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" tabindex="-1" title="Flaticon">www.flaticon.com</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 both">
+			<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">
 				<div class="modal-header" data-augmented-ui="inlay">
 					<h5 class="modal-title">Start New Round</h5>
-					<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
+					<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">X</button>
 				</div>
 				<div class="modal-body"  data-augmented-ui="inlay">
 					<p>Are you sure?</p>
 				</div>
 				<div class="modal-footer" data-augmented-ui="inlay">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-					<button type="submit" class="btn btn-primary" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
-					<button type="submit" class="btn btn-primary d-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="button" class="sr2-button" data-bs-dismiss="modal">Cancel</button>
+					<button type="submit" class="sr2-button" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="submit" class="sr2-button d-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
 				</div>
 			</div>
 		</div>
@ -74,41 +82,46 @@
 			<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">
 				<div class="modal-header" data-augmented-ui="inlay">
 					<h5 class="modal-title">Add New Combatant</h5>
-					<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
+					<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">X</button>
 				</div>
 				<div class="modal-body" data-augmented-ui="inlay">
 					<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
 						<div class="my-2">
-							<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="#combatant-modal-form" placeholder="Name" required>
+							<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
 						</div>
 						<div class="input-group input-group-sm my-2">
-							<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="#combatant-modal-form" placeholder="Dice">
+							<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-form" placeholder="Dice">
 							<span class="input-group-text">D+</span>
-							<input type="number" min="1" max="25" class="form-control form-control-sm" id="combatant-modal-rea" form="#combatant-modal-form" placeholder="REA">
+							<input type="number" min="1" max="25" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
+							<span class="input-group-text">&nbsp;&nbsp;&nbsp;</span>
+							<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="combatant-form" placeholder="Ini">
+
 						</div>
 						<div class="my-2">
-							<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="#combatant-modal-form" placeholder="Ini">
-							<label for="combatant-modal-ini" class="form-label">Wound penalties: -<span id="penalty-stun">0</span> (stun) and -<span id="penalty-physical">0</span> (physical)</label>
+							<label for="combatant-modal-stun" class="form-label">Stun Damage Level</label>
+							<input type="range" class="form-range" min="0" max="10" id="combatant-modal-stun" list="damage">
+
+							<datalist id="damage">
+								<option>-</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
+							</datalist>
+							<div class="label-swap"> 
+								<label for="combatant-modal-physical" class="form-label">Physical Damage Level</label>
+								<input type="range" class="form-range" min="0" max="10" id="combatant-modal-physical" list="damage">
+							</div>
+
+							<p>Wound penalties: <span id="combatant-modal-penalties"></span></p>
 						</div>
 					</form>
 				</div>
 				<div class="modal-footer" data-augmented-ui="inlay">
-					<button type="button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
-					<button type="submit" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
-					<button type="submit" class="d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="button" class="sr2-button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
+					<button type="submit" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
+					<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="submit" class="sr2-button d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
 				</div>
 			</div>
 		</div>
 	</div>

-	<div class="container">
-		<footer class="footer fixed-bottom bg-light">
-			<hr>
-			<p class="text-center text-muted">code & design by <a href="https://tobias-radloff.de/">Eclipse</a> | Shadowrun trademarked by <a href="https://www.topps.com/">Topps</a><br>
-				icons by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> | background by <a href="https://www.deviantart.com/xxaries1970xx">xxAries1970xx</a></p>
-		</footer>
-	</div>
-
 </body>
-
 </html>
--- a/src/js/sr2ini.js
+++ b/src/js/sr2ini.js
@ -8,11 +8,18 @@ const COMBATANT_TABLE_ROW = [
 	'<td class="combatant-name" title="Combatant\'s name" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="tl-scoop bl-clip-y both">Test</td>\n',
 	'<td class="combatant-ini" title="Effective initiative (w/ wound penalties)" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"></td>\n',
 	'<td class="text-center combatant-dice-and-rea" title="Iniative dice and reaction" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"><span class="combatant-dice"></span>D+<span class="combatant-rea"></span></td>\n',
-	'<td class="combatant-actions text-end" data-augmented-ui="tr-clip-y br-scoop both">\n',
-		'<button type="button" class="edit-button" title="Edit combatant\'s values" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="001-edit.png"/></button>\n',
-		'<button type="button" class="act-button" title="Act and reduce ini by 10"><img src="002-act.png"/></button>\n',
+	'<td class="combatant-actions text-center" data-augmented-ui="tr-clip-y br-scoop both">\n',
+		'<button type="button" class="sr2-button act-button" title="Act and reduce ini by 10">-10</button>\n',
 		'<div class="damage-dropdown">\n',
-			'<button type="button" class="damage-button" title="Take damage" ><img src="003-damage.png"/></button>\n',
+			'<button type="button" class="sr2-button damage-button" title="Take damage" ><img src="003-damage.png"/></button>\n',
+		'</div>\n',
+		'<div class="actions-dropdown">\n',
+			'<button type="button" class="sr2-button actions-button" title="More actions"><img src=""/></button>\n',
+			'<div class="actions-menu d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
+				'<button type="button" class="sr2-button edit-button" title="Edit combatant\'s values" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="001-edit.png"/></button>\n',
+				'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src=""/></button>\n',
+				'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button>\n',
+			'</div>\n',
 		'</div>\n',
 	'</td>\n',
 '</tr>'].join("");
@ -29,7 +36,7 @@ const DAMAGE_MONITOR_HTML = [
 		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
 		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
 		'<tr><td><button class="damage-stun active" title="K.O."><img src="zzz.png" height="16" /></button></td><td><button class="damage-physical active" title="dead"><img src="cross.png" height="16"/></button></td></tr>\n',
-		'<tr><th colspan="2"><button type)"submit" class="remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button></th></tr>\n',
+//		'<tr><th colspan="2"><button type)"submit" class="remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button></th></tr>\n',
 	'</table>\n',
 '</div>'].join("");
 const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
@ -99,8 +106,35 @@ function handleActButtonClick(e) {
 function handleAddButtonClick(e) {
 	// restyle modal
 	$("#combatant-modal .modal-title").text("Add Combatant");
-	$("#combatant-modal-add-ok-button").removeClass("d-none");
+	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
 	$("#combatant-modal-edit-ok-button").addClass("d-none");
+	// set damage sliders to zero
+	$("#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", function (e) {
+		if (e.which == 13 || e.which == 10) {
+			addCombatant(e);
+		}
+	});
+}
+// click handler for clone buttons -> like handleAddButtonClick but with a pre-filled modal
+function handleCloneButtonClick(e) {
+	// find current table row
+	let $tr = $(e.target).parents(".combatant-row");
+	// hide actions menu
+	$tr.find(".actions-menu").addClass("d-none");	
+	// restyle modal
+	$("#combatant-modal .modal-title").text("Clone Combatant");
+	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
+	$("#combatant-modal-edit-ok-button").addClass("d-none");
+	// populate modal with values from row
+	$("#combatant-modal-name").val($tr.find(".combatant-name").text());
+	$("#combatant-modal-dice").val($tr.find(".combatant-dice").attr("data-combatant-dice"));
+	$("#combatant-modal-rea").val($tr.find(".combatant-rea").attr("data-combatant-rea"));
+	$("#combatant-modal-ini").val($tr.attr("data-true-ini"));
+	$("#combatant-modal-stun").val($tr.attr("data-damage-stun") || "0");
+	$("#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", function (e) {
@ -113,8 +147,8 @@ function handleAddButtonClick(e) {
 function handleDamageButtonClick(e) {
 	// get visibility status at click time
 	let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none");
-	// hide all damage monitors
-	$(".damage-monitor:visible").addClass("d-none");
+	// hide all damage monitors and actions menus
+	$(".damage-monitor:visible, .actions-menu:visible").addClass("d-none");
 	// if targeted dm was hidden before, show it now
 	if (hiddenAtClick) {
 		$(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none");
@ -127,16 +161,15 @@ function handleEditButtonClick(e) {
 	let $tr = $(e.target).parents(".combatant-row");
 	// restyle modal
 	$("#combatant-modal .modal-title").text("Edit Combatant");
-	$("#combatant-modal-add-ok-button").addClass("d-none");
+	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").addClass("d-none");
 	$("#combatant-modal-edit-ok-button").removeClass("d-none");
 	// populate modal with values from row
 	$("#combatant-modal-name").val($tr.find(".combatant-name").text());
 	$("#combatant-modal-dice").val($tr.find(".combatant-dice").attr("data-combatant-dice"));
 	$("#combatant-modal-rea").val($tr.find(".combatant-rea").attr("data-combatant-rea"));
 	$("#combatant-modal-ini").val($tr.attr("data-true-ini"));
-	// 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]);
+	$("#combatant-modal-stun").val($tr.attr("data-damage-stun") || "0");
+	$("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0");
 	// mark which row is being edited
 	$("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use .data() b/c HTML/CSS does not care about this value
 	// add handler for enter key
@ -147,6 +180,18 @@ function handleEditButtonClick(e) {
 		}
 	});
 }
+// click handler for the more-actions menus
+function handleMoreActionsButtonClick(e) {
+	// get visibility status at click time
+	let hiddenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("d-none");
+	// hide all damage monitors
+	$(".actions-menu:visible, .damage-monitor:visible").addClass("d-none");
+	// if targeted dm was hidden before, show it now
+	if (hiddenAtClick) {
+		$(e.target).parents(".actions-dropdown").find(".actions-menu").removeClass("d-none");
+	}
+	return false;
+}

 function handleNewRoundButton(e) {
 	// restyle modal
@ -184,13 +229,19 @@ function addCombatant(e) {
 	$tr.find(".combatant-name").text($("#combatant-modal-name").val().trim());
 	$tr.find(".combatant-dice").attr("data-combatant-dice", $("#combatant-modal-dice").val().trim());
 	$tr.find(".combatant-rea").attr("data-combatant-rea", $("#combatant-modal-rea").val().trim());
-	//TODO: retrieve initial damage levels 
-	// add handler to table cells (click to edit)
+	// retrieve initial damage levels 
+	$tr.attr("data-damage-stun", $("#combatant-modal-stun").val() || "0");
+	$tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active");
+	$tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0");
+	$tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active");
+	// add click handler to table cells
 	$tr.find(".combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
 	// add handlers to action buttons 
-	$tr.find("button.edit-button").on("click", handleEditButtonClick);
 	$tr.find("button.act-button").on("click", handleActButtonClick);
 	$tr.find("button.damage-button").on("click", handleDamageButtonClick);
+	$tr.find("button.actions-button").on("click", handleMoreActionsButtonClick);
+	$tr.find("button.edit-button").on("click", handleEditButtonClick);
+	$tr.find("button.clone-button").on("click", handleCloneButtonClick);
 	$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
 	// add handler to damage monitor
 	$tr.find(".damage-stun, .damage-physical").on("click", applyDamage);
@ -243,6 +294,10 @@ function editCombatant(e) {
 	$tr.find(".combatant-name").text(name);
 	$tr.find(".combatant-dice").attr("data-combatant-dice", dice);
 	$tr.find(".combatant-rea").attr("data-combatant-rea", rea);
+	$tr.attr("data-damage-stun", $("#combatant-modal-stun").val() || "0");
+	$tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active");
+	$tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0");
+	$tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active");
 	// sort table
 	sortTable();
 	// clean up
@ -379,10 +434,20 @@ $(document).ready(function () {
 	$("#add-combatant-button").on("click", handleAddButtonClick);
 	$("#new-round-button").on("click", handleNewRoundButton);
 	// add event handlers to modal buttons
-	$("#combatant-modal-add-ok-button").on("click", addCombatant);
+	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").on("click", addCombatant);
 	$("#combatant-modal-edit-ok-button").on("click", editCombatant);
 	$("#confirm-modal-new-round-ok-button").on("click", startNewRound);
 	$("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant);
+
+	// add event listener to damage sliders in combatant modal
+	$("#combatant-modal-stun, #combatant-modal-physical").on("change", function() {
+		if ($("#combatant-modal-stun").val() == "10" || $("#combatant-modal-physical").val() == "10") {
+			$("#combatant-modal-penalties").text("incapacitated");
+		} else {
+			$("#combatant-modal-penalties").text("-" + DAMAGE_PENALTY[$("#combatant-modal-stun").val()] + " (stun) and -" + DAMAGE_PENALTY[$("#combatant-modal-physical").val()] + " (physical)");
+		}
+	});
+
 	// always focus name input field when combatant modal appears
 	$('#combatant-modal').on('shown.bs.modal', function () {
 		$('#combatant-modal-name').focus();