- continued complete redesign

- restyled all elements are now except footer

TODO.md

@@ -25,9 +25,9 @@
 	-	d.h. die beiden linken und die beiden rechten Ecken einer Tablerow müssen jeweils die gleiche X-Position haben 
 -	x alles, was vom damage monitor über den unteren Tabellenrand rüberragt, wird abgeschnitten 
 	-	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 
 
--	jetzt kann ich den damage-monitor zwar aufklappen, aber die Buttons der weiter unten liegenden combatant-rows überdecken ihn jedesmal.
--	wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem 
 -	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
@@ -57,11 +57,14 @@
 		-	noun project: Icons by Febrian Hidayat from <a href="https://thenounproject.com/icons" target="_blank" title="Icons">Noun Project</a>
 		-	iconfinder: CC4.0
 		-	icons8.com: 
+-	deployment: dist/* soll direkt auf hermes hochgeladen werden
+	-	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
--	color converter für CSS filter(): https://isotropic.co/tool/hex-color-to-css-filter/
 	

package.json

@@ -16,14 +16,13 @@
     "parcel": "^2.8.3",
     "parcel-reporter-static-files-copy": "^1.5.0"
   },
-  "publicUrl": "./",
   "dependencies": {
   },
   "staticFiles": {
     "staticPath": "src/img"
   },
   "scripts": {
-    "start": "npx parcel serve src/index.html --public-url ./ --dist-dir dist",
+    "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"

src/css/custom.scss

@@ -9,15 +9,13 @@ $sr2-fg: deeppink;
 	--aug-tr: 5px;
 	--aug-r: 5px;
 	--aug-br: 5px;
+	--aug-b: 5px;
 }
 
 @mixin border() {
 	--aug-border-bg: cyan; // "sr2-border doesn't work"
 	--aug-border-opacity: .5;
-	--aug-border-left: 2px;
+	--aug-border-all: 2px;
-	--aug-border-right: 0px;
-	--aug-border-top: 2px;
-	--aug-border-bottom: 0px;
 }
 
 @mixin inlay() {
@@ -27,16 +25,20 @@ $sr2-fg: deeppink;
 
 @mixin button() {
 	border: 0;
-	border-radius: none;;
+	border-radius: 1px;
-	background: radial-gradient(circle at center, gold, goldenrod);
+	padding-right: 2px;
-	box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod;
+	padding-left: 2px;
+
+	border: 1px solid cyan;
+	background: transparent;
+	box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan;
 }
 
 html, 
 body {
 	margin: 0;
 	height: 100%;
-//	overflow-x: hidden;
+	user-select: none;
 }
 
 body {
@@ -49,20 +51,43 @@ body {
 
 }
 
-header.navbar {
+:focus-visible {
-	@include border;
+	outline: none;
-	--aug-br: 10px;
+	border: 2px solid cyan !important;
-	--aug-tl: 10px;
+	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
-	--aug-inlay-bg: rgba(0, 0, 0, .3);
 }
 
-span.navbar-brand {
+header.navbar {
-//	position: absolute;
+	margin-top: 4px;
-//	right: 110px;
+	padding-right: .6rem;;
-//	color: $sr2-fg;
+	@include border;
-//	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
+	@include inlay;
+	--aug-br: 7px;
+	--aug-tr: 7px;
+	--aug-bl: 7px;
+	--aug-tl: 7px;
+	--aug-b: 7px;
+	--aug-l: 7px;
+	--aug-r: 7px;
+	--aug-inlay-bg: rgba(0, 0, 0, .75);
+
+	span.navbar-brand {
+		color: cyan;
+		text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px;
+	}
+
+	button {
+		@include button;
+		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;
 }
@@ -74,6 +99,8 @@ div.container {
 		@include aug;
 		@include border;
 		@include inlay;
+		--aug-border-right: 0px;
+		--aug-border-bottom: 0px;
 	}
 
 	.combatant-row {
@@ -85,6 +112,12 @@ div.container {
 	}
 	.th-dice-and-rea { 
 		min-width: 3.75rem;
+
+		> img {
+			filter: invert(72%) sepia(100%) saturate(778%) hue-rotate(119deg) brightness(102%) contrast(102%);
+			width: 16px;
+			height: 16px;
+		}		
 	}
 	.th-actions { 
 		min-width: 6.5rem;
@@ -95,6 +128,8 @@ div.container {
 		@include aug;
 		@include border;
 		@include inlay;
+		--aug-border-right: 0px;
+		--aug-border-bottom: 0px;
 		background: none !important;
 //		text-shadow: 2px 2px 3px black;
 	}
@@ -130,47 +165,18 @@ div.container {
 
 	> tbody > tr > td > button,
 	> tbody > tr > td > div > button, {
-		padding: 0px;
-		padding-right: 2px;
-		padding-left: 2px;
-
 		@include button;
+		padding: 0px;
+		width: 24px;
+		height: 24px;
 
 		img {
-			width: 20px;
+			position: relative;
-			height: 20px;
+			bottom: 3px;
-//			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%) drop-shadow(1 1 1px cyan) drop-shadow(2 2 2px darkcyan);
+			width: 16px;
-	//		animation: glitch 1s ease infinite;
+			height: 16px;
+			filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%);
 		}
-
-	/*	@keyframes glitch {
-			// twitch
-			0%, 33% {
-			    transform: scale(.97, 1.01); 
-			}
-			18%, 60% {
-			    transform: scaleX(.98), 
-			}
-			48%, 76% {
-				transform: scaleY(1.02); 
-			}
-			68%, 100% {
-				transform: scale(1, .96); 
-			}
-
-			// skew
-			20%, 75% {
-			    transform: skew(2deg);
-			}
-			12%,80%{
-				transform: skew(1.4deg);
-			}
-		}
-
-		&:nth-of-type(2) img {
-			animation-direction: reverse;
-		}
-	*/
 	}
 }
 
@@ -229,25 +235,21 @@ div.container {
 	right: 10px;
 
 	@include aug;
-
+	@include border;
 	--aug-inlay-bg: rgba(0, 0, 0, .5);
-
-	--aug-border-all: 2px;
-	--aug-border-bg: cyan; // "sr2-border doesn't work"
 	--aug-border-opacity: .75;
 
 	padding-top: 10px;
 	padding-bottom: 10px;
 
 	button {
-
 		font-size: smaller;
 		width: 24px;
 		height: 24px;
 
 		border: none;
 		margin: 0px 2px;
-		border-radius: none;
+		border-radius: 0;
 	}
 
 	.damage-stun {
@@ -278,8 +280,6 @@ div.container {
 		height: 28px;
 		margin-top: 4px;
 		@include button;
-//		background: radial-gradient(circle at center, gold, goldenrod);
-//		box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod;
 	}
 
 	td button img {
@@ -287,35 +287,103 @@ div.container {
 		top: -2px;
 	}
 
-}
+/*	&.d-none {
-
+		transform: translateY(100%); 
-/*
-.damage-monitor.d-none {
-	opacity: 0;
-	animation-name: dmg-mon;
-	animation-duration: 1s;
-	animation-direction: reverse;
-}
-
-.damage-monitor:not(.d-none) {
-	opacity: 1;
-	animation-name: dmg-mon;
-	animation-duration: 1s;
-	animation-direction: normal;
-}
-
-@keyframes dmg-mon {
-	from { 
-		opacity: 0;
 	}
-	1% {
+
-		opacity: 0;
+	&:not(.d-none) {
+		transform: translateY(0);; 
+		transition: transform .4s; 
 	}
-	100% { 
-		opacity: 1;
-	}
-}
 */
+}
+
+
+.sr2-modal {
+	@include border;
+	@include aug;
+	color: cyan;
+	pointer-events: auto;
+
+	.modal-header {
+		text-transform: uppercase;
+		border-bottom: none;
+		@include inlay;
+		@include border;
+		--aug-inlay-bottom: 0;
+
+		button {
+			width: 30px;
+		}
+	}
+
+	.modal-body {
+		@include inlay;
+		@include border;
+		--aug-inlay-y: 0;
+	}
+
+	.modal-footer {
+		border-top: none;
+		@include inlay;
+		@include border;
+		--aug-inlay-top: 0;
+
+		button {
+			width: 4rem;
+		}
+	}
+
+	input {
+		@include button;
+		background-color: transparent;
+		color: deeppink;
+		user-select: text;
+
+		&::selection {
+			color: black;
+			background-color: deeppink;
+		}
+	
+		&:focus {
+			background-color: transparent;
+			color: deeppink;
+		}
+
+		&[type=number]::-webkit-inner-spin-button,
+		&[type=number]::-webkit-outer-spin-button { 
+			-webkit-appearance: none; 
+			margin: 0; 
+		}
+
+		&[type=number] { 
+			-moz-appearance: textfield;
+			appearance: textfield;
+	 		margin: 0; 
+	 	}
+
+	 	&:invalid {
+	 		border: 1px solid deeppink;
+			box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
+	 	}
+
+	}
+
+	button {
+		@include button;
+		color: deeppink;
+	}
+
+ 	span.input-group-text {
+ 		color: deeppink;
+ 		background-color: transparent;
+ 		border: none;
+ 	}
+
+}
+
+
+
 footer {
 	z-index: -10 !important;
 
@@ -329,10 +397,6 @@ footer {
 	}
 }
 
-input:invalid {
-	border: 2px solid red;
-}
-
 
 /*
 th span{

src/index.html

@@ -27,7 +27,7 @@
 
 <body>
 	<div class="container">
-		<header class="navbar navbar-expand" data-augmented-ui="tl-clip-y br-clip-y both">
+		<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>
@@ -52,15 +52,15 @@
 
 	<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
 		<div class="modal-dialog modal-sm" role="document">
-			<div class="modal-content">
+			<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="modal-header">
+				<div class="modal-header" data-augmented-ui="inlay">
 					<h5 class="modal-title">Start New Round</h5>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
 				</div>
-				<div class="modal-body">
+				<div class="modal-body"  data-augmented-ui="inlay">
 					<p>Are you sure?</p>
 				</div>
-				<div class="modal-footer">
+				<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>
@@ -71,12 +71,12 @@
 
 	<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
 		<div class="modal-dialog modal-sm" role="document">
-			<div class="modal-content">
+			<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">
+				<div class="modal-header" data-augmented-ui="inlay">
 					<h5 class="modal-title">Add New Combatant</h5>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
 				</div>
-				<div class="modal-body">
+				<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>
@@ -92,10 +92,10 @@
 						</div>
 					</form>
 				</div>
-				<div class="modal-footer">
+				<div class="modal-footer" data-augmented-ui="inlay">
-					<button type="button" class="btn btn-secondary" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
+					<button type="button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
-					<button type="submit" class="btn btn-primary" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="submit" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
-					<button type="submit" class="btn btn-primary d-none" id="combatant-modal-edit-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>
 				</div>
 			</div>
 		</div>

src/js/sr2ini.js

@@ -17,19 +17,21 @@ const COMBATANT_TABLE_ROW = [
 	'</td>\n',
 '</tr>'].join("");
 const DAMAGE_MONITOR_HTML = [
-'<table class="damage-monitor text-center align-middle d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
+'<div class="damage-monitor d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
-	'<tr><td><button class="damage-stun active" title="Light stun damage">L</button></td><td><button class="damage-physical active" title="Light physical damage">L</button></td></tr>\n',
+	'<table class="text-center align-middle">\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="Light stun damage">L</button></td><td><button class="damage-physical active" title="Light physical damage">L</button></td></tr>\n',
-	'<tr><td><button class="damage-stun active" title="Medium stun damage">M</button></td><td><button class="damage-physical active" title="Medium physical damage">M</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"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" title="Medium stun damage">M</button></td><td><button class="damage-physical active" title="Medium physical damage">M</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"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
-	'<tr><td><button class="damage-stun active" title="Severe stun damage">S</button></td><td><button class="damage-physical active" title="Severe physical damage">S</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"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" title="Severe stun damage">S</button></td><td><button class="damage-physical active" title="Severe physical damage">S</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"></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"></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><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></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><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',
-'</table>'].join("");
+		'<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>';
 const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
 /*