Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 22a53eca62 | |||
| 2d64915cb0 | |||
| 26955b841d | |||
| 9073106f61 | |||
| 3aa06b6d7f | |||
| aa3a6cf155 | |||
| 4b57ebb5ea | |||
| 465569c109 | |||
| e70f25b8ef | |||
| 675a6b7c07 | |||
| 0bb40881a3 |
3
.gitignore
vendored
3
.gitignore
vendored
@ -8,4 +8,5 @@ node_modules/
|
|||||||
hint-report/
|
hint-report/
|
||||||
.csslintrc
|
.csslintrc
|
||||||
coverage/
|
coverage/
|
||||||
tmp/
|
tmp/
|
||||||
|
*.geany
|
||||||
|
|||||||
@ -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.
|
||||||
429
TODO.md
429
TODO.md
@ -4,222 +4,235 @@
|
|||||||
|
|
||||||
### fixed
|
### 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];
|
- 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
|
- x Bug: Kann nicht weit genug runterscrollen für remove bzw die unteren schadenskastchen
|
||||||
- Footer hatte viel zu großen z-index
|
- Footer hatte viel zu großen z-index
|
||||||
- x Bug: resort after remove -> einfach eingefügt
|
- x Bug: resort after remove -> einfach eingefügt
|
||||||
- x background-image wiederholt sich -> hat sich nach Redesign erledigt
|
- 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 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
|
- x add-Button leert die inputs vom Modal nicht mehr
|
||||||
- event hidden.bs.modal feuert 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
|
- 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 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
|
- 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
|
- 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
|
- 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 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 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
|
- 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
|
- 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 minusten.svg benutzt die falsche Schriftart
|
||||||
- x manchmal spinnt das actions-menu, dann taucht es einfach nicht mehr auf
|
- x manchmal spinnt das actions-menu, dann taucht es einfach nicht mehr auf
|
||||||
- Bsp: more -> clone -> cancel
|
- 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
|
- 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
|
- ich könnte die Rules wieder reinnehmen
|
||||||
- x oder die Icons mit SVG nachbauen (edit und trash)
|
- 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 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
|
- x bei tot/KO wird die Klasse ko-or-dead nicht gesetzt
|
||||||
- es werden gar keine contextual classes gesetzt
|
- es werden gar keine contextual classes gesetzt
|
||||||
- musste die entspr. arrow function in sortTable() wieder zu einer regular function machen
|
- musste die entspr. arrow function in sortTable() wieder zu einer regular function machen
|
||||||
- x combatant modal hat auf einmal zwei OK buttons
|
- 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
|
- x Änderungen im edit modal werden nicht mehr übernommen
|
||||||
- war ein fehlendes let in editCombatant() -> wo das nur wieder herkam …
|
- war ein fehlendes let in editCombatant() -> wo das nur wieder herkam …
|
||||||
- x Sortierung falsch, wenn Ini gleich und Rea unterschiedlich
|
- x Sortierung falsch, wenn Ini gleich und Rea unterschiedlich
|
||||||
- x icons for dead and K.O don't load
|
- 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 SVG Improvements
|
||||||
- x verbleibende Bilder in SVGs umwandeln/nachbauen
|
- x verbleibende Bilder in SVGs umwandeln/nachbauen
|
||||||
- umwandeln: Inkscape
|
- umwandeln: Inkscape
|
||||||
- nachbauen: svgedit.netlify.com,
|
- nachbauen: svgedit.netlify.com,
|
||||||
- x betrifft: add.png, newround.png, cross.png, zzz.png
|
- 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 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 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 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
|
- x take damage fkt nicht mehr richtig: es werden die falschen buttons re/deaktiviert
|
||||||
- non-issue, geht doch
|
- non-issue, geht doch
|
||||||
- x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
|
- 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
|
- 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
|
- 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)
|
- 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()
|
- Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
|
||||||
- bei Apply modal offen lassen
|
- bei Apply modal offen lassen
|
||||||
- x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
|
- x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
|
||||||
- gilt auch für editCombatant, removeCombatant, startNewRound
|
- gilt auch für editCombatant, removeCombatant, startNewRound
|
||||||
- applyDamage dagegen nicht, weil es eine echte Handlerfkt. ist -> vllt umbenennen
|
- 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
|
- x manchmal wird svg-inject nicht geladen und dann sind alle icons weg
|
||||||
- hab's jetzt doch wieder rausgeschmissen
|
- hab's jetzt doch wieder rausgeschmissen
|
||||||
- x add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende
|
- 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?
|
- ich könnt's umstellen, aber will ich das?
|
||||||
- nicht mehr aktuell
|
- 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 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
|
- x (Re)Design
|
||||||
- table anders aufteilen (cell width) (zB ist INI zu breit)
|
- table anders aufteilen (cell width) (zB ist INI zu breit)
|
||||||
- Seite für größere Screens anpassen (Schrift, Buttons, Icons skalieren)
|
- Seite für größere Screens anpassen (Schrift, Buttons, Icons skalieren)
|
||||||
- Breakpoints: 600px, 1200px
|
- Breakpoints: 600px, 1200px
|
||||||
- Tabellenbreite begrenzen (mit Containerbreite immer ~95%)
|
- Tabellenbreite begrenzen (mit Containerbreite immer ~95%)
|
||||||
- viewport width <= 600px: 100%
|
- viewport width <= 600px: 100%
|
||||||
- viewport width > 600px: (100-x/24)% mit x = vWidth-600px
|
- 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
|
- nicht px benutzen, sondern vw/vh/vmin/vmax -> muss aber schauen, ob FF4And das unterstützt
|
||||||
- clamp(minsize, relsize, maxsize)
|
- clamp(minsize, relsize, maxsize)
|
||||||
- auch mgl.: calc(0.75em + 1vw) (macht den Vergrößerungseffekt für große Viewports irrelevant)
|
- auch mgl.: calc(0.75em + 1vw) (macht den Vergrößerungseffekt für große Viewports irrelevant)
|
||||||
- slightly restyle elements
|
- slightly restyle elements
|
||||||
- navbar: augmented-ui br clipping is too wide
|
- navbar: augmented-ui br clipping is too wide
|
||||||
- x table: table row clipping not working -> liegt an td { clip-path: none; }
|
- 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-[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)
|
- x Design im Chromium checken (zB damage slider #combatant-modal)
|
||||||
- -moz-… mit -webkit-… ergänzen
|
- -moz-… mit -webkit-… ergänzen
|
||||||
- x make color scheme friendly for people with red green bindness (Felix)
|
- x make color scheme friendly for people with red green bindness (Felix)
|
||||||
- see here: https://venngage.com/tools/accessible-color-palette-generator
|
- see here: https://venngage.com/tools/accessible-color-palette-generator
|
||||||
- Kandidaten
|
- Kandidaten
|
||||||
- gelb: gold, yellow, orange
|
- gelb: gold, yellow, orange
|
||||||
- grün: lawngreen, lime, greenyellow
|
- 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
|
- schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event
|
||||||
- jetzt kommt es aber trotzdem manchmal wieder
|
- 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 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 warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
|
||||||
- x revamp Act-icon
|
- x revamp Act-icon
|
||||||
- alternative to "-10"?
|
- alternative to "-10"?
|
||||||
- at least recreate Electrolize characters in SVG (with fontforge)
|
- at least recreate Electrolize characters in SVG (with fontforge)
|
||||||
- x on KO/Dead soll nur der act-button disabled werden, nicht take damage oder more actions
|
- x on KO/Dead soll nur der act-button disabled werden, nicht take damage oder more actions
|
||||||
- muss die property disabled richtig verwenden
|
- muss die property disabled richtig verwenden
|
||||||
- x action-buttons nicht vertically centered
|
- x action-buttons nicht vertically centered
|
||||||
- x color scheme beim Favicon anpassen
|
- x color scheme beim Favicon anpassen
|
||||||
- https://realfavicongenerator.net/
|
- https://realfavicongenerator.net/
|
||||||
- see also here: https://github.com/audreyfeldroy/favicon-cheat-sheet
|
- 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 Mauszeiger soll Finger werden, wenn er über combatant-name/ini/dice-and-rea hovert
|
- x actions-menu erscheint nicht direkt unter dem Button
|
||||||
- x actions-menu erscheint nicht direkt unter dem Button
|
- beide dropdowns sind gerade garbled
|
||||||
- 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
|
||||||
|
- 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
|
||||||
|
- x Geheimfunktion, um Eclipse, Solitaire, Pi und Q zu adden: hold navbar title
|
||||||
|
- x refactor (in neuem Branch):
|
||||||
|
- jede combatant tablerow kriegt eine unique #id
|
||||||
|
- Funktionen holen sich ihre Infos Infos nicht mehr aus dem DOM, sondern kriegen sie als Parameter übergeben
|
||||||
|
- tablerow id
|
||||||
|
- table
|
||||||
|
- modal
|
||||||
|
- …
|
||||||
|
|
||||||
|
|
||||||
### open
|
### open
|
||||||
|
|
||||||
- favicon checken: https://realfavicongenerator.net/favicon_checker
|
- focus trapping im modal fkt. nur rückwärts (shift-tab), aber nicht vorwärts
|
||||||
- Links zu den versch. favicons fkt. nicht: sie lauten /… statt /sr2ini/…
|
- 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
|
||||||
- Lösung: parcel serve / parcel build braucht als --public-url "./" (statt "/"), dann werden die Links korrekt erzeugt
|
- comments with general info in source files?
|
||||||
- neues Problem: dann fkt. parcel serve aber nicht mehr; statt CSS/JS/favicon-Files wird jedes Mal index.html serviert
|
- unter die GPL stellen
|
||||||
- bekanntes Problem: https://github.com/parcel-bundler/parcel/issues/857
|
- https://www.gnu.org/licenses/gpl-howto.html
|
||||||
- kein Workaround fkt für mich
|
|
||||||
- was fkt: 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
|
|
||||||
|
|
||||||
- sr2ini_ynh auf neue Version bringen
|
- sr2ini_ynh auf neue Version bringen
|
||||||
- Screenshot ersetzen
|
- manifest: Version, tarball URL und sha256 ersetzen
|
||||||
- tarball ersetzen
|
- README.md: Version ersetzen
|
||||||
- Deployment:
|
- ggf. doc/screenshots/sr2ini-screenshot.jpg ersetzen (960x640)
|
||||||
- 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
|
- Deployment:
|
||||||
- Jenkins Doc: https://www.jenkins.io/doc/book/using/best-practices/
|
- CI/CD: es gibt Jenkins für Yunohost
|
||||||
- use minified libraries (aug-ui, bs, jq)
|
- hier ist ein Tutorial, um Jenkins und Gitea miteinander bekannt zu machen: https://mike42.me/blog/2019-05-how-to-integrate-gitea-and-jenkins
|
||||||
- focus-related stuff
|
- Jenkins Doc: https://www.jenkins.io/doc/book/using/best-practices/
|
||||||
- enter key doesn't work right away after clicking add button
|
- ist aber wohl mit Kanonen auf Spatzen
|
||||||
- after pressing damage button, focus moves to first table row act button
|
- use minified libraries (aug-ui, bs, jq)
|
||||||
- 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
|
## Feature Requests
|
||||||
|
|
||||||
- author name soll durchgehend der gleiche sein
|
- author name soll durchgehend der gleiche sein
|
||||||
- aber welcher? tobias oder eclipse?
|
- aber welcher? tobias oder eclipse?
|
||||||
- index.html: meta, footer
|
- index.html: meta, footer
|
||||||
- sr2ini.js: test combatant
|
- sr2ini.js: test combatant
|
||||||
- git: user.name, user.email
|
- git: user.name, user.email
|
||||||
- git commits, ggf. tags
|
- git commits, ggf. tags
|
||||||
- Seite als Web App auf FF4And installable machen
|
- Animationen? Transitions?
|
||||||
- mal sehen …
|
- deployment: dist/* soll direkt auf hermes hochgeladen werden
|
||||||
- Animationen? Transitions?
|
- HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
|
||||||
- deployment: dist/* soll direkt auf hermes hochgeladen werden
|
- bootstrap, jquery, font auch lokal vorhalten
|
||||||
- HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
|
- x font
|
||||||
- bootstrap, jquery, font auch lokal vorhalten
|
- docstrings
|
||||||
- x font
|
- parcel soll aus dem HTML code nicht die Newlines rausnehmen -> macht er das überhaupt noch?
|
||||||
- docstrings
|
- falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace
|
||||||
- parcel soll aus dem HTML code nicht die Newlines rausnehmen -> macht er das überhaupt noch?
|
- nicetohave: Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern
|
||||||
- falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace
|
- nicetohave: Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
|
||||||
- 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.
|
|
||||||
|
|
||||||
|
- 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.
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
# Your Favicon Package
|
|
||||||
|
|
||||||
This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
|
|
||||||
|
|
||||||
## Install instructions
|
|
||||||
|
|
||||||
To install this package:
|
|
||||||
|
|
||||||
Extract this package in the root of your web site. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/favicon.ico</code>.
|
|
||||||
|
|
||||||
Insert the following code in the `head` section of your pages:
|
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
||||||
<link rel="manifest" href="/site.webmanifest">
|
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004aa5">
|
|
||||||
<meta name="msapplication-TileColor" content="#2b5797">
|
|
||||||
<meta name="theme-color" content="#ffffff">
|
|
||||||
|
|
||||||
*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
||||||
<link rel="manifest" href="/site.webmanifest">
|
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004aa5">
|
|
||||||
<meta name="msapplication-TileColor" content="#2b5797">
|
|
||||||
<meta name="theme-color" content="#ffffff">
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "A simple Initiative tracker for Shadowrun 2e",
|
|
||||||
"short_name": "sr2ini",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "/icons/android-chrome-192x192.png",
|
|
||||||
"sizes": "192x192",
|
|
||||||
"type": "image/png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "/icons/android-chrome-512x512.png",
|
|
||||||
"sizes": "512x512",
|
|
||||||
"type": "image/png"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"theme_color": "gold",
|
|
||||||
"background_color": "#004aa5",
|
|
||||||
"display": "standalone"
|
|
||||||
}
|
|
||||||
15
package.json
15
package.json
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "sr2ini",
|
"name": "sr2ini",
|
||||||
"version": "0.9.3",
|
"version": "0.9.5",
|
||||||
"description": "Simple Initiative tracker for Shadowrun 2e",
|
"description": "Simple Initiative tracker for Shadowrun 2e",
|
||||||
"private": true,
|
"private": true,
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Eclipse729",
|
"name": "Eclipse",
|
||||||
"email": "eclipse@unterdemradar.de",
|
"email": "eclipse@unterdemradar.de",
|
||||||
"url": "https://git.unterdemradar.de"
|
"url": "https://git.unterdemradar.de/eclipse"
|
||||||
},
|
},
|
||||||
"homepage": "https://unterdemradar.de/sr2ini/",
|
"homepage": "https://unterdemradar.de/sr2ini/",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
@ -26,13 +26,13 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
|
"start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
|
||||||
"clean": "rm -rf dist/ && rm -rf .parcel-cache/",
|
"clean": "rm -rf dist/ && rm -rf .parcel-cache/",
|
||||||
"build": "npx parcel build --no-optimize --public-url ./",
|
"build": "npx parcel build --no-optimize --public-url ./ --dist-dir dist",
|
||||||
"test": "jest --coverage --env=jsdom",
|
"test": "jest --coverage --env=jsdom",
|
||||||
"webhint": "hint http://localhost:1234"
|
"webhint": "hint http://localhost:1234"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git@git.unterdemradar.de:tobias/sr2ini.git"
|
"url": "git@git.unterdemradar.de:eclipse/sr2ini.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"Shadowrun",
|
"Shadowrun",
|
||||||
@ -52,10 +52,5 @@
|
|||||||
"augmented-ui": "^2.0.0",
|
"augmented-ui": "^2.0.0",
|
||||||
"bootstrap": "^5.2.3",
|
"bootstrap": "^5.2.3",
|
||||||
"jquery": "^3.6.3"
|
"jquery": "^3.6.3"
|
||||||
},
|
|
||||||
"comments": {
|
|
||||||
"dependencies": {
|
|
||||||
"@parcel/service-worker": "^2.8.3"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
*************************** */
|
*************************** */
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Electrolize";
|
font-family: "Electrolize";
|
||||||
src: local("Electrolize"), url("../../node_modules/@fontsource/electrolize/files/electrolize-latin-400-normal.woff2") format("woff2");
|
src: local("Electrolize"), url("../../node_modules/@fontsource/electrolize/files/electrolize-latin-400-normal.woff2") format("woff2");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -19,9 +19,9 @@ $fg-dark: orange;
|
|||||||
// old fg-colors: deeppink, lightpink, #b3005f;
|
// old fg-colors: deeppink, lightpink, #b3005f;
|
||||||
|
|
||||||
// background colors
|
// background colors
|
||||||
$bg: cyan; // #00ffff
|
$bg: cyan; // #00ffff
|
||||||
$bg-bright: lightcyan; // #e0ffff
|
$bg-bright: lightcyan; // #e0ffff
|
||||||
$bg-dark: darkcyan; // #008b8b
|
$bg-dark: darkcyan; // #008b8b
|
||||||
|
|
||||||
// base font size
|
// base font size
|
||||||
$html-font-size: 14px;
|
$html-font-size: 14px;
|
||||||
@ -68,7 +68,7 @@ $form-feedback-icon-valid: none;
|
|||||||
$form-feedback-icon-invalid: none;
|
$form-feedback-icon-invalid: none;
|
||||||
|
|
||||||
// more bootstrap stylesheets
|
// more bootstrap stylesheets
|
||||||
//@import "../../node_modules/bootstrap/scss/bootstrap"; // everything
|
//@import "../../node_modules/bootstrap/scss/bootstrap"; // everything
|
||||||
@import "../../node_modules/bootstrap/scss/variables";
|
@import "../../node_modules/bootstrap/scss/variables";
|
||||||
@import "../../node_modules/bootstrap/scss/variables-dark";
|
@import "../../node_modules/bootstrap/scss/variables-dark";
|
||||||
@import "../../node_modules/bootstrap/scss/maps";
|
@import "../../node_modules/bootstrap/scss/maps";
|
||||||
@ -89,25 +89,25 @@ $form-feedback-icon-invalid: none;
|
|||||||
*************** */
|
*************** */
|
||||||
|
|
||||||
@mixin aug() {
|
@mixin aug() {
|
||||||
--aug-b: 5px;
|
--aug-b: 5px;
|
||||||
--aug-bl: 5px;
|
--aug-bl: 5px;
|
||||||
--aug-br: 5px;
|
--aug-br: 5px;
|
||||||
--aug-l: 5px;
|
--aug-l: 5px;
|
||||||
--aug-r: 5px;
|
--aug-r: 5px;
|
||||||
--aug-tl: 5px;
|
--aug-tl: 5px;
|
||||||
--aug-tr: 5px;
|
--aug-tr: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border() {
|
@mixin border() {
|
||||||
--aug-border-all: .1rem;
|
--aug-border-all: .1rem;
|
||||||
--aug-border-bg: cyan; // variables don't work in this specific instance
|
--aug-border-bg: cyan; // variables don't work in this specific instance
|
||||||
--aug-border-opacity: .5;
|
--aug-border-opacity: .5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin inlay() {
|
@mixin inlay() {
|
||||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||||
--aug-inlay-x: .12em;
|
--aug-inlay-x: .12em;
|
||||||
--aug-inlay-y: .12em;
|
--aug-inlay-y: .12em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -116,33 +116,33 @@ $form-feedback-icon-invalid: none;
|
|||||||
**************** */
|
**************** */
|
||||||
|
|
||||||
@media (width <= 500px) {
|
@media (width <= 500px) {
|
||||||
html { font-size: $html-font-size; }
|
html { font-size: $html-font-size; }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
min-width: 100vw;
|
min-width: 100vw;
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-responsive { max-width: calc(100% - .8rem); }
|
.table-responsive { max-width: calc(100% - .8rem); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (500px < width < 1000px) {
|
@media (500px < width < 1000px) {
|
||||||
html { font-size: calc(100vw / (500px / $html-font-size)); }
|
html { font-size: calc(100vw / (500px / $html-font-size)); }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
$calc-width: calc(100vw / 2 + 250px);
|
$calc-width: calc(100vw / 2 + 250px);
|
||||||
min-width: $calc-width;
|
min-width: $calc-width;
|
||||||
max-width: $calc-width;
|
max-width: $calc-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (1000px <= width) {
|
@media (1000px <= width) {
|
||||||
html { font-size: calc($html-font-size * 2); }
|
html { font-size: calc($html-font-size * 2); }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
min-width: 75vw;
|
min-width: 75vw;
|
||||||
max-width: 75vw;
|
max-width: 75vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -151,58 +151,58 @@ $form-feedback-icon-invalid: none;
|
|||||||
******************* */
|
******************* */
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: 'Electrolize', sans-serif;
|
font-family: 'Electrolize', sans-serif;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: darkslategray;
|
background-color: darkslategray;
|
||||||
background-image: url("../img/bg.jpg");
|
background-image: url("../img/bg.jpg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin: .2rem;
|
margin: .2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: .2rem;
|
padding: .2rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sr2-button {
|
.sr2-button {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: .07rem solid $bg;
|
border: .07rem solid $bg;
|
||||||
border-radius: .07rem;
|
border-radius: .07rem;
|
||||||
box-shadow: 0 0 .15rem $bg-bright, 0 0 .3rem $bg, 0 0 .6rem $bg-dark;
|
box-shadow: 0 0 .15rem $bg-bright, 0 0 .3rem $bg, 0 0 .6rem $bg-dark;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin-left: .2rem;
|
margin-left: .2rem;
|
||||||
margin-right: .2rem;
|
margin-right: .2rem;
|
||||||
padding-inline: 0px;
|
padding-inline: 0px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $fg;
|
fill: $fg;
|
||||||
height: 93%;
|
height: 93%;
|
||||||
width: 93%;
|
width: 93%;
|
||||||
vertical-align: unset;
|
vertical-align: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: .1rem solid $bg !important;
|
border: .1rem solid $bg !important;
|
||||||
box-shadow: 0 0 .3rem $bg-bright, 0 0 .6rem $bg, 0 0 1.2rem $bg-dark !important;
|
box-shadow: 0 0 .3rem $bg-bright, 0 0 .6rem $bg, 0 0 1.2rem $bg-dark !important;
|
||||||
filter: brightness(150%) !important;
|
filter: brightness(150%) !important;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
box-shadow: none;
|
|
||||||
border-color: $bg-dark;
|
|
||||||
|
|
||||||
svg { fill: $fg-dark; }
|
&:disabled {
|
||||||
}
|
box-shadow: none;
|
||||||
|
border-color: $bg-dark;
|
||||||
|
|
||||||
|
svg { fill: $fg-dark; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.display-none { display: none; }
|
.display-none { display: none; }
|
||||||
@ -213,32 +213,32 @@ body {
|
|||||||
******************* */
|
******************* */
|
||||||
|
|
||||||
header.navbar {
|
header.navbar {
|
||||||
@include border;
|
@include border;
|
||||||
@include inlay;
|
@include inlay;
|
||||||
|
|
||||||
--aug-b: 7px;
|
--aug-b: 7px;
|
||||||
--aug-bl: 7px;
|
--aug-bl: 7px;
|
||||||
--aug-br: 7px;
|
--aug-br: 7px;
|
||||||
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
||||||
--aug-l: 7px;
|
--aug-l: 7px;
|
||||||
--aug-r: 7px;
|
--aug-r: 7px;
|
||||||
--aug-tl: 7px;
|
--aug-tl: 7px;
|
||||||
--aug-tr: 7px;
|
--aug-tr: 7px;
|
||||||
padding-left: calc(15px + 1rem);
|
padding-left: calc(15px + 1rem);
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: $bg;
|
color: $bg;
|
||||||
font-size: 140%;
|
font-size: 140%;
|
||||||
text-shadow: 0 0 .25rem, 0 0 .5rem, 0 0 .75rem, 0 0 1rem;
|
text-shadow: 0 0 .25rem, 0 0 .5rem, 0 0 .75rem, 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav { justify-content: flex-end !important; }
|
nav { justify-content: flex-end !important; }
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -246,112 +246,114 @@ header.navbar {
|
|||||||
* Table styles
|
* Table styles
|
||||||
******************* */
|
******************* */
|
||||||
|
|
||||||
.table-responsive { overflow: visible !important; }
|
.table-responsive { overflow: visible !important; }
|
||||||
|
|
||||||
#combatants-table {
|
#combatants-table {
|
||||||
border-collapse: collapse !important;
|
border-collapse: collapse !important;
|
||||||
margin-bottom: .1rem;
|
margin-bottom: .1rem;
|
||||||
margin-top: .4rem;
|
margin-top: .4rem;
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
@include aug;
|
@include aug;
|
||||||
@include border;
|
@include border;
|
||||||
@include inlay;
|
@include inlay;
|
||||||
|
|
||||||
--aug-border-bottom: 0px;
|
--aug-border-bottom: 0px;
|
||||||
--aug-border-right: 0px;
|
--aug-border-right: 0px;
|
||||||
}
|
|
||||||
|
|
||||||
tr:last-of-type td,
|
position: relative;
|
||||||
tr:last-of-type th { --aug-border-bottom: 2px; }
|
}
|
||||||
|
|
||||||
.combatant-row { clip-path: none; }
|
tr:last-of-type td,
|
||||||
|
tr:last-of-type th { --aug-border-bottom: 2px; }
|
||||||
|
|
||||||
th,
|
.combatant-row { clip-path: none; }
|
||||||
td {
|
|
||||||
@include aug;
|
|
||||||
@include border;
|
|
||||||
@include inlay;
|
|
||||||
|
|
||||||
--aug-border-bottom: 0px;
|
th,
|
||||||
--aug-border-right: 0px;
|
td {
|
||||||
background: none !important;
|
@include aug;
|
||||||
vertical-align: middle !important;
|
@include border;
|
||||||
}
|
@include inlay;
|
||||||
|
|
||||||
th {
|
--aug-border-bottom: 0px;
|
||||||
color: $bg;
|
--aug-border-right: 0px;
|
||||||
text-transform: uppercase;
|
background: none !important;
|
||||||
}
|
vertical-align: middle !important;
|
||||||
|
}
|
||||||
|
|
||||||
.th-name {
|
th {
|
||||||
padding-left: .75rem !important;
|
color: $bg;
|
||||||
text-align: left;
|
text-transform: uppercase;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.th-ini {
|
.th-name {
|
||||||
min-width: 4rem;
|
padding-left: .75rem !important;
|
||||||
}
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.th-dice-and-rea { min-width: 3rem; }
|
.th-ini {
|
||||||
|
min-width: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.th-actions {
|
.th-dice-and-rea { min-width: 3rem; }
|
||||||
min-width: min-content;
|
|
||||||
--aug-border-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
.th-actions {
|
||||||
color: $fg;
|
min-width: min-content;
|
||||||
font-weight: bold;
|
--aug-border-right: 2px;
|
||||||
text-align: center;
|
}
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
.sr2-button {
|
|
||||||
height: 1.3rem;
|
|
||||||
width: 1.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.combatant-name:hover,
|
td {
|
||||||
.combatant-ini:hover,
|
color: $fg;
|
||||||
.combatant-dice-and-rea:hover { cursor: pointer; }
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
.combatant-name {
|
.sr2-button {
|
||||||
padding-left: .6rem !important;
|
height: 1.3rem;
|
||||||
text-align: left;
|
width: 1.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
overflow: hidden;
|
.combatant-name:hover,
|
||||||
text-overflow: ellipsis;
|
.combatant-ini:hover,
|
||||||
white-space: nowrap;
|
.combatant-dice-and-rea:hover { cursor: pointer; }
|
||||||
}
|
|
||||||
|
|
||||||
.combatant-dice::before { content: attr(data-combatant-dice); }
|
.combatant-name {
|
||||||
|
padding-left: .6rem !important;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
.combatant-rea::before { content: attr(data-combatant-rea); }
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.combatant-actions {
|
.combatant-dice::before { content: attr(data-combatant-dice); }
|
||||||
--aug-border-right: 2px;
|
|
||||||
display: flex;
|
|
||||||
min-height: 2rem;
|
|
||||||
min-width: 5rem;
|
|
||||||
|
|
||||||
> div {
|
.combatant-rea::before { content: attr(data-combatant-rea); }
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-menu {
|
.combatant-actions {
|
||||||
display: flex;
|
--aug-border-right: 2px;
|
||||||
flex-flow: column;
|
display: flex;
|
||||||
padding: .2rem;
|
min-height: 2rem;
|
||||||
|
min-width: 5rem;
|
||||||
|
|
||||||
.sr2-button {
|
> div {
|
||||||
margin-bottom: .2rem;
|
display: flex;
|
||||||
margin-top: .2rem;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actions-menu {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
padding: .2rem;
|
||||||
|
|
||||||
|
.sr2-button {
|
||||||
|
margin-bottom: .2rem;
|
||||||
|
margin-top: .2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-ini td { text-shadow: 0 0 .15rem $fg; }
|
.max-ini td { text-shadow: 0 0 .15rem $fg; }
|
||||||
@ -359,116 +361,116 @@ header.navbar {
|
|||||||
.zero-ini td { color: $fg-dark; }
|
.zero-ini td { color: $fg-dark; }
|
||||||
|
|
||||||
.ko-or-dead td {
|
.ko-or-dead td {
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
color: $fg-dark;
|
color: $fg-dark;
|
||||||
text-decoration: line-through .1rem $fg;
|
text-decoration: line-through .1rem $fg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge.bg-warning {
|
.badge.bg-warning {
|
||||||
background: radial-gradient(circle at center, $bg, $bg-dark);
|
background: radial-gradient(circle at center, $bg, $bg-dark);
|
||||||
bottom: .2rem;
|
bottom: .2rem;
|
||||||
color: black;
|
color: black;
|
||||||
left: .2rem;
|
left: .2rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge.bg-danger {
|
.badge.bg-danger {
|
||||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||||
color: black;
|
color: black;
|
||||||
left: .2rem;
|
left: .2rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .3rem;
|
top: .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.damage-dropdown,
|
.damage-dropdown,
|
||||||
.actions-dropdown {
|
.actions-dropdown {
|
||||||
position: relative; // required for the dropdowns' absolute position to relate to
|
position: relative; // required for the dropdowns' absolute position to relate to
|
||||||
}
|
}
|
||||||
|
|
||||||
.damage-monitor,
|
.damage-monitor,
|
||||||
.actions-menu {
|
.actions-menu {
|
||||||
@include aug;
|
@include aug;
|
||||||
@include border;
|
@include border;
|
||||||
|
|
||||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||||
--aug-border-opacity: .75;
|
--aug-border-opacity: .75;
|
||||||
padding-top: .7rem;
|
padding-top: .7rem;
|
||||||
padding-bottom: .7rem;
|
padding-bottom: .7rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% + .12rem);
|
top: calc(100% + .12rem);
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
|
|
||||||
// center element horizontally w/ respect to parent
|
// center element horizontally w/ respect to parent
|
||||||
right: 50%;
|
right: 50%;
|
||||||
transform: translateX(50%);
|
transform: translateX(50%);
|
||||||
|
|
||||||
// transition: fade in/out
|
// transition: fade in/out
|
||||||
transition: opacity .2s ease-in-out, visibility .2s;
|
transition: opacity .2s ease-in-out, visibility .2s;
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.seen {
|
.seen {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.damage-monitor {
|
.damage-monitor {
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
|
|
||||||
td { padding: .1rem; }
|
td { padding: .1rem; }
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-family: Electrolize;
|
font-family: Electrolize;
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 1.5rem !important;
|
height: 1.5rem !important;
|
||||||
margin: 0rem .15rem;
|
margin: 0rem .15rem;
|
||||||
width: 1.5rem !important;
|
width: 1.5rem !important;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
animation: .6s alternate infinite pulse;
|
animation: .6s alternate infinite pulse;
|
||||||
animation-delay: -.3s;
|
animation-delay: -.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
from { filter: brightness(.85) }
|
|
||||||
50% { filter: brightness(1); }
|
|
||||||
to { filter: brightness(1.15); }
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
@keyframes pulse {
|
||||||
|
from { filter: brightness(.85) }
|
||||||
|
50% { filter: brightness(1); }
|
||||||
|
to { filter: brightness(1.15); }
|
||||||
|
}
|
||||||
|
|
||||||
.damage-stun {
|
}
|
||||||
background: radial-gradient(circle at center, $bg, $bg-dark);
|
|
||||||
box-shadow: none;
|
|
||||||
transition: background .5s, box-shadow .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-stun.active {
|
.damage-stun {
|
||||||
background: radial-gradient(circle at center, $bg-bright, $bg);
|
background: radial-gradient(circle at center, $bg, $bg-dark);
|
||||||
box-shadow: 0 0 .25rem $bg-bright, 0 0 .5rem $bg, 0 0 1rem $bg-dark;
|
box-shadow: none;
|
||||||
}
|
transition: background .5s, box-shadow .5s;
|
||||||
|
}
|
||||||
|
|
||||||
.damage-physical {
|
.damage-stun.active {
|
||||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
background: radial-gradient(circle at center, $bg-bright, $bg);
|
||||||
border-radius: 50%; // circle, not square
|
box-shadow: 0 0 .25rem $bg-bright, 0 0 .5rem $bg, 0 0 1rem $bg-dark;
|
||||||
box-shadow: none;
|
}
|
||||||
transition: background .5s, box-shadow .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.damage-physical.active {
|
.damage-physical {
|
||||||
background: radial-gradient(circle at center, $fg-bright, $fg);
|
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||||
box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark;
|
border-radius: 50%; // circle, not square
|
||||||
}
|
box-shadow: none;
|
||||||
|
transition: background .5s, box-shadow .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.damage-physical.active {
|
||||||
|
background: radial-gradient(circle at center, $fg-bright, $fg);
|
||||||
|
box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -477,112 +479,112 @@ header.navbar {
|
|||||||
******************* */
|
******************* */
|
||||||
|
|
||||||
.sr2-modal {
|
.sr2-modal {
|
||||||
@include border;
|
@include border;
|
||||||
@include aug;
|
@include aug;
|
||||||
|
|
||||||
color: $bg;
|
color: $bg;
|
||||||
font-family: Electrolize !important;
|
font-family: Electrolize !important;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
@include inlay;
|
@include inlay;
|
||||||
@include border;
|
@include border;
|
||||||
|
|
||||||
--aug-inlay-bottom: 0;
|
--aug-inlay-bottom: 0;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
button { width: 2.5rem; }
|
button { width: 2.5rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
@include inlay;
|
@include inlay;
|
||||||
@include border;
|
@include border;
|
||||||
|
|
||||||
--aug-inlay-y: 0;
|
--aug-inlay-y: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
@include inlay;
|
@include inlay;
|
||||||
@include border;
|
@include border;
|
||||||
|
|
||||||
--aug-inlay-top: 0;
|
--aug-inlay-top: 0;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
margin: .3rem;
|
margin: .3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: calc(100% / 22 + 1rem);
|
margin-left: calc(100% / 22 + 1rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-swap {
|
.label-swap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
|
|
||||||
label { order: 2; }
|
|
||||||
|
|
||||||
input { order: 1; }
|
label { order: 2; }
|
||||||
|
|
||||||
}
|
input { order: 1; }
|
||||||
|
|
||||||
.range-group { margin-top: 1rem; }
|
}
|
||||||
|
|
||||||
input {
|
.range-group { margin-top: 1rem; }
|
||||||
margin: .3em;
|
|
||||||
user-select: text;
|
|
||||||
width: 98%; // 100% is inexplicably too long on the right hand side
|
|
||||||
|
|
||||||
&::selection {
|
input {
|
||||||
background-color: $fg;
|
margin: .3em;
|
||||||
color: black;
|
user-select: text;
|
||||||
}
|
width: 98%; // 100% is inexplicably too long on the right hand side
|
||||||
|
|
||||||
&[type="number"] {
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
|
|
||||||
&::-webkit-inner-spin-button,
|
&::selection {
|
||||||
&::-webkit-outer-spin-button {
|
background-color: $fg;
|
||||||
-webkit-appearance: none;
|
color: black;
|
||||||
margin: 0;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; }
|
&[type="number"] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
|
||||||
&[type="range"] {
|
&::-webkit-inner-spin-button,
|
||||||
box-shadow: none !important;
|
&::-webkit-outer-spin-button {
|
||||||
margin-left: calc(100% / 22 - .15rem);
|
-webkit-appearance: none;
|
||||||
width: calc(100% / 11 * 10 + .3rem);
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
+ datalist {
|
&:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; }
|
||||||
border-collapse: collapse;
|
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
option {
|
&[type="range"] {
|
||||||
display: table-cell;
|
box-shadow: none !important;
|
||||||
text-align: center;
|
margin-left: calc(100% / 22 - .15rem);
|
||||||
}
|
width: calc(100% / 11 * 10 + .3rem);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#combatant-modal-dice { margin-right: 0; }
|
+ datalist {
|
||||||
|
border-collapse: collapse;
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
#combatant-modal-rea { margin-left: 0; }
|
option {
|
||||||
|
display: table-cell;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.input-group-text {
|
#combatant-modal-dice { margin-right: 0; }
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
#combatant-modal-rea { margin-left: 0; }
|
||||||
color: $fg;
|
|
||||||
padding: .25rem;
|
.input-group-text {
|
||||||
}
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: $fg;
|
||||||
|
padding: .25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -591,42 +593,42 @@ header.navbar {
|
|||||||
******************* */
|
******************* */
|
||||||
|
|
||||||
.footer-container {
|
.footer-container {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
@include aug;
|
@include aug;
|
||||||
@include inlay;
|
@include inlay;
|
||||||
|
|
||||||
--aug-border-all: .1rem !important;
|
--aug-border-all: .1rem !important;
|
||||||
--aug-border-bg: cyan !important; // vars don't work here
|
--aug-border-bg: cyan !important; // vars don't work here
|
||||||
--aug-border-opacity: .5 !important;
|
--aug-border-opacity: .5 !important;
|
||||||
--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
|
--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
|
||||||
--aug-tl: .7rem;
|
--aug-tl: .7rem;
|
||||||
--aug-tr: .7rem;
|
--aug-tr: .7rem;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: $bg;
|
color: $bg;
|
||||||
font-size: x-small;
|
font-size: x-small;
|
||||||
margin: .15em;
|
margin: .15em;
|
||||||
padding: .25rem;
|
padding: .25rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
-webkit-user-select: text;
|
-webkit-user-select: text;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $fg;
|
color: $fg;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::selection,
|
&::selection,
|
||||||
a::selection {
|
a::selection {
|
||||||
background-color: $fg;
|
background-color: $fg;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
359
src/index.html
359
src/index.html
@ -2,195 +2,196 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<title>Shadowrun 2e Ini Tracker</title>
|
<title>Shadowrun 2e Ini Tracker</title>
|
||||||
<meta name="description" content="A simple Initiative tracker for Shadowrun 2e" />
|
<meta name="description" content="A simple Initiative tracker for Shadowrun 2e" />
|
||||||
<meta name="author" content="Eclipse729" />
|
<meta name="author" content="Eclipse729" />
|
||||||
|
|
||||||
<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.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">
|
<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
|
||||||
|
|
||||||
<script type="module" src="js/sr2ini.js"></script>
|
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
<script type="module" src="js/sr2ini.js"></script>
|
||||||
<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">
|
<link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-touch-icon.png">
|
||||||
<link rel="manifest" href="/icons/sr2ini.iconmanifest">
|
<link rel="icon" type="image/png" sizes="32x32" href="../icons/favicon-32x32.png">
|
||||||
<link rel="shortcut icon" href="/icons/favicon.ico">
|
<link rel="icon" type="image/png" sizes="16x16" href="../icons/favicon-16x16.png">
|
||||||
<meta name="msapplication-TileColor" content="#004aa5">
|
<link rel="manifest" href="site.webmanifest">
|
||||||
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
<link rel="mask-icon" href="../icons/safari-pinned-tab.svg" color="#004aa5">
|
||||||
<meta name="theme-color" content="gold">
|
<link rel="shortcut icon" href="../icons/favicon.ico">
|
||||||
|
<meta name="msapplication-TileColor" content="#004aa5">
|
||||||
|
<meta name="msapplication-config" content="../icons/browserconfig.xml">
|
||||||
|
<meta name="theme-color" content="gold">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- navbar -->
|
<!-- navbar -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
|
<header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
|
||||||
<span class="navbar-brand ps-4">SR2 Initiative Tracker</span>
|
<span id="navbar-title" class="navbar-brand ps-4">SR2 Initiative Tracker</span>
|
||||||
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
|
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
|
||||||
<button type="submit" class="sr2-button" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><svg viewbox="0 0 512 512"><use href="#add" /></svg>
|
<button type="submit" class="sr2-button" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><svg viewbox="0 0 512 512"><use href="#add" /></svg>
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" class="sr2-button" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><svg viewbox="0 0 512 512" ><use href="#newround" /></svg>
|
<button type="submit" class="sr2-button" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><svg viewbox="0 0 512 512" ><use href="#newround" /></svg>
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- combatants table -->
|
<!-- combatants table -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<main class="table-responsive overflow-visible">
|
<main class="table-responsive overflow-visible">
|
||||||
<table class="table table-sm table-borderless" id="combatants-table">
|
<table class="table table-sm table-borderless" id="combatants-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr data-augmented-ui="tl-clip-y tr-clip-y">
|
<tr data-augmented-ui="tl-clip-y tr-clip-y">
|
||||||
<th class="th-name" data-augmented-ui="tl-clip-y both" title="Name" scope="col">Name</th>
|
<th class="th-name" data-augmented-ui="tl-clip-y both" title="Name" scope="col">Name</th>
|
||||||
<th class="th-ini" data-augmented-ui="both" title="Initiative" scope="col">Ini</th>
|
<th class="th-ini" data-augmented-ui="both" title="Initiative" scope="col">Ini</th>
|
||||||
<th class="th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction" scope="col">D+R</th>
|
<th class="th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction" scope="col">D+R</th>
|
||||||
<th class="th-actions" data-augmented-ui="tr-clip-y both" title="Actions" scope="col">Actions</th>
|
<th class="th-actions" data-augmented-ui="tr-clip-y both" title="Actions" scope="col">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- confirm modal -->
|
<!-- confirm modal -->
|
||||||
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
||||||
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
|
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
|
||||||
<div class="modal-header" data-augmented-ui="inlay">
|
<div class="modal-header" data-augmented-ui="inlay">
|
||||||
<h2 class="modal-title">Start New Round</h2>
|
<h2 class="modal-title">Start New Round</h2>
|
||||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" data-augmented-ui="inlay">
|
<div class="modal-body" data-augmented-ui="inlay">
|
||||||
<p>Are you sure?</p>
|
<p>Are you sure?</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" data-augmented-ui="inlay">
|
<div class="modal-footer" data-augmented-ui="inlay">
|
||||||
<button type="button" class="sr2-button" data-bs-dismiss="modal">Cancel</button>
|
<button type="button" class="sr2-button" data-bs-dismiss="modal">Cancel</button>
|
||||||
<button type="submit" class="sr2-button" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
|
<button type="button" class="sr2-button" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
|
||||||
<button type="submit" class="sr2-button display-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
|
<button type="button" class="sr2-button display-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- combatant modal (add & edit) -->
|
<!-- combatant modal (add & edit) -->
|
||||||
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
|
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
|
||||||
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
|
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
|
||||||
<div class="modal-header" data-augmented-ui="inlay">
|
<div class="modal-header" data-augmented-ui="inlay">
|
||||||
<h2 class="modal-title">Add New Combatant</h2>
|
<h2 class="modal-title">Add New Combatant</h2>
|
||||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" data-augmented-ui="inlay">
|
<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
|
||||||
<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
|
<div class="modal-body" data-augmented-ui="inlay">
|
||||||
<div>
|
<div>
|
||||||
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
|
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group input-group-sm">
|
<div class="input-group input-group-sm">
|
||||||
<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-form" placeholder="Dice">
|
<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-form" placeholder="Dice">
|
||||||
<span class="input-group-text">D+</span>
|
<span class="input-group-text">D+</span>
|
||||||
<input type="number" min="0" max="30" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
|
<input type="number" min="0" max="30" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
|
||||||
<span class="input-group-text"> </span>
|
<span class="input-group-text"> </span>
|
||||||
<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="combatant-form" placeholder="Ini">
|
<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="combatant-form" placeholder="Ini">
|
||||||
</div>
|
</div>
|
||||||
<div class="range-group">
|
<div class="range-group">
|
||||||
<label for="combatant-modal-stun" class="form-label">Stun damage <span id="combatant-modal-penalty-stun"></span></label>
|
<label for="combatant-modal-stun" class="form-label">Stun damage <span id="combatant-modal-penalty-stun"></span></label>
|
||||||
<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-stun" list="damage-level">
|
<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-stun" list="damage-level">
|
||||||
<datalist id="damage-level">
|
<datalist id="damage-level">
|
||||||
<option>0</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
|
<option>0</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
|
||||||
</datalist>
|
</datalist>
|
||||||
<div class="label-swap">
|
<div class="label-swap">
|
||||||
<label for="combatant-modal-physical" class="form-label">Physical damage <span id="combatant-modal-penalty-physical"></span></label>
|
<label for="combatant-modal-physical" class="form-label">Physical damage <span id="combatant-modal-penalty-physical"></span></label>
|
||||||
<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-physical" list="damage-level">
|
<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-physical" list="damage-level">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
<div class="modal-footer" data-augmented-ui="inlay">
|
||||||
<div class="modal-footer" data-augmented-ui="inlay">
|
<button type="button" class="sr2-button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
|
||||||
<button type="button" class="sr2-button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
|
<button type="button" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
|
||||||
<button type="submit" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
|
<button type="button" class="sr2-button" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
|
||||||
<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" >OK</button>
|
<button type="button" class="sr2-button display-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
|
||||||
<button type="submit" class="sr2-button display-none" id="combatant-modal-edit-ok-button" >OK</button>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- SVG icon <symbol> definitions (for later <use>)-->
|
<!-- SVG icon <symbol> definitions (for later <use>)-->
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="display-none">
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="display-none">
|
||||||
<defs>
|
<defs>
|
||||||
<!-- add combatant -->
|
<!-- add combatant -->
|
||||||
<symbol id="add" >
|
<symbol id="add" >
|
||||||
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
||||||
<rect height="96" width="64" x="224" y="0" />
|
<rect height="96" width="64" x="224" y="0" />
|
||||||
<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
|
<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
|
||||||
<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
|
<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
|
||||||
<path d="M 128 272 q 64 32 128 32 v -32 Z" />
|
<path d="M 128 272 q 64 32 128 32 v -32 Z" />
|
||||||
<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
|
<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
|
||||||
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
||||||
<rect x="0" y="448" width="96" height="64" />
|
<rect x="0" y="448" width="96" height="64" />
|
||||||
<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
|
<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
|
||||||
<rect x="192" y="480" width="64" height="32" />
|
<rect x="192" y="480" width="64" height="32" />
|
||||||
<rect x="288" y="368" width="228" height="64" />
|
<rect x="288" y="368" width="228" height="64" />
|
||||||
<rect x="368" y="288" width="64" height="228" />
|
<rect x="368" y="288" width="64" height="228" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- new round -->
|
<!-- new round -->
|
||||||
<symbol id="newround" >
|
<symbol id="newround" >
|
||||||
<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
|
<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
|
||||||
<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
|
<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- act (-10) -->
|
<!-- act (-10) -->
|
||||||
<symbol id="act" >
|
<symbol id="act" >
|
||||||
<path d="M 96 228 q 6 2 8 8 v 40 q -2 6 -8 8 h -88 q -6 -2 -8 -8 v -40 q 2 -6 8 -8 z" />
|
<path d="M 96 228 q 6 2 8 8 v 40 q -2 6 -8 8 h -88 q -6 -2 -8 -8 v -40 q 2 -6 8 -8 z" />
|
||||||
<path d="M 84 178 q -5.5 4.5 -11 0 l -24 -24 q -4.5 -5.5 0 -11 l 76 -76 q 9 -3 12 -4 h 68 q 6 2 8 8 v 368 q -2 6 -8 8 h -44 q -6 -2 -8 -8 v -324 q -0 -8 -5.5 -2.5 z" />
|
<path d="M 84 178 q -5.5 4.5 -11 0 l -24 -24 q -4.5 -5.5 0 -11 l 76 -76 q 9 -3 12 -4 h 68 q 6 2 8 8 v 368 q -2 6 -8 8 h -44 q -6 -2 -8 -8 v -324 q -0 -8 -5.5 -2.5 z" />
|
||||||
<path d="M 295 444 h 174 q 11 0 21 -11 l 11 -11 q 11 -11 11 -27 v -285 q 0 -16 -11 -27 l -11 -11 q -11 -11 -21 -11 h -174 q -11 0 -21 11 l -11 11 q -11 11 -11 27 v 285 q 0 16 11 27 l 11 11 q 11 11 21 11 z M 452 144 v 216 q 0 8 -1 11 t -5 6 t -6 5 t -10 1 h -96 q -8 0 -10 -1 t -6 -5 t -5 -6 t -1 -11 v -216 q 0 -8 1 -11 t 5 -6 t 6 -5 t 10 -1 h 96 q 8 0 10 1 t 6 5 t 5 6 t 1 11 z" />
|
<path d="M 295 444 h 174 q 11 0 21 -11 l 11 -11 q 11 -11 11 -27 v -285 q 0 -16 -11 -27 l -11 -11 q -11 -11 -21 -11 h -174 q -11 0 -21 11 l -11 11 q -11 11 -11 27 v 285 q 0 16 11 27 l 11 11 q 11 11 21 11 z M 452 144 v 216 q 0 8 -1 11 t -5 6 t -6 5 t -10 1 h -96 q -8 0 -10 -1 t -6 -5 t -5 -6 t -1 -11 v -216 q 0 -8 1 -11 t 5 -6 t 6 -5 t 10 -1 h 96 q 8 0 10 1 t 6 5 t 5 6 t 1 11 z" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- take damage -->
|
<!-- take damage -->
|
||||||
<symbol id="take-damage" >
|
<symbol id="take-damage" >
|
||||||
<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
|
<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- more actions -->
|
<!-- more actions -->
|
||||||
<symbol id="more-actions" >
|
<symbol id="more-actions" >
|
||||||
<polygon points="32 32 480 32 256 480" />
|
<polygon points="32 32 480 32 256 480" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- edit combatant -->
|
<!-- edit combatant -->
|
||||||
<symbol id="edit" >
|
<symbol id="edit" >
|
||||||
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
||||||
<polygon points="352 0 512 160 416 256 256 96" />
|
<polygon points="352 0 512 160 416 256 256 96" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- clone combatant -->
|
<!-- clone combatant -->
|
||||||
<symbol id="clone" >
|
<symbol id="clone" >
|
||||||
<rect x="0" y="0" width="512" height="128" />
|
<rect x="0" y="0" width="512" height="128" />
|
||||||
<rect x="0" y="384" width="512" height="128" />
|
<rect x="0" y="384" width="512" height="128" />
|
||||||
<polygon points="128 192 384 192 256 320" />
|
<polygon points="128 192 384 192 256 320" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- delete combatant -->
|
<!-- delete combatant -->
|
||||||
<symbol id="delete" >
|
<symbol id="delete" >
|
||||||
<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
|
<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
|
||||||
<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
|
<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- K.O. -->
|
<!-- K.O. -->
|
||||||
<symbol id="ko" >
|
<symbol id="ko" >
|
||||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
|
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
|
||||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
|
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
|
||||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
|
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
|
||||||
</symbol>
|
</symbol>
|
||||||
<!-- dead -->
|
<!-- dead -->
|
||||||
<symbol id="dead" >
|
<symbol id="dead" >
|
||||||
<rect x="208" y="0" width="96" height="512" />
|
<rect x="208" y="0" width="96" height="512" />
|
||||||
<rect x="80" y="112" width="352" height="96" />
|
<rect x="80" y="112" width="352" height="96" />
|
||||||
</symbol>
|
</symbol>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- footer -->
|
<!-- footer -->
|
||||||
<div class="footer-container container">
|
<div class="footer-container container">
|
||||||
<footer data-augmented-ui="tl-clip br-clip both">
|
<footer data-augmented-ui="tl-clip br-clip both">
|
||||||
<p><a href="https://git.unterdemradar.de/tobias/sr2ini" tabindex="-1" title="sr2ini">sr2ini</a> | Copyright (C) 2023 by Eclipse729 | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
|
<p><a href="https://git.unterdemradar.de/eclipse/sr2ini" tabindex="-1" title="sr2ini">sr2ini</a> | Copyright (C) 2022-23 by <a href="https://git.unterdemradar.de/eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
918
src/js/sr2ini.js
918
src/js/sr2ini.js
File diff suppressed because it is too large
Load Diff
22
src/site.webmanifest
Normal file
22
src/site.webmanifest
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "sr2ini",
|
||||||
|
"short_name": "sr2ini",
|
||||||
|
"description": "A simple Initiative tracker for Shadowrun 2e",
|
||||||
|
"start_url": ".",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "../icons/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "../icons/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "gold",
|
||||||
|
"background_color": "#004aa5",
|
||||||
|
"display": "standalone",
|
||||||
|
"orientstion": "portrait"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user