minor bugfixes

TODO.md

@@ -39,7 +39,13 @@
 	-	ich könnte die Rules wieder reinnehmen
 	-	x oder die Icons mit SVG nachbauen (edit und trash)
 -	x damage-monitor und actions-menu überlappen sich; die oberen drei phys-dmg-buttons lösen edit/clone/remove aus
+-	x bei tot/KO wird die Klasse ko-or-dead nicht gesetzt
+	-	es werden gar keine contextual classes gesetzt
+	-	musste die entspr. arrow function in sortTable() wieder zu einer regular function machen
+-	x combatant modal hat auf einmal zwei OK buttons
+	-	Fehler beim sichtbar/unsichtbar-Setzen der modal buttons in handleEditButtonClick() 
 
+-	im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
 -	bug in validateCombatant: OK schließt das modal, auch wenn die Eingaben invalid sind
 -	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 
@@ -83,22 +89,26 @@
 	-	zumindest modal.js muss ich einzeln laden
 	-	aber sonst brauch ich es glaube ich nicht
 -	x dependencies lokal einbinden 
--	progressive web app 
+-	x progressive web app 
-	-	Service Worker einrichten, um die Dateien lokal zu cachen
+	-	x Service Worker einrichten, um die Dateien lokal zu cachen
-		-	lief nicht mit Parcel pur, brauchte Paket "serve" -> npx serve dist/
+		-	x lief nicht mit Parcel pur, brauchte Paket "serve" -> npx serve dist/ 
-	-	parcel bindet sw.js nicht automatisch mit ein, ich muss es nach dist/ hardverlinken
+		->	mittlerweile geht's doch
+	-	x parcel bindet sw.js nicht automatisch mit ein, ich muss es nach dist/ hardverlinken
 	-	und die File-list in sw.js darf nur Files enthalten, die auch geladen werden können; sobald einer 404 ergibt, schlägt der gesamte Cache-Vorgang fehl
+		-	geht 
+-	x dafür sorgen, dass die Seite erst dann aufgebaut wird, wenn die CSS-Files geladen sind, damit man nicht den ungestylten Krams sieht -> passt schon
+-	x CSS aufräumen
+	-	Variablen für Farben, Filter etc. 
 
+-	installability (PWA) auf android noch ungetestet
 -	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 
+	-	-moz-… mit -webkit-… ergänzen
 -	noch mehr Design
 	-	Seite für größere Screens anpassen
 		-	Schrift, Buttons, Icons skalieren
 		-	em und % statt px
 		-	Tabellenbreite begrenzen
 	-	Animationen? Transitions?
--	CSS aufräumen
-	-	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

icons/sr2ini.webmanifest

@@ -1,7 +1,7 @@
 {
     "name": "Shadowrun 2e Ini Tracker",
     "short_name": "sr2ini",
-    "start_url": "/",
+    "start_url": "https://unterdemradar.de/sr2ini",
     "description": "A simple Initiative tracker for Shadowrun 2e",
     "orientation": "portrait",
     "icons": [
@@ -16,7 +16,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#004aa5",
+    "theme_color": "deeppink",
     "background_color": "#004aa5",
     "display": "standalone"
 }

src/css/sr2ini.scss

@@ -41,14 +41,6 @@ $bg-dark: darkcyan;
 	padding-inline: 0px;
 }
 
-.icon { fill: $fg; }
-
-.sr2-button:focus-visible {
-	border: 1px solid $bg !important;
-	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
-	outline: none;
-}
-
 html {
 	font-family: 'Electrolize', sans-serif;
 	height: 100%;
@@ -59,12 +51,20 @@ html {
 
 body {
 	background-color: darkslategray;
-	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg");
+	background-image: url("../img/bg.jpg");
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: cover;
 }
 
+.icon { fill: $fg; }
+
+.sr2-button:focus-visible {
+	border: 1px solid $bg !important;
+	box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
+	outline: none;
+}
+
 .container {
 	padding: 4px;
 	position: relative;

src/index.html

@@ -13,19 +13,12 @@
 
 	<link rel="manifest" href="/icons/sr2ini.webmanifest">
 
-	<!-- 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="../node_modules/bootstrap/dist/css/bootstrap.css" >
 	<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.css">
 	<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> 
-	<script type="module" src="https://code.jquery.com/jquery-latest.min.js"></script> -->
 	<script type="module" src="js/sr2ini.js" defer></script>
 
-	<!-- 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">
 	<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
@@ -34,7 +27,6 @@
 	<meta name="msapplication-TileColor" content="#004aa5">
 	<meta name="msapplication-config" content="/icons/browserconfig.xml">
 	<meta name="theme-color" content="#004aa5">
-
 </head>
 
 <body>

src/js/service-worker.js

@@ -3,34 +3,7 @@ import {manifest, version} from '@parcel/service-worker';
 console.log("[Service Worker] Version:", version);
 console.log("[Service Worker] Manifest:", manifest);
 
-/*const cacheName = "sr2ini-v1"
+// install Service Worker
-const fileList = [
-	"/",
-	"/index.html",
-	"/index.a5b8bd92.js",
-	"/index.a5b8bd92.js.map",
-	"/index.af281647.css",
-	"/index.af281647.css.map",
-	"/index.7489b7a6.css",
-	"/index.7489b7a6.css.map",
-	"/index.9cea7766.css",
-	"/index.9cea7766.css.map",
-	"/Electrolize-Regular.ttf",
-	"/favicon.69e87188.ico",
-	"/bg.jpg",
-	"/add.png",
-	"/cross.png",
-	"/newround.png",
-	"/zzz.png",
-	"/android-chrome-192x192.473fd5a7.png", 
-	"/android-chrome-512x512.3639671b.png", 
-	"/apple-touch-icon.d8da5e1c.png", 
-	"/favicon-16x16.fd160567.png", 
-	"/favicon-32x32.c37c1049.png", 
-	"/up_/icons/browserconfig.xml"
-];*/
-
-// Installing Service Worker
 async function install() {
 	const cache = await caches.open(version); //cacheNAme
 	console.log("[Service Worker] Caching all: app shell and content");
@@ -39,8 +12,7 @@ async function install() {
 console.log("[Service Worker] Install");
 self.addEventListener("install", e => e.waitUntil(install()));
 
-
+// fetch content
-// Fetching content using Service Worker
 /*self.addEventListener('fetch', (e) => {
 	e.respondWith((async () => {
 		const r = await caches.match(e.request);
@@ -57,26 +29,10 @@ self.addEventListener("install", e => e.waitUntil(install()));
 });*/
 
 
+// activate: clear outdated files from cache
 async function activate() {
 	const keys = await caches.keys();
 	await Promise.all(keys.map(key => key !== version && caches.delete(key)));
 };
 console.log("[Service Worker] Activate");
 self.addEventListener("activate", e => e.waitUntil(activate()));
-
-
-/*
-self.addEventListener("activate", (e) => {
-	e.waitUntil(
-		caches.keys().then((keyList) => {
-			return Promise.all(
-				keyList.map((key) => {
-					if (key === cacheName) {
-						return;
-					}
-					return caches.delete(key);
-				})
-			);
-		})
-	);
-});*/