Compare commits

..

4 Commits

Author SHA1 Message Date
e9c163ea2a cleaned up code 2023-09-13 10:05:28 +02:00
4b9f145df6 improved event handling for damage sliders in modal
removed debug console output
2023-09-13 10:03:52 +02:00
cf12833c0d updated text in footer 2023-09-13 10:02:30 +02:00
af40e4500a updated 2023-09-13 09:57:24 +02:00
4 changed files with 24 additions and 33 deletions

19
TODO.md
View File

@ -102,26 +102,31 @@
- Kandidaten
- gelb: gold, yellow, orange
- grün: lawngreen, lime, greenyellow
- x 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?
### open
- custom validation not triggering error message nor visible styles
- color scheme beim Favicon anpassen
- focus-related stuff
- after pressing damage button, focus moves to first table row act button
- it's probably b/c I resort the table
- wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
- im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
- action-menu und damage-monitor sliden jetzt nicht mehr rein, sondern bleiben an Ort und Stelle
- das sollte die Sache verhindern
- warum fkt. das Ganze nicht als Webapp?
- Firefox (android) sieht die Seite nicht als installable an
- Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux)
- 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?
- wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld
- comments with general info in source files?
- nice to have: focus trapping im modal fkt. nur rückwärts (shift-tab), aber nicht vorwärts
- zumindest im Chrome; FF ungetestet
## Feature Requests

View File

@ -59,7 +59,7 @@ $form-feedback-icon-valid: none;
$form-feedback-icon-invalid: none;
// more bootstrap stylesheets
//@import "../../node_modules/bootstrap/scss/bootstrap";
//@import "../../node_modules/bootstrap/scss/bootstrap"; // everything
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/variables-dark";
@import "../../node_modules/bootstrap/scss/maps";
@ -107,9 +107,7 @@ $form-feedback-icon-invalid: none;
********************* */
@media (width <= 500px) {
html {
font-size: $html-font-size;
}
html { font-size: $html-font-size; }
.container {
min-width: 100vw;
@ -120,9 +118,7 @@ $form-feedback-icon-invalid: none;
}
@media (500px < width < 1000px) {
html {
font-size: calc(100vw / (500px / $html-font-size));
}
html { font-size: calc(100vw / (500px / $html-font-size)); }
.container {
$calc-width: calc(100vw / 2 + 250px);
@ -132,9 +128,7 @@ $form-feedback-icon-invalid: none;
}
@media (1000px <= width) {
html {
font-size: calc($html-font-size * 2);
}
html { font-size: calc($html-font-size * 2); }
.container {
min-width: 75vw;
@ -143,7 +137,6 @@ $form-feedback-icon-invalid: none;
}
/* *****************
* Basic styles
******************* */
@ -172,9 +165,6 @@ body {
button { font-family: Electrolize; }
//button:focus {
//}
.sr2-button {
background: transparent;
border: .07rem solid $bg;
@ -211,7 +201,6 @@ button { font-family: Electrolize; }
.display-none { display: none; }
/* *****************
* Header styles
******************* */
@ -246,7 +235,6 @@ header.navbar {
}
/* *****************
* Table styles
******************* */
@ -437,7 +425,7 @@ header.navbar {
&:focus {
outline: none;
animation: .6s alternate ease-in-out infinite pulse;
animation: .6s alternate infinite pulse;
animation-delay: -.3s;
}
@ -474,7 +462,6 @@ header.navbar {
}
/* *****************
* Modal styles
******************* */
@ -628,4 +615,3 @@ footer {
}
}

View File

@ -193,7 +193,7 @@
<!-- footer -->
<div class="footer-container container">
<footer data-augmented-ui="tl-clip br-clip 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>
<p><a href="https://git.unterdemradar.de/tobias/sr2ini" tabindex="-1" title="sr2ini">sr2ini</a> | Copyright (C) 2023 by Tobias P | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
</footer>
</div>
</body>

View File

@ -236,7 +236,6 @@ function handleDamageLevelClick(event) {
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
@ -368,9 +367,7 @@ function editCombatant() {
ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// get correct row
let index = parseInt($("#combatant-modal").data("row"));
console.log("row index is", index);
let $tr = $("tr.combatant-row").eq(index);
console.log("row is", $tr);
// set new values
$tr.attr("data-true-ini", ini);
$tr.find(".combatant-name").text(name);
@ -525,21 +522,24 @@ $(document).ready(function () {
removeCombatant();
});
// add event listeners to damage sliders in combatant modal
$("#combatant-modal-stun").on("change", () => {
$("#combatant-modal-stun").on("input change", () => {
if ($("#combatant-modal-stun").val() == "10") {
$("#combatant-modal-penalty-stun").text("(K.O.)");
} else if ($("#combatant-modal-stun").val() == "0") {
$("#combatant-modal-penalty-stun").text("");
} else {
$("#combatant-modal-penalty-stun").text("(wound penalty -" + DAMAGE_PENALTY[$("#combatant-modal-stun").val()] + ")");
}
});
$("#combatant-modal-physical").on("change", () => {
$("#combatant-modal-physical").on("input change", () => {
if ($("#combatant-modal-physical").val() == "10") {
$("#combatant-modal-penalty-physical").text("(dead)");
} else if ($("#combatant-modal-physical").val() == "0") {
$("#combatant-modal-penalty-physical").text("");
} else {
$("#combatant-modal-penalty-physical").text("(wound penalty -" + DAMAGE_PENALTY[$("#combatant-modal-physical").val()] + ")");
}
});
// always focus name input field when combatant modal appears
$('#combatant-modal').on('shown.bs.modal', () => $('#combatant-modal-name').focus());
// always empty input fields when combatant modal disappears