sr2ini/TODO.md

# sr2ini: Bugs and Features Tracker

## Bugs

### fixed

-	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
-	x Bug: resort after remove -> einfach eingefügt
-	x background-image wiederholt sich -> hat sich nach Redesign erledigt
-	x Habe alle $("…").modal("hide|show") eliminiert; die Sichtbarkeit der Modals wird jetzt ausschließlich durch data-bs-Attribute gesteuert
-	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. 
-	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 
	-	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 
-	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 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: 
	-	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)
-	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() 

-	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 SVG Improvements
	-	x verbleibende Bilder in SVGs umwandeln/nachbauen
		-	umwandeln: Inkscape
		-	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 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  
-	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)
		-	Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
	-	bei Apply modal offen lassen
-	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 
-	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
	-	ich könnt's umstellen, aber will ich das?
	-	nicht mehr aktuell

### open

-	dafür sorgen, dass lange Namen nicht das Design sprengen -> https://www.design-fluide.com/09-12-2018/how-to-break-long-words-in-an-html-or-css-table/
-	Design
	-	im Chromium sind die Slider für Damage im #combatant-modal ungestylet 
	-	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  
	-	Seite für größere Screens anpassen (Schrift, Buttons, Icons skalieren)
		-	Breakpoints: 600px, 1200px
		-	Elementbreite begrenzen
			-	viewport width <= 600px: 100%
			-	viewport width > 600px: (100-x/24)% mit x = vWidth-600px
			-	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)
	-	make color scheme friendly for people with red green bindness (Felix)
		-	see here: https://venngage.com/tools/accessible-color-palette-generator
		-	Favicon nicht vergessen!!
		-	tests
			-	weiß: ghostwhite, white, lightgrey
			-	gelb: gold, yellow, orange
			-	grün: lawngreen, lime, greenyellow
			-	rot: orangered, red, darkred	
	-	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) 
-	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? 
-	wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld



## Feature Requests

-	Seite als Web App auf FF4And installable machen
	-	mal sehen …
-	Seite auch mal im Chrome checken
	-	-moz-… mit -webkit-… ergänzen
-	Animationen? Transitions?
-	deployment: dist/* soll direkt auf hermes hochgeladen werden
	-	x warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
	-	HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
	-	bootstrap, jquery, font auch lokal vorhalten
		-	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 
-	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 Service Worker einrichten, um die Dateien lokal zu cachen
		-	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 
-	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). 
-	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 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 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> 
	-	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. 
-	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 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.