diff --git a/.gitignore b/.gitignore index 590465f..21294d9 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ package-lock.json .parcelrc dist/ node_modules/ +hint-report/ +.csslintrc diff --git a/TODO.md b/TODO.md index 9bfe6cc..7cdc512 100644 --- a/TODO.md +++ b/TODO.md @@ -69,7 +69,13 @@ - x dmg-mon/actions-menu: tabindex auf -1 setzen, wenn nicht sichtbar - x dmg-mon/actions-menu direkt unter dem jeweiligen Button ausrichten (X-Achse) - ich richte die Buttons jetzt rechtsbündig aus, dann weiß ich immer die (ungefähre) Position des Buttons +- x SVG Icons alle in eine externe Datei als s mit ID packen. Diese kann ich dann in anderen Files referenzieren: + - https://stackoverflow.com/questions/34225008/how-to-reuse-an-embedded-svg-element-in-the-same-page + - leider geht das nicht: addCombatant() fügt HTML dynamisch ins Dokument ein, und wenn in diesem HTML SVG enthalten ist, werden die -Elemente darin nicht ausgewertet (also duch das referenzierte ersetzt). Das SVG wird daher nicht angezeigt. + - um das zu beheben. müsste ich die jQuery-Methode parseHTML() modifizieren und alle Aufrufe von createElement() durch createElementNS() ersetzen + - aber am Ende bringt das gar nichts, weil der Browser bei jedem den Inhalt des s aufs Neue ins DOM kopiert. Die HTML-Platzersparnis wäre also gleich Null. +- Seite auch mal im Chrome checken - dafür sorgen, dass die Seite erst dann aufgebaut wird, wenn die CSS-Files geladen sind, damit man nicht den ungestylten Krams sieht - kann die classes text-center, text-end etc aus den Tabellenzellen entfernen - noch mehr Design diff --git a/package.json b/package.json index b37e20b..02fbad8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@parcel/transformer-sass": "^2.8.3", "@parcel/transformer-webmanifest": "^2.8.3", "@parcel/transformer-xml": "^2.8.3", + "hint": "^7.1.3", "parcel": "^2.8.3", "parcel-reporter-static-files-copy": "^1.5.0" }, @@ -27,7 +28,8 @@ "start": "npx parcel serve src/index.html --public-url / --dist-dir dist", "prebuild": "rm -rf dist/", "build": "npx parcel build --public-url ./", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "webhint": "hint http://localhost:1234" }, "repository": { "type": "git", diff --git a/src/css/custom.scss b/src/css/sr2ini.scss similarity index 68% rename from src/css/custom.scss rename to src/css/sr2ini.scss index ddff523..8ead5e6 100644 --- a/src/css/custom.scss +++ b/src/css/sr2ini.scss @@ -1,10 +1,14 @@ -$sr-border: cyan; -$sr2-btn: darkcyan; -$sr2-fg: deeppink; +$fg: deeppink; +$fg-bright: lightpink; +$fg-dark: #b3005f; + +$bg: cyan; +$bg-bright: lightcyan; +$bg-dark: darkcyan; @font-face { font-family: "Electrolize"; - src: local("Electrolize"), url("../img/Electrolize-Regular.ttf"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap"); + src: local("Electrolize"), url("../img/Electrolize-Regular.ttf") format("truetype"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap"); } @mixin aug() { @@ -18,7 +22,7 @@ $sr2-fg: deeppink; } @mixin border() { - --aug-border-bg: cyan; // "sr2-border doesn't work" + --aug-border-bg: cyan; // variables don't work in this specific instance --aug-border-opacity: .5; --aug-border-all: 2px; } @@ -32,25 +36,23 @@ $sr2-fg: deeppink; border-radius: 1px; padding-inline: 0px; - border: 1px solid cyan; + border: 1px solid $bg; background: transparent; - box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan; + box-shadow: 0 0 2px $bg-bright, 0 0 4px $bg, 0 0 8px $bg-dark; - color: deeppink; + color: $fg; +} - img { - filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%); - } - - svg * { - fill: deeppink; - } +.icon { + fill: $fg; + width: 128; + height: 128; } .sr2-button:focus-visible { outline: none; - border: 1px solid cyan !important; - box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important; + border: 1px solid $bg !important; + box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important; } html, @@ -71,13 +73,12 @@ body { } -div.container { +.container { position: relative; padding: 4px; } header.navbar { -// margin-top: 4px; padding-right: .6rem;; @include border; @include inlay; @@ -90,8 +91,8 @@ header.navbar { --aug-r: 7px; --aug-inlay-bg: rgba(0, 0, 0, .75); - span.navbar-brand { - color: cyan; + .navbar-brand { + color: $bg; text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px; } @@ -105,16 +106,15 @@ header.navbar { img { width: 32px; height: 32px; + filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%); } } } -.table-responsive { - margin-bottom: 1px; -} +.table-responsive { margin-bottom: 1px; } -#combatants-table { +.combatants-table { margin-top: .5rem; tr { @@ -125,25 +125,18 @@ header.navbar { --aug-border-bottom: 0px; } - .combatant-row { - clip-path: none; + .combatant-row { + clip-path: none; + vertical-align: middle !important; } - th:not(:first-of-type) { - text-align: center; - } + th:not(:first-of-type) { text-align: center; } - .th-ini { - min-width: 3rem; - } + .th-ini { min-width: 3rem; } - .th-dice-and-rea { - min-width: 3.75rem; - } + .th-dice-and-rea { min-width: 3.75rem; } - .th-actions { - min-width: 6.5rem; - } + .th-actions { min-width: 6.5rem; } th, td { @@ -156,12 +149,12 @@ header.navbar { } th { - color: cyan; + color: $bg; text-transform: uppercase; } td { - color: $sr2-fg; + color: $fg; clip-path: none; font-weight: bold; } @@ -182,7 +175,7 @@ header.navbar { --aug-border-bottom: 2px; } - td.combatant-actions { + .combatant-actions { display: flex; justify-content: flex-end; } @@ -196,7 +189,7 @@ header.navbar { img, - svg { + .icon { position: relative; bottom: 3px; width: 16px; @@ -205,11 +198,9 @@ header.navbar { &:disabled { box-shadow: none; - border-color: darkcyan; + border-color: $bg-dark; - svg * { - fill: #b3005f; - } + .icon { fill: $fg-dark; } } } @@ -219,17 +210,11 @@ header.navbar { padding-right: 1rem !important; } - .combatant-dice-and-rea { - text-align: center; - } + .combatant-dice-and-rea { text-align: center; } - .combatant-dice::before { - content: attr(data-combatant-dice); - } + .combatant-dice::before { content: attr(data-combatant-dice); } - .combatant-rea::before { - content: attr(data-combatant-rea); - } + .combatant-rea::before { content: attr(data-combatant-rea); } .actions-menu { display: flex; @@ -242,12 +227,12 @@ header.navbar { height: 24px; margin: 4px; - img { +/* img { position: relative; bottom: 3px; width: 16px; height: 16px; - } + }*/ } } @@ -257,29 +242,25 @@ header.navbar { .max-ini td { // font-weight: bold; // filter: brightness(1.1); - text-shadow: 0 0 1px deeppink, 0 0 2 hotpink; + text-shadow: 0 0 1px $fg, 0 0 2 $fg-bright; } .zero-ini td { - color: #b3005f !important; + color: $fg-dark !important; - svg * { - fill: #b3005f !important; - } + .icon { fill: $fg-dark !important; } } .ko-or-dead td { background-color: rgba(0, 0, 0, .5); - color: #b3005f !important; - text-decoration: line-through .1em deeppink; + color: $fg-dark !important; + text-decoration: line-through .1em $fg; - svg * { - fill: #b3005f !important; - } + .icon { fill: $fg-dark !important; } } .badge.bg-warning { - background: radial-gradient(circle at center, cyan, darkcyan); + background: radial-gradient(circle at center, $bg, $bg-dark); left: 12px; bottom: -4px; @@ -287,7 +268,7 @@ header.navbar { } .badge.bg-danger { - background: radial-gradient(circle at center, deeppink, maroon); + background: radial-gradient(circle at center, $fg, $fg-dark); left: 12px; top: 12px; @@ -295,9 +276,7 @@ header.navbar { } .damage-dropdown, -.actions-dropdown { - display: inline-block; -} +.actions-dropdown { display: inline-block; } .damage-monitor, .actions-menu { @@ -332,8 +311,8 @@ header.navbar { .actions-button:has(+ .seen), .damage-button:has(+ .seen) { outline: none; - border: 1px solid cyan !important; - box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important; + border: 1px solid $bg !important; + box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important; filter: brightness(1.5); } */ @@ -354,30 +333,28 @@ header.navbar { } .damage-stun { - background: radial-gradient(circle at center, cyan, darkcyan); + 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, lightcyan, cyan); - box-shadow: 0 0 3px lightcyan, 0 0 6px cyan, 0 0 12px darkcyan; + background: radial-gradient(circle at center, $bg-bright, $bg); + box-shadow: 0 0 3px $bg-bright, 0 0 6px $bg, 0 0 12px $bg-dark; } .damage-physical { border-radius: 50%;; - background: radial-gradient(circle at center, deeppink, maroon); + background: radial-gradient(circle at center, $fg, $fg-dark); box-shadow: none; transition: background .5s, box-shadow .5s; - &:focus-visible { - outline: deeppink !important; - } + &:focus-visible { outline: $fg !important; } } .damage-physical.active { - background: radial-gradient(circle at center, lightpink, deeppink); - box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon; + background: radial-gradient(circle at center, $fg-bright, $fg); + box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark; } /* &.d-none { @@ -405,7 +382,7 @@ footer { @include inlay; --aug-tl: 10px; --aug-tr: 10px; - --aug-border-bg: cyan !important; // "sr2-border doesn't work" + --aug-border-bg: cyan !important; // vars don't work here --aug-border-opacity: .5 !important; --aug-border-all: 2px !important; --aug-inlay-bg: rgba(0, 0, 0, .75) !important; @@ -414,7 +391,7 @@ footer { p { font-size: xx-small; margin: .25rem; - color: cyan; + color: $bg; user-select: auto; padding-top: .65em; text-align: center; @@ -431,13 +408,11 @@ footer { .sr2-modal { @include border; @include aug; - color: cyan; + color: $bg; pointer-events: auto; // width: 95vw; // 95 percent of viewport width - button { - @include button; - } + button { @include button; } .modal-header { text-transform: uppercase; @@ -446,9 +421,7 @@ footer { @include border; --aug-inlay-bottom: 0; - button { - width: 30px; - } + button { width: 30px; } } .modal-body { @@ -463,57 +436,49 @@ footer { @include border; --aug-inlay-top: 0; - button { - width: 4rem; - } + button { width: 4rem; } } - label { - margin: 0; - } + label { margin: 0; } .label-swap { display: flex; flex-flow: column; - label { - order: 2; - } + label { order: 2; } - input { - order: 1; - } + input { order: 1; } } input { background-color: transparent; - color: deeppink; + color: $fg; user-select: text; &::selection { color: black; - background-color: deeppink; + background-color: $fg; } &:focus { background-color: transparent; - color: deeppink; + color: $fg; } &:focus-visible { background-color: transparent; - color: deeppink; + color: $fg; } &:not([type=range]):valid { - border: 1px solid cyan !important ; + border: 1px solid $bg !important ; background-image: none !important; } &:invalid { - border: 1px solid deeppink; - box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon; + border: 1px solid $fg; + box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark; background-image: none !important; } @@ -556,43 +521,32 @@ footer { width: 4px; height: 20px; } - - &#combatant-modal-stun { - - &::-moz-range-track { - background-color: darkcyan; - } - - &::-moz-range-thumb { - background-color: cyan; - } - } - - &#combatant-modal-physical { - - &::-moz-range-track { - background-color: maroon; - } - - &::-moz-range-thumb { - background-color: deeppink; - } - } } } - span.input-group-text { - color: deeppink; + .input-group-text { + color: $fg; background-color: transparent; border: none; } hr { - border-top: 2px solid cyan; + border-top: 2px solid $bg; opacity: .5; } } +#combatant-modal-stun { + &::-moz-range-track { background-color: $bg-dark; } + &::-moz-range-thumb { background-color: $bg; } +} + +#combatant-modal-physical { + &::-moz-range-track { background-color: $fg-dark; } + &::-moz-range-thumb { background-color: $fg; } +} + + /* @@ -606,7 +560,7 @@ th span:nth-child(1){ left: 0; width: 100%; height: 2px; - background: linear-gradient(90deg,transparent,darkcyan); + background: linear-gradient(90deg,transparent,$bg-dark); animation: animate1 1s linear infinite; } @keyframes animate1{ @@ -622,7 +576,7 @@ th span:nth-child(2){ right: 0; width: 2px; height: 100%; - background: linear-gradient(180deg,transparent,darkcyan); + background: linear-gradient(180deg,transparent,$bg-dark); animation: animate2 1s linear infinite; animation-delay: 0.25s; } @@ -639,7 +593,7 @@ th span:nth-child(3){ right: 0; width: 100%; height: 2px; - background: linear-gradient(270deg,transparent,darkcyan); + background: linear-gradient(270deg,transparent,$bg-dark); animation: animate3 1s linear infinite; animation-delay: 0.50s; } @@ -658,7 +612,7 @@ th span:nth-child(4){ left: 0; width: 2px; height: 100%; - background: linear-gradient(360deg,transparent,darkcyan); + background: linear-gradient(360deg,transparent,$bg-dark); animation: animate4 1s linear infinite; animation-delay: 0.75s; } diff --git a/src/index.html b/src/index.html index dce61d0..9891d9f 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,7 @@ - + @@ -43,7 +43,7 @@
- +
diff --git a/src/js/sr2ini.js b/src/js/sr2ini.js index 4418b54..93b2f66 100644 --- a/src/js/sr2ini.js +++ b/src/js/sr2ini.js @@ -4,21 +4,22 @@ 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 +'\n', //TODO: add data-damage-* attributes with initial damage levels '\n', '\n', '\n', '\n', @@ -26,16 +27,16 @@ const COMBATANT_TABLE_ROW = [ const DAMAGE_MONITOR_HTML = [ '
\n', '
Name
D+\n', - '\n', + '\n', +// '
\n', - '\n', + '\n', '
\n', '
\n', - '\n', + '\n', '
\n', - '\n', - '\n', - '\n', + '\n', + '\n', + '\n', '
\n', '
\n', '
\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', '
\n', '
'].join(""); const STUN_BADGE_HTML = ''; @@ -248,7 +249,7 @@ function addCombatant(e) { // add handler to damage monitor $tr.find(".damage-stun, .damage-physical").on("click", applyDamage); // add row to table and sort - $("#combatants-table").append($tr); + $(".combatants-table").append($tr); sortTable(); } // event handler for when any damage monitor is clicked @@ -382,7 +383,7 @@ function sortTable() { // sort rows and append them in new order let $rows = $(".combatant-row").toArray().sort(whoGoesFirst); for (let i = 0; i < $rows.length; i++) { - $("#combatants-table").append($rows[i]); + $(".combatants-table").append($rows[i]); $($rows[i]).css("z-index", 50-i).css("position", "relative"); } return; diff --git a/tools/Icon Template/dice512.png b/tools/Icon Template/dice512.png new file mode 100644 index 0000000..2cde2d6 Binary files /dev/null and b/tools/Icon Template/dice512.png differ diff --git a/tools/Icon Template/tmp.css b/tools/Icon Template/tmp.css new file mode 100644 index 0000000..3e585a8 --- /dev/null +++ b/tools/Icon Template/tmp.css @@ -0,0 +1,31 @@ +body { + margin: 0; + height: 100%; + background-color: #004aa5; +} + +div { + width: 60%; + margin: auto; +} + +button { + position: relative; + top: 100px; + + + border: 8px solid cyan; + + border-radius: 16px; + padding: 16px; + + background-color: rgba(0, 0, 0, .75); + box-shadow: 0 0 16px lightcyan, 0 0 32px lightcyan, 0 0 32px cyan, 0 0 64px cyan, 0 0 64px darkcyan, 0 0 128px darkcyan; + +} + +img { + width: 384px; + height: 384px; + filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(125%) contrast(105%); +} diff --git a/tools/Icon Template/tmp.html b/tools/Icon Template/tmp.html new file mode 100644 index 0000000..21f7321 --- /dev/null +++ b/tools/Icon Template/tmp.html @@ -0,0 +1,4 @@ + + + +
diff --git a/tools/Icon Template/tmp.png b/tools/Icon Template/tmp.png new file mode 100644 index 0000000..1cc13c8 Binary files /dev/null and b/tools/Icon Template/tmp.png differ diff --git a/tools/test.svg b/tools/test.svg new file mode 100644 index 0000000..1c8f753 --- /dev/null +++ b/tools/test.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file