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 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

• x 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/

• x (Re)Design

  • table anders aufteilen (cell width) (zB ist INI zu breit)
  • Seite für größere Screens anpassen (Schrift, Buttons, Icons skalieren)
    • Breakpoints: 600px, 1200px
    • Tabellenbreite begrenzen (mit Containerbreite immer ~95%)
      • 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)
  • 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
  • x use variables for repeating CSS values (box-shadow, text-shadow, button size etc.)
  • 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
  • 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)
    • see here: https://venngage.com/tools/accessible-color-palette-generator
    • Kandidaten
      • gelb: gold, yellow, orange
      • grün: lawngreen, lime, greenyellow

open

• color scheme beim Favicon anpassen

• 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 …

• 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 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 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.