Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 22a53eca62 | |||
| 2d64915cb0 | |||
| 26955b841d | |||
| 9073106f61 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -9,3 +9,4 @@ hint-report/
|
||||
.csslintrc
|
||||
coverage/
|
||||
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.
|
||||
436
TODO.md
436
TODO.md
@ -4,231 +4,235 @@
|
||||
|
||||
### 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 Bug: KO/dead buttons fkt. nicht
|
||||
- applyDamage, ersetze erste Zeile: let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).parents("button")[0];
|
||||
- x Bug: Kann nicht weit genug runterscrollen für remove bzw die unteren schadenskastchen
|
||||
- Footer hatte viel zu großen z-index
|
||||
- x Bug: resort after remove -> einfach eingefügt
|
||||
- x background-image wiederholt sich -> hat sich nach Redesign erledigt
|
||||
- x Habe alle $("…").modal("hide|show") eliminiert; die Sichtbarkeit der Modals wird jetzt ausschließlich durch data-bs-Attribute gesteuert
|
||||
- x add-Button leert die inputs vom Modal nicht mehr
|
||||
- event hidden.bs.modal feuert nicht mehr
|
||||
- zuerst dachte ich, es liegt daran, dass ich das bootstrap js zu Klasse Modal nicht laden konnte. Mittlerweile habe ich es hingekriegr, doch das event feuert trotzdem nicht
|
||||
- hab's hingekriegt, indem ich jquery und bootstrap nun doch wieder in der index.html lade und nicht mehr als import.
|
||||
- x in großer Darstellung bleiben u.U. links und rechts Ränder frei, wo das Hintergrundbild nicht skaliert wird -> background-size: cover
|
||||
- x bei Benutzung von augmented-ui: der Text von .combatant-name ist nach oben verschoben und links+rechts abgeschnitten
|
||||
- grundlegendes Problem: augmented-ui nutzt ::before und ::after, um die Styles zu erzeugen; mein eigenes ::before kollidiert damit
|
||||
- füge den .combatant-name jetzt wieder direkt ein, nicht mehr per Datenattribut
|
||||
- x damit nirgendwo ein Stück border fehlt, müssen die Ecken von zwei benachbarten combatant tablerows nicht gegeneinander verschoben sein
|
||||
- d.h. die beiden linken und die beiden rechten Ecken einer Tablerow müssen jeweils die gleiche X-Position haben
|
||||
- x alles, was vom damage monitor über den unteren Tabellenrand rüberragt, wird abgeschnitten
|
||||
- musste den clip-path von tr und td auf none setzen
|
||||
- x jetzt kann ich den damage-monitor zwar aufklappen, aber die Buttons der weiter unten liegenden combatant-rows überdecken ihn jedesmal.
|
||||
- x wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem
|
||||
- x wenn die Navbar borders hat, sollte sie nicht direkt am oberen Bildrand anfangen, sondern ein paar Pixel weiter unten
|
||||
- x Unterschied zwischen enabled und disabled button nicht gut erkennbar
|
||||
- x Output vom HTML Validator:
|
||||
- img elements müssen alt attributes haben
|
||||
- The form attribute must refer to a form element. (bei den Input Elementen im combatant-modal) -> muss nachsehen, was ich dann genau da eintragen muss
|
||||
- x minusten.svg benutzt die falsche Schriftart
|
||||
- x manchmal spinnt das actions-menu, dann taucht es einfach nicht mehr auf
|
||||
- Bsp: more -> clone -> cancel
|
||||
- x derzeit werden die icons im actions-menu nicht dunkler gemacht (.zero-ini o.Ä.), weil ich die img-Rules aus dem CSS rausgenommen habe
|
||||
- ich könnte die Rules wieder reinnehmen
|
||||
- x oder die Icons mit SVG nachbauen (edit und trash)
|
||||
- x damage-monitor und actions-menu überlappen sich; die oberen drei phys-dmg-buttons lösen edit/clone/remove aus
|
||||
- x bei tot/KO wird die Klasse ko-or-dead nicht gesetzt
|
||||
- es werden gar keine contextual classes gesetzt
|
||||
- musste die entspr. arrow function in sortTable() wieder zu einer regular function machen
|
||||
- x combatant modal hat auf einmal zwei OK buttons
|
||||
- Fehler beim sichtbar/unsichtbar-Setzen der modal buttons in handleEditButtonClick()
|
||||
|
||||
- x Änderungen im edit modal werden nicht mehr übernommen
|
||||
- war ein fehlendes let in editCombatant() -> wo das nur wieder herkam …
|
||||
- x Sortierung falsch, wenn Ini gleich und Rea unterschiedlich
|
||||
- x icons for dead and K.O don't load
|
||||
- x actions-menu soll zugehen, wenn man auf eine freie Stelle klickt (so wie damage-monitor)
|
||||
- x SVG Improvements
|
||||
- x verbleibende Bilder in SVGs umwandeln/nachbauen
|
||||
- umwandeln: Inkscape
|
||||
- nachbauen: svgedit.netlify.com,
|
||||
- x betrifft: add.png, newround.png, cross.png, zzz.png
|
||||
- x dann muss ich add und newround auch nicht mehr mit CSS filter auf die richtige Farbe bringen
|
||||
- x bestehende SVGs vereinfachen (polygon oder rect statt path)
|
||||
- x betrifft act
|
||||
- x als Symbole definieren und mit <use> wiederverwenden: https://stackoverflow.com/a/59614656
|
||||
- x take damage fkt nicht mehr richtig: es werden die falschen buttons re/deaktiviert
|
||||
- non-issue, geht doch
|
||||
- x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
|
||||
- via SVGInject: https://github.com/iconfu/svg-inject
|
||||
- x wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
|
||||
- korrigiert, indem ich nicht mehr den Buttons data-bs-modal="toggle" mitgebe, sondern das modal via JS in addCombatant() bzw. editCombatant() verstecke
|
||||
- Problem: dann ist das modal weg, aber der backdrop noch da (ich kann nichts anklicken)
|
||||
- Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
|
||||
- bei Apply modal offen lassen
|
||||
- x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
|
||||
- gilt auch für editCombatant, removeCombatant, startNewRound
|
||||
- applyDamage dagegen nicht, weil es eine echte Handlerfkt. ist -> vllt umbenennen
|
||||
- validation, modal hide/show und alles weitere kläre ich vorher in einer echten handler function
|
||||
- x manchmal wird svg-inject nicht geladen und dann sind alle icons weg
|
||||
- hab's jetzt doch wieder rausgeschmissen
|
||||
- x add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende
|
||||
- ich könnt's umstellen, aber will ich das?
|
||||
- nicht mehr aktuell
|
||||
- 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
|
||||
- x nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht
|
||||
- schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event
|
||||
- jetzt kommt es aber trotzdem manchmal wieder
|
||||
- vllt. ein timeout-Problem?
|
||||
- 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 warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
|
||||
- x revamp Act-icon
|
||||
- alternative to "-10"?
|
||||
- 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
|
||||
- muss die property disabled richtig verwenden
|
||||
- x action-buttons nicht vertically centered
|
||||
- x color scheme beim Favicon anpassen
|
||||
- https://realfavicongenerator.net/
|
||||
- see also here: https://github.com/audreyfeldroy/favicon-cheat-sheet
|
||||
|
||||
- x Mauszeiger soll Finger werden, wenn er über combatant-name/ini/dice-and-rea hovert
|
||||
- x actions-menu erscheint nicht direkt unter dem Button
|
||||
- beide dropdowns sind gerade garbled
|
||||
- x Änderungen im edit modal werden nicht mehr übernommen
|
||||
- war ein fehlendes let in editCombatant() -> wo das nur wieder herkam …
|
||||
- x Sortierung falsch, wenn Ini gleich und Rea unterschiedlich
|
||||
- x icons for dead and K.O don't load
|
||||
- x actions-menu soll zugehen, wenn man auf eine freie Stelle klickt (so wie damage-monitor)
|
||||
- x SVG Improvements
|
||||
- x verbleibende Bilder in SVGs umwandeln/nachbauen
|
||||
- umwandeln: Inkscape
|
||||
- nachbauen: svgedit.netlify.com,
|
||||
- x betrifft: add.png, newround.png, cross.png, zzz.png
|
||||
- x dann muss ich add und newround auch nicht mehr mit CSS filter auf die richtige Farbe bringen
|
||||
- x bestehende SVGs vereinfachen (polygon oder rect statt path)
|
||||
- x betrifft act
|
||||
- x als Symbole definieren und mit <use> wiederverwenden: https://stackoverflow.com/a/59614656
|
||||
- x take damage fkt nicht mehr richtig: es werden die falschen buttons re/deaktiviert
|
||||
- non-issue, geht doch
|
||||
- x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
|
||||
- via SVGInject: https://github.com/iconfu/svg-inject
|
||||
- x wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
|
||||
- korrigiert, indem ich nicht mehr den Buttons data-bs-modal="toggle" mitgebe, sondern das modal via JS in addCombatant() bzw. editCombatant() verstecke
|
||||
- Problem: dann ist das modal weg, aber der backdrop noch da (ich kann nichts anklicken)
|
||||
- Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
|
||||
- bei Apply modal offen lassen
|
||||
- x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
|
||||
- gilt auch für editCombatant, removeCombatant, startNewRound
|
||||
- applyDamage dagegen nicht, weil es eine echte Handlerfkt. ist -> vllt umbenennen
|
||||
- validation, modal hide/show und alles weitere kläre ich vorher in einer echten handler function
|
||||
- x manchmal wird svg-inject nicht geladen und dann sind alle icons weg
|
||||
- hab's jetzt doch wieder rausgeschmissen
|
||||
- x add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende
|
||||
- ich könnt's umstellen, aber will ich das?
|
||||
- nicht mehr aktuell
|
||||
- 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
|
||||
- x nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht
|
||||
- schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event
|
||||
- jetzt kommt es aber trotzdem manchmal wieder
|
||||
- vllt. ein timeout-Problem?
|
||||
- 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 warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? -> lag an parcel-reporter-static-file-copy
|
||||
- x revamp Act-icon
|
||||
- alternative to "-10"?
|
||||
- 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
|
||||
- muss die property disabled richtig verwenden
|
||||
- x action-buttons nicht vertically centered
|
||||
- x color scheme beim Favicon anpassen
|
||||
- https://realfavicongenerator.net/
|
||||
- see also here: https://github.com/audreyfeldroy/favicon-cheat-sheet
|
||||
- x Mauszeiger soll Finger werden, wenn er über combatant-name/ini/dice-and-rea hovert
|
||||
- x actions-menu erscheint nicht direkt unter dem Button
|
||||
- beide dropdowns sind gerade garbled
|
||||
- x im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
|
||||
- action-menu und damage-monitor sliden jetzt nicht mehr rein, sondern bleiben an Ort und Stelle
|
||||
- das sollte die Sache verhindern
|
||||
- x warum fkt. das Ganze nicht als Webapp?
|
||||
- Firefox (android) sieht die Seite nicht als installable an
|
||||
- Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux)
|
||||
- x favicon checken: https://realfavicongenerator.net/favicon_checker
|
||||
- jetzt fkt. immer noch nicht die URLs im Icon manifest
|
||||
- x Links zu den versch. favicons fkt. nicht: sie lauten /… statt /sr2ini/…
|
||||
- x Lösung: parcel build braucht als --public-url "./" (statt "/"), dann werden die Links korrekt erzeugt
|
||||
- neues Problem: für parcel serve fkt. das nicht; statt CSS/JS/favicon-Files wird jedes Mal index.html serviert
|
||||
- edit: jetzt geht's wieder (nachdem ich sr2ini.iconmanifest zurückbenannt hatte nach site.webmanifest)
|
||||
- bekanntes Problem: https://github.com/parcel-bundler/parcel/issues/857
|
||||
- Workaround: weiter --public-url / verwenden
|
||||
- WICHTIG: fürs Deployment muss ich dann immer die mit parcel build erzeugten Dateien verwenden
|
||||
- was auch geht, ist aber umständlich: parcel serve durch anderen HTTP-Server ersetzen
|
||||
- parcel build
|
||||
- im Dist-Verz.: python3 -m http.server
|
||||
- CORS-Fehler im Firefox vermeiden: about:config -> content.cors.disable = true
|
||||
- letztes Problem (hoffentlich): die Links zu den android-chrome-XYZxXYZ Icons im site.webmanifest stimmen nicht
|
||||
- hab site.manifest nach src/ verschoben und die Links angepasst -> jetzt scheint's zu gehen
|
||||
- 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
|
||||
|
||||
- unter die GPL stellen
|
||||
- https://www.gnu.org/licenses/gpl-howto.html
|
||||
- focus trapping im modal fkt. nur rückwärts (shift-tab), aber nicht vorwärts
|
||||
- wenn ich in einem modal mit Tab durchgehe und zu den Buttons ganz unten komme, bewegt sich der untere Rand des Modals ab und auf
|
||||
- comments with general info in source files?
|
||||
- unter die GPL stellen
|
||||
- https://www.gnu.org/licenses/gpl-howto.html
|
||||
|
||||
- sr2ini_ynh auf neue Version bringen
|
||||
- manifest: Version, tarball URL und sha256 ersetzen
|
||||
- README.md: Version ersetzen
|
||||
- ggf. doc/screenshots/sr2ini-screenshot.jpg ersetzen (960x640)
|
||||
- favicon checken: https://realfavicongenerator.net/favicon_checker
|
||||
- jetzt fkt. immer noch nicht die URLs im Icon manifest
|
||||
- x Links zu den versch. favicons fkt. nicht: sie lauten /… statt /sr2ini/…
|
||||
- x Lösung: parcel build braucht als --public-url "./" (statt "/"), dann werden die Links korrekt erzeugt
|
||||
- neues Problem: für parcel serve fkt. das nicht; statt CSS/JS/favicon-Files wird jedes Mal index.html serviert
|
||||
- edit: jetzt geht's wieder (nachdem ich sr2ini.iconmanifest zurückbenannt hatte nach site.webmanifest)
|
||||
- bekanntes Problem: https://github.com/parcel-bundler/parcel/issues/857
|
||||
- Workaround: weiter --public-url / verwenden
|
||||
- WICHTIG: fürs Deployment muss ich dann immer die mit parcel build erzeugten Dateien verwenden
|
||||
- was auch geht, ist aber umständlich: parcel serve durch anderen HTTP-Server ersetzen
|
||||
- parcel build
|
||||
- im Dist-Verz.: python3 -m http.server
|
||||
- CORS-Fehler im Firefox vermeiden: about:config -> content.cors.disable = true
|
||||
- letztes Problem (hoffentlich): die Links zu den android-chrome-XYZxXYZ Icons im site.webmanifest stimmen nicht
|
||||
- hab site.manifest nach src/ verschoben und die Links angepasst -> jetzt scheint's zu gehen
|
||||
- sr2ini_ynh auf neue Version bringen
|
||||
- manifest: Version, tarball URL und sha256 ersetzen
|
||||
- README.md: Version ersetzen
|
||||
- ggf. doc/screenshots/sr2ini-screenshot.jpg ersetzen (960x640)
|
||||
|
||||
- Deployment:
|
||||
- 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
|
||||
- Jenkins Doc: https://www.jenkins.io/doc/book/using/best-practices/
|
||||
- use minified libraries (aug-ui, bs, jq)
|
||||
- focus-related stuff
|
||||
- enter key doesn't work right away after clicking add button
|
||||
- after pressing damage button, focus moves to first table row act button
|
||||
- it's probably b/c I resort the table
|
||||
- wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
|
||||
- focus trapping im modal fkt. nur rückwärts (shift-tab), aber nicht vorwärts
|
||||
- zumindest im Chrome; FF ungetestet
|
||||
- im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
|
||||
- action-menu und damage-monitor sliden jetzt nicht mehr rein, sondern bleiben an Ort und Stelle
|
||||
- das sollte die Sache verhindern
|
||||
- warum fkt. das Ganze nicht als Webapp?
|
||||
- Firefox (android) sieht die Seite nicht als installable an
|
||||
- Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux)
|
||||
- comments with general info in source files?
|
||||
- Deployment:
|
||||
- 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
|
||||
- Jenkins Doc: https://www.jenkins.io/doc/book/using/best-practices/
|
||||
- ist aber wohl mit Kanonen auf Spatzen
|
||||
- use minified libraries (aug-ui, bs, jq)
|
||||
|
||||
|
||||
## Feature Requests
|
||||
|
||||
- author name soll durchgehend der gleiche sein
|
||||
- aber welcher? tobias oder eclipse?
|
||||
- index.html: meta, footer
|
||||
- sr2ini.js: test combatant
|
||||
- git: user.name, user.email
|
||||
- git commits, ggf. tags
|
||||
- Seite als Web App auf FF4And installable machen
|
||||
- mal sehen …
|
||||
- Animationen? Transitions?
|
||||
- deployment: dist/* soll direkt auf hermes hochgeladen werden
|
||||
- HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
|
||||
- bootstrap, jquery, font auch lokal vorhalten
|
||||
- x font
|
||||
- docstrings
|
||||
- parcel soll aus dem HTML code nicht die Newlines rausnehmen -> macht er das überhaupt noch?
|
||||
- falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace
|
||||
- nicetohave: Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern
|
||||
- nicetohave: Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
|
||||
- Sache mit dem ServiceWorker mal richtig angehen
|
||||
|
||||
- x progressive web app
|
||||
- x Service Worker einrichten, um die Dateien lokal zu cachen
|
||||
- x lief nicht mit Parcel pur, brauchte Paket "serve" -> npx serve dist/
|
||||
-> mittlerweile geht's doch
|
||||
- x parcel bindet sw.js nicht automatisch mit ein, ich muss es nach dist/ hardverlinken
|
||||
- und die File-list in sw.js darf nur Files enthalten, die auch geladen werden können; sobald einer 404 ergibt, schlägt der gesamte Cache-Vorgang fehl
|
||||
- geht
|
||||
- x nochmal wg. Daten wie name, dice, rea, true-ini und damage-x:
|
||||
- Verwalte sie jetzt komplett mit der data-* API; verwende dafür ausschließlich .attr() als Getter/Setter
|
||||
- Füge die Werte aus dem Attribut per CSS direkt ins Element ein (::after und content).
|
||||
- x prettify code: alle HTML class names von camelCale zu dash-case komvertieren
|
||||
- x Design cyberpunkig machen
|
||||
- x im modal soll man die damage levels einstellen/verändern können
|
||||
- x Im modal, wenn ich die wound penalties anzeige, die Fälle KO und Tod gesondert behandeln
|
||||
- x clone button
|
||||
- x und im combatant-modal ein weiterer OK-Button, der das Modal offenlässt
|
||||
- x Design: favicon
|
||||
- x imput[type=range] schicker machen
|
||||
- x input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
|
||||
- x contextual classes hübsch machen
|
||||
- x neue Icons
|
||||
- x dmg-mon/actions-menu: tabindex auf -1 setzen, wenn nicht sichtbar
|
||||
- x dmg-mon/actions-menu direkt unter dem jeweiligen Button ausrichten (X-Achse)
|
||||
- ich richte die Buttons jetzt rechtsbündig aus, dann weiß ich immer die (ungefähre) Position des Buttons
|
||||
- x SVG Icons alle in eine externe Datei als <symbol>s mit ID packen. Diese kann ich dann in anderen Files referenzieren: <svg><use href="icons.svg#icon1" /></svg>
|
||||
- https://stackoverflow.com/questions/34225008/how-to-reuse-an-embedded-svg-element-in-the-same-page
|
||||
- leider geht das nicht: addCombatant() fügt HTML dynamisch ins Dokument ein, und wenn in diesem HTML SVG enthalten ist, werden die <use>-Elemente darin nicht ausgewertet (also duch das referenzierte <symbol> ersetzt). Das SVG wird daher nicht angezeigt.
|
||||
- um das zu beheben. müsste ich die jQuery-Methode parseHTML() modifizieren und alle Aufrufe von createElement() durch createElementNS() ersetzen
|
||||
- aber am Ende bringt das gar nichts, weil der Browser bei jedem <use> den Inhalt des <symbol>s aufs Neue ins DOM kopiert. Die HTML-Platzersparnis wäre also gleich Null.
|
||||
- x kann die classes text-center, text-end etc aus den Tabellenzellen entfernen
|
||||
- x CSS: maroon durch b3005f ersetzen
|
||||
- x anonymous functions wo möglich durch arrow functions ersetzen
|
||||
- x auf bootstrap.js verzichten?
|
||||
- zumindest modal.js muss ich einzeln laden
|
||||
- aber sonst brauch ich es glaube ich nicht
|
||||
- x dependencies lokal einbinden
|
||||
- x dafür sorgen, dass die Seite erst dann aufgebaut wird, wenn die CSS-Files geladen sind, damit man nicht den ungestylten Krams sieht -> passt schon
|
||||
- x CSS aufräumen
|
||||
- Variablen für Farben, Filter etc.
|
||||
- author name soll durchgehend der gleiche sein
|
||||
- aber welcher? tobias oder eclipse?
|
||||
- index.html: meta, footer
|
||||
- sr2ini.js: test combatant
|
||||
- git: user.name, user.email
|
||||
- git commits, ggf. tags
|
||||
- Animationen? Transitions?
|
||||
- deployment: dist/* soll direkt auf hermes hochgeladen werden
|
||||
- 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
|
||||
|
||||
- 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.
|
||||
|
||||
11
package.json
11
package.json
@ -4,9 +4,9 @@
|
||||
"description": "Simple Initiative tracker for Shadowrun 2e",
|
||||
"private": true,
|
||||
"author": {
|
||||
"name": "Eclipse729",
|
||||
"name": "Eclipse",
|
||||
"email": "eclipse@unterdemradar.de",
|
||||
"url": "https://git.unterdemradar.de"
|
||||
"url": "https://git.unterdemradar.de/eclipse"
|
||||
},
|
||||
"homepage": "https://unterdemradar.de/sr2ini/",
|
||||
"license": "ISC",
|
||||
@ -32,7 +32,7 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@git.unterdemradar.de:tobias/sr2ini.git"
|
||||
"url": "git@git.unterdemradar.de:eclipse/sr2ini.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Shadowrun",
|
||||
@ -52,10 +52,5 @@
|
||||
"augmented-ui": "^2.0.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
"jquery": "^3.6.3"
|
||||
},
|
||||
"comments": {
|
||||
"dependencies": {
|
||||
"@parcel/service-worker": "^2.8.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
*************************** */
|
||||
|
||||
@font-face {
|
||||
font-family: "Electrolize";
|
||||
src: local("Electrolize"), url("../../node_modules/@fontsource/electrolize/files/electrolize-latin-400-normal.woff2") format("woff2");
|
||||
font-family: "Electrolize";
|
||||
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;
|
||||
|
||||
// background colors
|
||||
$bg: cyan; // #00ffff
|
||||
$bg-bright: lightcyan; // #e0ffff
|
||||
$bg-dark: darkcyan; // #008b8b
|
||||
$bg: cyan; // #00ffff
|
||||
$bg-bright: lightcyan; // #e0ffff
|
||||
$bg-dark: darkcyan; // #008b8b
|
||||
|
||||
// base font size
|
||||
$html-font-size: 14px;
|
||||
@ -68,7 +68,7 @@ $form-feedback-icon-valid: none;
|
||||
$form-feedback-icon-invalid: none;
|
||||
|
||||
// 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-dark";
|
||||
@import "../../node_modules/bootstrap/scss/maps";
|
||||
@ -89,25 +89,25 @@ $form-feedback-icon-invalid: none;
|
||||
*************** */
|
||||
|
||||
@mixin aug() {
|
||||
--aug-b: 5px;
|
||||
--aug-bl: 5px;
|
||||
--aug-br: 5px;
|
||||
--aug-l: 5px;
|
||||
--aug-r: 5px;
|
||||
--aug-tl: 5px;
|
||||
--aug-tr: 5px;
|
||||
--aug-b: 5px;
|
||||
--aug-bl: 5px;
|
||||
--aug-br: 5px;
|
||||
--aug-l: 5px;
|
||||
--aug-r: 5px;
|
||||
--aug-tl: 5px;
|
||||
--aug-tr: 5px;
|
||||
}
|
||||
|
||||
@mixin border() {
|
||||
--aug-border-all: .1rem;
|
||||
--aug-border-bg: cyan; // variables don't work in this specific instance
|
||||
--aug-border-opacity: .5;
|
||||
--aug-border-all: .1rem;
|
||||
--aug-border-bg: cyan; // variables don't work in this specific instance
|
||||
--aug-border-opacity: .5;
|
||||
}
|
||||
|
||||
@mixin inlay() {
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||
--aug-inlay-x: .12em;
|
||||
--aug-inlay-y: .12em;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||
--aug-inlay-x: .12em;
|
||||
--aug-inlay-y: .12em;
|
||||
}
|
||||
|
||||
|
||||
@ -116,33 +116,33 @@ $form-feedback-icon-invalid: none;
|
||||
**************** */
|
||||
|
||||
@media (width <= 500px) {
|
||||
html { font-size: $html-font-size; }
|
||||
html { font-size: $html-font-size; }
|
||||
|
||||
.container {
|
||||
min-width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
.container {
|
||||
min-width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.table-responsive { max-width: calc(100% - .8rem); }
|
||||
.table-responsive { max-width: calc(100% - .8rem); }
|
||||
}
|
||||
|
||||
@media (500px < width < 1000px) {
|
||||
html { font-size: calc(100vw / (500px / $html-font-size)); }
|
||||
html { font-size: calc(100vw / (500px / $html-font-size)); }
|
||||
|
||||
.container {
|
||||
$calc-width: calc(100vw / 2 + 250px);
|
||||
min-width: $calc-width;
|
||||
max-width: $calc-width;
|
||||
}
|
||||
.container {
|
||||
$calc-width: calc(100vw / 2 + 250px);
|
||||
min-width: $calc-width;
|
||||
max-width: $calc-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media (1000px <= width) {
|
||||
html { font-size: calc($html-font-size * 2); }
|
||||
html { font-size: calc($html-font-size * 2); }
|
||||
|
||||
.container {
|
||||
min-width: 75vw;
|
||||
max-width: 75vw;
|
||||
}
|
||||
.container {
|
||||
min-width: 75vw;
|
||||
max-width: 75vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -151,58 +151,58 @@ $form-feedback-icon-invalid: none;
|
||||
******************* */
|
||||
|
||||
html {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
user-select: none;
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: darkslategray;
|
||||
background-image: url("../img/bg.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: .2rem;
|
||||
background-color: darkslategray;
|
||||
background-image: url("../img/bg.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: .2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: .2rem;
|
||||
position: relative;
|
||||
padding: .2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sr2-button {
|
||||
background: transparent;
|
||||
border: .07rem solid $bg;
|
||||
border-radius: .07rem;
|
||||
box-shadow: 0 0 .15rem $bg-bright, 0 0 .3rem $bg, 0 0 .6rem $bg-dark;
|
||||
color: $fg;
|
||||
font-size: 1rem;
|
||||
margin-left: .2rem;
|
||||
margin-right: .2rem;
|
||||
padding-inline: 0px;
|
||||
background: transparent;
|
||||
border: .07rem solid $bg;
|
||||
border-radius: .07rem;
|
||||
box-shadow: 0 0 .15rem $bg-bright, 0 0 .3rem $bg, 0 0 .6rem $bg-dark;
|
||||
color: $fg;
|
||||
font-size: 1rem;
|
||||
margin-left: .2rem;
|
||||
margin-right: .2rem;
|
||||
padding-inline: 0px;
|
||||
|
||||
svg {
|
||||
fill: $fg;
|
||||
height: 93%;
|
||||
width: 93%;
|
||||
vertical-align: unset;
|
||||
}
|
||||
svg {
|
||||
fill: $fg;
|
||||
height: 93%;
|
||||
width: 93%;
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: .1rem solid $bg !important;
|
||||
box-shadow: 0 0 .3rem $bg-bright, 0 0 .6rem $bg, 0 0 1.2rem $bg-dark !important;
|
||||
filter: brightness(150%) !important;
|
||||
outline: none;
|
||||
}
|
||||
&:focus {
|
||||
border: .1rem solid $bg !important;
|
||||
box-shadow: 0 0 .3rem $bg-bright, 0 0 .6rem $bg, 0 0 1.2rem $bg-dark !important;
|
||||
filter: brightness(150%) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
border-color: $bg-dark;
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
border-color: $bg-dark;
|
||||
|
||||
svg { fill: $fg-dark; }
|
||||
}
|
||||
svg { fill: $fg-dark; }
|
||||
}
|
||||
}
|
||||
|
||||
.display-none { display: none; }
|
||||
@ -213,32 +213,32 @@ body {
|
||||
******************* */
|
||||
|
||||
header.navbar {
|
||||
@include border;
|
||||
@include inlay;
|
||||
@include border;
|
||||
@include inlay;
|
||||
|
||||
--aug-b: 7px;
|
||||
--aug-bl: 7px;
|
||||
--aug-br: 7px;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
||||
--aug-l: 7px;
|
||||
--aug-r: 7px;
|
||||
--aug-tl: 7px;
|
||||
--aug-tr: 7px;
|
||||
padding-left: calc(15px + 1rem);
|
||||
padding-right: 15px;
|
||||
--aug-b: 7px;
|
||||
--aug-bl: 7px;
|
||||
--aug-br: 7px;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
||||
--aug-l: 7px;
|
||||
--aug-r: 7px;
|
||||
--aug-tl: 7px;
|
||||
--aug-tr: 7px;
|
||||
padding-left: calc(15px + 1rem);
|
||||
padding-right: 15px;
|
||||
|
||||
.navbar-brand {
|
||||
color: $bg;
|
||||
font-size: 140%;
|
||||
text-shadow: 0 0 .25rem, 0 0 .5rem, 0 0 .75rem, 0 0 1rem;
|
||||
}
|
||||
.navbar-brand {
|
||||
color: $bg;
|
||||
font-size: 140%;
|
||||
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 {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
button {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -246,112 +246,114 @@ header.navbar {
|
||||
* Table styles
|
||||
******************* */
|
||||
|
||||
.table-responsive { overflow: visible !important; }
|
||||
.table-responsive { overflow: visible !important; }
|
||||
|
||||
#combatants-table {
|
||||
border-collapse: collapse !important;
|
||||
margin-bottom: .1rem;
|
||||
margin-top: .4rem;
|
||||
border-collapse: collapse !important;
|
||||
margin-bottom: .1rem;
|
||||
margin-top: .4rem;
|
||||
|
||||
tr {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
tr {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
|
||||
--aug-border-bottom: 0px;
|
||||
--aug-border-right: 0px;
|
||||
}
|
||||
--aug-border-bottom: 0px;
|
||||
--aug-border-right: 0px;
|
||||
|
||||
tr:last-of-type td,
|
||||
tr:last-of-type th { --aug-border-bottom: 2px; }
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.combatant-row { clip-path: none; }
|
||||
tr:last-of-type td,
|
||||
tr:last-of-type th { --aug-border-bottom: 2px; }
|
||||
|
||||
th,
|
||||
td {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
.combatant-row { clip-path: none; }
|
||||
|
||||
--aug-border-bottom: 0px;
|
||||
--aug-border-right: 0px;
|
||||
background: none !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
|
||||
th {
|
||||
color: $bg;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
--aug-border-bottom: 0px;
|
||||
--aug-border-right: 0px;
|
||||
background: none !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.th-name {
|
||||
padding-left: .75rem !important;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
th {
|
||||
color: $bg;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.th-ini {
|
||||
min-width: 4rem;
|
||||
}
|
||||
.th-name {
|
||||
padding-left: .75rem !important;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.th-dice-and-rea { min-width: 3rem; }
|
||||
.th-ini {
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
.th-actions {
|
||||
min-width: min-content;
|
||||
--aug-border-right: 2px;
|
||||
}
|
||||
.th-dice-and-rea { min-width: 3rem; }
|
||||
|
||||
td {
|
||||
color: $fg;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
.th-actions {
|
||||
min-width: min-content;
|
||||
--aug-border-right: 2px;
|
||||
}
|
||||
|
||||
.sr2-button {
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
}
|
||||
}
|
||||
td {
|
||||
color: $fg;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
.combatant-name:hover,
|
||||
.combatant-ini:hover,
|
||||
.combatant-dice-and-rea:hover { cursor: pointer; }
|
||||
.sr2-button {
|
||||
height: 1.3rem;
|
||||
width: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.combatant-name {
|
||||
padding-left: .6rem !important;
|
||||
text-align: left;
|
||||
.combatant-name:hover,
|
||||
.combatant-ini:hover,
|
||||
.combatant-dice-and-rea:hover { cursor: pointer; }
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.combatant-name {
|
||||
padding-left: .6rem !important;
|
||||
text-align: left;
|
||||
|
||||
.combatant-dice::before { content: attr(data-combatant-dice); }
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.combatant-rea::before { content: attr(data-combatant-rea); }
|
||||
.combatant-dice::before { content: attr(data-combatant-dice); }
|
||||
|
||||
.combatant-actions {
|
||||
--aug-border-right: 2px;
|
||||
display: flex;
|
||||
min-height: 2rem;
|
||||
min-width: 5rem;
|
||||
.combatant-rea::before { content: attr(data-combatant-rea); }
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.combatant-actions {
|
||||
--aug-border-right: 2px;
|
||||
display: flex;
|
||||
min-height: 2rem;
|
||||
min-width: 5rem;
|
||||
|
||||
.actions-menu {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: .2rem;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sr2-button {
|
||||
margin-bottom: .2rem;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
}
|
||||
.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; }
|
||||
@ -359,116 +361,116 @@ header.navbar {
|
||||
.zero-ini td { color: $fg-dark; }
|
||||
|
||||
.ko-or-dead td {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
color: $fg-dark;
|
||||
text-decoration: line-through .1rem $fg;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
color: $fg-dark;
|
||||
text-decoration: line-through .1rem $fg;
|
||||
}
|
||||
|
||||
.badge.bg-warning {
|
||||
background: radial-gradient(circle at center, $bg, $bg-dark);
|
||||
bottom: .2rem;
|
||||
color: black;
|
||||
left: .2rem;
|
||||
position: absolute;
|
||||
background: radial-gradient(circle at center, $bg, $bg-dark);
|
||||
bottom: .2rem;
|
||||
color: black;
|
||||
left: .2rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.badge.bg-danger {
|
||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||
color: black;
|
||||
left: .2rem;
|
||||
position: absolute;
|
||||
top: .3rem;
|
||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||
color: black;
|
||||
left: .2rem;
|
||||
position: absolute;
|
||||
top: .3rem;
|
||||
}
|
||||
|
||||
.damage-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,
|
||||
.actions-menu {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include aug;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||
--aug-border-opacity: .75;
|
||||
padding-top: .7rem;
|
||||
padding-bottom: .7rem;
|
||||
position: absolute;
|
||||
top: calc(100% + .12rem);
|
||||
z-index: 200;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||
--aug-border-opacity: .75;
|
||||
padding-top: .7rem;
|
||||
padding-bottom: .7rem;
|
||||
position: absolute;
|
||||
top: calc(100% + .12rem);
|
||||
z-index: 200;
|
||||
|
||||
// center element horizontally w/ respect to parent
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
// center element horizontally w/ respect to parent
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
|
||||
// transition: fade in/out
|
||||
transition: opacity .2s ease-in-out, visibility .2s;
|
||||
opacity: 0%;
|
||||
visibility: hidden;
|
||||
// transition: fade in/out
|
||||
transition: opacity .2s ease-in-out, visibility .2s;
|
||||
opacity: 0%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.seen {
|
||||
visibility: visible;
|
||||
opacity: 100%;
|
||||
visibility: visible;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.damage-monitor {
|
||||
padding: .5rem;
|
||||
padding: .5rem;
|
||||
|
||||
td { padding: .1rem; }
|
||||
td { padding: .1rem; }
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: Electrolize;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
height: 1.5rem !important;
|
||||
margin: 0rem .15rem;
|
||||
width: 1.5rem !important;
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: Electrolize;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
height: 1.5rem !important;
|
||||
margin: 0rem .15rem;
|
||||
width: 1.5rem !important;
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
animation: .6s alternate infinite pulse;
|
||||
animation-delay: -.3s;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
animation: .6s alternate infinite pulse;
|
||||
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 {
|
||||
background: radial-gradient(circle at center, $bg, $bg-dark);
|
||||
box-shadow: none;
|
||||
transition: background .5s, box-shadow .5s;
|
||||
}
|
||||
|
||||
.damage-stun.active {
|
||||
background: radial-gradient(circle at center, $bg-bright, $bg);
|
||||
box-shadow: 0 0 .25rem $bg-bright, 0 0 .5rem $bg, 0 0 1rem $bg-dark;
|
||||
}
|
||||
.damage-stun.active {
|
||||
background: radial-gradient(circle at center, $bg-bright, $bg);
|
||||
box-shadow: 0 0 .25rem $bg-bright, 0 0 .5rem $bg, 0 0 1rem $bg-dark;
|
||||
}
|
||||
|
||||
.damage-physical {
|
||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||
border-radius: 50%; // circle, not square
|
||||
box-shadow: none;
|
||||
transition: background .5s, box-shadow .5s;
|
||||
}
|
||||
.damage-physical {
|
||||
background: radial-gradient(circle at center, $fg, $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;
|
||||
}
|
||||
.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 {
|
||||
@include border;
|
||||
@include aug;
|
||||
@include border;
|
||||
@include aug;
|
||||
|
||||
color: $bg;
|
||||
font-family: Electrolize !important;
|
||||
pointer-events: auto;
|
||||
color: $bg;
|
||||
font-family: Electrolize !important;
|
||||
pointer-events: auto;
|
||||
|
||||
.modal-header {
|
||||
@include inlay;
|
||||
@include border;
|
||||
.modal-header {
|
||||
@include inlay;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-bottom: 0;
|
||||
border-bottom: none;
|
||||
text-transform: uppercase;
|
||||
--aug-inlay-bottom: 0;
|
||||
border-bottom: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
button { width: 2.5rem; }
|
||||
}
|
||||
button { width: 2.5rem; }
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@include inlay;
|
||||
@include border;
|
||||
.modal-body {
|
||||
@include inlay;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-y: 0;
|
||||
}
|
||||
--aug-inlay-y: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@include inlay;
|
||||
@include border;
|
||||
.modal-footer {
|
||||
@include inlay;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-top: 0;
|
||||
border-top: none;
|
||||
--aug-inlay-top: 0;
|
||||
border-top: none;
|
||||
|
||||
button {
|
||||
width: 5rem;
|
||||
margin: .3rem;
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 5rem;
|
||||
margin: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
margin-left: calc(100% / 22 + 1rem);
|
||||
}
|
||||
label {
|
||||
margin: 0;
|
||||
margin-left: calc(100% / 22 + 1rem);
|
||||
}
|
||||
|
||||
.label-swap {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.label-swap {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
label { order: 2; }
|
||||
label { order: 2; }
|
||||
|
||||
input { order: 1; }
|
||||
input { order: 1; }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.range-group { margin-top: 1rem; }
|
||||
.range-group { margin-top: 1rem; }
|
||||
|
||||
input {
|
||||
margin: .3em;
|
||||
user-select: text;
|
||||
width: 98%; // 100% is inexplicably too long on the right hand side
|
||||
input {
|
||||
margin: .3em;
|
||||
user-select: text;
|
||||
width: 98%; // 100% is inexplicably too long on the right hand side
|
||||
|
||||
&::selection {
|
||||
background-color: $fg;
|
||||
color: black;
|
||||
}
|
||||
&::selection {
|
||||
background-color: $fg;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
&[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; }
|
||||
&:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; }
|
||||
|
||||
&[type="range"] {
|
||||
box-shadow: none !important;
|
||||
margin-left: calc(100% / 22 - .15rem);
|
||||
width: calc(100% / 11 * 10 + .3rem);
|
||||
&[type="range"] {
|
||||
box-shadow: none !important;
|
||||
margin-left: calc(100% / 22 - .15rem);
|
||||
width: calc(100% / 11 * 10 + .3rem);
|
||||
|
||||
+ datalist {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
+ datalist {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
option {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
option {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#combatant-modal-dice { margin-right: 0; }
|
||||
#combatant-modal-dice { margin-right: 0; }
|
||||
|
||||
#combatant-modal-rea { margin-left: 0; }
|
||||
#combatant-modal-rea { margin-left: 0; }
|
||||
|
||||
.input-group-text {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $fg;
|
||||
padding: .25rem;
|
||||
}
|
||||
.input-group-text {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $fg;
|
||||
padding: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -591,42 +593,42 @@ header.navbar {
|
||||
******************* */
|
||||
|
||||
.footer-container {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include aug;
|
||||
@include inlay;
|
||||
@include aug;
|
||||
@include inlay;
|
||||
|
||||
--aug-border-all: .1rem !important;
|
||||
--aug-border-bg: cyan !important; // vars don't work here
|
||||
--aug-border-opacity: .5 !important;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
|
||||
--aug-tl: .7rem;
|
||||
--aug-tr: .7rem;
|
||||
--aug-border-all: .1rem !important;
|
||||
--aug-border-bg: cyan !important; // vars don't work here
|
||||
--aug-border-opacity: .5 !important;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
|
||||
--aug-tl: .7rem;
|
||||
--aug-tr: .7rem;
|
||||
|
||||
p {
|
||||
color: $bg;
|
||||
font-size: x-small;
|
||||
margin: .15em;
|
||||
padding: .25rem;
|
||||
text-align: center;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
p {
|
||||
color: $bg;
|
||||
font-size: x-small;
|
||||
margin: .15em;
|
||||
padding: .25rem;
|
||||
text-align: center;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
|
||||
a {
|
||||
color: $fg;
|
||||
text-decoration: none;
|
||||
}
|
||||
a {
|
||||
color: $fg;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::selection,
|
||||
a::selection {
|
||||
background-color: $fg;
|
||||
color: black;
|
||||
}
|
||||
&::selection,
|
||||
a::selection {
|
||||
background-color: $fg;
|
||||
color: black;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
358
src/index.html
358
src/index.html
@ -2,196 +2,196 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Shadowrun 2e Ini Tracker</title>
|
||||
<meta name="description" content="A simple Initiative tracker for Shadowrun 2e" />
|
||||
<meta name="author" content="Eclipse729" />
|
||||
<title>Shadowrun 2e Ini Tracker</title>
|
||||
<meta name="description" content="A simple Initiative tracker for Shadowrun 2e" />
|
||||
<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="css/sr2ini.scss">
|
||||
<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
|
||||
|
||||
<script type="module" src="js/sr2ini.js"></script>
|
||||
<script type="module" src="js/sr2ini.js"></script>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-touch-icon.png">
|
||||
<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="manifest" href="site.webmanifest">
|
||||
<link rel="mask-icon" href="../icons/safari-pinned-tab.svg" color="#004aa5">
|
||||
<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">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-touch-icon.png">
|
||||
<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="manifest" href="site.webmanifest">
|
||||
<link rel="mask-icon" href="../icons/safari-pinned-tab.svg" color="#004aa5">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<!-- navbar -->
|
||||
<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">
|
||||
<span class="navbar-brand ps-4">SR2 Initiative Tracker</span>
|
||||
<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>
|
||||
<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>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<!-- navbar -->
|
||||
<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">
|
||||
<span id="navbar-title" class="navbar-brand ps-4">SR2 Initiative Tracker</span>
|
||||
<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>
|
||||
<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>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- combatants table -->
|
||||
<div class="container">
|
||||
<main class="table-responsive overflow-visible">
|
||||
<table class="table table-sm table-borderless" id="combatants-table">
|
||||
<thead>
|
||||
<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-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-actions" data-augmented-ui="tr-clip-y both" title="Actions" scope="col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</div>
|
||||
<!-- combatants table -->
|
||||
<div class="container">
|
||||
<main class="table-responsive overflow-visible">
|
||||
<table class="table table-sm table-borderless" id="combatants-table">
|
||||
<thead>
|
||||
<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-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-actions" data-augmented-ui="tr-clip-y both" title="Actions" scope="col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- confirm modal -->
|
||||
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
||||
<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="modal-header" data-augmented-ui="inlay">
|
||||
<h2 class="modal-title">Start New Round</h2>
|
||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
||||
</div>
|
||||
<div class="modal-body" data-augmented-ui="inlay">
|
||||
<p>Are you sure?</p>
|
||||
</div>
|
||||
<div class="modal-footer" data-augmented-ui="inlay">
|
||||
<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="submit" class="sr2-button display-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- confirm modal -->
|
||||
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
||||
<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="modal-header" data-augmented-ui="inlay">
|
||||
<h2 class="modal-title">Start New Round</h2>
|
||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
||||
</div>
|
||||
<div class="modal-body" data-augmented-ui="inlay">
|
||||
<p>Are you sure?</p>
|
||||
</div>
|
||||
<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" id="confirm-modal-new-round-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>
|
||||
|
||||
<!-- combatant modal (add & edit) -->
|
||||
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
|
||||
<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="modal-header" data-augmented-ui="inlay">
|
||||
<h2 class="modal-title">Add New Combatant</h2>
|
||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
||||
</div>
|
||||
<div class="modal-body" data-augmented-ui="inlay">
|
||||
<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
|
||||
<div>
|
||||
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
</div>
|
||||
<div class="range-group">
|
||||
<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">
|
||||
<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>
|
||||
</datalist>
|
||||
<div class="label-swap">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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="submit" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
|
||||
<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" >OK</button>
|
||||
<button type="submit" class="sr2-button display-none" id="combatant-modal-edit-ok-button" >OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- combatant modal (add & edit) -->
|
||||
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
|
||||
<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="modal-header" data-augmented-ui="inlay">
|
||||
<h2 class="modal-title">Add New Combatant</h2>
|
||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
||||
</div>
|
||||
<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
|
||||
<div class="modal-body" data-augmented-ui="inlay">
|
||||
<div>
|
||||
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
</div>
|
||||
<div class="range-group">
|
||||
<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">
|
||||
<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>
|
||||
</datalist>
|
||||
<div class="label-swap">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-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="button" class="sr2-button display-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SVG icon <symbol> definitions (for later <use>)-->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="display-none">
|
||||
<defs>
|
||||
<!-- add combatant -->
|
||||
<symbol id="add" >
|
||||
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
||||
<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 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 304 q 64 28 128 28 v 52 h -128 Z" />
|
||||
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
||||
<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" />
|
||||
<rect x="192" y="480" width="64" height="32" />
|
||||
<rect x="288" y="368" width="228" height="64" />
|
||||
<rect x="368" y="288" width="64" height="228" />
|
||||
</symbol>
|
||||
<!-- new round -->
|
||||
<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 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>
|
||||
<!-- act (-10) -->
|
||||
<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 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" />
|
||||
</symbol>
|
||||
<!-- 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" />
|
||||
</symbol>
|
||||
<!-- more actions -->
|
||||
<symbol id="more-actions" >
|
||||
<polygon points="32 32 480 32 256 480" />
|
||||
</symbol>
|
||||
<!-- edit combatant -->
|
||||
<symbol id="edit" >
|
||||
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
||||
<polygon points="352 0 512 160 416 256 256 96" />
|
||||
</symbol>
|
||||
<!-- clone combatant -->
|
||||
<symbol id="clone" >
|
||||
<rect x="0" y="0" width="512" height="128" />
|
||||
<rect x="0" y="384" width="512" height="128" />
|
||||
<polygon points="128 192 384 192 256 320" />
|
||||
</symbol>
|
||||
<!-- delete combatant -->
|
||||
<symbol id="delete" >
|
||||
<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" />
|
||||
</symbol>
|
||||
<!-- K.O. -->
|
||||
<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 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) " />
|
||||
</symbol>
|
||||
<!-- dead -->
|
||||
<symbol id="dead" >
|
||||
<rect x="208" y="0" width="96" height="512" />
|
||||
<rect x="80" y="112" width="352" height="96" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
<!-- SVG icon <symbol> definitions (for later <use>)-->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="display-none">
|
||||
<defs>
|
||||
<!-- add combatant -->
|
||||
<symbol id="add" >
|
||||
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
||||
<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 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 304 q 64 28 128 28 v 52 h -128 Z" />
|
||||
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
||||
<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" />
|
||||
<rect x="192" y="480" width="64" height="32" />
|
||||
<rect x="288" y="368" width="228" height="64" />
|
||||
<rect x="368" y="288" width="64" height="228" />
|
||||
</symbol>
|
||||
<!-- new round -->
|
||||
<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 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>
|
||||
<!-- act (-10) -->
|
||||
<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 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" />
|
||||
</symbol>
|
||||
<!-- 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" />
|
||||
</symbol>
|
||||
<!-- more actions -->
|
||||
<symbol id="more-actions" >
|
||||
<polygon points="32 32 480 32 256 480" />
|
||||
</symbol>
|
||||
<!-- edit combatant -->
|
||||
<symbol id="edit" >
|
||||
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
||||
<polygon points="352 0 512 160 416 256 256 96" />
|
||||
</symbol>
|
||||
<!-- clone combatant -->
|
||||
<symbol id="clone" >
|
||||
<rect x="0" y="0" width="512" height="128" />
|
||||
<rect x="0" y="384" width="512" height="128" />
|
||||
<polygon points="128 192 384 192 256 320" />
|
||||
</symbol>
|
||||
<!-- delete combatant -->
|
||||
<symbol id="delete" >
|
||||
<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" />
|
||||
</symbol>
|
||||
<!-- K.O. -->
|
||||
<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 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) " />
|
||||
</symbol>
|
||||
<!-- dead -->
|
||||
<symbol id="dead" >
|
||||
<rect x="208" y="0" width="96" height="512" />
|
||||
<rect x="80" y="112" width="352" height="96" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="footer-container container">
|
||||
<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>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<div class="footer-container container">
|
||||
<footer data-augmented-ui="tl-clip br-clip both">
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
914
src/js/sr2ini.js
914
src/js/sr2ini.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user