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

- streamlined handling of contextual classes and damage badges; these are now all being applied in sortTable only

Browse Source 
- combatantModal now displays wound penalties
- when two combatants have the same ini: only compare reaction values if both are set, report tie otherwise
- elegantified certain commands, e.g. retrieving damage type in applyDamage (formerly handleDamageMonitorClick)
- rearranged some of the functions in sr2ini.js
This commit is contained in:
Tobias 2023-02-09 14:26:51 +01:00
parent 10830728b2
commit 493d7160b6
3 changed files with 177 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/custom.css
View File

@ -21,7 +21,7 @@ input:invalid {
border: 2px solid red; border: 2px solid red;
} }
.out-of-commission { .ko-or-dead {
color: coral; color: coral;
text-decoration: line-through; text-decoration: line-through;
background-color: darkslategray; background-color: darkslategray;

1
index.html
View File

@ -88,6 +88,7 @@
</div> </div>
<div class="my-2"> <div class="my-2">
<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" /> <input type="number" min="0" max="55" class="form-control form-control-sm" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" />
<label for="combatantModalIni" class="form-label">Wound penalties: -<span id="penalty-stun">0</span> (stun) and -<span id="penalty-physical">0</span> (physical)</label>
</div> </div>
</form> </form>
</div> </div>

368
js/sr2ini.js
View File

@ -1,3 +1,7 @@
/*
* constants definitions
*/
const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4]; const DAMAGE_PENALTY = [0, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4];
const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"]; const DAMAGE_NIVEAU = ["", "L", "M", "S", "D"];
@ -36,9 +40,16 @@ const DAMAGE_MONITOR_HTML = [
'<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', '<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(""); '</table>'].join("");
const MAX_INI_CLASS = "table-primary"; const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
const ZERO_INI_CLASS = "table-secondary"; const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
const REGULAR_INI_CLASS = "table-success";
const CONTEXTUAL_CLASSES = {
MAX_INI: "table-primary",
ZERO_INI: "table-secondary",
REGULAR_INI: "table-success",
KO_OR_DEAD: "ko-or-dead",
};
/* /*
* helper functions * helper functions
@ -47,7 +58,6 @@ const REGULAR_INI_CLASS = "table-success";
// roll for initiative with the given reaction and number of ini dice // roll for initiative with the given reaction and number of ini dice
function rollForInitiative(dice, rea) { function rollForInitiative(dice, rea) {
let diceRolls = Array.from({length: parseInt(dice)}, () => Math.ceil(Math.random() * 6)); let diceRolls = Array.from({length: parseInt(dice)}, () => Math.ceil(Math.random() * 6));
console.log(diceRolls);
return diceRolls.reduce((a, b) => a + b, 0) + parseInt(rea); return diceRolls.reduce((a, b) => a + b, 0) + parseInt(rea);
} }
@ -56,90 +66,49 @@ console.log(diceRolls);
function whoGoesFirst(a, b) { function whoGoesFirst(a, b) {
// check for K.O./death // check for K.O./death
let tmpA = $(a).hasClass("out-of-commission") ? -1 : parseInt($(a).find(".combatantIni").text()) || 0; let tmpA = $(a).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(a).find(".combatantIni").text()) || 0;
let tmpB = $(b).hasClass("out-of-commission") ? -1 : parseInt($(b).find(".combatantIni").text()) || 0; let tmpB = $(b).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(b).find(".combatantIni").text()) || 0;
// compare ini // compare ini
let comparer = tmpB - tmpA; let comparer = tmpB - tmpA;
if (comparer != 0) { if (comparer != 0) {
return comparer; return comparer;
} else }
// tie; compare reaction // tie; compare reaction
{ else {
tmpA = parseInt($(a).find(".combatantRea").text()) || 0; if ( $(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "" ) {
tmpB = parseInt($(b).find(".combatantRea").text()) || 0 return 0;
return tmpB - tmpA; } else {
return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text());
}
} }
} }
// add contextual classes and sort combatants by ini value
function sortTable() {
// remove previous classes from rows, disable act buttons
$(".combatantRow").removeClass(MAX_INI_CLASS + " " + ZERO_INI_CLASS + " " + REGULAR_INI_CLASS).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( $(".combatantRow"), function(tr, i) {
//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());
});
// compute highest ini
let iniMax = Math.max.apply(null, iniValues);
// add contextual classes
//TODO: I should probably add badges here as well, maybe even effectiveIni
$(".combatantRow").each( function() {
// K.O./dead -> don't add anything
if ( $(this).hasClass("out-of-commission") ) {
return true;
}
// ini = zero
if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
$(this).addClass(ZERO_INI_CLASS);
return true;
}
// ini = max and non-zero
if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
$(this).addClass(MAX_INI_CLASS).find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
return true;
}
// everything else
$(this).addClass(REGULAR_INI_CLASS);
})
// sort rows and append them in new order
let $rows = $(".combatantRow").toArray().sort(whoGoesFirst);
for ( var i = 0; i < $rows.length; i++ ) {
$("#combatantsTable").append($rows[i]);
}
return;
}
// returns a combatant's effective ini value (modified by wound penalties) // returns a combatant's effective ini value (modified by wound penalties)
function getEffectiveIni(value, damageLevel1, damageLevel2) { function getEffectiveIni(tr) {
let effectiveIni; // return -1 if combatant is K.O. or dead
if ($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) {
return -1;
}
// was function called with 1 argument (tr jQuery object)? // otherwise compute effective ini (true ini minus wound penalties)
if ( arguments.length == 1 && $(value).is("tr.combatantRow") ) { let effectiveIni = parseInt($(tr).attr("data-true-ini")) - DAMAGE_PENALTY[parseInt($(tr).attr("data-damage-stun")) || 0] - DAMAGE_PENALTY[parseInt($(tr).attr("data-damage-physical")) || 0];
let trueIni = parseInt($(value).attr("data-true-ini")); return Math.max(effectiveIni, 0);
let damageStun = parseInt($(value).attr("data-damage-stun")) || 0; }
let damagePhysical = parseInt($(value).attr("data-damage-physical")) || 0;
effectiveIni = trueIni - DAMAGE_PENALTY[damageStun] - DAMAGE_PENALTY[damagePhysical];
} // add test combatant for testing purposes (duh)
// or with 3 arguments (ini and damage levels)? function addTestCombatant() {
else if ( arguments.length == 3 ) { // Eclipse
effectiveIni = parseInt(value) - DAMAGE_PENALTY[parseInt(damageLevel1)] - DAMAGE_PENALTY[parseInt(damageLevel2)]; $("#addCombatantButton").click();
} $("#combatantModalName").val("Eclipse");
// $("#combatantModalDice").val(3);
else { $("#combatantModalRea").val(6);
return NaN; // $("#combatantModalIni").val(12);
} setTimeout(function(){
//TODO: maybe check here for out-of-commission and return 'dead' or something instead of integer $("#combatantModalAddOkButton").click();
return effectiveIni < 0 ? 0 : effectiveIni; },500);
} }
@ -147,19 +116,14 @@ function getEffectiveIni(value, damageLevel1, damageLevel2) {
* Event handler functions * Event handler functions
*/ */
// click handler for act buttons // click handler for act buttons; reduces ini by 10
function handleActButtonClick (e) { function handleActButtonClick (e) {
// find current table row
let $tr = $(e.target).parents(".combatantRow");
let ini = $tr.attr("data-true-ini");
// reduce ini by 10 but not lower than 0 // reduce ini by 10 but not lower than 0
ini = Math.max(parseInt(ini) - 10, 0); let ini = Math.max(parseInt($(e.target).parents(".combatantRow").attr("data-true-ini")) - 10, 0);
// set new ini value // set new ini value
// can't use text() here because that would delete wound badges $(e.target).parents(".combatantRow").attr("data-true-ini", ini);
$tr.attr("data-true-ini", ini);
$tr.find(".combatantIni").contents()[0].data = getEffectiveIni($tr);
// resort table // resort table
sortTable(); sortTable();
@ -186,8 +150,10 @@ function handleAddButtonClick (e) {
$("#combatantModal").modal("show"); $("#combatantModal").modal("show");
} }
// 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 hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none"); let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none");
@ -204,55 +170,28 @@ function handleDamageButtonClick (e) {
// click handler for damage monitor fields // click handler for damage monitor fields
function handleDamageMonitorClick (e) { function handleDamageMonitorClick (e) {
let $btn = $(e.target);
let $tr = $btn.parents("tr.combatantRow");
let damageType;
let otherDamageLevel
// calculate new damage level and type let $btn = $(e.target);
// retrieve new damage level and type from button position and "damage-[type]" class
let damageLevel = $btn.parent().parent().index(); let damageLevel = $btn.parent().parent().index();
console.log("damage level is", damageLevel); let damageType = $btn.attr("class").split(" ").filter(function(cls) {
if ( $btn.hasClass("damage-stun") ) { return cls.substr(0, 7) == "damage-" ? cls : false;
damageType = "stun"; }).toString().substr(7);
otherDamageLevel = $tr.attr("data-damage-physical") ? parseInt($tr.attr("data-damage-physical")) : 0;
} else if ( $btn.hasClass("damage-physical") ) {
damageType = "physical";
otherDamageLevel = $tr.attr("data-damage-stun") ? parseInt($tr.attr("data-damage-stun")) : 0;
} else {
return false;
}
// add damage level to table row as as data attribute // add damage level to table row as as data attribute
$tr.attr("data-damage-" + damageType, damageLevel); $btn.parents("tr.combatantRow").attr("data-damage-" + damageType, damageLevel);
//TODO: class out-of-commission should be set in sortTable() with the other contextual classes
if ( damageLevel == 10 || otherDamageLevel == 10 ) { // select/unselect damage buttons above/below
$tr.addClass("out-of-commission");
} else {
$tr.removeClass("out-of-commission");
}
// select/unselect damage boxes
$btn.addClass("active"); $btn.addClass("active");
$btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active"); $btn.parent().parent().nextAll().find("button.damage-" + damageType).removeClass("active");
$btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active"); $btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active");
// recalculate effective ini
$tr.find(".combatantIni").text(getEffectiveIni($tr));
// add damage level badges
if ( $tr.attr("data-damage-stun") && $tr.attr("data-damage-stun") != "0" ) {
$tr.find(".combatantIni").append('<sup><span class="badge bg-warning position-absolute translate-middle" title="Stun damage niveau">' + DAMAGE_NIVEAU[DAMAGE_PENALTY[$tr.attr("data-damage-stun")]] + '</span></sup>');
}
if ( $tr.attr("data-damage-physical") && $tr.attr("data-damage-physical") != "0" ) {
$tr.find(".combatantIni").append('<sub><span class="badge bg-danger position-absolute translate-middle" title="Physical damage niveau">' + DAMAGE_NIVEAU[DAMAGE_PENALTY[$tr.attr("data-damage-physical")]] + '</span></sub>');
}
// resort // resort
sortTable(); sortTable();
// return false;
} }
// click handler for edit buttons // click handler for edit buttons
function handleEditButtonClick (e) { function handleEditButtonClick (e) {
// find current table row // find current table row
@ -268,8 +207,11 @@ function handleEditButtonClick (e) {
$("#combatantModalDice").val($tr.find(".combatantDice").text()); $("#combatantModalDice").val($tr.find(".combatantDice").text());
$("#combatantModalRea").val($tr.find(".combatantRea").text()); $("#combatantModalRea").val($tr.find(".combatantRea").text());
$("#combatantModalIni").val($tr.attr("data-true-ini")); $("#combatantModalIni").val($tr.attr("data-true-ini"));
//TODO: show effective ini in modal
// 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]);
// mark which row is being edited // mark which row is being edited
$("#combatantModal").attr("data-row", $(".combatantRow").index($tr)); $("#combatantModal").attr("data-row", $(".combatantRow").index($tr));
@ -312,58 +254,6 @@ function handleRemoveButtonClick (e) {
} }
/*
* Validation functions
*/
// validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombatant() {
// get input elements
let inputElements = {
name: $("#combatantModalName").get(0),
ini: $("#combatantModalIni").get(0),
dice: $("#combatantModalDice").get(0),
rea: $("#combatantModalRea").get(0)
};
// do standard HTML5 form validation first
// (makes sure that name is not empty and that all other values are numbers within their individual ranges)
let valid = true;
Object.values(inputElements).forEach(function(input) {
if ( ! input.reportValidity() ) {
valid = false;
}
})
if ( ! valid ) {
return false;
}
// now for some custom validation; first we need to get the input values
let ini = inputElements["ini"].value.trim();
let dice = inputElements["dice"].value.trim();
let rea = inputElements["rea"].value.trim();
// invalidate if ini, dice and rea are all empty
if ( ini == "" && ( dice == "" || rea == "" ) ) {
inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three");
inputElements["ini"].reportValidity();
inputElements["ini"].setCustomValidity("");
return false;
}
// invalidate if dice or rea is empty but not both
if ( ( dice == "" ) != ( rea == "" ) ) {
inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
inputElements["dice"].reportValidity();
inputElements["dice"].setCustomValidity("");
return false;
}
// ok then
return true;
}
/* /*
* Main functions * Main functions
@ -393,7 +283,6 @@ function addCombatant (e) {
// populate table row with values from modal // populate table row with values from modal
$tr.attr("data-true-ini", ini); $tr.attr("data-true-ini", ini);
$tr.find(".combatantName").text($("#combatantModalName").val().trim()); $tr.find(".combatantName").text($("#combatantModalName").val().trim());
$tr.find(".combatantIni").text(getEffectiveIni(ini, 0, 0)); // don't need to use contents()[0].data here b/c wound badges are added later
$tr.find(".combatantDice").text($("#combatantModalDice").val().trim()); $tr.find(".combatantDice").text($("#combatantModalDice").val().trim());
$tr.find(".combatantRea").text($("#combatantModalRea").val().trim()); $tr.find(".combatantRea").text($("#combatantModalRea").val().trim());
@ -448,8 +337,6 @@ function editCombatant (e) {
$tr.find(".combatantDice").text(dice); $tr.find(".combatantDice").text(dice);
$tr.find(".combatantRea").text(rea); $tr.find(".combatantRea").text(rea);
$tr.attr("data-true-ini", ini); $tr.attr("data-true-ini", ini);
$tr.find(".combatantIni").text(getEffectiveIni($tr));
//TODO: add badges
// sort table // sort table
sortTable(); sortTable();
@ -488,13 +375,11 @@ function startNewRound (e) {
// reset ini values // reset ini values
$(".combatantRow").each( function() { $(".combatantRow").each( function() {
let dice = $(this).find(".combatantDice").text(); if ( $(this).find(".combatantDice").text() == "" ) {
if ( dice == "" ) { $(this).attr("data-true-ini", 1);
$(this).attr("data-true-ini", "1");
} else { } else {
$(this).attr("data-true-ini", rollForInitiative(dice, $(this).find(".combatantRea").text())); $(this).attr("data-true-ini", rollForInitiative(parseInt($(this).find(".combatantDice").text()), parseInt($(this).find(".combatantRea").text())));
} }
$(this).find(".combatantIni").contents()[0].data = getEffectiveIni($(this));
}); });
// resort table // resort table
@ -502,19 +387,116 @@ function startNewRound (e) {
} }
// add test combatant for testing purposes (duh) // add contextual classes and sort combatants by ini value
function addTestCombatant() { function sortTable() {
// Eclipse // do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges
$("#addCombatantButton").click(); $(".combatantRow").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" "));
$("#combatantModalName").val("Eclipse"); $(".combatantRow").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
$("#combatantModalDice").val(3); $(".combatantIni").empty();
$("#combatantModalRea").val(6);
// $("#combatantModalIni").val(12); // mark KO or death with class
setTimeout(function(){ $(".combatantRow").each(function() {
$("#combatantModalAddOkButton").click(); if ( parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10 ) {
},500); $(this).addClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]);
}
});
// compute highest effective ini
let iniMax = Math.max.apply(null, $.map( $(".combatantRow"), function(tr, i) {
// write current effective ini to table row
$(tr).find(".combatantIni").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr)));
return $(tr).find(".combatantIni").text();
}));
// add damage badges and contextual classes
$(".combatantRow").each(function() {
// damage badges
if ( $(this).attr("data-damage-stun") && $(this).attr("data-damage-stun") != "0" ) {
$(this).find(".combatantIni").append($.parseHTML(STUN_BADGE_HTML));
$(this).find(".stun-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-stun")]]);
}
if ( $(this).attr("data-damage-physical") && $(this).attr("data-damage-physical") != "0" ) {
$(this).find(".combatantIni").append($.parseHTML(PHYSICAL_BADGE_HTML));
$(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]);
}
// K.O./dead -> don't add anything
if ( $(this).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) {
return true;
}
// ini = zero
if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
$(this).addClass(CONTEXTUAL_CLASSES["ZERO_INI"]);
return true;
}
// ini = max and non-zero
if ( parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0 ) {
$(this).addClass(CONTEXTUAL_CLASSES["MAX_INI"]).find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
return true;
}
// everything else
$(this).addClass(CONTEXTUAL_CLASSES["REGULAR_INI"]);
})
// sort rows and append them in new order
let $rows = $(".combatantRow").toArray().sort(whoGoesFirst);
for ( var i = 0; i < $rows.length; i++ ) {
$("#combatantsTable").append($rows[i]);
}
return;
} }
// validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombatant() {
// get input elements
let inputElements = {
name: $("#combatantModalName").get(0),
ini: $("#combatantModalIni").get(0),
dice: $("#combatantModalDice").get(0),
rea: $("#combatantModalRea").get(0)
};
// do standard HTML5 form validation first
// (makes sure that name is not empty and that all other values are numbers within their individual ranges)
let valid = true;
Object.values(inputElements).forEach(function(input) {
if ( ! input.reportValidity() ) {
valid = false;
}
})
if ( ! valid ) {
return false;
}
// now for some custom validation; first we need to get the input values
let ini = inputElements["ini"].value.trim();
let dice = inputElements["dice"].value.trim();
let rea = inputElements["rea"].value.trim();
// invalidate if ini, dice and rea are all empty
if ( ini == "" && ( dice == "" || rea == "" ) ) {
inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three");
inputElements["ini"].reportValidity();
inputElements["ini"].setCustomValidity("");
return false;
}
// invalidate if dice or rea is empty but not both
if ( ( dice == "" ) != ( rea == "" ) ) {
inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
inputElements["dice"].reportValidity();
inputElements["dice"].setCustomValidity("");
return false;
}
// ok then
return true;
}
/* /*
* Initialize document * Initialize document
*/ */