- replaced more png items with svg

- svg is now embedded into HTML, not loaded from file (loading from file buts off dependencies, namely the font for the -10 icon) - started cleaning up CSS file - started removing unnecessary classes and replacing single property Bootstrap classes with the property itself
2023-02-28 21:58:41 +01:00 · 2023-02-28 21:58:41 +01:00 · 0ad3083689
commit 0ad3083689
parent 8227cde4ee
10 changed files with 90 additions and 89 deletions
--- a/TODO.md
+++ b/TODO.md
@ -32,6 +32,12 @@
 -	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
+-	x minusten.svg benutzt die falsche Schriftart
+-	x manchmal spinnt das actions-menu, dann taucht es einfach nicht mehr auf
+	-	Bsp: more -> clone -> cancel
+-	x derzeit werden die icons im actions-menu nicht dunkler gemacht (.zero-ini o.Ä.), weil ich die img-Rules aus dem CSS rausgenommen habe
+	-	ich könnte die Rules wieder reinnehmen
+	-	x oder die Icons mit SVG nachbauen (edit und trash)

 -	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 
@ -41,7 +47,6 @@
 -	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
-	Bug: rea editieren ändert nicht die ini -> da muss ich die Würfelergebnisse für speichern



@ -62,12 +67,19 @@
 	-	x contextual classes hübsch machen
 -	x neue Icons
 -	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
+
+-	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
-	-	actions menu und damage monitor unter den jeweiligen Button ausrichten
 	-	Seite für größere Screens anpassen
-		-	Schrift, Buttons und Icons skalieren
+		-	Schrift, Buttons, Icons skalieren
 		-	Tabellenbreite begrenzen
 	-	Animationen? Transitions?
+-	CSS aufräumen
+	-	maroon durch b3005f ersetzen
+	-	Variablen für Farben, Filter etc. 
 -	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
@ -79,3 +91,4 @@
 -	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
 	-	könnte beim modal schwierig werden (weil auch js)
+-	Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@ -41,6 +41,10 @@ $sr2-fg: deeppink;
 	img {
 		filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
 	}
+
+	svg * {
+		fill: deeppink;
+	}
 }

 .sr2-button:focus-visible {
@ -55,6 +59,7 @@ body {
 	height: 100%;
 	user-select: none;
 	font-family: 'Electrolize', sans-serif;
+	overflow-x: hidden;
 }
 body {
 	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg");
@ -124,18 +129,18 @@ header.navbar {
 		clip-path: none;
 	}

+	th:not(:first-of-type) {
+		text-align: center;
+	}
+
 	.th-ini { 
 		min-width: 3rem; 
 	}
+
 	.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;
 	}
@ -158,6 +163,7 @@ header.navbar {
 	td {
 		color: $sr2-fg;
 		clip-path: none;
+		font-weight: bold;
 	}

 	th:first-of-type, 
@ -171,20 +177,26 @@ header.navbar {
 		--aug-border-right: 2px;
 	}

-	td.combatant-actions {
+	tr:last-of-type td,
+	tr:last-of-type th {
+		--aug-border-bottom: 2px;
 	}

-	tr:last-of-type td {
-		--aug-border-bottom: 2px;
+	td.combatant-actions {
+		display: flex;
+		justify-content: flex-end;
 	}

 	.sr2-button {
 		@include button;
 		width: 24px;
 		height: 24px;
+		margin-left: 3px;
+		margin-right: 3px;


-		img {
+		img, 
+		svg {
 			position: relative;
 			bottom: 3px;
 			width: 16px;
@ -195,8 +207,8 @@ header.navbar {
 			box-shadow: none;
 			border-color: darkcyan;

-			img {
-				filter: invert(6%) sepia(93%) saturate(7363%) hue-rotate(2deg) brightness(80%) contrast(105%);
+			svg * {
+				fill: #b3005f;
 			}

 		}
@ -207,6 +219,10 @@ header.navbar {
 		padding-right: 1rem !important;
 	}

+	.combatant-dice-and-rea {
+		text-align: center;
+	}
+
 	.combatant-dice::before {
 		content: attr(data-combatant-dice);
 	}
@ -238,28 +254,28 @@ header.navbar {

 }

-.max-ini {
-	font-weight: bold;
+.max-ini td {
+//	font-weight: bold;
 //	filter: brightness(1.1);
 	text-shadow: 0 0 1px deeppink, 0 0 2 hotpink;
 }

 .zero-ini td {
-	color: #b3005fs !important;
+	color: #b3005f !important;
+
+	svg * {
+		fill: #b3005f !important;
+	}
 }

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

-	td {
-		color:maroon !important;
-		text-decoration: line-through;
-
-		img {
-			filter: invert(14%) sepia(45%) saturate(4680%) hue-rotate(350deg) brightness(85%) contrast(123%) !important;
-		}
+	svg * {
+		fill: #b3005f !important;
 	}
-
 }

 .badge.bg-warning {
@ -278,16 +294,16 @@ header.navbar {
 	width: 20px;
 }

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

-.damage-monitor, .actions-menu {
+.damage-monitor, 
+.actions-menu {
 	position: absolute;
 	z-index: 200;
-
 	top: calc(100% - 2px);
-	left: calc(100vw + 10px);

 	@include aug;
 	@include border;
@ -297,11 +313,16 @@ header.navbar {
 	padding-top: 10px;
 	padding-bottom: 10px;

-	transition: transform .25s linear;
+//	right: calc(-100vw);
+//	transition: transform .25s ease-in-out;
+	opacity: 0;
+	right: 10px;
+	transition: opacity .25s ease-in-out;
 }

 .seen {
-	transform: translateX(-100vw);
+//	transform: translateX(-100vw);
+	opacity: 1;
 }

 /*.actions-button, .damage-button {
@ -359,11 +380,6 @@ header.navbar {
 		box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
 	}

-	td button img {
-		position: relative;
-		top: -2px;
-	}
-
 /*	&.d-none {
 		transform: translateY(100%); 
 	}
@ -393,12 +409,15 @@ footer {
 	--aug-border-opacity: .5 !important;
 	--aug-border-all: 2px !important;
 	--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
+	height: 2.5em;

 	p {
 		font-size: xx-small;
 		margin: .25rem;
 		color: cyan;
 		user-select: auto;
+		padding-top: .65em;
+		text-align: center;

 		a {
 			color: hotpink;
@ -414,7 +433,7 @@ footer {
 	@include aug;
 	color: cyan;
 	pointer-events: auto;
-	width: 95vw; // 95 percent of viewport width
+//	width: 95vw; // 95 percent of viewport width

 	button {
 		@include button;
--- a/src/img/boom.svg
+++ b/src/img/boom.svg
@ -1,7 +0,0 @@
-<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>
--- a/src/img/clone.svg
+++ b/src/img/clone.svg
@ -1,6 +0,0 @@
-<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>
--- a/src/img/edit.png
+++ b/src/img/edit.png
--- a/src/img/minusten.svg
+++ b/src/img/minusten.svg
@ -1,15 +0,0 @@
-<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>
--- a/src/img/more.svg
+++ b/src/img/more.svg
@ -1,4 +0,0 @@
-<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>
--- a/src/img/trash.png
+++ b/src/img/trash.png
--- a/src/index.html
+++ b/src/index.html
@ -33,7 +33,7 @@
 <body>
 	<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 text-bold ps-4">SR2 Initiative Tracker</span>
+			<span class="navbar-brand ps-4">SR2 Initiative Tracker</span>
 			<nav class="container-fluid justify-content-end" aria-label="Main navigation">
 				<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>
@ -46,10 +46,10 @@
 			<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">D+R</th>
-						<th class="col-3 text-center th-actions" data-augmented-ui="r-clip-y both" title="Actions">Actions</th>
+						<th class="col th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
+						<th class="col-2 th-ini" data-augmented-ui="both" title="Initiative">Ini</th>
+						<th class="col-2 th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction">D+R</th>
+						<th class="col-3 th-actions" data-augmented-ui="r-clip-y both" title="Actions">Actions</th>
 					</tr>
 				</thead>
 				<tbody>
@ -60,7 +60,7 @@

 	<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>
+			<p>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>
--- a/src/js/sr2ini.js
+++ b/src/js/sr2ini.js
@ -7,25 +7,25 @@ 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"></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"><img src="minusten.svg"/></button>\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',
 		'<div class="damage-dropdown">\n',
-			'<button type="button" class="sr2-button damage-button" title="Take damage"><img src="boom.svg"/></button>\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',
 		'</div>\n',
 		'<div class="actions-dropdown">\n',
-			'<button type="button" class="sr2-button actions-button" title="More actions"><img src="more.svg" /></button>\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',
 			'<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"><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" tabindex="-1"><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" tabindex="-1"><img src="trash.png" /></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 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',
 			'</div>\n',
 		'</div>\n',
 	'</td>\n',
 '</tr>'].join("");
 const DAMAGE_MONITOR_HTML = [
 '<div class="damage-monitor" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
-	'<table class="text-center align-middle">\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',
@ -122,7 +122,7 @@ function handleCloneButtonClick(e) {
 	// find current table row
 	let $tr = $(e.target).parents(".combatant-row");
 	// hide actions menu
-	$tr.find(".actions-menu").addClass("d-none");	
+	$tr.find(".actions-menu").removeClass("seen");	
 	// restyle modal
 	$("#combatant-modal .modal-title").text("Clone Combatant");
 	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
@ -160,7 +160,7 @@ function handleEditButtonClick(e) {
 	let $tr = $(e.target).parents(".combatant-row");
 	// restyle modal
 	$("#combatant-modal .modal-title").text("Edit Combatant");
-	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").addClass("d-none");
+	$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("seen");
 	$("#combatant-modal-edit-ok-button").removeClass("d-none");
 	// populate modal with values from row
 	$("#combatant-modal-name").val($tr.find(".combatant-name").text());
@ -200,6 +200,7 @@ function handleNewRoundButton(e) {
 	$("#confirm-modal-new-round-ok-button").removeClass("d-none");
 	$("#confirm-modal-remove-combatant-ok-button").addClass("d-none");
 }
+
 // click handler for remove buttons
 function handleRemoveButtonClick(e) {
 	// restyle modal