eclipse/sr2ini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

- added working remove button

Browse Source 
- remove now asks to confirm
- only one damage monitor is open at any time
This commit is contained in:
Tobias 2023-02-08 00:01:23 +01:00
parent 8517c7f7e8
commit c82a3e41d8
6 changed files with 110 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/custom.css
View File

@ -15,7 +15,7 @@ input:invalid {
background-color: darkslategray;
}
.max-ini {
.table-primary {
font-weight: bold;
}
@ -42,10 +42,10 @@ input:invalid {
}
.damage-monitor th {
width: 30px;
height: 30px;
width: 28px;
height: 28px;
/* background-color: white;*/
border: solid darkgray 1px;
/* border: solid darkgray 1px;*/
padding: 3px;
}
@ -54,6 +54,8 @@ input:invalid {
height: 24px;
}
.damage-monitor button {
font-size: smaller;
height: 24px;
@ -63,3 +65,7 @@ input:invalid {
.damage-monitor button.active {
filter: brightness(91%);
}
/*$light: steelblue;
@import "bootstrap";
*/

BIN
img/skull.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 827 B

BIN
img/trash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 549 B

BIN
img/zzz.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 719 B

7
index.html
View File

@ -28,7 +28,7 @@
<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="btn btn-light btn-rounded mx-1 p-1" id="addCombatantButton" title="Add combatant"><img src="img/add.png" /></button>
<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="img/refresh.png" /></button>
<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#confirmModal" title="Start new round"><img src="img/refresh.png" /></button>
</nav>
</header>
</br>
@ -51,7 +51,7 @@
</div>
</div>
<div class="modal fade" id="newRoundModal" tabindex="-2">
<div class="modal fade" id="confirmModal" tabindex="-2">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
@ -63,7 +63,8 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="newroundModalOkButton" 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>
</div>
</div>
</div>

136
js/sr2ini.js
View File

@ -1,32 +1,32 @@
/*
* helper functions
*/
const penalty = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
const dmg = ["", "L", "M", "S", "D"];
const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center">\n',
'<thead>\n',
'<tr><th title="Stun damage"><img src="img/zzz.png" /></th><th title="Physical Damage"><img src="img/skull.png" /></th></tr>\n',
'</thead>\n',
'<tbody>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-1">L</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-1">L</button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-1"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-1"></button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-2">M</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2">M</button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-2"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2"></button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-2"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-2"></button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3">S</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3">S</button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="-3"></button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="-3"></button></td></tr>\n',
'<tr><td class="damage-stun"><button class="btn btn-sm btn-warning align-middle" title="K.O.">D</button></td><td class="damage-physical"><button class="btn btn-sm btn-danger" title="dead">D</button></td></tr>\n',
'</tbody>\n',
const damageMonitorHTML = ['<table class="bg-light damage-monitor text-center align-middle">\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-danger damage-physical active" title="+/-0">0</button></td>\n',
'</tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Light stun damage">L</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Light physical damage">L</button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Medium stun damage">M</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Medium physical damage">M</button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="Severe stun damage">S</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="Severe physical damage">S</button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun"></button></td><td><button class="btn btn-sm btn-danger damage-physical"></button></td></tr>\n',
'<tr><td><button class="btn btn-sm btn-warning damage-stun" title="K.O.">D</button></td><td><button class="btn btn-sm btn-danger damage-physical" title="dead">D</button></td></tr>\n',
'<tr><th colspan="2"><button type)"submit" class="btn btn-sm btn-light remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirmModal"><img src="img/trash.png" /></button></th></tr>\n',
'</table>'].join("");
const maxIniClass = "max-ini";
const maxIniClass = "table-primary";
const zeroIniClass = "table-secondary";
/*
* helper functions
*/
// roll for initiative with the given reaction and number of ini dice
function rollForInitiative(dice, rea) {
let ini = 0;
@ -67,12 +67,16 @@ function sortTable() {
$(".combatantRow").removeClass(maxIniClass + " " + zeroIniClass).find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
// get ini value for every combatant; set to 0 if K.O./dead
let iniValues = $.map( $(".combatantIni"), function(td, i) {
return $(td).parents(".combatantRow").hasClass("out-of-commission") ? 0 : parseInt($(td).text());
let iniValues = $.map( $(".combatantRow"), function(tr, i) {
console.log($(tr).find(".combatantIni"));
return $(tr).hasClass("out-of-commission") ? 0 : parseInt($(tr).find(".combatantIni").text());
});
console.log(iniValues);
//TODO: maxIni wid nicht vergeben wenn damage > 0
// compute highest ini
let iniMax = Math.max.apply(null, iniValues);
console.log(iniValues);
// add contextual classes
$(".combatantRow").each( function() {
@ -165,10 +169,18 @@ function handleAddButtonClick (e) {
$("#combatantModal").modal("show");
}
// click handler for damage buttons
// click handler for damage buttons; basically toggles visibility of table.damage-monitor
function handleDamageButtonClick (e) {
let display = $(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display");
$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", display == "block" ? "none" : "block");
// get visibility status at click time
let visAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display");
// hide all damage monitors
$(".damage-monitor:visible").css("display", "none");
// if targeted dm was hidden before, show it now
if ( visAtClick == "none" ) {
$(e.target).parents(".damage-dropdown").find(".damage-monitor").css("display", "block");
}
return false;
}
@ -181,11 +193,12 @@ function handleDamageMonitorClick (e) {
let otherDamageLevel
// calculate new damage level and type
let damageLevel = $btn.parent().parent().index() + 1;
if ( $btn.parent().hasClass("damage-stun") ) {
let damageLevel = $btn.parent().parent().index();
console.log("damage level is", damageLevel);
if ( $btn.hasClass("damage-stun") ) {
damageType = "stun";
otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0;
} else if ( $btn.parent().hasClass("damage-physical") ) {
} else if ( $btn.hasClass("damage-physical") ) {
damageType = "physical";
otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0;
} else {
@ -202,8 +215,8 @@ function handleDamageMonitorClick (e) {
// select/unselect damage boxes
$btn.addClass("active");
$btn.parent().parent().nextAll().find("td.damage-" + damageType + " button").removeClass("active");
$btn.parent().parent().prevAll().find("td.damage-" + damageType + " button").addClass("active");
$btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active");
$btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active");
// recalculate effective ini
$tr.find(".combatantIni").text(getEffectiveIni($tr));
@ -255,10 +268,29 @@ function handleEditButtonClick (e) {
}
function handleNewRoundButton (e) {
// restyle modal
$("#confirmModal .modal-title").text("Start new Round");
$("#confirmModalNewRoundOkButton").show();
$("#confirmModalRemoveCombatantOkButton").hide();
// show modal
$("#comfirmModal").modal("show");
}
// click handler for remove buttons
function handleRemoveButtonClick (e) {
// remove table row
$(e.target).parents(".combatantRow").remove();
// restyle modal
$("#confirmModal .modal-title").text("Remove Combatant");
$("#confirmModalRemoveCombatantOkButton").show();
$("#confirmModalNewRoundOkButton").hide();
// mark which row is being removed
$("#confirmModal").attr("data-row", $(".combatantRow").index($(e.target).parents(".combatantRow")));
// show modal
$("#comfirmModal").modal("show");
}
@ -369,8 +401,8 @@ function addCombatant (e) {
// add handlers to table row buttons
$tr.find("button.edit-button").on("click", handleEditButtonClick);
$tr.find("button.act-button").on("click", handleActButtonClick);
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
$tr.find("button.damage-button").on("click", handleDamageButtonClick);
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
// add handler to table cells (click to edit)
$tr.find(".combatantName, .combatantIni, .combatantDiceAndRea").on("click", handleEditButtonClick);
@ -384,7 +416,7 @@ function addCombatant (e) {
}
// edit combatant values
// edit combatant
function editCombatant (e) {
e.preventDefault();
@ -423,9 +455,29 @@ function editCombatant (e) {
$("#combatantModal").removeAttr("data-row");
}
// remove combatant
function removeCombatant (e) {
e.preventDefault();
// hide modal
$("#confirmModal").modal("hide");
// remove correct row
let index = parseInt($("#confirmModal").attr("data-row"));
$(".combatantRow").eq(index).remove();
// clean up
$("#confirmModal").removeAttr("data-row");
}
// start a new combat round
function newRound() {
function startNewRound (e) {
e.preventDefault();
// hide modal
$("#confirmModal").modal("hide");
// are there rows at all?
if ( $(".combatantRow").length == 0 ) {
return;
@ -468,26 +520,30 @@ function addTestCombatant() {
$(document).ready(function(){
// add event handlers to navbar buttons
$("#addCombatantButton").on("click", handleAddButtonClick);
$("#newroundModalOkButton").on("click", newRound);
$("#newRoundButton").on("click", handleNewRoundButton);
// add event handlers to modal buttons
$("#combatantModalAddOkButton").on("click", addCombatant);
$("#combatantModalEditOkButton").on("click", editCombatant);
$("#confirmModalNewRoundOkButton").on("click", startNewRound);
$("#confirmModalRemoveCombatantOkButton").on("click", removeCombatant);
// always focus name input field when combatant modal appears
$('#combatantModal').on('shown.bs.modal', function() {
$('#combatantModalName').focus();
});
// always empty input fields when combatant modal disappears
$("#combatantModal").on('hidden.bs.modal', function (e) {
$("#combatantModal input[id*='combatantModal']").val("");
});
// Hide damage monitors if mouse is clicked outside
$("html").on("click", function(e) {
if (! $(e.target).is("td[class*='damage-'] > button") ) {
// Hide damage monitors after click somewhere else
$("html").on("click", function (e) {
if ( $(e.target).parents(".damage-monitor").length == 0 ) {
$(".damage-monitor:visible").css("display", "none");
}
});
addTestCombatant();