- tidied up CSS using results from csslint

- cleaned up HTML using webhint results - added files to tools/ that were used to create the favicon master image - recreated more icons in SVG
2023-03-02 13:58:16 +01:00 · 2023-03-02 13:58:16 +01:00 · 911effe72c
commit 911effe72c
parent 0ad3083689
11 changed files with 186 additions and 163 deletions
--- a/.gitignore
+++ b/.gitignore
@ -5,3 +5,5 @@ package-lock.json
 .parcelrc
 dist/
 node_modules/
+hint-report/
+.csslintrc
--- a/TODO.md
+++ b/TODO.md
@ -69,7 +69,13 @@
 -	x dmg-mon/actions-menu: tabindex auf -1 setzen, wenn nicht sichtbar 
 -	x dmg-mon/actions-menu direkt unter dem jeweiligen Button ausrichten (X-Achse)
 	-	ich richte die Buttons jetzt rechtsbündig aus, dann weiß ich immer die (ungefähre) Position des Buttons
+-	x SVG Icons alle in eine externe Datei als <symbol>s mit ID packen. Diese kann ich dann in anderen Files referenzieren: <svg><use href="icons.svg#icon1" /></svg> 
+	-	https://stackoverflow.com/questions/34225008/how-to-reuse-an-embedded-svg-element-in-the-same-page
+	-	leider geht das nicht: addCombatant() fügt HTML dynamisch ins Dokument ein, und wenn in diesem HTML SVG enthalten ist, werden die <use>-Elemente darin nicht ausgewertet (also duch das referenzierte <symbol> ersetzt). Das SVG wird daher nicht angezeigt.
+	-	um das zu beheben. müsste ich die jQuery-Methode parseHTML() modifizieren und alle Aufrufe von createElement() durch createElementNS() ersetzen
+	-	aber am Ende bringt das gar nichts, weil der Browser bei jedem <use> den Inhalt des <symbol>s aufs Neue ins DOM kopiert. Die HTML-Platzersparnis wäre also gleich Null. 

+-	Seite auch mal im Chrome checken
 -	dafür sorgen, dass die Seite erst dann aufgebaut wird, wenn die CSS-Files geladen sind, damit man nicht den ungestylten Krams sieht 
 -	kann die classes text-center, text-end etc aus den Tabellenzellen entfernen 
 -	noch mehr Design
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "@parcel/transformer-sass": "^2.8.3",
    "@parcel/transformer-webmanifest": "^2.8.3",
    "@parcel/transformer-xml": "^2.8.3",
+    "hint": "^7.1.3",
    "parcel": "^2.8.3",
    "parcel-reporter-static-files-copy": "^1.5.0"
  },
@ -27,7 +28,8 @@
    "start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
    "prebuild": "rm -rf dist/",
    "build": "npx parcel build --public-url ./",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "webhint": "hint http://localhost:1234"
  },
  "repository": {
    "type": "git",
--- a/src/css/sr2ini.scss
+++ b/src/css/sr2ini.scss
@ -1,10 +1,14 @@
-$sr-border: cyan;
-$sr2-btn: darkcyan;
-$sr2-fg: deeppink;
+$fg: deeppink;
+$fg-bright: lightpink;
+$fg-dark: #b3005f;
+
+$bg: cyan;
+$bg-bright: lightcyan;
+$bg-dark: darkcyan;

@font-face {
 	font-family: "Electrolize";
-	src: local("Electrolize"), url("../img/Electrolize-Regular.ttf"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
+	src: local("Electrolize"), url("../img/Electrolize-Regular.ttf") format("truetype"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 }

@mixin aug() {
@ -18,7 +22,7 @@ $sr2-fg: deeppink;
 }

@mixin border() {
-	--aug-border-bg: cyan; // "sr2-border doesn't work"
+	--aug-border-bg: cyan; // variables don't work in this specific instance
 	--aug-border-opacity: .5;
 	--aug-border-all: 2px;
 }
@ -32,25 +36,23 @@ $sr2-fg: deeppink;
 	border-radius: 1px;
 	padding-inline: 0px;

-	border: 1px solid cyan;
+	border: 1px solid $bg;
 	background: transparent;
-	box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan;
+	box-shadow: 0 0 2px $bg-bright, 0 0 4px $bg, 0 0 8px $bg-dark;

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

-	svg * {
-		fill: deeppink;
-	}
+.icon {
+	fill: $fg; 
+	width: 128;
+	height: 128;
 }

 .sr2-button:focus-visible {
 	outline: none;
-	border: 1px solid cyan !important;
-	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
+	border: 1px solid $bg !important;
+	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
 }

 html, 
@ -71,13 +73,12 @@ body {

 }

-div.container {
+.container {
 	position: relative;
 	padding: 4px;
 }

 header.navbar {
-//	margin-top: 4px;
 	padding-right: .6rem;;
 	@include border;
 	@include inlay;
@ -90,8 +91,8 @@ header.navbar {
 	--aug-r: 7px;
 	--aug-inlay-bg: rgba(0, 0, 0, .75);

-	span.navbar-brand {
-		color: cyan;
+	.navbar-brand {
+		color: $bg;
 		text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px;
 	}

@ -105,16 +106,15 @@ header.navbar {
 		img {
 			width: 32px;
 			height: 32px;
+			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
 		}

 	}
 }

-.table-responsive {
-	margin-bottom: 1px;
-}
+.table-responsive { margin-bottom: 1px; }

-#combatants-table {
+.combatants-table {
 	margin-top: .5rem;

 	tr {
@ -127,23 +127,16 @@ header.navbar {

 	.combatant-row { 
 		clip-path: none; 
+		vertical-align: middle !important;
 	}

-	th:not(:first-of-type) {
-		text-align: center;
-	}
+	th:not(:first-of-type) { text-align: center; }

-	.th-ini { 
-		min-width: 3rem; 
-	}
+	.th-ini { min-width: 3rem; }

-	.th-dice-and-rea { 
-		min-width: 3.75rem;
-	}
+	.th-dice-and-rea { min-width: 3.75rem; }

-	.th-actions { 
-		min-width: 6.5rem;
-	}
+	.th-actions { min-width: 6.5rem; }

 	th, 
 	td {
@ -156,12 +149,12 @@ header.navbar {
 	}

 	th {
-		color: cyan;
+		color: $bg;
 		text-transform: uppercase; 
 	}

 	td {
-		color: $sr2-fg;
+		color: $fg;
 		clip-path: none;
 		font-weight: bold;
 	}
@ -182,7 +175,7 @@ header.navbar {
 		--aug-border-bottom: 2px;
 	}

-	td.combatant-actions {
+	.combatant-actions {
 		display: flex;
 		justify-content: flex-end;
 	}
@ -196,7 +189,7 @@ header.navbar {


 		img, 
-		svg {
+		.icon {
 			position: relative;
 			bottom: 3px;
 			width: 16px;
@ -205,11 +198,9 @@ header.navbar {

 		&:disabled {
 			box-shadow: none;
-			border-color: darkcyan;
+			border-color: $bg-dark;

-			svg * {
-				fill: #b3005f;
-			}
+			.icon { fill: $fg-dark;	}

 		}
 	}
@ -219,17 +210,11 @@ header.navbar {
 		padding-right: 1rem !important;
 	}

-	.combatant-dice-and-rea {
-		text-align: center;
-	}
+	.combatant-dice-and-rea { text-align: center; }

-	.combatant-dice::before {
-		content: attr(data-combatant-dice);
-	}
+	.combatant-dice::before { content: attr(data-combatant-dice); }

-	.combatant-rea::before {
-		content: attr(data-combatant-rea);
-	}
+	.combatant-rea::before { content: attr(data-combatant-rea); }

 	.actions-menu {
 		display: flex;
@ -242,12 +227,12 @@ header.navbar {
 			height: 24px;
 			margin: 4px;

-			img {
+/*			img {
 				position: relative;
 				bottom: 3px;
 				width: 16px;
 				height: 16px;
-			}
+			}*/
 		}
 	}

@ -257,29 +242,25 @@ header.navbar {
 .max-ini td {
 //	font-weight: bold;
 //	filter: brightness(1.1);
-	text-shadow: 0 0 1px deeppink, 0 0 2 hotpink;
+	text-shadow: 0 0 1px $fg, 0 0 2 $fg-bright;
 }

 .zero-ini td {
-	color: #b3005f !important;
+	color: $fg-dark !important;

-	svg * {
-		fill: #b3005f !important;
-	}
+	.icon { fill: $fg-dark !important; }
 }

 .ko-or-dead td {
 	background-color: rgba(0, 0, 0, .5);
-	color: #b3005f !important;
-	text-decoration: line-through .1em deeppink;
+	color: $fg-dark !important;
+	text-decoration: line-through .1em $fg;

-	svg * {
-		fill: #b3005f !important;
-	}
+	.icon { fill: $fg-dark !important; }
 }

 .badge.bg-warning {
-	background: radial-gradient(circle at center, cyan, darkcyan);
+	background: radial-gradient(circle at center, $bg, $bg-dark);

 	left: 12px;
 	bottom: -4px;
@ -287,7 +268,7 @@ header.navbar {
 }

 .badge.bg-danger {
-	background: radial-gradient(circle at center, deeppink, maroon);
+	background: radial-gradient(circle at center, $fg, $fg-dark);

 	left: 12px;
 	top: 12px;
@ -295,9 +276,7 @@ header.navbar {
 }

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

 .damage-monitor, 
 .actions-menu {
@ -332,8 +311,8 @@ header.navbar {
 .actions-button:has(+ .seen),
 .damage-button:has(+ .seen) {
 	outline: none;
-	border: 1px solid cyan !important;
-	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
+	border: 1px solid $bg !important;
+	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
 	filter: brightness(1.5);
 } */

@ -354,30 +333,28 @@ header.navbar {
 	}

 	.damage-stun {
-		background: radial-gradient(circle at center, cyan, darkcyan);
+		background: radial-gradient(circle at center, $bg, $bg-dark);
 		box-shadow: none;
 		transition: background .5s, box-shadow .5s;
 	}

 	.damage-stun.active {
-		background: radial-gradient(circle at center, lightcyan, cyan);
-		box-shadow: 0 0 3px lightcyan, 0 0 6px cyan, 0 0 12px darkcyan;
+		background: radial-gradient(circle at center, $bg-bright, $bg);
+		box-shadow: 0 0 3px $bg-bright, 0 0 6px $bg, 0 0 12px $bg-dark;
 	}

 	.damage-physical {
 		border-radius: 50%;;
-		background: radial-gradient(circle at center, deeppink, maroon);
+		background: radial-gradient(circle at center, $fg, $fg-dark);
 		box-shadow: none;
 		transition: background .5s, box-shadow .5s;

-		&:focus-visible {
-			outline: deeppink !important;
-		}
+		&:focus-visible { outline: $fg !important;	}
 	}

 	.damage-physical.active {
-		background: radial-gradient(circle at center, lightpink, deeppink);
-		box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
+		background: radial-gradient(circle at center, $fg-bright, $fg);
+		box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
 	}

 /*	&.d-none {
@ -405,7 +382,7 @@ footer {
 	@include inlay;
 	--aug-tl: 10px;
 	--aug-tr: 10px;
-	--aug-border-bg: cyan !important; // "sr2-border doesn't work"
+	--aug-border-bg: cyan !important; // vars don't work here
 	--aug-border-opacity: .5 !important;
 	--aug-border-all: 2px !important;
 	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
@ -414,7 +391,7 @@ footer {
 	p {
 		font-size: xx-small;
 		margin: .25rem;
-		color: cyan;
+		color: $bg;
 		user-select: auto;
 		padding-top: .65em;
 		text-align: center;
@ -431,13 +408,11 @@ footer {
 .sr2-modal {
 	@include border;
 	@include aug;
-	color: cyan;
+	color: $bg;
 	pointer-events: auto;
 //	width: 95vw; // 95 percent of viewport width

-	button {
-		@include button;
-	}
+	button { @include button; }

 	.modal-header {
 		text-transform: uppercase;
@ -446,9 +421,7 @@ footer {
 		@include border;
 		--aug-inlay-bottom: 0;

-		button {
-			width: 30px;
-		}
+		button { width: 30px; }
 	}

 	.modal-body {
@ -463,57 +436,49 @@ footer {
 		@include border;
 		--aug-inlay-top: 0;

-		button {
-			width: 4rem;
-		}
+		button { width: 4rem; }
 	}

-	label {
-		margin: 0;
-	}
+	label { margin: 0; }

 	.label-swap {
 		display: flex;
 		flex-flow: column;
 	
-		label {
-			order: 2;
-		}
+		label { order: 2; }

-		input {
-			order: 1;
-		}
+		input { order: 1; }

 	}

 	input {
 		background-color: transparent;
-		color: deeppink;
+		color: $fg;
 		user-select: text;

 		&::selection {
 			color: black;
-			background-color: deeppink;
+			background-color: $fg;
 		}
 	
 		&:focus {
 			background-color: transparent;
-			color: deeppink;
+			color: $fg;
 		}

 		&:focus-visible {
 			background-color: transparent;
-			color: deeppink;
+			color: $fg;
 		}

 	 	&:not([type=range]):valid {
-	 		border: 1px solid cyan !important	;
+	 		border: 1px solid $bg !important	;
 			background-image: none !important;
 	 	}

 	 	&:invalid {
-	 		border: 1px solid deeppink;
-			box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
+	 		border: 1px solid $fg;
+			box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
 			background-image: none !important;
 	 	}

@ -556,43 +521,32 @@ footer {
 				width: 4px;
 	 			height: 20px;
 	 		}
-
-	 		&#combatant-modal-stun {
-
-		 		&::-moz-range-track {
-		 			background-color: darkcyan;
-		 		}
-
-	 			&::-moz-range-thumb {
-		 			background-color: cyan;
 	 	}
 	}

- 	 		&#combatant-modal-physical {
-
-		 		&::-moz-range-track {
-		 			background-color: maroon;
-		 		}
-
- 	 			&::-moz-range-thumb {
-	 				background-color: deeppink;
-	 			}
-	 		}
-	 	}
-	}
-
- 	span.input-group-text {
- 		color: deeppink;
+ 	.input-group-text {
+ 		color: $fg;
 		background-color: transparent;
 		border: none;
 	}

 	hr {
- 		border-top: 2px solid cyan;
+ 		border-top: 2px solid $bg;
 		opacity: .5;
 	}
 }

+#combatant-modal-stun {
+	&::-moz-range-track { background-color: $bg-dark; }
+	&::-moz-range-thumb { background-color: $bg; }
+}
+
+#combatant-modal-physical {
+	&::-moz-range-track { background-color: $fg-dark; }
+	&::-moz-range-thumb { background-color: $fg; }
+}
+
+


 /*
@ -606,7 +560,7 @@ th span:nth-child(1){
    left: 0;
    width: 100%;
    height: 2px;
-    background: linear-gradient(90deg,transparent,darkcyan);
+    background: linear-gradient(90deg,transparent,$bg-dark);
    animation: animate1 1s linear infinite;
 }
@keyframes animate1{
@ -622,7 +576,7 @@ th span:nth-child(2){
    right: 0;
    width: 2px;
    height: 100%;
-    background: linear-gradient(180deg,transparent,darkcyan);
+    background: linear-gradient(180deg,transparent,$bg-dark);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
 }
@ -639,7 +593,7 @@ th span:nth-child(3){
    right: 0;
    width: 100%;
    height: 2px;
-    background: linear-gradient(270deg,transparent,darkcyan);
+    background: linear-gradient(270deg,transparent,$bg-dark);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
 }
@ -658,7 +612,7 @@ th span:nth-child(4){
    left: 0;
    width: 2px;
    height: 100%;
-    background: linear-gradient(360deg,transparent,darkcyan);
+    background: linear-gradient(360deg,transparent,$bg-dark);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
 }
--- a/src/index.html
+++ b/src/index.html
@ -11,7 +11,7 @@
 	<!-- Style sheets -->
 	<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" >
 	<link type="text/css" rel="stylesheet" href="https://unpkg.com/augmented-ui@latest/augmented-ui.min.css">
-	<link type="text/css" rel="stylesheet" href="css/custom.scss">
+	<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
 	
 	<!-- javascript files -->
 	<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.min.js"></script>
@ -43,7 +43,7 @@

 	<div class="container">
 		<main class="table-responsive overflow-visible">
-			<table class="table table-sm table-borderless" id="combatants-table">
+			<table class="table table-sm table-borderless 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>
--- a/src/js/sr2ini.js
+++ b/src/js/sr2ini.js
@ -4,21 +4,22 @@
 const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
 const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"];
 const COMBATANT_TABLE_ROW = [
-'<tr class="combatant-row align-middle" data-true-ini="" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop">\n', //TODO: add data-damage-* attributes with initial damage levels
+'<tr class="combatant-row" data-true-ini="" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop">\n', //TODO: add data-damage-* attributes with initial damage levels
 	'<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"></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="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" 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"><svg width="512" height="512"><text x="0" y="75%" textLength="100%" fill="deeppink" font-size="60%" font-weight="bold">-10</text></svg></button>\n',
+		'<button type="button" class="sr2-button act-button" title="Act and reduce ini by 10"><svg class="icon" viewBox="0 0 512 512"><path d="M 0 272 h 96 v 64 h -96 Z" /><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" /></svg></button>\n',
+//<svg><use href="icons.svg#act" /></svg>
 		'<div class="damage-dropdown">\n',
-			'<button type="button" class="sr2-button damage-button" title="Take damage"><svg viewBox="0 0 512 512"><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" /></svg></button>\n',
+			'<button type="button" class="sr2-button damage-button" title="Take damage"><svg class="icon" viewBox="0 0 512 512"><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" /></svg></button>\n',
 		'</div>\n',
 		'<div class="actions-dropdown">\n',
-			'<button type="button" class="sr2-button actions-button" title="More actions"><svg viewBox="0 0 512 512"><polygon points="32 32 480 32 256 480" /></svg></button>\n',
+			'<button type="button" class="sr2-button actions-button" title="More actions"><svg class="icon" viewBox="0 0 512 512"><polygon points="32 32 480 32 256 480" /></svg></button>\n',
 			'<div class="actions-menu" 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" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg viewBox="0 0 512 512"><polygon points="0 512 0 352 224 128 384 288 160 512" /><polygon points="352 0 512 160 416 256 256 96" /></svg></button>\n',
-				'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg viewBox="0 0 512 512"><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" />/svg></button>\n',
-				'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal" tabindex="-1"><svg viewBox="0 0 512 512"><polygon points="160 0 352 0 352 64 416 64	416 128 96 128 96 64 160 64" /><polygon points="160 512 352 512 384 192 128 192" /></svg></button>\n',
+				'<button type="button" class="sr2-button edit-button" title="Edit combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg class="icon" viewBox="0 0 512 512"><polygon points="0 512 0 352 224 128 384 288 160 512" /><polygon points="352 0 512 160 416 256 256 96" /></svg></button>\n',
+				'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><svg class="icon" viewBox="0 0 512 512"><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" />/svg></button>\n',
+				'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal" tabindex="-1"><svg class="icon" viewBox="0 0 512 512"><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" /></svg></button>\n',
 			'</div>\n',
 		'</div>\n',
 	'</td>\n',
@ -26,16 +27,16 @@ const COMBATANT_TABLE_ROW = [
 const DAMAGE_MONITOR_HTML = [
 '<div class="damage-monitor" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
 	'<table>\n',
-		'<tr><td><button class="damage-stun active" title="Light stun damage" tabindex="-1">L</button></td><td><button class="damage-physical active" title="Light physical damage" tabindex="-1">L</button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" title="Medium stun damage" tabindex="-1">M</button></td><td><button class="damage-physical active" title="Medium physical damage" tabindex="-1">M</button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" title="Severe stun damage" tabindex="-1">S</button></td><td><button class="damage-physical active" title="Severe physical damage" tabindex="-1">S</button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" title="K.O." tabindex="-1"><img src="zzz.png" height="16" /></button></td><td><button class="damage-physical active" title="dead" tabindex="-1"	><img src="cross.png" height="16"/></button></td></tr>\n',
+		'<tr><td><button type="button" class="damage-stun active" title="Light stun damage" tabindex="-1">L</button></td><td><button type="button" class="damage-physical active" title="Light physical damage" tabindex="-1">L</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="Medium stun damage" tabindex="-1">M</button></td><td><button type="button" class="damage-physical active" title="Medium physical damage" tabindex="-1">M</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="Severe stun damage" tabindex="-1">S</button></td><td><button type="button" class="damage-physical active" title="Severe physical damage" tabindex="-1">S</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" 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"><img src="zzz.png" height="16" /></button></td><td><button type="button" class="damage-physical active" title="dead" tabindex="-1"	><img src="cross.png" height="16"/></button></td></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>';
@ -248,7 +249,7 @@ function addCombatant(e) {
 	// add handler to damage monitor
 	$tr.find(".damage-stun, .damage-physical").on("click", applyDamage);
 	// add row to table and sort
-	$("#combatants-table").append($tr);
+	$(".combatants-table").append($tr);
 	sortTable();
 }
 // event handler for when any damage monitor is clicked
@ -382,7 +383,7 @@ function sortTable() {
 	// sort rows and append them in new order
 	let $rows = $(".combatant-row").toArray().sort(whoGoesFirst);
 	for (let i = 0; i < $rows.length; i++) {
-		$("#combatants-table").append($rows[i]);
+		$(".combatants-table").append($rows[i]);
 		$($rows[i]).css("z-index", 50-i).css("position", "relative"); 
 	}
 	return;
--- a/Template/dice512.png
+++ b/Template/dice512.png
--- a/Template/tmp.css
+++ b/Template/tmp.css
@ -0,0 +1,31 @@
+body {
+	margin: 0;
+	height: 100%;
+	background-color: #004aa5;
+}
+
+div {
+	width: 60%;
+	margin: auto;
+}
+
+button {
+	position: relative;
+	top: 100px;
+
+
+	border: 8px solid cyan;
+
+	border-radius: 16px;
+	padding: 16px;
+	
+	background-color: rgba(0, 0, 0, .75);
+	box-shadow: 0 0 16px lightcyan, 0 0 32px lightcyan, 0 0 32px cyan, 0 0 64px cyan, 0 0 64px darkcyan, 0 0 128px darkcyan;
+
+}
+
+img {
+	width: 384px;
+	height: 384px;
+	filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(125%) contrast(105%);
+}
--- a/Template/tmp.html
+++ b/Template/tmp.html
@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><link type="text/css" rel="stylesheet" href="tmp.css"></head>
+<body><div><button><img src="dice512.png"></button></div></body></html>
--- a/Template/tmp.png
+++ b/Template/tmp.png
--- a/tools/test.svg
+++ b/tools/test.svg
@ -0,0 +1,23 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+	<defs>
+		<clipPath id="clip-headtop">
+			<path d="M 0 144 v -144 h 216 v 112 h 80 v -112 h 216 v 144 Z" />
+		</clipPath>
+		<clipPath id="clip-coattop">
+			<path d="M 100 264 a 144 132 0 0 0 312 0 h 100 v 256 h -512 v -256 Z" />
+		</clipPath>
+	</defs>
+
+	<rect x="0" y="0" width="512" height="512" fill="green" stroke="none"/>
+	<path d="M 112 164 h 288 v 72 l -24 24 h -88 q -32 -128 -64 0 h -88 l -24 -24 v -72 Z" fill-rule="evenodd" />  <!-- glasses -->
+	<path d="M 136 280 a 132 164 0 0 0 240 0 Z" /> <!-- bottom of head -->
+	<path d="M 128 144 a 144 128 0 0 1 256 0 Z" clip-path="url(#clip-headtop)"/> <!-- top of head -->
+	<path d="M 232 0 h 48 v 96 h -48 Z" /> <!-- mohawk -->
+	<path d="M 64 304 h 384 v 48 l -64 176 h -256 l -64 -192 Z" clip-path="url(#clip-coattop)" /> <!-- coat -->
+
+	<path d="M 128 512 h -128 v -112 l 48 -32 l 48 144 Z" />
+	<path d="M 384 512 h 128 v -112 l -48 -32 l -48 144 Z" />
+
+<!-- 	<path d="M 32 96 h 448 v 96 l -32 32 h -144 q -56 -160 -96 0 h -144 l -32 -32 v -96 Z" fill-rule="evenodd" /> glasses in big -->
+
+</svg>