Compare commits
6 Commits
332050526d
...
a7415f5d96
| Author | SHA1 | Date | |
|---|---|---|---|
| a7415f5d96 | |||
| 5324adf189 | |||
| 342fd6108a | |||
| 8ac965c30a | |||
| fea2e196ba | |||
| b12e2776a0 |
27
TODO.md
27
TODO.md
@ -61,20 +61,29 @@
|
||||
- non-issue, geht doch
|
||||
- x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
|
||||
- via SVGInject: https://github.com/iconfu/svg-inject
|
||||
- wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
|
||||
- x wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
|
||||
- korrigiert, indem ich nicht mehr den Buttons data-bs-modal="toggle" mitgebe, sondern das modal via JS in addCombatant() bzw. editCombatant() verstecke
|
||||
- Problem: dann ist das modal weg, aber der backdrop noch da (ich kann nichts anklicken)
|
||||
- Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
|
||||
- bei Apply modal offen lassen
|
||||
|
||||
- x addCombatant sollte nicht den auslösenden Event als Parameter kriegen
|
||||
- gilt auch für editCombatant, removeCombatant, startNewRound
|
||||
- applyDamage dagegen nicht, weil es eine echte Handlerfkt. ist -> vllt umbenennen
|
||||
- validation, modal hide/show und alles weitere kläre ich vorher in einer echten handler function
|
||||
- x manchmal wird svg-inject nicht geladen und dann sind alle icons weg
|
||||
- hab's jetzt doch wieder rausgeschmissen
|
||||
- x 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?
|
||||
- nicht mehr aktuell
|
||||
### open
|
||||
|
||||
- manchmal wird svg-inject nicht geladen und dann sind alle icons weg
|
||||
- im Chromium sind die Slider für Damage im CombatantModal ungestylet
|
||||
- Seite für größere Screens anpassen
|
||||
- Schrift, Buttons, Icons skalieren
|
||||
- em und % statt px
|
||||
- Tabellenbreite begrenzen
|
||||
- im Chromium sind die Slider für Damage im #combatant-modal ungestylet
|
||||
- Seite für größere Screens anpassen (Schrift, Buttons, Icons skalieren)
|
||||
- media queries
|
||||
- nicht px benutzen, sondern vw/vh/vmin/vmax -> muss aber schauen, ob FF4And das unterstützt
|
||||
- clamp(minsize, relsize, maxsize)
|
||||
- auch mgl.: calc(0.75em + 1vw) (macht den Vergrößerungseffekt für große Viewports irrelevant)
|
||||
- Tabellenbreite begrenzen?
|
||||
- make color scheme friendly for people with red green bindness (Felix)
|
||||
- see here: https://venngage.com/tools/accessible-color-palette-generator
|
||||
- tests
|
||||
@ -92,8 +101,6 @@
|
||||
- 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?
|
||||
- wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
|
||||
|
||||
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@iconfu/svg-inject": "^1.2.3",
|
||||
"@parcel/service-worker": "^2.8.3",
|
||||
"augmented-ui": "^2.0.0",
|
||||
"bootstrap": "^5.2.3",
|
||||
|
||||
@ -113,7 +113,7 @@ header.navbar {
|
||||
|
||||
.table-responsive { margin-bottom: 1px; }
|
||||
|
||||
.combatants-table {
|
||||
#combatants-table {
|
||||
margin-top: .5rem;
|
||||
|
||||
tr {
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icons">
|
||||
<defs>
|
||||
<!-- add combatant -->
|
||||
<symbol id="add" >
|
||||
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
||||
<rect height="96" width="64" x="224" y="0" />
|
||||
<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
|
||||
<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
|
||||
<path d="M 128 272 q 64 32 128 32 v -32 Z" />
|
||||
<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
|
||||
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
||||
<rect x="0" y="448" width="96" height="64" />
|
||||
<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
|
||||
<rect x="192" y="480" width="64" height="32" />
|
||||
<rect x="288" y="368" width="228" height="64" />
|
||||
<rect x="368" y="288" width="64" height="228" />
|
||||
</symbol>
|
||||
<!-- new round -->
|
||||
<symbol id="newround" >
|
||||
<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
|
||||
<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- act (-10) -->
|
||||
<symbol id="act" >
|
||||
<rect x="0" y="272" height="64" width="96" />
|
||||
<path d="M 160 64 h 64 v 384 h -64 v -296 l -64 64 l -40 -40 Z" />
|
||||
<path d="M 352 64 h 96 l 64 64 v 256 l -64 64 h -96 l -64 -64 v -256 l 64 -64 l 32 64 h 32 l 32 32 v 192 l -32 32 h -32 l -32 -32 v -192 l 32 -32" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- take damage -->
|
||||
<symbol id="take-damage" >
|
||||
<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- more actions -->
|
||||
<symbol id="more-actions" >
|
||||
<polygon points="32 32 480 32 256 480" />
|
||||
</symbol>
|
||||
<!-- edit combatant -->
|
||||
<symbol id="edit" >
|
||||
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
||||
<polygon points="352 0 512 160 416 256 256 96" />
|
||||
</symbol>
|
||||
<!-- clone combatant -->
|
||||
<symbol id="clone" >
|
||||
<rect x="0" y="0" width="512" height="128" />
|
||||
<rect x="0" y="384" width="512" height="128" />
|
||||
<polygon points="128 192 384 192 256 320" />
|
||||
</symbol>
|
||||
<!-- delete combatant -->
|
||||
<symbol id="delete" >
|
||||
<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
|
||||
<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- K.O. -->
|
||||
<symbol id="ko" >
|
||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
|
||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
|
||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
|
||||
</symbol>
|
||||
<!-- dead -->
|
||||
<symbol id="dead" >
|
||||
<rect x="208" y="0" width="96" height="512" />
|
||||
<rect x="80" y="112" width="352" height="96" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
@ -17,7 +17,6 @@
|
||||
<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
|
||||
|
||||
<script type="module" src="js/sr2ini.js"></script>
|
||||
<script type="module" src="../node_modules/@iconfu/svg-inject/dist/svg-inject.js"></script>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
@ -30,8 +29,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="img/icons.svg" onload="SVGInject(this, {'makeIdsUnique': false})" />
|
||||
|
||||
<!-- navbar -->
|
||||
<div class="container">
|
||||
<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 ps-4">SR2 Initiative Tracker</span>
|
||||
@ -44,9 +42,10 @@
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- combatants table -->
|
||||
<div class="container">
|
||||
<main class="table-responsive overflow-visible">
|
||||
<table class="table table-sm table-borderless combatants-table">
|
||||
<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 th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
|
||||
@ -61,12 +60,7 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="footer-container">
|
||||
<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
|
||||
<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- confirm modal -->
|
||||
<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 border">
|
||||
@ -86,6 +80,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- combatant modal (add & edit) -->
|
||||
<div class="modal fade" id="combatant-modal" tabindex="-1" 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 border">
|
||||
@ -129,5 +124,78 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SVG icon <symbol> definitions (for later <use>)-->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<defs>
|
||||
<!-- add combatant -->
|
||||
<symbol id="add" >
|
||||
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
||||
<rect height="96" width="64" x="224" y="0" />
|
||||
<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
|
||||
<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
|
||||
<path d="M 128 272 q 64 32 128 32 v -32 Z" />
|
||||
<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
|
||||
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
||||
<rect x="0" y="448" width="96" height="64" />
|
||||
<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
|
||||
<rect x="192" y="480" width="64" height="32" />
|
||||
<rect x="288" y="368" width="228" height="64" />
|
||||
<rect x="368" y="288" width="64" height="228" />
|
||||
</symbol>
|
||||
<!-- new round -->
|
||||
<symbol id="newround" >
|
||||
<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
|
||||
<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- act (-10) -->
|
||||
<symbol id="act" >
|
||||
<rect x="0" y="272" height="64" width="96" />
|
||||
<path d="M 160 64 h 64 v 384 h -64 v -296 l -64 64 l -40 -40 Z" />
|
||||
<path d="M 352 64 h 96 l 64 64 v 256 l -64 64 h -96 l -64 -64 v -256 l 64 -64 l 32 64 h 32 l 32 32 v 192 l -32 32 h -32 l -32 -32 v -192 l 32 -32" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- take damage -->
|
||||
<symbol id="take-damage" >
|
||||
<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- more actions -->
|
||||
<symbol id="more-actions" >
|
||||
<polygon points="32 32 480 32 256 480" />
|
||||
</symbol>
|
||||
<!-- edit combatant -->
|
||||
<symbol id="edit" >
|
||||
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
||||
<polygon points="352 0 512 160 416 256 256 96" />
|
||||
</symbol>
|
||||
<!-- clone combatant -->
|
||||
<symbol id="clone" >
|
||||
<rect x="0" y="0" width="512" height="128" />
|
||||
<rect x="0" y="384" width="512" height="128" />
|
||||
<polygon points="128 192 384 192 256 320" />
|
||||
</symbol>
|
||||
<!-- delete combatant -->
|
||||
<symbol id="delete" >
|
||||
<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
|
||||
<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
|
||||
</symbol>
|
||||
<!-- K.O. -->
|
||||
<symbol id="ko" >
|
||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
|
||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
|
||||
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
|
||||
</symbol>
|
||||
<!-- dead -->
|
||||
<symbol id="dead" >
|
||||
<rect x="208" y="0" width="96" height="512" />
|
||||
<rect x="80" y="112" width="352" height="96" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- footer -->
|
||||
<div class="footer-container">
|
||||
<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
|
||||
<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
185
src/js/sr2ini.js
185
src/js/sr2ini.js
@ -60,7 +60,7 @@ const DAMAGE_MONITOR_HTML = [
|
||||
'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
|
||||
'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
|
||||
'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
|
||||
'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><svg viewbox="0 0 512 512"><use href="#ko" /></svg></button></td><td><button type="button" class="damage-physical active" title="Dead" tabindex="-1" ><svg viewbox="0 0 512 512"><use href="#dead" /></svg></button></td></tr>\n',
|
||||
'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><svg viewbox="0 0 512 512"><use href="#ko" /></svg></button></td><td><button type="button" class="damage-physical active" title="Dead" tabindex="-1"><svg viewbox="0 0 512 512"><use href="#dead" /></svg></button></td></tr>\n',
|
||||
'</table>\n',
|
||||
'</div>'].join("");
|
||||
|
||||
@ -132,17 +132,17 @@ function addTestCombatant() {
|
||||
*/
|
||||
|
||||
// click handler for act buttons; reduces ini by 10
|
||||
function handleActButtonClick(e) {
|
||||
function handleActButtonClick(event) {
|
||||
// reduce ini by 10 but not lower than 0
|
||||
let ini = Math.max(parseInt($(e.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0);
|
||||
let ini = Math.max(parseInt($(event.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0);
|
||||
// set new ini value
|
||||
$(e.target).parents(".combatant-row").attr("data-true-ini", ini);
|
||||
$(event.target).parents(".combatant-row").attr("data-true-ini", ini);
|
||||
// resort table
|
||||
sortTable();
|
||||
}
|
||||
|
||||
// click handler for add buttons
|
||||
function handleAddButtonClick(e) {
|
||||
// click handler for add button
|
||||
function handleAddButtonClick(event) {
|
||||
// restyle modal
|
||||
$("#combatant-modal .modal-title").text("Add Combatant");
|
||||
$("#combatant-modal-add-ok-button, #combatant-modal-add-apply-button").removeClass("d-none");
|
||||
@ -155,13 +155,17 @@ function handleAddButtonClick(e) {
|
||||
$("#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", (e) => { if (e.which == 13 || e.which == 10) { addCombatant(e); } });
|
||||
$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
|
||||
if (e.which == 13 || e.which == 10) {
|
||||
handleCombatantModalAddOkButtonClick(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// click handler for clone buttons -> like handleAddButtonClick but with a pre-filled modal
|
||||
function handleCloneButtonClick(e) {
|
||||
function handleCloneButtonClick(event) {
|
||||
// find current table row
|
||||
let $tr = $(e.target).parents(".combatant-row");
|
||||
let $tr = $(event.target).parents(".combatant-row");
|
||||
// hide actions menu
|
||||
$tr.find(".actions-menu").removeClass("seen");
|
||||
// restyle modal
|
||||
@ -177,26 +181,72 @@ function handleCloneButtonClick(e) {
|
||||
$("#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", (e) => { if (e.which == 13 || e.which == 10) { addCombatant(e); } });
|
||||
$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
|
||||
if (e.which == 13 || e.which == 10) {
|
||||
handleCombatantModalAddOkButtonClick(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// click handler for damage buttons; basically toggles visibility of table.damage-monitor
|
||||
function handleDamageButtonClick(e) {
|
||||
// click handler for combatant modal OK button (add mode)
|
||||
function handleCombatantModalAddOkButtonClick(event) {
|
||||
if (validateCombatant()) {
|
||||
bs.getInstance($("#combatant-modal")).hide();
|
||||
addCombatant();
|
||||
}
|
||||
}
|
||||
|
||||
// click handler for combatant modal Apply button (add mode)
|
||||
function handleCombatantModalAddApplyButtonClick(event) {
|
||||
if (validateCombatant()) {
|
||||
addCombatant();
|
||||
}
|
||||
}
|
||||
|
||||
// click handler for combatant modal OK button (edit mode)
|
||||
function handleCombatantModalEditOkButtonClick(event) {
|
||||
if (validateCombatant()) {
|
||||
bs.getInstance($("#combatant-modal")).hide();
|
||||
editCombatant();
|
||||
}
|
||||
}
|
||||
|
||||
// click handler for damage buttons; basically toggles visibility of .damage-monitor
|
||||
function handleDamageButtonClick(event) {
|
||||
// get visibility status at click time
|
||||
let seenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen");
|
||||
let seenAtClick = $(event.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen");
|
||||
// hide all damage monitors and actions menus
|
||||
$(".damage-monitor.seen, .actions-menu.seen").removeClass("seen").find("button").attr("tabindex", "-1");
|
||||
// if targeted dm was hidden before, show it now
|
||||
if (! seenAtClick) {
|
||||
$(e.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0");
|
||||
$(event.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// handle click on damage level button in damage monitor and apply damage to combatant
|
||||
function handleDamageLevelClick(event) {
|
||||
let $btn = $(event.target).is("button") ? $(event.target) : $(event.target).closest("button");
|
||||
// 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(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7);
|
||||
console.log("damageType is", damageType);
|
||||
// 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.toggleClass("active");
|
||||
$btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active");
|
||||
$btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active");
|
||||
sortTable();
|
||||
}
|
||||
|
||||
// click handler for edit buttons
|
||||
function handleEditButtonClick(e) {
|
||||
function handleEditButtonClick(event) {
|
||||
// find current table row
|
||||
let $tr = $(e.target).parents(".combatant-row");
|
||||
let $tr = $(event.target).parents(".combatant-row");
|
||||
// restyle modal
|
||||
$("#combatant-modal .modal-title").text("Edit Combatant");
|
||||
$("#combatant-modal-edit-ok-button").removeClass("d-none");
|
||||
@ -212,40 +262,60 @@ function handleEditButtonClick(e) {
|
||||
$("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use the jQuery data() function (which is not the same as using a data attribute) b/c this value is used only in this script and not via HTML or CSS
|
||||
// add handler for enter key
|
||||
$("#combatant-modal input[id*='combatant-modal']").off("keydown");
|
||||
$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => { if (e.which == 13 || e.which == 10) { editCombatant(e); } });
|
||||
$("#combatant-modal input[id*='combatant-modal']").on("keydown", (e) => {
|
||||
if (e.which == 13 || e.which == 10) {
|
||||
handleCombatantModalEditOkButtonClick(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// click handler for the more-actions menus
|
||||
function handleMoreActionsButtonClick(e) {
|
||||
function handleMoreActionsButtonClick(event) {
|
||||
// get visibility status at click time
|
||||
let seenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen");
|
||||
let seenAtClick = $(event.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen");
|
||||
|
||||
// hide all damage monitors
|
||||
$(".actions-menu.seen, .damage-monitor.seen").removeClass("seen").find("button").attr("tabindex", "-1");
|
||||
// if targeted dm was seen before, show it now
|
||||
if (! seenAtClick) {
|
||||
$(e.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0");
|
||||
$(event.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0");
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// click handler for new round button
|
||||
function handleNewRoundButton(e) {
|
||||
function handleNewRoundButtonClick(event) {
|
||||
// restyle modal
|
||||
$("#confirm-modal .modal-title").text("Start new Round");
|
||||
$("#confirm-modal-new-round-ok-button").removeClass("d-none");
|
||||
$("#confirm-modal-remove-combatant-ok-button").addClass("d-none");
|
||||
// add handler for enter key
|
||||
$("#confirm-modal").off("keydown");
|
||||
$("#confirm-modal").on("keydown", (e) => {
|
||||
if (e.which == 13 || e.which == 10) {
|
||||
bs.getInstance($("#confirm-modal")).hide();
|
||||
startNewRound();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// click handler for remove buttons
|
||||
function handleRemoveButtonClick(e) {
|
||||
function handleRemoveButtonClick(event) {
|
||||
// restyle modal
|
||||
$("#confirm-modal .modal-title").text("Remove Combatant");
|
||||
$("#confirm-modal-remove-combatant-ok-button").removeClass("d-none");
|
||||
$("#confirm-modal-new-round-ok-button").addClass("d-none");
|
||||
// mark which row is being removed
|
||||
$("#confirm-modal").data("row", $(".combatant-row").index($(e.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value
|
||||
$("#confirm-modal").data("row", $(".combatant-row").index($(event.target).parents(".combatant-row"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value
|
||||
// add handler for enter key
|
||||
$("#confirm-modal").off("keydown");
|
||||
$("#confirm-modal").on("keydown", (e) => {
|
||||
if (e.which == 13 || e.which == 10) {
|
||||
bs.getInstance($("#confirm-modal")).hide();
|
||||
removeCombatant();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -254,16 +324,7 @@ function handleRemoveButtonClick(e) {
|
||||
*/
|
||||
|
||||
// add new combatant
|
||||
function addCombatant(e) {
|
||||
// e.preventDefault();
|
||||
// validate form
|
||||
if (!validateCombatant()) {
|
||||
return false;
|
||||
}
|
||||
// hide modal if OK was pressed, but not on Apply
|
||||
if (e.target.id != "combatant-modal-add-apply-button") {
|
||||
bs.getInstance($("#combatant-modal")).hide();
|
||||
}
|
||||
function addCombatant() {
|
||||
// roll for initiative if necessary
|
||||
let ini = $("#combatant-modal-ini").val().trim();
|
||||
ini = (ini != "") ? ini : rollForInitiative($("#combatant-modal-dice").val(), $("#combatant-modal-rea").val());
|
||||
@ -287,42 +348,14 @@ function addCombatant(e) {
|
||||
$tr.find("button.edit-button, .combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
|
||||
$tr.find("button.clone-button").on("click", handleCloneButtonClick);
|
||||
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
|
||||
// add event handler to damage monitor
|
||||
$tr.find(".damage-stun, .damage-physical").on("click", applyDamage);
|
||||
$tr.find(".damage-stun, .damage-physical").on("click", handleDamageLevelClick);
|
||||
// append row to table and sort
|
||||
$(".combatants-table").append($tr);
|
||||
sortTable();
|
||||
}
|
||||
|
||||
// apply damage to combatant
|
||||
function applyDamage(e) {
|
||||
let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).closest("button");
|
||||
// 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(cls => cls.substr(0, 7) == "damage-" ? cls : false).toString().substr(7);
|
||||
console.log("damageType is", damageType);
|
||||
// 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.toggleClass("active");
|
||||
$btn.parent().parent().prevAll().find("button.damage-" + damageType).removeClass("active");
|
||||
$btn.parent().parent().nextAll().find("button.damage-" + damageType + ":not(.active)").addClass("active");
|
||||
sortTable();
|
||||
}
|
||||
|
||||
// edit combatant
|
||||
function editCombatant(e) {
|
||||
console.log("editing combatant …")
|
||||
// e.preventDefault();
|
||||
// validate form
|
||||
if (!validateCombatant()) {
|
||||
return false;
|
||||
}
|
||||
// hide modal
|
||||
bs.getInstance($("#combatant-modal")).hide();
|
||||
function editCombatant() {
|
||||
// get values
|
||||
let name = $("#combatant-modal-name").val().trim();
|
||||
let ini = $("#combatant-modal-ini").val().trim();
|
||||
@ -351,8 +384,7 @@ console.log("row is", $tr);
|
||||
}
|
||||
|
||||
// remove combatant
|
||||
function removeCombatant(e) {
|
||||
e.preventDefault();
|
||||
function removeCombatant() {
|
||||
// remove correct row
|
||||
let index = parseInt($("#confirm-modal").data("row"));
|
||||
$(".combatant-row").eq(index).remove();
|
||||
@ -362,8 +394,7 @@ function removeCombatant(e) {
|
||||
}
|
||||
|
||||
// start a new combat round
|
||||
function startNewRound(e) {
|
||||
e.preventDefault();
|
||||
function startNewRound() {
|
||||
// are there rows at all?
|
||||
if ($(".combatant-row").length == 0) {
|
||||
return;
|
||||
@ -479,13 +510,17 @@ function validateCombatant() {
|
||||
$(document).ready(function () {
|
||||
// add event handlers to navbar buttons
|
||||
$("#add-combatant-button").on("click", handleAddButtonClick);
|
||||
$("#new-round-button").on("click", handleNewRoundButton);
|
||||
$("#new-round-button").on("click", handleNewRoundButtonClick);
|
||||
// add event handlers to modal buttons
|
||||
$("#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);
|
||||
|
||||
$("#combatant-modal-add-apply-button").on("click", handleCombatantModalAddApplyButtonClick);
|
||||
$("#combatant-modal-add-ok-button").on("click", handleCombatantModalAddOkButtonClick);
|
||||
$("#combatant-modal-edit-ok-button").on("click", handleCombatantModalEditOkButtonClick);
|
||||
$("#confirm-modal-new-round-ok-button").on("click", () => {
|
||||
startNewRound();
|
||||
});
|
||||
$("#confirm-modal-remove-combatant-ok-button").on("click", () => {
|
||||
removeCombatant();
|
||||
});
|
||||
// add event listeners to damage sliders in combatant modal
|
||||
$("#combatant-modal-stun").on("change", () => {
|
||||
if ($("#combatant-modal-stun").val() == "10") {
|
||||
@ -515,7 +550,7 @@ $(document).ready(function () {
|
||||
$(".actions-menu.seen").removeClass("seen");
|
||||
}
|
||||
});
|
||||
// addTestCombatant();
|
||||
addTestCombatant();
|
||||
});
|
||||
|
||||
module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };
|
||||
//module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };
|
||||
Loading…
Reference in New Issue
Block a user