diff --git a/TODO.md b/TODO.md index 03dedc0..ba3da97 100644 --- a/TODO.md +++ b/TODO.md @@ -33,6 +33,7 @@ - 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 +- wenn ich bei add combatant mit der Maus auf OK klicke, macht er das Modal zu, auch wenn die Eingaben invalid sind - nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht - schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event - jetzt kommt es aber trotzdem manchmal wieder @@ -55,28 +56,43 @@ - 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 - noch mehr Design - - x favicon - - imput[type=range] schicker machen - - input elements styling anpassen für :focus. :focus-visible, :valid, :invalid + - x imput[type=range] schicker machen + - x input elements styling anpassen für :focus. :focus-visible, :valid, :invalid + - x contextual classes hübsch machen + - actions menu und damage monitor unter den jeweiligen Button ausrichten - Seite für größere Screens anpassen - Schrift, Buttons und Icons skalieren - Tabellenbreite begrenzen - styling der contextual classes, disabled elements etc. - Animationen? Transitions? -- neue Icons: (act) add clone dead takedamage die rolldice edit newround trash zzz menu, ggf. favicon - - attribution - - noun project: Icons by Febrian Hidayat from Noun Project - - iconfinder: CC4.0 - - icons8.com: +- x neue Icons + - x act: icon -> gun (freepik) + - x add: actual icon -> police (freepik) + - x clone: actual icon -> mein eigenes + - cross (um das Modal zu schließen): 10006 + - x dead: icon -> cross (freepik) (alt: 10013) + - x die: icon-> dice (freepik) (alt: 9856..9861) + - x edit: actual icon -> pencil (freepik) + - x more: actual icon -> mein eigenes + -> ✖ + - x newround: actual icon -> dice (Freepik) + -> dices (Freepik) + - x takedamage: actual icon -> mein eigenes + -> explosion (freepik) + - x trash: trash-bin (freepik) (alt: X, ☓, ⛌) + - x validation: ☒ und ☑ + - x zzz: icon -> zzz (freepik) - deployment: dist/* soll direkt auf hermes hochgeladen werden - warum sind im dist/-Folder immer zwei Versionen der gleichen Datei? - HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus - - bootstrap, jquery etc lokal vorhalten? + - bootstrap, jquery, font auch lokal vorhalten - Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind - 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 - progressive web app draus machen? -> https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction -- auf bootstrap verzichten? brauch es schließlich kaum noch \ No newline at end of file +- auf bootstrap verzichten? brauch es schließlich kaum noch + - könnte beim modal schwierig werden (weil auch js) \ No newline at end of file diff --git a/src/css/custom.scss b/src/css/custom.scss index fc68e92..2ddeadc 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -2,6 +2,11 @@ $sr-border: cyan; $sr2-btn: darkcyan; $sr2-fg: deeppink; +@font-face { + font-family: "Electrolize"; + src: local("Electrolize"), url("../img/Electrolize-Regular.ttf"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap"); +} + @mixin aug() { --aug-tl: 5px; --aug-l: 5px; @@ -49,8 +54,8 @@ body { margin: 0; height: 100%; user-select: none; + font-family: 'Electrolize', sans-serif; } - body { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg"); background-size: cover; @@ -92,6 +97,11 @@ header.navbar { margin-right: 3px; margin-left: 3px; + img { + width: 32px; + height: 32px; + } + } } @@ -120,11 +130,11 @@ header.navbar { .th-dice-and-rea { min-width: 3.75rem; - > img { +/* > img { filter: invert(72%) sepia(100%) saturate(778%) hue-rotate(119deg) brightness(102%) contrast(102%); width: 16px; height: 16px; - } + } */ } .th-actions { min-width: 6.5rem; @@ -172,7 +182,6 @@ header.navbar { .sr2-button { @include button; -// padding: 1px; width: 24px; height: 24px; @@ -195,39 +204,64 @@ header.navbar { } } - .act-button { - line-height: 24px; - font-size: 12px; - position: relative; - bottom: 1px + .combatant-ini { + text-align: center; + padding-right: 1rem !important; } -} -.combatant-ini { - text-align: center; - padding-right: 1rem !important; -} + .combatant-dice::before { + content: attr(data-combatant-dice); + } -.combatant-dice::before { - content: attr(data-combatant-dice); -} + .combatant-rea::before { + content: attr(data-combatant-rea); + } + + .actions-menu { + display: flex; + flex-flow: column; + padding: 6px; + + button { + @include button; + width: 24px; + height: 24px; + margin: 4px; + + img { + position: relative; + bottom: 3px; + width: 16px; + height: 16px; + } + } + } -.combatant-rea::before { - content: attr(data-combatant-rea); -} -.ko-or-dead { - color: coral; - text-decoration: line-through; - background-color: darkslategray; } .max-ini { font-weight: bold; +// filter: brightness(1.1); + text-shadow: 0 0 1px deeppink, 0 0 2 hotpink; } .zero-ini td { - color: lightgray !important; + color: #990052 !important; +} + +.ko-or-dead { + background-color: rgba(0, 0, 0, .5); + + td { + color:maroon !important; + text-decoration: line-through; + + img { + filter: invert(14%) sepia(45%) saturate(4680%) hue-rotate(350deg) brightness(85%) contrast(123%) !important; + } + } + } .badge.bg-warning { @@ -325,26 +359,6 @@ header.navbar { */ } -.actions-menu { - display: flex; - flex-flow: column; - padding: 6px; - - - button { - @include button; - width: 24px; - height: 24px; - margin: 4px; - - img { - position: relative; - bottom: 3px; - width: 16px; - height: 16px; - } - } -} .footer-container { @@ -355,8 +369,6 @@ header.navbar { } footer { -// z-index: -10 !important; - @include aug; @include inlay; --aug-tl: 10px; @@ -458,11 +470,15 @@ footer { color: deeppink; } - &:valid { + &:not([type=range]):valid { + border: 1px solid cyan !important ; + background-image: none !important; } + &:invalid { border: 1px solid deeppink; box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon; + background-image: none !important; } &[type=number]::-webkit-inner-spin-button, @@ -508,7 +524,7 @@ footer { &#combatant-modal-stun { &::-moz-range-track { - color: darkcyan !important; + background-color: darkcyan; } &::-moz-range-thumb { @@ -519,7 +535,7 @@ footer { &#combatant-modal-physical { &::-moz-range-track { - color: maroon; + background-color: maroon; } &::-moz-range-thumb { diff --git a/src/img/001-edit.png b/src/img/001-edit.png deleted file mode 100644 index aa40381..0000000 Binary files a/src/img/001-edit.png and /dev/null differ diff --git a/src/img/002-act.png b/src/img/002-act.png deleted file mode 100644 index e820e79..0000000 Binary files a/src/img/002-act.png and /dev/null differ diff --git a/src/img/003-damage.png b/src/img/003-damage.png deleted file mode 100644 index 0cd5521..0000000 Binary files a/src/img/003-damage.png and /dev/null differ diff --git a/src/img/Electrolize-Regular.ttf b/src/img/Electrolize-Regular.ttf new file mode 100644 index 0000000..f1b9fba Binary files /dev/null and b/src/img/Electrolize-Regular.ttf differ diff --git a/src/img/act.png b/src/img/act.png deleted file mode 100644 index 08a77dd..0000000 Binary files a/src/img/act.png and /dev/null differ diff --git a/src/img/add.png b/src/img/add.png index e0d29b6..ccb184a 100644 Binary files a/src/img/add.png and b/src/img/add.png differ diff --git a/src/img/boom.svg b/src/img/boom.svg new file mode 100644 index 0000000..85149ae --- /dev/null +++ b/src/img/boom.svg @@ -0,0 +1,7 @@ + + + + diff --git a/src/img/clone.svg b/src/img/clone.svg new file mode 100644 index 0000000..5865730 --- /dev/null +++ b/src/img/clone.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/img/cross.png b/src/img/cross.png index 558406b..a2387d8 100644 Binary files a/src/img/cross.png and b/src/img/cross.png differ diff --git a/src/img/damage.png b/src/img/damage.png deleted file mode 100644 index b1f7e42..0000000 Binary files a/src/img/damage.png and /dev/null differ diff --git a/src/img/dice.png b/src/img/dice.png deleted file mode 100644 index 59e2f86..0000000 Binary files a/src/img/dice.png and /dev/null differ diff --git a/src/img/edit.png b/src/img/edit.png index 7d27e8a..f1e02a7 100644 Binary files a/src/img/edit.png and b/src/img/edit.png differ diff --git a/src/img/minusten.svg b/src/img/minusten.svg new file mode 100644 index 0000000..e2c3514 --- /dev/null +++ b/src/img/minusten.svg @@ -0,0 +1,15 @@ + + + + -10 + diff --git a/src/img/more.svg b/src/img/more.svg new file mode 100644 index 0000000..0c1d3bc --- /dev/null +++ b/src/img/more.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/img/newround.png b/src/img/newround.png index 7c6abf4..d5997be 100644 Binary files a/src/img/newround.png and b/src/img/newround.png differ diff --git a/src/img/trash.png b/src/img/trash.png index d671f25..264e5be 100644 Binary files a/src/img/trash.png and b/src/img/trash.png differ diff --git a/src/img/zzz.png b/src/img/zzz.png index da68fa8..6c84492 100644 Binary files a/src/img/zzz.png and b/src/img/zzz.png differ diff --git a/src/index.html b/src/index.html index c761e3c..84fe6b8 100644 --- a/src/index.html +++ b/src/index.html @@ -18,11 +18,6 @@ - - - - - @@ -53,7 +48,7 @@ Name Ini - a single die+R + D+R Actions @@ -75,7 +70,7 @@
Start New Round
- +

Are you sure?

@@ -94,7 +89,7 @@
Add New Combatant
- +
@@ -111,13 +106,13 @@
- +
- +
diff --git a/src/js/sr2ini.js b/src/js/sr2ini.js index 91d26ef..9605e39 100644 --- a/src/js/sr2ini.js +++ b/src/js/sr2ini.js @@ -5,19 +5,19 @@ const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4]; const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"]; const COMBATANT_TABLE_ROW = [ '\n', //TODO: add data-damage-* attributes with initial damage levels - 'Test\n', + '\n', '\n', 'D+\n', '\n', - '\n', + '\n', '
\n', - '\n', + '\n', '
\n', '
\n', - '\n', + '\n', '
\n', - '\n', - '\n', + '\n', + '\n', '\n', '
\n', '
\n',