- continued complete redesign
- restyled all elements are now except footer
This commit is contained in:
parent
66679dddac
commit
f56c665b0c
9
TODO.md
9
TODO.md
@ -25,9 +25,9 @@
|
||||
- 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
|
||||
|
||||
- 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
|
||||
@ -57,11 +57,14 @@
|
||||
- noun project: Icons by Febrian Hidayat from <a href="https://thenounproject.com/icons" target="_blank" title="Icons">Noun Project</a>
|
||||
- iconfinder: CC4.0
|
||||
- icons8.com:
|
||||
- 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?
|
||||
- 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/
|
||||
|
||||
@ -16,14 +16,13 @@
|
||||
"parcel": "^2.8.3",
|
||||
"parcel-reporter-static-files-copy": "^1.5.0"
|
||||
},
|
||||
"publicUrl": "./",
|
||||
"dependencies": {
|
||||
},
|
||||
"staticFiles": {
|
||||
"staticPath": "src/img"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npx parcel serve src/index.html --public-url ./ --dist-dir dist",
|
||||
"start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
|
||||
"prebuild": "rm -rf dist/",
|
||||
"build": "npx parcel build --public-url ./",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
|
||||
@ -9,15 +9,13 @@ $sr2-fg: deeppink;
|
||||
--aug-tr: 5px;
|
||||
--aug-r: 5px;
|
||||
--aug-br: 5px;
|
||||
--aug-b: 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;
|
||||
--aug-border-all: 2px;
|
||||
}
|
||||
|
||||
@mixin inlay() {
|
||||
@ -27,16 +25,20 @@ $sr2-fg: deeppink;
|
||||
|
||||
@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;
|
||||
border-radius: 1px;
|
||||
padding-right: 2px;
|
||||
padding-left: 2px;
|
||||
|
||||
border: 1px solid cyan;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
// overflow-x: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -49,20 +51,43 @@ body {
|
||||
|
||||
}
|
||||
|
||||
header.navbar {
|
||||
@include border;
|
||||
--aug-br: 10px;
|
||||
--aug-tl: 10px;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .3);
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
border: 2px solid cyan !important;
|
||||
box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
|
||||
}
|
||||
|
||||
span.navbar-brand {
|
||||
// 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.navbar {
|
||||
margin-top: 4px;
|
||||
padding-right: .6rem;;
|
||||
@include border;
|
||||
@include inlay;
|
||||
--aug-br: 7px;
|
||||
--aug-tr: 7px;
|
||||
--aug-bl: 7px;
|
||||
--aug-tl: 7px;
|
||||
--aug-b: 7px;
|
||||
--aug-l: 7px;
|
||||
--aug-r: 7px;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
||||
|
||||
span.navbar-brand {
|
||||
color: cyan;
|
||||
text-shadow: 0 0 3px, 0 0 6px, 0 0 12px, 0 0 24px;
|
||||
}
|
||||
|
||||
button {
|
||||
@include button;
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
|
||||
> img {
|
||||
filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.container {
|
||||
position: relative;
|
||||
}
|
||||
@ -74,6 +99,8 @@ div.container {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
--aug-border-right: 0px;
|
||||
--aug-border-bottom: 0px;
|
||||
}
|
||||
|
||||
.combatant-row {
|
||||
@ -85,6 +112,12 @@ div.container {
|
||||
}
|
||||
.th-dice-and-rea {
|
||||
min-width: 3.75rem;
|
||||
|
||||
> 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;
|
||||
@ -95,6 +128,8 @@ div.container {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
--aug-border-right: 0px;
|
||||
--aug-border-bottom: 0px;
|
||||
background: none !important;
|
||||
// text-shadow: 2px 2px 3px black;
|
||||
}
|
||||
@ -130,47 +165,18 @@ div.container {
|
||||
|
||||
> tbody > tr > td > button,
|
||||
> tbody > tr > td > div > button, {
|
||||
padding: 0px;
|
||||
padding-right: 2px;
|
||||
padding-left: 2px;
|
||||
|
||||
@include button;
|
||||
padding: 0px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
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;
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%);
|
||||
}
|
||||
|
||||
/* @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;
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -229,25 +235,21 @@ div.container {
|
||||
right: 10px;
|
||||
|
||||
@include aug;
|
||||
|
||||
@include border;
|
||||
--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: 24px;
|
||||
height: 24px;
|
||||
|
||||
border: none;
|
||||
margin: 0px 2px;
|
||||
border-radius: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.damage-stun {
|
||||
@ -278,8 +280,6 @@ div.container {
|
||||
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 {
|
||||
@ -287,35 +287,103 @@ div.container {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
.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;
|
||||
/* &.d-none {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
1% {
|
||||
opacity: 0;
|
||||
|
||||
&:not(.d-none) {
|
||||
transform: translateY(0);;
|
||||
transition: transform .4s;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
.sr2-modal {
|
||||
@include border;
|
||||
@include aug;
|
||||
color: cyan;
|
||||
pointer-events: auto;
|
||||
|
||||
.modal-header {
|
||||
text-transform: uppercase;
|
||||
border-bottom: none;
|
||||
@include inlay;
|
||||
@include border;
|
||||
--aug-inlay-bottom: 0;
|
||||
|
||||
button {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@include inlay;
|
||||
@include border;
|
||||
--aug-inlay-y: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
@include inlay;
|
||||
@include border;
|
||||
--aug-inlay-top: 0;
|
||||
|
||||
button {
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@include button;
|
||||
background-color: transparent;
|
||||
color: deeppink;
|
||||
user-select: text;
|
||||
|
||||
&::selection {
|
||||
color: black;
|
||||
background-color: deeppink;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
&[type=number]::-webkit-inner-spin-button,
|
||||
&[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
border: 1px solid deeppink;
|
||||
box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
@include button;
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
span.input-group-text {
|
||||
color: deeppink;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
z-index: -10 !important;
|
||||
|
||||
@ -329,10 +397,6 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
th span{
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="navbar navbar-expand" data-augmented-ui="tl-clip-y br-clip-y both">
|
||||
<header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
|
||||
<span class="navbar-brand text-bold ps-4">SR2 Initiative Tracker</span>
|
||||
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
|
||||
<button type="submit" class="" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="img/add.png"></button>
|
||||
@ -52,15 +52,15 @@
|
||||
|
||||
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
|
||||
<div class="modal-header" data-augmented-ui="inlay">
|
||||
<h5 class="modal-title">Start New Round</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body" data-augmented-ui="inlay">
|
||||
<p>Are you sure?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer" data-augmented-ui="inlay">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
<button type="submit" class="btn btn-primary d-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
@ -71,12 +71,12 @@
|
||||
|
||||
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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">
|
||||
<h5 class="modal-title">Add New Combatant</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body" data-augmented-ui="inlay">
|
||||
<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
|
||||
<div class="my-2">
|
||||
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="#combatant-modal-form" placeholder="Name" required>
|
||||
@ -92,10 +92,10 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
<button type="submit" class="btn btn-primary d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
<div class="modal-footer" data-augmented-ui="inlay">
|
||||
<button type="button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
<button type="submit" class="d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,19 +17,21 @@ const COMBATANT_TABLE_ROW = [
|
||||
'</td>\n',
|
||||
'</tr>'].join("");
|
||||
const DAMAGE_MONITOR_HTML = [
|
||||
'<table class="damage-monitor text-center align-middle d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
|
||||
'<tr><td><button class="damage-stun active" title="Light stun damage">L</button></td><td><button class="damage-physical active" title="Light physical damage">L</button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active" title="Medium stun damage">M</button></td><td><button class="damage-physical active" title="Medium physical damage">M</button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active" title="Severe stun damage">S</button></td><td><button class="damage-physical active" title="Severe physical damage">S</button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active" title="K.O."><img src="zzz.png" height="16" /></button></td><td><button class="damage-physical active" title="dead"><img src="cross.png" height="16"/></button></td></tr>\n',
|
||||
'<tr><th colspan="2"><button type)"submit" class="remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button></th></tr>\n',
|
||||
'</table>'].join("");
|
||||
'<div class="damage-monitor d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
|
||||
'<table class="text-center align-middle">\n',
|
||||
'<tr><td><button class="damage-stun active" title="Light stun damage">L</button></td><td><button class="damage-physical active" title="Light physical damage">L</button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active" title="Medium stun damage">M</button></td><td><button class="damage-physical active" title="Medium physical damage">M</button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active" title="Severe stun damage">S</button></td><td><button class="damage-physical active" title="Severe physical damage">S</button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
|
||||
'<tr><td><button class="damage-stun active" title="K.O."><img src="zzz.png" height="16" /></button></td><td><button class="damage-physical active" title="dead"><img src="cross.png" height="16"/></button></td></tr>\n',
|
||||
'<tr><th colspan="2"><button type)"submit" class="remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button></th></tr>\n',
|
||||
'</table>\n',
|
||||
'</div>'].join("");
|
||||
const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
|
||||
const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
|
||||
/*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user