# 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) ### open - SVG Improvements - verbleibende Bilder in SVGs umwandeln/nachbauen - umwandeln: Inkscape - nachbauen: svgedit.netlify.com, - betrifft: add.png, newround.png, cross.png, zzz.png - dann muss ich add und newround auch nicht mehr mit CSS filter auf die richtige Farbe bringen - bestehende SVGs vereinfachen (polygon oder rect statt path) - betrifft act - macht es Sinn, die SVGs in eigene Dateien zu packen? Derzeit sind sie im HTML Sourcecode - als Symbole definieren: https://stackoverflow.com/a/59614656 - make color scheme friendly for people with red green bindness (Felix) - see here: https://venngage.com/tools/accessible-color-palette-generator - 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) - 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 - schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event - jetzt kommt es aber trotzdem manchmal wieder - vllt. ein timeout-Problem? - 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 ## Feature Requests - 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 s mit ID packen. Diese kann ich dann in anderen Files referenzieren: - 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 -Elemente darin nicht ausgewertet (also duch das referenzierte 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 den Inhalt des 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 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 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 - -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? - 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, font auch lokal vorhalten - 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