updated and enhanced

.gitignore

@@ -8,4 +8,5 @@ node_modules/
 hint-report/
 .csslintrc
 coverage/
-tmp/
+tmp/
+*.geany

README.md

@@ -1,3 +1,3 @@
-# sr2ini
+# sr2ini – a simple initiative tracker for Shadowrun 2e
 
-Simple Initiative tracker for Shadowrun 2e.
+sr2ini is a lightweight, single-page initiative tracker for the TTRPG Shadowrun in its 2nd edition. The app helps DMs and players to manage fights by tracking each combatant's initiative, order of action, damage (stun and physical), and wound modifiers. It was written specifically for mobile use and can be installed as a web app.

TODO.md

@@ -4,7 +4,7 @@
 
 ### fixed
 
--	x Bug: KO/dead buttons fkt. nicht 
+-	x Bug: KO/dead buttons fkt. nicht
 	-	applyDamage, ersetze erste Zeile: let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).parents("button")[0];
 -	x Bug: Kann nicht weit genug runterscrollen für remove bzw die unteren schadenskastchen
 	-	Footer hatte viel zu großen z-index
@@ -14,20 +14,20 @@
 -	x add-Button leert die inputs vom Modal nicht mehr
 	-	event hidden.bs.modal feuert nicht mehr
 	-	zuerst dachte ich, es liegt daran, dass ich das bootstrap js zu Klasse Modal nicht laden konnte. Mittlerweile habe ich es hingekriegr, doch das event feuert trotzdem nicht
-	-	hab's hingekriegt, indem ich jquery und bootstrap nun doch wieder in der index.html lade und nicht mehr als import. 
+	-	hab's hingekriegt, indem ich jquery und bootstrap nun doch wieder in der index.html lade und nicht mehr als import.
 -	x in großer Darstellung bleiben u.U. links und rechts Ränder frei, wo das Hintergrundbild nicht skaliert wird -> background-size: cover
 -	x bei Benutzung von augmented-ui: der Text von .combatant-name ist nach oben verschoben und links+rechts abgeschnitten
-	-	grundlegendes Problem: augmented-ui nutzt ::before und ::after, um die Styles zu erzeugen; mein eigenes ::before kollidiert damit 
+	-	grundlegendes Problem: augmented-ui nutzt ::before und ::after, um die Styles zu erzeugen; mein eigenes ::before kollidiert damit
-	-	füge den .combatant-name jetzt wieder direkt ein, nicht mehr per Datenattribut 
+	-	füge den .combatant-name jetzt wieder direkt ein, nicht mehr per Datenattribut
 -	x damit nirgendwo ein Stück border fehlt, müssen die Ecken von zwei benachbarten combatant tablerows nicht gegeneinander verschoben sein
-	-	d.h. die beiden linken und die beiden rechten Ecken einer Tablerow müssen jeweils die gleiche X-Position haben 
+	-	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 
+-	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 
+-	x wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem
--	x wenn die Navbar borders hat, sollte sie nicht direkt am oberen Bildrand anfangen, sondern ein paar Pixel weiter unten 
+-	x wenn die Navbar borders hat, sollte sie nicht direkt am oberen Bildrand anfangen, sondern ein paar Pixel weiter unten
 -	x Unterschied zwischen enabled und disabled button nicht gut erkennbar
--	x Output vom HTML Validator: 
+-	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
@@ -41,26 +41,26 @@
 	-	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() 
+	-	Fehler beim sichtbar/unsichtbar-Setzen der modal buttons in handleEditButtonClick()
 
 -	x Änderungen im edit modal werden nicht mehr übernommen
 	-	war ein fehlendes let in editCombatant() -> wo das nur wieder herkam …
 -	x Sortierung falsch, wenn Ini gleich und Rea unterschiedlich
 -	x icons for dead and K.O don't load
--	x actions-menu soll zugehen, wenn man auf eine freie Stelle klickt (so wie damage-monitor) 
+-	x actions-menu soll zugehen, wenn man auf eine freie Stelle klickt (so wie damage-monitor)
 -	x SVG Improvements
 	-	x verbleibende Bilder in SVGs umwandeln/nachbauen
 		-	umwandeln: Inkscape
-		-	nachbauen: svgedit.netlify.com, 
+		-	nachbauen: svgedit.netlify.com,
 		-	x betrifft: add.png, newround.png, cross.png, zzz.png
 		-	x dann muss ich add und newround auch nicht mehr mit CSS filter auf die richtige Farbe bringen
 	-	x bestehende SVGs vereinfachen (polygon oder rect statt path)
-		-	x betrifft act 
+		-	x betrifft act
 	-	x als Symbole definieren und mit <use> wiederverwenden: https://stackoverflow.com/a/59614656
 -	x take damage fkt nicht mehr richtig: es werden die falschen buttons re/deaktiviert
 	-	non-issue, geht doch
 -	x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
-	-	via SVGInject: https://github.com/iconfu/svg-inject  
+	-	via SVGInject: https://github.com/iconfu/svg-inject
 -	x wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
 	-	korrigiert, indem ich nicht mehr den Buttons data-bs-modal="toggle" mitgebe, sondern das modal via JS in addCombatant() bzw. editCombatant() verstecke
 	-	Problem: dann ist das modal weg, aber der backdrop noch da (ich kann nichts anklicken)
@@ -69,7 +69,7 @@
 -	x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
 	-	gilt auch für editCombatant, removeCombatant, startNewRound
 		-	applyDamage dagegen nicht, weil es eine echte Handlerfkt. ist -> vllt umbenennen
-	-	validation, modal hide/show und alles weitere kläre ich vorher in einer echten handler function 
+	-	validation, modal hide/show und alles weitere kläre ich vorher in einer echten handler function
 -	x manchmal wird svg-inject nicht geladen und dann sind alle icons weg
 	-	hab's jetzt doch wieder rausgeschmissen
 -	x add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende
@@ -83,18 +83,18 @@
 		-	Tabellenbreite begrenzen (mit Containerbreite immer ~95%)
 			-	viewport width <= 600px: 100%
 			-	viewport width > 600px: (100-x/24)% mit x = vWidth-600px
-			-	viewport widht > 1200: 75% 
+			-	viewport widht > 1200: 75%
 		-	nicht px benutzen, sondern vw/vh/vmin/vmax -> muss aber schauen, ob FF4And das unterstützt
 		-	clamp(minsize, relsize, maxsize)
 		-	auch mgl.: calc(0.75em + 1vw) (macht den Vergrößerungseffekt für große Viewports irrelevant)
 	-	slightly restyle elements
 		-	navbar: augmented-ui br clipping is too wide
 		-	x table: table row clipping not working -> liegt an td { clip-path: none; }
-		-	footer: smaller 
+		-	footer: smaller
-	-	x use variables for repeating CSS values (box-shadow, text-shadow, button size etc.) 
+	-	x use variables for repeating CSS values (box-shadow, text-shadow, button size etc.)
-	-	augmented-ui Fallstricke: 
+	-	augmented-ui Fallstricke:
 			-	--aug-[b|t|][l|r|] fkt. nur sicher mit Werten in px; em, rem, % etc. fkt. idR nicht
-			-	--aug-border-* fkt. nicht mit Wert 0, es muss 0px sein  
+			-	--aug-border-* fkt. nicht mit Wert 0, es muss 0px sein
 	-	x Design im Chromium checken (zB damage slider #combatant-modal)
 		-	-moz-… mit -webkit-… ergänzen
 	-	x make color scheme friendly for people with red green bindness (Felix)
@@ -102,12 +102,12 @@
 		-	Kandidaten
 			-	gelb: gold, yellow, orange
 			-	grün: lawngreen, lime, greenyellow
--	x nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht 
+-	x 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
-	-	vllt. ein timeout-Problem? 
+	-	vllt. ein timeout-Problem?
 -	x custom validation not triggering error message nor visible styles
-	-	x außerdem bleiben nichtvalid. Werte stehen, wenn man das modal mit ESC schließt und dann mit edit wieder öffnet 
+	-	x außerdem bleiben nichtvalid. Werte stehen, wenn man das modal mit ESC schließt und dann mit edit wieder öffnet
 -	x warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
 -	x revamp Act-icon
 	-	alternative to "-10"?
@@ -118,14 +118,42 @@
 -	x color scheme beim Favicon anpassen
 	-	https://realfavicongenerator.net/
 	-	see also here: https://github.com/audreyfeldroy/favicon-cheat-sheet
-
 -	x Mauszeiger soll Finger werden, wenn er über combatant-name/ini/dice-and-rea hovert
 -	x actions-menu erscheint nicht direkt unter dem Button
 	-	beide dropdowns sind gerade garbled
+-	x im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
+	-	action-menu und damage-monitor sliden jetzt nicht mehr rein, sondern bleiben an Ort und Stelle
+	-	das sollte die Sache verhindern
+-	x warum fkt. das Ganze nicht als Webapp?
+	-	Firefox (android) sieht die Seite nicht als installable an
+	-	Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux)
+-	x favicon checken: https://realfavicongenerator.net/favicon_checker
+	-	jetzt fkt. immer noch nicht die URLs im Icon manifest
+	-	x Links zu den versch. favicons fkt. nicht: sie lauten /… statt /sr2ini/…
+	-	x Lösung: parcel build braucht als --public-url "./" (statt "/"), dann werden die Links korrekt erzeugt
+	-		neues Problem: für parcel serve fkt. das nicht; statt CSS/JS/favicon-Files wird jedes Mal index.html serviert
+		-	edit: jetzt geht's wieder (nachdem ich sr2ini.iconmanifest zurückbenannt hatte nach site.webmanifest)
+		-	bekanntes Problem: https://github.com/parcel-bundler/parcel/issues/857
+		-	Workaround: weiter --public-url / verwenden
+			-	WICHTIG: fürs Deployment muss ich dann immer die mit parcel build erzeugten Dateien verwenden
+		-	was auch geht, ist aber umständlich: parcel serve durch anderen HTTP-Server ersetzen
+			-	parcel build
+			-	im Dist-Verz.: python3 -m http.server
+			-	CORS-Fehler im Firefox vermeiden: about:config -> content.cors.disable = true
+	-	letztes Problem (hoffentlich): die Links zu den android-chrome-XYZxXYZ Icons im site.webmanifest stimmen nicht
+		-	hab site.manifest nach src/ verschoben und die Links angepasst -> jetzt scheint's zu gehen
 
 
 ### open
 
+-	x focus-related stuff
+	-	x enter key doesn't work right away after clicking add button
+	-	x wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
+	-	x after pressing damage level button, focus moves to first table row act button
+		-	it's probably b/c I resort the table
+-	focus trapping im modal fkt. nur rückwärts (shift-tab), aber nicht vorwärts
+-	wenn ich in einem modal mit Tab durchgehe und zu den Buttons ganz unten komme, bewegt sich der untere Rand des Modals ab und auf
+-	comments with general info in source files?
 -	unter die GPL stellen
 	-	https://www.gnu.org/licenses/gpl-howto.html
 
@@ -133,41 +161,13 @@
 	-	manifest: Version, tarball URL und sha256 ersetzen
 	-	README.md: Version ersetzen
 	-	ggf. doc/screenshots/sr2ini-screenshot.jpg ersetzen (960x640)
--	favicon checken: https://realfavicongenerator.net/favicon_checker
-	-	jetzt fkt. immer noch nicht die URLs im Icon manifest
-	-	x Links zu den versch. favicons fkt. nicht: sie lauten /… statt /sr2ini/…
-	-	x Lösung: parcel build braucht als --public-url "./" (statt "/"), dann werden die Links korrekt erzeugt
-	-		neues Problem: für parcel serve fkt. das nicht; statt CSS/JS/favicon-Files wird jedes Mal index.html serviert
-		-	edit: jetzt geht's wieder (nachdem ich sr2ini.iconmanifest zurückbenannt hatte nach site.webmanifest)
-		-	bekanntes Problem: https://github.com/parcel-bundler/parcel/issues/857
-		-	Workaround: weiter --public-url / verwenden 
-			-	WICHTIG: fürs Deployment muss ich dann immer die mit parcel build erzeugten Dateien verwenden
-		-	was auch geht, ist aber umständlich: parcel serve durch anderen HTTP-Server ersetzen 
-			-	parcel build
-			-	im Dist-Verz.: python3 -m http.server
-			-	CORS-Fehler im Firefox vermeiden: about:config -> content.cors.disable = true
-	-	letztes Problem (hoffentlich): die Links zu den android-chrome-XYZxXYZ Icons im site.webmanifest stimmen nicht
-		-	hab site.manifest nach src/ verschoben und die Links angepasst -> jetzt scheint's zu gehen
 
 -	Deployment:
-	-	CI/CD: es gibt Jenkins für Yunohost 
+	-	CI/CD: es gibt Jenkins für Yunohost
-		-	hier ist ein Tutorial, um Jenkins und Gitea miteinander bekannt zu machen: https://mike42.me/blog/2019-05-how-to-integrate-gitea-and-jenkins 
+		-	hier ist ein Tutorial, um Jenkins und Gitea miteinander bekannt zu machen: https://mike42.me/blog/2019-05-how-to-integrate-gitea-and-jenkins
 		-	Jenkins Doc: https://www.jenkins.io/doc/book/using/best-practices/
+		-	ist aber wohl mit Kanonen auf Spatzen
 	-	use minified libraries (aug-ui, bs, jq)
--	focus-related stuff
-	-	enter key doesn't work right away after clicking add button
-	-	after pressing damage button, focus moves to first table row act button 
-		-	it's probably b/c I resort the table
-	-	wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
-	-	focus trapping im modal fkt. nur rückwärts (shift-tab), aber nicht vorwärts
-		-	zumindest im Chrome; FF ungetestet
--	im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
-	-	action-menu und damage-monitor sliden jetzt nicht mehr rein, sondern bleiben an Ort und Stelle
-	-	das sollte die Sache verhindern 
--	warum fkt. das Ganze nicht als Webapp?
-	-	Firefox (android) sieht die Seite nicht als installable an
-	-	Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux) 
--	comments with general info in source files? 
 
 
 ## Feature Requests
@@ -177,7 +177,7 @@
 	-	index.html: meta, footer
 	-	sr2ini.js: test combatant
 	-	git: user.name, user.email
-	-	git commits, ggf. tags  
+	-	git commits, ggf. tags
 -	Seite als Web App auf FF4And installable machen
 	-	mal sehen …
 -	Animationen? Transitions?
@@ -187,48 +187,47 @@
 		-	x font
 -	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 
+	-	falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace
 -	nicetohave: Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern
 -	nicetohave: Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
 -	Sache mit dem ServiceWorker mal richtig angehen
 
--	x progressive web app 
+-	x progressive web app
 	-	x Service Worker einrichten, um die Dateien lokal zu cachen
-		-	x lief nicht mit Parcel pur, brauchte Paket "serve" -> npx serve dist/ 
+		-	x lief nicht mit Parcel pur, brauchte Paket "serve" -> npx serve dist/
 		->	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 
+		-	geht
 -	x nochmal wg. Daten wie name, dice, rea, true-ini und damage-x:
 	-	Verwalte sie jetzt komplett mit der data-* API; verwende dafür ausschließlich .attr() als Getter/Setter
-	-	Füge die Werte aus dem Attribut per CSS direkt ins Element ein (::after und content). 
+	-	Füge die Werte aus dem Attribut per CSS direkt ins Element ein (::after und content).
 -	x prettify code: alle HTML class names von camelCale zu dash-case komvertieren
 -	x Design cyberpunkig machen
 -	x im modal soll man die damage levels einstellen/verändern können
 -	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 und im combatant-modal ein weiterer OK-Button, der das Modal offenlässt
 -	x Design: favicon
 	-	x imput[type=range] schicker machen
 	-	x input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
 	-	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: 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> 
+-	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. 
+	-	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.
--	x kann die classes text-center, text-end etc aus den Tabellenzellen entfernen 
+-	x kann die classes text-center, text-end etc aus den Tabellenzellen entfernen
 -	x CSS: maroon durch b3005f ersetzen
 -	x anonymous functions wo möglich durch arrow functions ersetzen
 -	x auf bootstrap.js verzichten?
 	-	zumindest modal.js muss ich einzeln laden
 	-	aber sonst brauch ich es glaube ich nicht
--	x dependencies lokal einbinden 
+-	x dependencies lokal einbinden
 -	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. 
+	-	Variablen für Farben, Filter etc.
-

src/js/sr2ini.js

@@ -1,26 +1,9 @@
-/* *****************
-// Register Service Worker
-if (navigator && navigator.serviceWorker) {
-	navigator.serviceWorker.register(
-		new URL("service-worker.js", import.meta.url),
-		{type: "module"}
-	).then( (registration) => {
-		console.log('ServiceWorker registration successful with scope: ', registration.scope);
-	}, (err) => {
-		console.log('ServiceWorker registration failed: ', err);
-	});
-} else {
-	console.error("Service workers are not supported.");
-}
-***************** */
-
-
 /*
  * import libraries
  */
 
-const bs = require("../../node_modules/bootstrap/js/dist/modal.js");
 const $ = require("../../node_modules/jquery/dist/jquery.js");
+const bs = require("../../node_modules/bootstrap/js/dist/modal.js");
 
 
 /*
@@ -245,6 +228,7 @@ function handleDamageLevelClick(event) {
 	$btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active");
 	$btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active");
 	sortTable();
+	$btn.focus();
 }
 
 // click handler for edit buttons
@@ -544,9 +528,10 @@ $(document).ready(function () {
 		}
 	});
 	// always focus name input field when combatant modal appears
-	$('#combatant-modal').on('shown.bs.modal', () => $('#combatant-modal-name').focus());
+	// (need to use vanilla JS b/c jQuery can't seem to attach event handler correctly)
+	document.getElementById('combatant-modal').addEventListener('shown.bs.modal', () => $('#combatant-modal-name').focus());
 	// always empty input fields when combatant modal disappears
-	$("#combatant-modal").on('hidden.bs.modal', () => $("input[id*='combatant-modal']").val(""));
+	document.getElementById('combatant-modal').addEventListener('hidden.bs.modal', () => $("input[id*='combatant-modal']").val(""));
 	// Hide damage monitors and actions menus after click somewhere else
 	$("html").on("click", (e) => {
 		if ($(e.target).parents(".damage-monitor").length == 0) {