- added favicon

- switched several icons, introduced some SVG icons
- finished redesign
- Electrolize font is now locally available

TODO.md

@@ -33,6 +33,7 @@
 	-	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 ich bei add combatant mit der Maus auf OK klicke, macht er das Modal zu, auch wenn die Eingaben invalid sind
 -	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
@@ -55,28 +56,43 @@
 -	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  
+-	x Design: favicon
 
 -	noch mehr Design
-	-	x favicon
+	-	x imput[type=range] schicker machen
-	-	imput[type=range] schicker machen
+	-	x input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
-	-	input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
+	-	x contextual classes hübsch machen
+	-	actions menu und damage monitor unter den jeweiligen Button ausrichten
 	-	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
+-	x neue Icons
-	-	attribution
+	-	x act: icon -> gun (freepik)
-		-	noun project: Icons by Febrian Hidayat from <a href="https://thenounproject.com/icons" target="_blank" title="Icons">Noun Project</a>
+	-	x add: actual icon -> police (freepik)
-		-	iconfinder: CC4.0
+	-	x clone: actual icon -> mein eigenes
-		-	icons8.com: 
+	-	cross (um das Modal zu schließen): 10006
+	-	x dead: icon -> cross (freepik) (alt: 10013)
+	-	x die: icon-> dice (freepik) (alt: 9856..9861)
+	-	x edit: actual icon -> pencil (freepik) 
+	-	x more: actual icon -> mein eigenes
+							-> &#10006;
+	-	x newround: actual icon -> dice (Freepik)
+							-> dices (Freepik)
+	-	x takedamage:  actual icon -> mein eigenes
+									-> explosion (freepik)
+	-	x trash: trash-bin (freepik) (alt: X, &#9747;, &#9932;)
+	-	x validation: &#9746; und &#9745;
+	-	x zzz: icon -> zzz (freepik)
 -	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?
+	-	bootstrap, jquery, font auch lokal vorhalten
 -	Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
 -	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
--	auf bootstrap verzichten? brauch es schließlich kaum noch
+-	auf bootstrap verzichten? brauch es schließlich kaum noch
+	-	könnte beim modal schwierig werden (weil auch js)

src/css/custom.scss

@@ -2,6 +2,11 @@ $sr-border: cyan;
 $sr2-btn: darkcyan;
 $sr2-fg: deeppink;
 
+@font-face {
+	font-family: "Electrolize";
+	src: local("Electrolize"), url("../img/Electrolize-Regular.ttf"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
+}
+
 @mixin aug() {
 	--aug-tl: 5px;
 	--aug-l: 5px;
@@ -49,8 +54,8 @@ body {
 	margin: 0;
 	height: 100%;
 	user-select: none;
+	font-family: 'Electrolize', sans-serif;
 }
-
 body {
 	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg");
 	background-size: cover;
@@ -92,6 +97,11 @@ header.navbar {
 		margin-right: 3px;
 		margin-left: 3px;
 
+		img {
+			width: 32px;
+			height: 32px;
+		}
+
 	}
 }
 
@@ -120,11 +130,11 @@ header.navbar {
 	.th-dice-and-rea { 
 		min-width: 3.75rem;
 
-		> img {
+/*		> 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;
@@ -172,7 +182,6 @@ header.navbar {
 
 	.sr2-button {
 		@include button;
-//		padding: 1px;
 		width: 24px;
 		height: 24px;
 
@@ -195,39 +204,64 @@ header.navbar {
 		}
 	}
 
-	.act-button {
+	.combatant-ini {
-		line-height: 24px;
+		text-align: center;
-		font-size: 12px;
+		padding-right: 1rem !important;
-		position: relative;
-		bottom: 1px
 	}
-}
 
-.combatant-ini {
+	.combatant-dice::before {
-	text-align: center;
+		content: attr(data-combatant-dice);
-	padding-right: 1rem !important;
+	}
-}
 
-.combatant-dice::before {
+	.combatant-rea::before {
-	content: attr(data-combatant-dice);
+		content: attr(data-combatant-rea);
-}
+	}
+
+	.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;
+			}
+		}
+	}
 
-.combatant-rea::before {
-	content: attr(data-combatant-rea);
-}
 
-.ko-or-dead {
-	color: coral;
-	text-decoration: line-through;
-	background-color: darkslategray;
 }
 
 .max-ini {
 	font-weight: bold;
+//	filter: brightness(1.1);
+	text-shadow: 0 0 1px deeppink, 0 0 2 hotpink;
 }
 
 .zero-ini td {
-	color: lightgray !important;
+	color: #990052 !important;
+}
+
+.ko-or-dead {
+	background-color: rgba(0, 0, 0, .5);
+
+	td {
+		color:maroon !important;
+		text-decoration: line-through;
+
+		img {
+			filter: invert(14%) sepia(45%) saturate(4680%) hue-rotate(350deg) brightness(85%) contrast(123%) !important;
+		}
+	}
+
 }
 
 .badge.bg-warning {
@@ -325,26 +359,6 @@ header.navbar {
 */
 }
 
-.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 {
@@ -355,8 +369,6 @@ header.navbar {
 }
 
 footer {
-//	z-index: -10 !important;
-
 	@include aug;
 	@include inlay;
 	--aug-tl: 10px;
@@ -458,11 +470,15 @@ footer {
 			color: deeppink;
 		}
 
-	 	&:valid {
+	 	&:not([type=range]):valid {
+	 		border: 1px solid cyan !important	;
+			background-image: none !important;
 	 	}
+
 	 	&:invalid {
 	 		border: 1px solid deeppink;
 			box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
+			background-image: none !important;
 	 	}
 
 		&[type=number]::-webkit-inner-spin-button,
@@ -508,7 +524,7 @@ footer {
 	 		&#combatant-modal-stun {
 
 		 		&::-moz-range-track {
-		 			color: darkcyan !important;
+		 			background-color: darkcyan;
 		 		}
 
 	 			&::-moz-range-thumb {
@@ -519,7 +535,7 @@ footer {
  	 		&#combatant-modal-physical {
 
 		 		&::-moz-range-track {
-		 			color: maroon;
+		 			background-color: maroon;
 		 		}
 
  	 			&::-moz-range-thumb {

src/img/boom.svg

@@ -0,0 +1,7 @@
+<svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+	<rect x="0" y="0" width="512" height="512" fill="transparent" stroke="transparent"/>
+	<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="black" fill-rule="evenodd" />
+</svg>

src/img/clone.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+	<rect x="0" y="0" width="512" height="512" fill="transparent" stroke="transparent"/>
+	<rect x="0" y="0" width="512" height="128" stroke="none" />
+	<rect x="0" y="384" width="512" height="128" stroke="none" />
+	<polygon points="128 192 384 192 256 320" />
+</svg>

src/img/minusten.svg

@@ -0,0 +1,15 @@
+<svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+	<style>
+		@font-face {
+			font-family: "Electrolize";
+			src: local("Electrolize"), url("Electrolize-Regular.ttf");
+		}
+		text {
+			font-family: Electrolize, sans-serif;
+			font-weight: bold;
+			font-size: 256pt;
+		}
+	</style>
+	<rect x="0" y="0" width="100%" height="100%" fill="transparent" stroke="transparent"/>
+	<text x="0" y="75%" textLength="100%">-10</text> 
+</svg>

src/img/more.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+	<rect x="0" y="0" width="512" height="512" fill="transparent" stroke="transparent"/>
+	<polygon points="32 32 480 32 256 480" />
+</svg>

src/index.html

@@ -18,11 +18,6 @@
 	<script type="module" src="https://code.jquery.com/jquery-latest.min.js"></script>
 	<script type="module" src="js/sr2ini.js"></script>
 
-	<!-- web font -->
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
-
 	<!-- favicon related info -->
 	<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">
@@ -53,7 +48,7 @@
 					<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" alt="a single die">+R</th>
+						<th class="col-2 text-center th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction">D+R</th>
 						<th class="col-3 text-center th-actions" data-augmented-ui="r-clip-y both" title="Actions">Actions</th>
 					</tr>
 				</thead>
@@ -75,7 +70,7 @@
 			<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" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">X</button>
+					<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">&#10006;</button>
 				</div>
 				<div class="modal-body"  data-augmented-ui="inlay">
 					<p>Are you sure?</p>
@@ -94,7 +89,7 @@
 			<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" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">X</button>
+					<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">&#10006;</button>
 				</div>
 				<div class="modal-body" data-augmented-ui="inlay">
 					<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
@@ -111,13 +106,13 @@
 						</div>
 						<div class="my-2">
 							<label for="combatant-modal-stun" class="form-label">Stun Damage <span id="combatant-modal-penalty-stun"></span></label>
-							<input type="range" class="form-range" min="0" max="10" id="combatant-modal-stun" list="damage">
+							<input type="range" class="form-range" min="0" max="10" value="0" 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 <span id="combatant-modal-penalty-physical"></span></label>
-								<input type="range" class="form-range" min="0" max="10" id="combatant-modal-physical" list="damage">
+								<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-physical" list="damage">
 							</div>
 						</div>
 					</form>

src/js/sr2ini.js

@@ -5,19 +5,19 @@ 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
-	'<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-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="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-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',
+		'<button type="button" class="sr2-button act-button" title="Act and reduce ini by 10"><img src="minusten.svg"/></button>\n',
 		'<div class="damage-dropdown">\n',
-			'<button type="button" class="sr2-button 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="boom.svg"/></button>\n',
 		'</div>\n',
 		'<div class="actions-dropdown">\n',
-			'<button type="button" class="sr2-button actions-button" title="More actions"><img src=""/></button>\n',
+			'<button type="button" class="sr2-button actions-button" title="More actions"><img src="more.svg" /></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 edit-button" title="Edit combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="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 clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="clone.svg"/></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',