- mostly finished redesign (only details left to do)
- you can now view and edit damage levels in the combatant modal - added Apply button to combatant modal - added submenu to action buttons - added clone button to actions - moved remove button from damage monitor to submenu
This commit is contained in:
parent
f56c665b0c
commit
382f0668c7
38
TODO.md
38
TODO.md
@ -27,21 +27,19 @@
|
||||
- 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
|
||||
|
||||
- Output vom HTML Validator:
|
||||
- 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
|
||||
- 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
|
||||
|
||||
|
||||
@ -52,7 +50,25 @@
|
||||
- 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
|
||||
- x Design cyberpunkig machen
|
||||
- x im modal soll man die damage levels einstellen/verändern können
|
||||
- input type=range
|
||||
- Werte sollen dazu angezeigt werden -> https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input#26613443
|
||||
- ein label über die range, eins darunter
|
||||
- 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
|
||||
|
||||
- noch mehr Design
|
||||
- favicon -> https://stackoverflow.com/questions/48956465/favicon-standard-2023-svg-ico-png-and-dimensions
|
||||
- imput[type=range] schicker machen
|
||||
- input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
|
||||
- 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 <a href="https://thenounproject.com/icons" target="_blank" title="Icons">Noun Project</a>
|
||||
- iconfinder: CC4.0
|
||||
@ -61,10 +77,8 @@
|
||||
- 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
|
||||
|
||||
- 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
|
||||
@ -26,12 +26,23 @@ $sr2-fg: deeppink;
|
||||
@mixin button() {
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
padding-right: 2px;
|
||||
padding-left: 2px;
|
||||
padding-inline: 0px;
|
||||
|
||||
border: 1px solid cyan;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 2px lightcyan, 0 0 4px cyan, 0 0 8px darkcyan;
|
||||
|
||||
color: deeppink;
|
||||
|
||||
img {
|
||||
filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%);
|
||||
}
|
||||
}
|
||||
|
||||
.sr2-button:focus-visible {
|
||||
outline: none;
|
||||
border: 2px solid cyan !important;
|
||||
box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
|
||||
}
|
||||
|
||||
html,
|
||||
@ -51,14 +62,13 @@ body {
|
||||
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
border: 2px solid cyan !important;
|
||||
box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
|
||||
div.container {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
header.navbar {
|
||||
margin-top: 4px;
|
||||
// margin-top: 4px;
|
||||
padding-right: .6rem;;
|
||||
@include border;
|
||||
@include inlay;
|
||||
@ -78,18 +88,16 @@ header.navbar {
|
||||
|
||||
button {
|
||||
@include button;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
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;
|
||||
.table-responsive {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
#combatants-table {
|
||||
@ -163,20 +171,36 @@ div.container {
|
||||
--aug-border-bottom: 2px;
|
||||
}
|
||||
|
||||
> tbody > tr > td > button,
|
||||
> tbody > tr > td > div > button, {
|
||||
.sr2-button {
|
||||
@include button;
|
||||
padding: 0px;
|
||||
// padding: 1px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(75%) contrast(105%);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
border-color: darkcyan;
|
||||
|
||||
img {
|
||||
filter: invert(6%) sepia(93%) saturate(7363%) hue-rotate(2deg) brightness(80%) contrast(105%);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.act-button {
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
bottom: 1px
|
||||
}
|
||||
}
|
||||
|
||||
@ -223,11 +247,11 @@ div.container {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.damage-dropdown {
|
||||
.damage-dropdown, .actions-dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.damage-monitor {
|
||||
.damage-monitor, .actions-menu {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
|
||||
@ -241,7 +265,9 @@ div.container {
|
||||
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.damage-monitor {
|
||||
button {
|
||||
font-size: smaller;
|
||||
width: 24px;
|
||||
@ -250,6 +276,11 @@ div.container {
|
||||
border: none;
|
||||
margin: 0px 2px;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus-visible {
|
||||
filter: brightness(150%) !important;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-stun {
|
||||
@ -268,6 +299,10 @@ div.container {
|
||||
background: radial-gradient(circle at center, deeppink, maroon);
|
||||
box-shadow: none;
|
||||
transition: background .5s, box-shadow .5s;
|
||||
|
||||
&:focus-visible {
|
||||
outline: deeppink !important;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-physical.active {
|
||||
@ -275,13 +310,6 @@ div.container {
|
||||
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;
|
||||
}
|
||||
|
||||
td button img {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
@ -298,6 +326,60 @@ div.container {
|
||||
*/
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
footer {
|
||||
// z-index: -10 !important;
|
||||
|
||||
@include aug;
|
||||
@include inlay;
|
||||
--aug-tl: 10px;
|
||||
--aug-tr: 10px;
|
||||
--aug-border-bg: cyan !important; // "sr2-border doesn't work"
|
||||
--aug-border-opacity: .5 !important;
|
||||
--aug-border-all: 2px !important;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
|
||||
|
||||
p {
|
||||
font-size: xx-small;
|
||||
margin: .25rem;
|
||||
color: cyan;
|
||||
user-select: auto;
|
||||
|
||||
a {
|
||||
color: hotpink;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sr2-modal {
|
||||
@include border;
|
||||
@ -305,6 +387,10 @@ div.container {
|
||||
color: cyan;
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
@include button;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
text-transform: uppercase;
|
||||
border-bottom: none;
|
||||
@ -334,8 +420,26 @@ div.container {
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.label-swap {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
label {
|
||||
order: 2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
@include button;
|
||||
background-color: transparent;
|
||||
color: deeppink;
|
||||
user-select: text;
|
||||
@ -350,6 +454,18 @@ div.container {
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: transparent;
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
&:valid {
|
||||
}
|
||||
&:invalid {
|
||||
border: 1px solid deeppink;
|
||||
box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
|
||||
}
|
||||
|
||||
&[type=number]::-webkit-inner-spin-button,
|
||||
&[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
@ -362,16 +478,56 @@ div.container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
border: 1px solid deeppink;
|
||||
box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon;
|
||||
&[type=range] {
|
||||
// -webkit-appearance: none;
|
||||
width: 91%;
|
||||
margin-left: calc(4.5% - 2px);
|
||||
|
||||
+ datalist {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
option {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
width: 9%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: 2px;
|
||||
border: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
button {
|
||||
@include button;
|
||||
color: deeppink;
|
||||
&::-moz-range-thumb {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&#combatant-modal-stun {
|
||||
|
||||
&::-moz-range-track {
|
||||
color: darkcyan !important;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&#combatant-modal-physical {
|
||||
|
||||
&::-moz-range-track {
|
||||
color: maroon;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: deeppink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.input-group-text {
|
||||
@ -384,21 +540,12 @@ div.container {
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
z-index: -10 !important;
|
||||
|
||||
p {
|
||||
font-size: x-small;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
hr {
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
th span{
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
||||
@ -30,17 +30,18 @@
|
||||
<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>
|
||||
<button type="submit" class="" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="img/newround.png"></button>
|
||||
<button type="submit" class="sr2-button" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="img/add.png" alt="user outline with a plus sign"></button>
|
||||
<button type="submit" class="sr2-button" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="img/newround.png" alt="a die being rolled"></button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="table-responsive overflow-visible">
|
||||
<table class="table table-sm table-borderless" id="combatants-table">
|
||||
<thead>
|
||||
<tr data-augmented-ui="tl-2-clip-y r-clip-y">
|
||||
<th class="col text-start th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
|
||||
<th class="col-2 text-center th-ini" data-augmented-ui="both" title="Initiative">Ini</th>
|
||||
<th class="col-2 text-center th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction"><img src="img/dice.png">+R</th>
|
||||
<th class="col-2 text-center th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction"><img src="img/dice.png" alt="a single die">+R</th>
|
||||
<th class="col-3 text-center th-actions" data-augmented-ui="r-clip-y both" title="Actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -50,20 +51,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-container">
|
||||
<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
|
||||
<p class="text-center">code & design by <a href="https://tobias-radloff.de/" tabindex="-1" title="Eclipse">Eclipse</a> | Shadowrun trademarked by <a href="https://www.topps.com/" tabindex="-1" title="Topps">Topps</a><br>
|
||||
icons by <a href="https://www.freepik.com" tabindex="-1" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" tabindex="-1" title="Flaticon">www.flaticon.com</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
||||
<div class="modal-dialog modal-sm" 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 both">
|
||||
<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">Start New Round</h5>
|
||||
<button type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
|
||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">X</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="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>
|
||||
<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 d-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,41 +82,46 @@
|
||||
<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" data-bs-dismiss="modal" aria-label="Close">X</button>
|
||||
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">X</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 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>
|
||||
<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 my-2">
|
||||
<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="#combatant-modal-form" placeholder="Dice">
|
||||
<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="1" max="25" class="form-control form-control-sm" id="combatant-modal-rea" form="#combatant-modal-form" placeholder="REA">
|
||||
<input type="number" min="1" max="25" 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="my-2">
|
||||
<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="#combatant-modal-form" placeholder="Ini">
|
||||
<label for="combatant-modal-ini" class="form-label">Wound penalties: -<span id="penalty-stun">0</span> (stun) and -<span id="penalty-physical">0</span> (physical)</label>
|
||||
<label for="combatant-modal-stun" class="form-label">Stun Damage Level</label>
|
||||
<input type="range" class="form-range" min="0" max="10" id="combatant-modal-stun" list="damage">
|
||||
|
||||
<datalist id="damage">
|
||||
<option>-</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 Level</label>
|
||||
<input type="range" class="form-range" min="0" max="10" id="combatant-modal-physical" list="damage">
|
||||
</div>
|
||||
|
||||
<p>Wound penalties: <span id="combatant-modal-penalties"></span></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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>
|
||||
<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" data-bs-dismiss="modal">OK</button>
|
||||
<button type="submit" class="sr2-button d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<footer class="footer fixed-bottom bg-light">
|
||||
<hr>
|
||||
<p class="text-center text-muted">code & design by <a href="https://tobias-radloff.de/">Eclipse</a> | Shadowrun trademarked by <a href="https://www.topps.com/">Topps</a><br>
|
||||
icons by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> | background by <a href="https://www.deviantart.com/xxaries1970xx">xxAries1970xx</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -8,11 +8,18 @@ const COMBATANT_TABLE_ROW = [
|
||||
'<td class="combatant-name" title="Combatant\'s name" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="tl-scoop bl-clip-y both">Test</td>\n',
|
||||
'<td class="combatant-ini" title="Effective initiative (w/ wound penalties)" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"></td>\n',
|
||||
'<td class="text-center combatant-dice-and-rea" title="Iniative dice and reaction" data-bs-toggle="modal" data-bs-target="#combatant-modal" data-augmented-ui="both"><span class="combatant-dice"></span>D+<span class="combatant-rea"></span></td>\n',
|
||||
'<td class="combatant-actions text-end" data-augmented-ui="tr-clip-y br-scoop both">\n',
|
||||
'<button type="button" class="edit-button" title="Edit combatant\'s values" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="001-edit.png"/></button>\n',
|
||||
'<button type="button" class="act-button" title="Act and reduce ini by 10"><img src="002-act.png"/></button>\n',
|
||||
'<td class="combatant-actions text-center" data-augmented-ui="tr-clip-y br-scoop both">\n',
|
||||
'<button type="button" class="sr2-button act-button" title="Act and reduce ini by 10">-10</button>\n',
|
||||
'<div class="damage-dropdown">\n',
|
||||
'<button type="button" class="damage-button" title="Take damage" ><img src="003-damage.png"/></button>\n',
|
||||
'<button type="button" class="sr2-button damage-button" title="Take damage" ><img src="003-damage.png"/></button>\n',
|
||||
'</div>\n',
|
||||
'<div class="actions-dropdown">\n',
|
||||
'<button type="button" class="sr2-button actions-button" title="More actions"><img src=""/></button>\n',
|
||||
'<div class="actions-menu d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
|
||||
'<button type="button" class="sr2-button edit-button" title="Edit combatant\'s values" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="001-edit.png"/></button>\n',
|
||||
'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src=""/></button>\n',
|
||||
'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button>\n',
|
||||
'</div>\n',
|
||||
'</div>\n',
|
||||
'</td>\n',
|
||||
'</tr>'].join("");
|
||||
@ -29,7 +36,7 @@ const DAMAGE_MONITOR_HTML = [
|
||||
'<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',
|
||||
// '<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>';
|
||||
@ -99,8 +106,35 @@ function handleActButtonClick(e) {
|
||||
function handleAddButtonClick(e) {
|
||||
// restyle modal
|
||||
$("#combatant-modal .modal-title").text("Add Combatant");
|
||||
$("#combatant-modal-add-ok-button").removeClass("d-none");
|
||||
$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
|
||||
$("#combatant-modal-edit-ok-button").addClass("d-none");
|
||||
// set damage sliders to zero
|
||||
$("#combatant-modal-stun, #combatant-modal-physical").val("0");
|
||||
// add handler for enter key
|
||||
$("#combatant-modal input[id*='combatant-modal']").off("keydown");
|
||||
$("#combatant-modal input[id*='combatant-modal']").on("keydown", function (e) {
|
||||
if (e.which == 13 || e.which == 10) {
|
||||
addCombatant(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
// click handler for clone buttons -> like handleAddButtonClick but with a pre-filled modal
|
||||
function handleCloneButtonClick(e) {
|
||||
// find current table row
|
||||
let $tr = $(e.target).parents(".combatant-row");
|
||||
// hide actions menu
|
||||
$tr.find(".actions-menu").addClass("d-none");
|
||||
// restyle modal
|
||||
$("#combatant-modal .modal-title").text("Clone Combatant");
|
||||
$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
|
||||
$("#combatant-modal-edit-ok-button").addClass("d-none");
|
||||
// populate modal with values from row
|
||||
$("#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"));
|
||||
$("#combatant-modal-stun").val($tr.attr("data-damage-stun") || "0");
|
||||
$("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0");
|
||||
// add handler for enter key
|
||||
$("#combatant-modal input[id*='combatant-modal']").off("keydown");
|
||||
$("#combatant-modal input[id*='combatant-modal']").on("keydown", function (e) {
|
||||
@ -113,8 +147,8 @@ function handleAddButtonClick(e) {
|
||||
function handleDamageButtonClick(e) {
|
||||
// get visibility status at click time
|
||||
let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none");
|
||||
// hide all damage monitors
|
||||
$(".damage-monitor:visible").addClass("d-none");
|
||||
// hide all damage monitors and actions menus
|
||||
$(".damage-monitor:visible, .actions-menu:visible").addClass("d-none");
|
||||
// if targeted dm was hidden before, show it now
|
||||
if (hiddenAtClick) {
|
||||
$(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none");
|
||||
@ -127,16 +161,15 @@ function handleEditButtonClick(e) {
|
||||
let $tr = $(e.target).parents(".combatant-row");
|
||||
// restyle modal
|
||||
$("#combatant-modal .modal-title").text("Edit Combatant");
|
||||
$("#combatant-modal-add-ok-button").addClass("d-none");
|
||||
$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-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").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"));
|
||||
// show effective ini in modal
|
||||
$("#penalty-stun").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-stun")) || 0]);
|
||||
$("#penalty-physical").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-physical")) || 0]);
|
||||
$("#combatant-modal-stun").val($tr.attr("data-damage-stun") || "0");
|
||||
$("#combatant-modal-physical").val($tr.attr("data-damage-physical") || "0");
|
||||
// mark which row is being edited
|
||||
$("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use .data() b/c HTML/CSS does not care about this value
|
||||
// add handler for enter key
|
||||
@ -147,6 +180,18 @@ function handleEditButtonClick(e) {
|
||||
}
|
||||
});
|
||||
}
|
||||
// click handler for the more-actions menus
|
||||
function handleMoreActionsButtonClick(e) {
|
||||
// get visibility status at click time
|
||||
let hiddenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("d-none");
|
||||
// hide all damage monitors
|
||||
$(".actions-menu:visible, .damage-monitor:visible").addClass("d-none");
|
||||
// if targeted dm was hidden before, show it now
|
||||
if (hiddenAtClick) {
|
||||
$(e.target).parents(".actions-dropdown").find(".actions-menu").removeClass("d-none");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleNewRoundButton(e) {
|
||||
// restyle modal
|
||||
@ -184,13 +229,19 @@ function addCombatant(e) {
|
||||
$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
|
||||
// add handler to table cells (click to edit)
|
||||
// retrieve initial damage levels
|
||||
$tr.attr("data-damage-stun", $("#combatant-modal-stun").val() || "0");
|
||||
$tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active");
|
||||
$tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0");
|
||||
$tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active");
|
||||
// add click handler to table cells
|
||||
$tr.find(".combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
|
||||
// add handlers to action buttons
|
||||
$tr.find("button.edit-button").on("click", handleEditButtonClick);
|
||||
$tr.find("button.act-button").on("click", handleActButtonClick);
|
||||
$tr.find("button.damage-button").on("click", handleDamageButtonClick);
|
||||
$tr.find("button.actions-button").on("click", handleMoreActionsButtonClick);
|
||||
$tr.find("button.edit-button").on("click", handleEditButtonClick);
|
||||
$tr.find("button.clone-button").on("click", handleCloneButtonClick);
|
||||
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
|
||||
// add handler to damage monitor
|
||||
$tr.find(".damage-stun, .damage-physical").on("click", applyDamage);
|
||||
@ -243,6 +294,10 @@ function editCombatant(e) {
|
||||
$tr.find(".combatant-name").text(name);
|
||||
$tr.find(".combatant-dice").attr("data-combatant-dice", dice);
|
||||
$tr.find(".combatant-rea").attr("data-combatant-rea", rea);
|
||||
$tr.attr("data-damage-stun", $("#combatant-modal-stun").val() || "0");
|
||||
$tr.find(".damage-stun").addClass("active").slice(0, parseInt($tr.attr("data-damage-stun")) || 0).removeClass("active");
|
||||
$tr.attr("data-damage-physical", $("#combatant-modal-physical").val() || "0");
|
||||
$tr.find(".damage-physical").addClass("active").slice(0, parseInt($tr.attr("data-damage-physical")) || 0).removeClass("active");
|
||||
// sort table
|
||||
sortTable();
|
||||
// clean up
|
||||
@ -379,10 +434,20 @@ $(document).ready(function () {
|
||||
$("#add-combatant-button").on("click", handleAddButtonClick);
|
||||
$("#new-round-button").on("click", handleNewRoundButton);
|
||||
// add event handlers to modal buttons
|
||||
$("#combatant-modal-add-ok-button").on("click", addCombatant);
|
||||
$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").on("click", addCombatant);
|
||||
$("#combatant-modal-edit-ok-button").on("click", editCombatant);
|
||||
$("#confirm-modal-new-round-ok-button").on("click", startNewRound);
|
||||
$("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant);
|
||||
|
||||
// add event listener to damage sliders in combatant modal
|
||||
$("#combatant-modal-stun, #combatant-modal-physical").on("change", function() {
|
||||
if ($("#combatant-modal-stun").val() == "10" || $("#combatant-modal-physical").val() == "10") {
|
||||
$("#combatant-modal-penalties").text("incapacitated");
|
||||
} else {
|
||||
$("#combatant-modal-penalties").text("-" + DAMAGE_PENALTY[$("#combatant-modal-stun").val()] + " (stun) and -" + DAMAGE_PENALTY[$("#combatant-modal-physical").val()] + " (physical)");
|
||||
}
|
||||
});
|
||||
|
||||
// always focus name input field when combatant modal appears
|
||||
$('#combatant-modal').on('shown.bs.modal', function () {
|
||||
$('#combatant-modal-name').focus();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user