- updated footer

- changed way to show/hide .damage-monitor elements; now works via bootstrap class "d-none" instead of changing "display" attribute
- same for modal OK buttons
This commit is contained in:
Tobias 2023-02-09 12:14:30 +01:00
parent 938f32cb8c
commit 10830728b2
3 changed files with 27 additions and 21 deletions

View File

@ -44,7 +44,6 @@ input:invalid {
} }
.damage-monitor { .damage-monitor {
display: none;
position: absolute; position: absolute;
z-index: 20; z-index: 20;
top: 40px; top: 40px;
@ -75,3 +74,10 @@ input:invalid {
.damage-monitor button.active { .damage-monitor button.active {
filter: brightness(91%); filter: brightness(91%);
} }
footer p {
font-size: x-small;
margin-bottom: .5rem;
}
footer hr {
margin: .5rem 0;

View File

@ -63,7 +63,7 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="confirmModalNewRoundOkButton" data-bs-dismiss="modal">OK</button> <button type="submit" class="btn btn-primary" id="confirmModalNewRoundOkButton" data-bs-dismiss="modal">OK</button>
<button type="submit" class="btn btn-primary" id="confirmModalRemoveCombatantOkButton" data-bs-dismiss="modal" style="display: none">OK</button> <button type="submit" class="btn btn-primary d-none" id="confirmModalRemoveCombatantOkButton" data-bs-dismiss="modal">OK</button>
</div> </div>
</div> </div>
</div> </div>
@ -94,16 +94,17 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" id="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" id="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK</button> <button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK</button>
<button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK</button> <button type="submit" class="btn btn-primary d-none" id="combatantModalEditOkButton">OK</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<footer class="footer fixed-bottom bg-light py-1 my-1"> <footer class="footer fixed-bottom bg-light">
<hr /> <hr />
<p class="text-center text-muted">Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></p> <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> | banner image from <a href="https://www.pinterest.ph/artstation/">Artstation-HQ</a></p>
</footer> </footer>
</div> </div>

View File

@ -18,7 +18,7 @@ const COMBATANT_TABLE_ROW = [
'</tr>'].join(""); '</tr>'].join("");
const DAMAGE_MONITOR_HTML = [ const DAMAGE_MONITOR_HTML = [
'<table class="bg-light damage-monitor text-center align-middle">\n', '<table class="bg-light damage-monitor text-center align-middle d-none">\n',
'<tr>\n', '<tr>\n',
'<td><button class="btn btn-sm btn-warning damage-stun active" title="+/-0">0</button></td>\n', '<td><button class="btn btn-sm btn-warning damage-stun active" title="+/-0">0</button></td>\n',
'<td><button class="btn btn-sm btn-danger damage-physical active" title="+/-0">0</button></td>\n', '<td><button class="btn btn-sm btn-danger damage-physical active" title="+/-0">0</button></td>\n',
@ -84,7 +84,6 @@ function sortTable() {
//TODO: don't rely on class out-of-commission being set, check and set it here instead //TODO: don't rely on class out-of-commission being set, check and set it here instead
return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text()); return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text());
}); });
//TODO: maxIni wid nicht vergeben wenn damage > 0
// compute highest ini // compute highest ini
let iniMax = Math.max.apply(null, iniValues); let iniMax = Math.max.apply(null, iniValues);
@ -139,7 +138,7 @@ function getEffectiveIni(value, damageLevel1, damageLevel2) {
else { else {
return NaN; return NaN;
} }
//TODO: maybe check here for out-of-commission and return 'dead' or something instead of int //TODO: maybe check here for out-of-commission and return 'dead' or something instead of integer
return effectiveIni < 0 ? 0 : effectiveIni; return effectiveIni < 0 ? 0 : effectiveIni;
} }
@ -172,8 +171,8 @@ function handleAddButtonClick (e) {
// restyle modal // restyle modal
$("#combatantModal .modal-title").text("Add Combatant"); $("#combatantModal .modal-title").text("Add Combatant");
$("#combatantModalAddOkButton").show(); $("#combatantModalAddOkButton").removeClass("d-none");
$("#combatantModalEditOkButton").hide(); $("#combatantModalEditOkButton").addClass("d-none");
// add handler for enter key // add handler for enter key
$("#combatantModal input[id*='combatantModal']").off("keydown"); $("#combatantModal input[id*='combatantModal']").off("keydown");
@ -190,14 +189,14 @@ function handleAddButtonClick (e) {
// click handler for damage buttons; basically toggles visibility of table.damage-monitor // click handler for damage buttons; basically toggles visibility of table.damage-monitor
function handleDamageButtonClick (e) { function handleDamageButtonClick (e) {
// get visibility status at click time // get visibility status at click time
let visAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display"); let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none");
// hide all damage monitors // hide all damage monitors
$(".damage-monitor:visible").css("display", "none"); $(".damage-monitor:visible").addClass("d-none");
// if targeted dm was hidden before, show it now // if targeted dm was hidden before, show it now
if ( visAtClick == "none" ) { if ( hiddenAtClick ) {
$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", "block"); $(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none");
} }
return false; return false;
} }
@ -261,8 +260,8 @@ function handleEditButtonClick (e) {
// restyle modal // restyle modal
$("#combatantModal .modal-title").text("Edit Combatant"); $("#combatantModal .modal-title").text("Edit Combatant");
$("#combatantModalAddOkButton").hide(); $("#combatantModalAddOkButton").addClass("d-none");
$("#combatantModalEditOkButton").show(); $("#combatantModalEditOkButton").removeClass("d-none");
// populate modal with values from row // populate modal with values from row
$("#combatantModalName").val($tr.find(".combatantName").text()); $("#combatantModalName").val($tr.find(".combatantName").text());
@ -290,8 +289,8 @@ function handleEditButtonClick (e) {
function handleNewRoundButton (e) { function handleNewRoundButton (e) {
// restyle modal // restyle modal
$("#confirmModal .modal-title").text("Start new Round"); $("#confirmModal .modal-title").text("Start new Round");
$("#confirmModalNewRoundOkButton").show(); $("#confirmModalNewRoundOkButton").removeClass("d-none");
$("#confirmModalRemoveCombatantOkButton").hide(); $("#confirmModalRemoveCombatantOkButton").addClass("d-none");
// show modal // show modal
$("#comfirmModal").modal("show"); $("#comfirmModal").modal("show");
@ -302,8 +301,8 @@ function handleNewRoundButton (e) {
function handleRemoveButtonClick (e) { function handleRemoveButtonClick (e) {
// restyle modal // restyle modal
$("#confirmModal .modal-title").text("Remove Combatant"); $("#confirmModal .modal-title").text("Remove Combatant");
$("#confirmModalRemoveCombatantOkButton").show(); $("#confirmModalRemoveCombatantOkButton").removeClass("d-none");
$("#confirmModalNewRoundOkButton").hide(); $("#confirmModalNewRoundOkButton").addClass("d-none");
// mark which row is being removed // mark which row is being removed
$("#confirmModal").attr("data-row", $(".combatantRow").index($(e.target).parents(".combatantRow"))); $("#confirmModal").attr("data-row", $(".combatantRow").index($(e.target).parents(".combatantRow")));
@ -544,7 +543,7 @@ $(document).ready(function(){
// Hide damage monitors after click somewhere else // Hide damage monitors after click somewhere else
$("html").on("click", function (e) { $("html").on("click", function (e) {
if ( $(e.target).parents(".damage-monitor").length == 0 ) { if ( $(e.target).parents(".damage-monitor").length == 0 ) {
$(".damage-monitor:visible").css("display", "none"); $(".damage-monitor:visible").addClass("d-none");
} }
}); });