diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..91a09e5 --- /dev/null +++ b/TODO.md @@ -0,0 +1,67 @@ +% sr2ini: Bugs and Features Tracker +% Eclipse +% + +(Nichts hier ist in "master" gefixt) + +# Bugs + +- 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 + +- jetzt kann ich den damage-monitor zwar aufklappen, aber die Buttons der weiter unten liegenden combatant-rows überdecken ihn jedesmal. +- wenn ich einen Damage-Button anklicke, beginnt die Transition des damage-monitor von Neuem +- 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 +- wenn die Navbar borders hat, sollte sie nicht direkt am oberen Bildrand anfangen, sondern ein paar Pixel weiter unten +- 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? +- 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? +- Unterschied zwischen enabled und disabled button nicht gut erkennbar +- wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld +- navbar bei größerem viewport +- brand-name nicht mittig +- Bug: rea editieren ändert nicht die ini -> da muss ich die Würfelergebnisse für speichern + + + +# Feature Requests + +- 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 +- neue Icons: act add cross damage dice edit newround trash zzz clone + - attribution + - noun project: Icons by Febrian Hidayat from Noun Project + - iconfinder: CC4.0 + - icons8.com: +- Im modal, wenn ich die wound penalties anzeige, die Fälle KO und Tod gesondert behandeln +- im modal soll man die damage levels einstellen/verändern können +- "clone this combatant" button: +- Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind +- Design cyberpunkig machen +- docstrings +- color converter für CSS filter(): https://isotropic.co/tool/hex-color-to-css-filter/ + \ No newline at end of file diff --git a/src/css/custom.scss b/src/css/custom.scss index 69ea536..90fcdf3 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1,19 +1,190 @@ +$sr-border: cyan; +$sr2-btn: darkcyan; +$sr2-fg: deeppink; + +@mixin aug() { + --aug-tl: 5px; + --aug-l: 5px; + --aug-bl: 5px; + --aug-tr: 5px; + --aug-r: 5px; + --aug-br: 5px; +} + +@mixin border() { + --aug-border-bg: cyan; // "sr2-border doesn't work" + --aug-border-opacity: .5; + --aug-border-left: 2px; + --aug-border-right: 0px; + --aug-border-top: 2px; + --aug-border-bottom: 0px; +} + +@mixin inlay() { + --aug-inlay-y: 10%; + --aug-inlay-bg: rgba(0, 0, 0, .5); +} + +@mixin button() { + border: 0; + border-radius: none;; + background: radial-gradient(circle at center, gold, goldenrod); + box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod; +} + +html, +body { + margin: 0; + height: 100%; +// overflow-x: hidden; +} + +body { + background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/circuit_board_by_xxaries1970xx_d9ut9nd.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + background-color: darkslategray; + font-family: 'Electrolize', sans-serif !important; + +} + header.navbar { - background-image: url("../img/horizon.png"); + @include border; + --aug-br: 10px; + --aug-tl: 10px; + --aug-inlay-bg: rgba(0, 0, 0, .3); } span.navbar-brand { - position: absolute; - right: 110px; - text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; +// position: absolute; +// right: 110px; +// color: $sr2-fg; +// text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; } -header .btn { - --aug-all-width: "42px"; +div.container { + position: relative; } -input:invalid { - border: 2px solid red; +#combatants-table { + margin-top: .5rem; + + tr { + @include aug; + @include border; + @include inlay; + } + + .combatant-row { + clip-path: none; + } + + .th-ini { + min-width: 3rem; + } + .th-dice-and-rea { + min-width: 3.75rem; + } + .th-actions { + min-width: 6.5rem; + } + + th, + td { + @include aug; + @include border; + @include inlay; + background: none !important; +// text-shadow: 2px 2px 3px black; + } + + th { + color: cyan; + text-transform: uppercase; +// text-shadow: 0 0 3px deeppink, 0 0 6px deeppink, 0 0 12px deeppink, 0 0 24 deeppink; + } + + td { + color: $sr2-fg; + clip-path: none; + } + + th:first-of-type, + td:first-of-type { + padding-left: 1rem !important; + } + + th:last-of-type, + td:last-of-type { + padding-right: .75rem; + --aug-border-right: 2px; + } + + td.combatant-actions { + } + + tr:last-of-type td { + --aug-border-bottom: 2px; + } + + > tbody > tr > td > button, + > tbody > tr > td > div > button, { + padding: 0px; + padding-right: 2px; + padding-left: 2px; + + @include button; + + img { + width: 20px; + height: 20px; +// filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%) drop-shadow(1 1 1px cyan) drop-shadow(2 2 2px darkcyan); + // animation: glitch 1s ease infinite; + } + + /* @keyframes glitch { + // twitch + 0%, 33% { + transform: scale(.97, 1.01); + } + 18%, 60% { + transform: scaleX(.98), + } + 48%, 76% { + transform: scaleY(1.02); + } + 68%, 100% { + transform: scale(1, .96); + } + + // skew + 20%, 75% { + transform: skew(2deg); + } + 12%,80%{ + transform: skew(1.4deg); + } + } + + &:nth-of-type(2) img { + animation-direction: reverse; + } + */ + } +} + +.combatant-ini { + text-align: center; + padding-right: 1rem !important; +} + +.combatant-dice::before { + content: attr(data-combatant-dice); +} + +.combatant-rea::before { + content: attr(data-combatant-rea); } .ko-or-dead { @@ -22,61 +193,93 @@ input:invalid { background-color: darkslategray; } -.table-primary { +.max-ini { font-weight: bold; } -.combatant-name::after { - content: attr(data-combatant-name); -} - -.combatant-dice::after { - content: attr(data-combatant-dice); -} - -.combatant-rea::after { - content: attr(data-combatant-rea); +.zero-ini td { + color: lightgray !important; } .badge.bg-warning { + background: radial-gradient(circle at center, cyan, darkcyan); + left: 12px; bottom: -4px; width: 20px; } .badge.bg-danger { + background: radial-gradient(circle at center, deeppink, maroon); + left: 12px; top: 12px; width: 20px; } +.damage-dropdown { + display: inline-block; +} + .damage-monitor { position: absolute; - z-index: 20; - top: 100%; - right: -8px; - width: 60px; + z-index: 200; - th { - width: 28px; - height: 28px; - padding: 3px; - } + top: calc(100% - 2px); + right: 10px; - td { - width: 30px; - height: 24px; - } + @include aug; + + --aug-inlay-bg: rgba(0, 0, 0, .5); + + --aug-border-all: 2px; + --aug-border-bg: cyan; // "sr2-border doesn't work" + --aug-border-opacity: .75; + + padding-top: 10px; + padding-bottom: 10px; button { + font-size: smaller; - width: 30px; + width: 24px; height: 24px; - padding: 2px; + + border: none; + margin: 0px 2px; + border-radius: none; } - button.active { - filter: brightness(88%); + .damage-stun { + background: radial-gradient(circle at center, cyan, darkcyan); + 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; + } + + .damage-physical { + border-radius: 50%;; + background: radial-gradient(circle at center, deeppink, maroon); + box-shadow: none; + transition: background .5s, box-shadow .5s; + } + + .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; + } + + .remove-button { + width: 56px; + height: 28px; + margin-top: 4px; + @include button; +// background: radial-gradient(circle at center, gold, goldenrod); +// box-shadow: 0 0 3px gold, 0 0 6px goldenrod, 0 0 12px darkgoldenrod; } td button img { @@ -86,6 +289,33 @@ input:invalid { } +/* +.damage-monitor.d-none { + opacity: 0; + animation-name: dmg-mon; + animation-duration: 1s; + animation-direction: reverse; +} + +.damage-monitor:not(.d-none) { + opacity: 1; + animation-name: dmg-mon; + animation-duration: 1s; + animation-direction: normal; +} + +@keyframes dmg-mon { + from { + opacity: 0; + } + 1% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +*/ footer { z-index: -10 !important; @@ -98,3 +328,83 @@ footer { margin: .5rem 0; } } + +input:invalid { + border: 2px solid red; +} + + +/* +th span{ + position: absolute; + display: block; +} +th span:nth-child(1){ + top: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg,transparent,darkcyan); + animation: animate1 1s linear infinite; +} +@keyframes animate1{ + 0%{ + left: -100%; + } + 50%,100%{ + left: 100%; + } +} +th span:nth-child(2){ + top: -100%; + right: 0; + width: 2px; + height: 100%; + background: linear-gradient(180deg,transparent,darkcyan); + animation: animate2 1s linear infinite; + animation-delay: 0.25s; +} +@keyframes animate2{ + 0%{ + top: -100%; + } + 50%,100%{ + top: 100%; + } +} +th span:nth-child(3){ + bottom: 0; + right: 0; + width: 100%; + height: 2px; + background: linear-gradient(270deg,transparent,darkcyan); + animation: animate3 1s linear infinite; + animation-delay: 0.50s; +} +@keyframes animate3{ + 0%{ + right: -100%; + } + 50%,100%{ + right: 100%; + } +} + + +th span:nth-child(4){ + bottom: -100%; + left: 0; + width: 2px; + height: 100%; + background: linear-gradient(360deg,transparent,darkcyan); + animation: animate4 1s linear infinite; + animation-delay: 0.75s; +} +@keyframes animate4{ + 0%{ + bottom: -100%; + } + 50%,100%{ + bottom: 100%; + } +}*/ \ No newline at end of file diff --git a/src/img/001-edit.png b/src/img/001-edit.png new file mode 100644 index 0000000..aa40381 Binary files /dev/null and b/src/img/001-edit.png differ diff --git a/src/img/002-act.png b/src/img/002-act.png new file mode 100644 index 0000000..e820e79 Binary files /dev/null and b/src/img/002-act.png differ diff --git a/src/img/003-damage.png b/src/img/003-damage.png new file mode 100644 index 0000000..0cd5521 Binary files /dev/null and b/src/img/003-damage.png differ diff --git a/src/img/circuit_board_by_xxaries1970xx_d9ut9nd.jpg b/src/img/circuit_board_by_xxaries1970xx_d9ut9nd.jpg new file mode 100644 index 0000000..3c11de2 Binary files /dev/null and b/src/img/circuit_board_by_xxaries1970xx_d9ut9nd.jpg differ diff --git a/src/img/horizon.png b/src/img/horizon.png deleted file mode 100644 index 7182542..0000000 Binary files a/src/img/horizon.png and /dev/null differ diff --git a/src/index.html b/src/index.html index 212b5a9..266d1aa 100644 --- a/src/index.html +++ b/src/index.html @@ -11,32 +11,37 @@ - + - - + + + + + + +
-
+
SR2 Initiative Tracker
- +
- - - - - + + + + + @@ -74,15 +79,15 @@
- +
- + D+ - +
- +
@@ -98,9 +103,9 @@
diff --git a/src/js/sr2ini.js b/src/js/sr2ini.js index 03d8410..7c0f24c 100644 --- a/src/js/sr2ini.js +++ b/src/js/sr2ini.js @@ -4,46 +4,34 @@ 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', - '\n', - '\n', - '\n', //TODO: add data-damage-* attributes with initial damage levels + '\n', + '\n', + '\n', + '\n', ''].join(""); const DAMAGE_MONITOR_HTML = [ -'
NameIni+RActions
NameIni+RActions
D+\n', - '
\n', - '\n', - '\n', - '
\n', - '\n', - '
\n', +'
TestD+\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 = ''; const PHYSICAL_BADGE_HTML = ''; -const CONTEXTUAL_CLASSES = { - MAX_INI: "table-primary", - ZERO_INI: "table-secondary", - REGULAR_INI: "table-success", - KO_OR_DEAD: "ko-or-dead", -}; /* * helper functions */ @@ -55,8 +43,8 @@ function rollForInitiative(dice, rea) { // figure out whose action comes first out of two combatants a and b function whoGoesFirst(a, b) { // check for K.O./death - let tmpA = $(a).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(a).find(".combatant-ini").text()) || 0; - let tmpB = $(b).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(b).find(".combatant-ini").text()) || 0; + let tmpA = $(a).hasClass("ko-or-dead") ? -1 : parseInt($(a).find(".combatant-ini").text()) || 0; + let tmpB = $(b).hasClass("ko-or-dead") ? -1 : parseInt($(b).find(".combatant-ini").text()) || 0; // compare ini let compIni = tmpB - tmpA; if (compIni != 0) { @@ -74,7 +62,7 @@ function whoGoesFirst(a, b) { // returns a combatant's effective ini value (modified by wound penalties) function getEffectiveIni(tr) { // return -1 if combatant is K.O. or dead - if ($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"])) { + if ($(tr).hasClass("ko-or-dead")) { return -1; } // otherwise compute effective ini (true ini minus wound penalties) @@ -140,7 +128,7 @@ function handleEditButtonClick(e) { $("#combatant-modal-add-ok-button").addClass("d-none"); $("#combatant-modal-edit-ok-button").removeClass("d-none"); // populate modal with values from row - $("#combatant-modal-name").val($tr.find(".combatant-name").attr("data-combatant-name")); + $("#combatant-modal-name").val($tr.find(".combatant-name").text()); $("#combatant-modal-dice").val($tr.find(".combatant-dice").attr("data-combatant-dice")); $("#combatant-modal-rea").val($tr.find(".combatant-rea").attr("data-combatant-rea")); $("#combatant-modal-ini").val($tr.attr("data-true-ini")); @@ -191,7 +179,7 @@ function addCombatant(e) { $tr.find(".damage-dropdown").append($.parseHTML(DAMAGE_MONITOR_HTML)); // populate table row with values from modal $tr.attr("data-true-ini", ini); - $tr.find(".combatant-name").attr("data-combatant-name", $("#combatant-modal-name").val().trim()); + $tr.find(".combatant-name").text($("#combatant-modal-name").val().trim()); $tr.find(".combatant-dice").attr("data-combatant-dice", $("#combatant-modal-dice").val().trim()); $tr.find(".combatant-rea").attr("data-combatant-rea", $("#combatant-modal-rea").val().trim()); //TODO: retrieve initial damage levels @@ -213,16 +201,22 @@ function applyDamage(e) { let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).parent(); // retrieve new damage level and type from button position and "damage-[type]" class let damageLevel = $btn.parent().parent().index(); + if ( $btn.hasClass("active") ) { + damageLevel += 1; + } let damageType = $btn.attr("class").split(" ").filter(function (cls) { return cls.substr(0, 7) == "damage-" ? cls : false; }).toString().substr(7); // add damage level to table row as as data attribute $btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel); // select/unselect damage buttons above/below - $btn.addClass("active"); - $btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active"); - $btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active"); + $btn.toggleClass("active"); + $btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active"); + $btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active"); // resort +/* setTimeout(function(){ + sortTable(); + },250);*/ sortTable(); } // edit combatant @@ -244,7 +238,7 @@ function editCombatant(e) { $tr = $("tr.combatant-row").eq(index); // set new values $tr.attr("data-true-ini", ini); - $tr.find(".combatant-name").attr("data-combatant-name", name); + $tr.find(".combatant-name").text(name); $tr.find(".combatant-dice").attr("data-combatant-dice", dice); $tr.find(".combatant-rea").attr("data-combatant-rea", rea); // sort table @@ -283,19 +277,19 @@ function startNewRound(e) { // add contextual classes and sort combatants by ini value function sortTable() { // do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges - $(".combatant-row").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" ")); + $(".combatant-row").removeClass("ko-or-dead max-ini zero-ini"); //REGULAR_INI $(".combatant-row").find(".act-button").prop("disabled", true).attr("aria-disabled", "true"); $(".combatant-ini").empty(); // mark KO or death with class $(".combatant-row").each(function () { if (parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10) { - $(this).addClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]); + $(this).addClass("ko-or-dead"); } }); // compute highest effective ini let iniMax = Math.max.apply(null, $.map($(".combatant-row"), function (tr, i) { // write current effective ini to table row - $(tr).find(".combatant-ini").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr))); + $(tr).find(".combatant-ini").text($(tr).hasClass("ko-or-dead") ? 0 : getEffectiveIni($(tr))); return $(tr).find(".combatant-ini").text(); })); // add damage badges and contextual classes @@ -310,26 +304,27 @@ function sortTable() { $(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]); } // K.O./dead -> don't add anything - if ($(this).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"])) { + if ($(this).hasClass("ko-or-dead")) { return true; } // ini = zero if (parseInt($(this).find(".combatant-ini").text()) == 0) { - $(this).addClass(CONTEXTUAL_CLASSES["ZERO_INI"]); + $(this).addClass("zero-ini"); return true; } // ini = max and non-zero if (parseInt($(this).find(".combatant-ini").text()) == iniMax && iniMax > 0) { - $(this).addClass(CONTEXTUAL_CLASSES["MAX_INI"]).find(".act-button").prop("disabled", false).removeAttr("aria-disabled"); + $(this).addClass("max-ini").find(".act-button").prop("disabled", false).removeAttr("aria-disabled"); return true; } - // everything else - $(this).addClass(CONTEXTUAL_CLASSES["REGULAR_INI"]); +/* // everything else + $(this).addClass("REGULAR_INI");*/ }) // 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]); + $($rows[i]).css("z-index", 50-i).css("position", "relative"); } return; }