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

* all combatant data is now being stored in data-* attributes

Browse Source 
* switched from CSS to SCSS
* changed all HTML class names, IDs etc. from camelCase to kebab-case
* bootstrap and jquery are now being imported from index.html again, not throug imports
* loading augmented-ui now
This commit is contained in:
Tobias 2023-02-13 23:21:35 +01:00
parent 7cbd8d6c38
commit 43a9aef8b1
4 changed files with 189 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package.json
View File

@ -1,18 +1,29 @@
{ {
"name": "sr2ini", "name": "sr2ini",
"version": "1.0.0", "version": "1.0.0",
"description": "Simple Initiative tracker for Shadowrun 2e.", "description": "Simple Initiative tracker for Shadowrun 2e",
"private": true,
"author": {
"name": "Eclipse729",
"email": "eclipse@unterdemradar.de",
"url": "https://www.unterdemradar.de"
},
"homepage": "https://www.unterdemradar.de/sr2ini",
"license": "ISC",
"source": "src/index.html", "source": "src/index.html",
"devDependencies": { "devDependencies": {
"@parcel/transformer-sass": "^2.8.3", "@parcel/transformer-sass": "^2.8.3",
"parcel": "^2.8.3", "parcel": "^2.8.3",
"parcel-reporter-static-files-copy": "^1.5.0" "parcel-reporter-static-files-copy": "^1.5.0"
}, },
"dependencies": {
},
"staticFiles": { "staticFiles": {
"staticPath": "src/img" "staticPath": "src/img"
}, },
"scripts": { "scripts": {
"start": "npx parcel serve src/index.html --public-url / --dist-dir dist", "start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
"prebuild": "rm -rf dist/",
"build": "npx parcel build", "build": "npx parcel build",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
@ -24,11 +35,4 @@
"Shadowrun", "Shadowrun",
"Initiative tracker", "Initiative tracker",
"sr2e" "sr2e"
], ]}
"author": "Eclipse",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.2.3",
"jquery": "^3.6.3"
}
}

93
src/css/custom.scss
View File

@ -1,7 +1,3 @@
/* Import all of Bootstrap's CSS */
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
header.navbar { header.navbar {
background-image: url("../img/horizon.png"); background-image: url("../img/horizon.png");
} }
@ -12,6 +8,10 @@ span.navbar-brand {
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
} }
header .btn {
--aug-all-width: "42px";
}
input:invalid { input:invalid {
border: 2px solid red; border: 2px solid red;
} }
@ -26,6 +26,18 @@ input:invalid {
font-weight: bold; font-weight: bold;
} }
.combatant-name::after {
content: attr(data-combatant-name);
}
.combatant-dice::after {
content: attr(data-combatant-dice);
}
.combatant-rea::after {
content: attr(data-combatant-rea);
}
.badge.bg-warning { .badge.bg-warning {
left: 12px; left: 12px;
bottom: -4px; bottom: -4px;
@ -41,45 +53,48 @@ input:invalid {
.damage-monitor { .damage-monitor {
position: absolute; position: absolute;
z-index: 20; z-index: 20;
top: 40px; top: 100%;
right: -8px; right: -8px;
width: 60px; width: 60px;
th {
width: 28px;
height: 28px;
padding: 3px;
}
td {
width: 30px;
height: 24px;
}
button {
font-size: smaller;
width: 30px;
height: 24px;
padding: 2px;
}
button.active {
filter: brightness(88%);
}
td button img {
position: relative;
top: -2px;
}
} }
.damage-monitor th { footer {
width: 28px; z-index: -10 !important;
height: 28px;
/* background-color: white;*/
/* border: solid darkgray 1px;*/
padding: 3px;
}
.damage-monitor td { p {
width: 30px; font-size: x-small;
height: 24px; margin-bottom: .5rem;
} }
.damage-monitor button { hr {
font-size: smaller; margin: .5rem 0;
height: 24px; }
width: 30px;
padding: 2px;
} }
.damage-monitor button.active {
filter: brightness(88%);
}
.damage-monitor td button img {
position: relative;
top: -2px;
}
footer p {
font-size: x-small;
margin-bottom: .5rem;
}
footer hr {
margin: .5rem 0;
}

44
src/index.html
View File

@ -9,9 +9,13 @@
<title>Shadowrun 2e Ini Tracker</title> <title>Shadowrun 2e Ini Tracker</title>
<!-- Style sheets --> <!-- Style sheets -->
<link href="css/custom.scss" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" >
<link type="text/css" rel="stylesheet" href="https://unpkg.com/augmented-ui@latest/augmented-ui.min.css">
<link type="text/css" rel="stylesheet" href="css/custom.scss" />
<!-- javascript files --> <!-- javascript files -->
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.min.js"></script>
<script type="module" src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="module" src="js/sr2ini.js" type="text/javascript"></script> <script type="module" src="js/sr2ini.js" type="text/javascript"></script>
</head> </head>
@ -21,12 +25,12 @@
<header class="navbar navbar-expand"> <header class="navbar navbar-expand">
<span class="navbar-brand text-bold ps-4">SR2 Initiative Tracker</span> <span class="navbar-brand text-bold ps-4">SR2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation"> <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" data-bs-toggle="modal" data-bs-target="#combatantModal"><img src="img/add.png" /></button> <button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><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="#confirmModal" title="Start new round"><img src="img/newround.png" /></button> <button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="new-round-button" data-bs-toggle="modal" data-bs-target="#confirm-modal" title="Start new round"><img src="img/newround.png" /></button>
</nav> </nav>
</header> </header>
<div class="table-responsive overflow-visible"> <div class="table-responsive overflow-visible">
<table class="table table-sm" id="combatantsTable"> <table class="table table-sm" id="combatants-table">
<thead> <thead>
<tr> <tr>
<th class="col-4 text-start" title="Name">Name</th> <th class="col-4 text-start" title="Name">Name</th>
@ -41,8 +45,8 @@
</div> </div>
</div> </div>
<div class="modal fade" id="confirmModal" tabindex="-2"> <div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Start New Round</h5> <h5 class="modal-title">Start New Round</h5>
@ -53,40 +57,40 @@
</div> </div>
<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="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
<button type="submit" class="btn btn-primary d-none" id="confirmModalRemoveCombatantOkButton" data-bs-dismiss="modal">OK</button> <button type="submit" class="btn btn-primary d-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal fade" id="combatantModal" tabindex="-1"> <div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Add New Combatant</h5> <h5 class="modal-title">Add New Combatant</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;"> <form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
<div class="my-2"> <div class="my-2">
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required /> <input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-modal-form" placeholder="Name" required />
</div> </div>
<div class="input-group input-group-sm my-2"> <div class="input-group input-group-sm my-2">
<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatantModalDice" form="combatantModalForm" placeholder="Dice" /> <input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-modal-form" placeholder="Dice" />
<span class="input-group-text">D+</span> <span class="input-group-text">D+</span>
<input type="number" min="1" max="25" class="form-control form-control-sm" id="combatantModalRea" form="combatantModalForm" placeholder="REA" /> <input type="number" min="1" max="25" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-modal-form" placeholder="REA" />
</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="combatant-modal-ini" form="combatant-modal-form" 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> <label for="combatant-modal-ini" 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>
<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="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="combatantModalAddOkButton" data-bs-dismiss="modal">OK</button> <button type="submit" class="btn btn-primary" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
<button type="submit" class="btn btn-primary d-none" id="combatantModalEditOkButton" data-bs-dismiss="modal">OK</button> <button type="submit" class="btn btn-primary d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
</div> </div>
</div> </div>
</div> </div>

205
src/js/sr2ini.js
View File

@ -1,23 +1,16 @@
// Import all of jQuery's JS
import * as $ from 'jquery';
// Import Bootstrap's JS
import "bootstrap";
/* /*
* constants definitions * 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"];
const COMBATANT_TABLE_ROW = [ const COMBATANT_TABLE_ROW = [
'<tr class="combatantRow align-middle" data-true-ini="">\n', //TODO: add data-damage-* attributes with initial damage levels '<tr class="combatant-row align-middle" data-true-ini="">\n', //TODO: add data-damage-* attributes with initial damage levels
'<td class="combatantName" title="Combatant\'s name" data-bs-toggle="modal" data-bs-target="#combatantModal"></td>\n', '<td class="combatant-name" title="Combatant\'s name" data-bs-toggle="modal" data-bs-target="#combatant-modal"></td>\n',
'<td class="combatantIni text-center" title="Effective initiative (w/ wound penalties)" data-bs-toggle="modal" data-bs-target="#combatantModal"></td>\n', '<td class="combatant-ini text-center" title="Effective initiative (w/ wound penalties)" data-bs-toggle="modal" data-bs-target="#combatant-modal"></td>\n',
'<td class="text-center combatantDiceAndRea" title="Iniative dice and reaction" data-bs-toggle="modal" data-bs-target="#combatantModal"><span class="combatantDice"></span>D+<span class="combatantRea"></span></td>\n', '<td class="text-center combatant-dice-and-rea" title="Iniative dice and reaction" data-bs-toggle="modal" data-bs-target="#combatant-modal"><span class="combatant-dice"></span>D+<span class="combatant-rea"></span></td>\n',
'<td class="text-end">\n', '<td class="text-end">\n',
'<div class="btn-group">\n', '<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values" data-bs-toggle="modal" data-bs-target="#combatantModal"><img src="edit.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="edit.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 act-button" title="Act and reduce ini by 10"><img src="act.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 p-1 act-button" title="Act and reduce ini by 10"><img src="act.png" /></button>\n',
'<div class="damage-dropdown">\n', '<div class="damage-dropdown">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 damage-button" title="Take damage"><img src="damage.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 p-1 damage-button" title="Take damage"><img src="damage.png" /></button>\n',
@ -41,7 +34,7 @@ const DAMAGE_MONITOR_HTML = [
'<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"></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."><img src="zzz.png" height="16" /></button></td><td><button class="btn btn-sm btn-danger damage-physical" title="dead"><img src="cross.png" height="16"/></button></td></tr>\n', '<tr><td><button class="btn btn-sm btn-warning damage-stun" title="K.O."><img src="zzz.png" height="16" /></button></td><td><button class="btn btn-sm btn-danger damage-physical" title="dead"><img src="cross.png" height="16"/></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="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="#confirm-modal"><img src="trash.png" /></button></th></tr>\n',
'</table>'].join(""); '</table>'].join("");
const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>'; const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>'; const PHYSICAL_BADGE_HTML = '<sub><span class="badge bg-danger position-absolute translate-middle physical-badge" title="Physical damage niveau"></span></sub>';
@ -62,8 +55,8 @@ function rollForInitiative(dice, rea) {
// figure out whose action comes first out of two combatants a and b // figure out whose action comes first out of two combatants a and b
function whoGoesFirst(a, b) { function whoGoesFirst(a, b) {
// check for K.O./death // check for K.O./death
let tmpA = $(a).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(a).find(".combatantIni").text()) || 0; let tmpA = $(a).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(a).find(".combatant-ini").text()) || 0;
let tmpB = $(b).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(b).find(".combatantIni").text()) || 0; let tmpB = $(b).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? -1 : parseInt($(b).find(".combatant-ini").text()) || 0;
// compare ini // compare ini
let compIni = tmpB - tmpA; let compIni = tmpB - tmpA;
if (compIni != 0) { if (compIni != 0) {
@ -71,10 +64,10 @@ function whoGoesFirst(a, b) {
} }
// tie; compare reaction // tie; compare reaction
else { else {
if ($(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "") { if ($(a).find(".combatant-rea").text() == "" || $(b).find(".combatant-rea").text() == "") {
return 0; return 0;
} else { } else {
return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text()); return parseInt($(b).find(".combatant-rea").text()) - parseInt($(a).find(".combatant-rea").text());
} }
} }
} }
@ -91,13 +84,13 @@ function getEffectiveIni(tr) {
// add test combatant for testing purposes (duh) // add test combatant for testing purposes (duh)
function addTestCombatant() { function addTestCombatant() {
// Eclipse // Eclipse
$("#addCombatantButton").click(); $("#add-combatant-button").click();
$("#combatantModalName").val("Eclipse"); $("#combatant-modal-name").val("Eclipse");
$("#combatantModalDice").val(3); $("#combatant-modal-dice").val(3);
$("#combatantModalRea").val(6); $("#combatant-modal-rea").val(6);
// $("#combatantModalIni").val(12); // $("#combatant-modal-ini").val(12);
setTimeout(function () { setTimeout(function () {
$("#combatantModalAddOkButton").click(); $("#combatant-modal-add-ok-button").click();
}, 500); }, 500);
} }
/* /*
@ -106,21 +99,21 @@ function addTestCombatant() {
// click handler for act buttons; reduces ini by 10 // click handler for act buttons; reduces ini by 10
function handleActButtonClick(e) { function handleActButtonClick(e) {
// reduce ini by 10 but not lower than 0 // reduce ini by 10 but not lower than 0
let ini = Math.max(parseInt($(e.target).parents(".combatantRow").attr("data-true-ini")) - 10, 0); let ini = Math.max(parseInt($(e.target).parents(".combatant-row").attr("data-true-ini")) - 10, 0);
// set new ini value // set new ini value
$(e.target).parents(".combatantRow").attr("data-true-ini", ini); $(e.target).parents(".combatant-row").attr("data-true-ini", ini);
// resort table // resort table
sortTable(); sortTable();
} }
// click handler for add buttons // click handler for add buttons
function handleAddButtonClick(e) { function handleAddButtonClick(e) {
// restyle modal // restyle modal
$("#combatantModal .modal-title").text("Add Combatant"); $("#combatant-modal .modal-title").text("Add Combatant");
$("#combatantModalAddOkButton").removeClass("d-none"); $("#combatant-modal-add-ok-button").removeClass("d-none");
$("#combatantModalEditOkButton").addClass("d-none"); $("#combatant-modal-edit-ok-button").addClass("d-none");
// add handler for enter key // add handler for enter key
$("#combatantModal input[id*='combatantModal']").off("keydown"); $("#combatant-modal input[id*='combatant-modal']").off("keydown");
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) { $("#combatant-modal input[id*='combatant-modal']").on("keydown", function (e) {
if (e.which == 13 || e.which == 10) { if (e.which == 13 || e.which == 10) {
addCombatant(e); addCombatant(e);
} }
@ -141,24 +134,24 @@ function handleDamageButtonClick(e) {
// click handler for edit buttons // click handler for edit buttons
function handleEditButtonClick(e) { function handleEditButtonClick(e) {
// find current table row // find current table row
let $tr = $(e.target).parents(".combatantRow"); let $tr = $(e.target).parents(".combatant-row");
// restyle modal // restyle modal
$("#combatantModal .modal-title").text("Edit Combatant"); $("#combatant-modal .modal-title").text("Edit Combatant");
$("#combatantModalAddOkButton").addClass("d-none"); $("#combatant-modal-add-ok-button").addClass("d-none");
$("#combatantModalEditOkButton").removeClass("d-none"); $("#combatant-modal-edit-ok-button").removeClass("d-none");
// populate modal with values from row // populate modal with values from row
$("#combatantModalName").val($tr.find(".combatantName").text()); $("#combatant-modal-name").val($tr.find(".combatant-name").attr("data-combatant-name"));
$("#combatantModalDice").val($tr.find(".combatantDice").text()); $("#combatant-modal-dice").val($tr.find(".combatant-dice").attr("data-combatant-dice"));
$("#combatantModalRea").val($tr.find(".combatantRea").text()); $("#combatant-modal-rea").val($tr.find(".combatant-rea").attr("data-combatant-rea"));
$("#combatantModalIni").val($tr.attr("data-true-ini")); $("#combatant-modal-ini").val($tr.attr("data-true-ini"));
// show effective ini in modal // show effective ini in modal
$("#penalty-stun").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-stun")) || 0]); $("#penalty-stun").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-stun")) || 0]);
$("#penalty-physical").text(DAMAGE_PENALTY[parseInt($tr.attr("data-damage-physical")) || 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").data("row", $(".combatantRow").index($tr)); // here it's okay to use .data() b/c HTML/CSS does not care about this value $("#combatant-modal").data("row", $(".combatant-row").index($tr)); // here it's okay to use .data() b/c HTML/CSS does not care about this value
// add handler for enter key // add handler for enter key
$("#combatantModal input[id*='combatantModal']").off("keydown"); $("#combatant-modal input[id*='combatant-modal']").off("keydown");
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) { $("#combatant-modal input[id*='combatant-modal']").on("keydown", function (e) {
if (e.which == 13 || e.which == 10) { if (e.which == 13 || e.which == 10) {
editCombatant(e); editCombatant(e);
} }
@ -167,43 +160,43 @@ function handleEditButtonClick(e) {
function handleNewRoundButton(e) { function handleNewRoundButton(e) {
// restyle modal // restyle modal
$("#confirmModal .modal-title").text("Start new Round"); $("#confirm-modal .modal-title").text("Start new Round");
$("#confirmModalNewRoundOkButton").removeClass("d-none"); $("#confirm-modal-new-round-ok-button").removeClass("d-none");
$("#confirmModalRemoveCombatantOkButton").addClass("d-none"); $("#confirm-modal-remove-combatant-ok-button").addClass("d-none");
} }
// click handler for remove buttons // click handler for remove buttons
function handleRemoveButtonClick(e) { function handleRemoveButtonClick(e) {
// restyle modal // restyle modal
$("#confirmModal .modal-title").text("Remove Combatant"); $("#confirm-modal .modal-title").text("Remove Combatant");
$("#confirmModalRemoveCombatantOkButton").removeClass("d-none"); $("#confirm-modal-remove-combatant-ok-button").removeClass("d-none");
$("#confirmModalNewRoundOkButton").addClass("d-none"); $("#confirm-modal-new-round-ok-button").addClass("d-none");
// mark which row is being removed // mark which row is being removed
$("#confirmModal").data("row", $(".combatantRow").index($(e.target).parents(".combatantRow"))); // here it's okay to use .data() b/c HTML/CSS does not care about this value $("#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
} }
/* /*
* Main functions * Main functions
*/ */
// add new combatant // add new combatant
function addCombatant(e) { function addCombatant(e) {
e.preventDefault(); // e.preventDefault();
// validate form // validate form
if (!validateCombatant()) { if (!validateCombatant()) {
return false; return false;
} }
// roll for initiative if necessary // roll for initiative if necessary
let ini = $("#combatantModalIni").val().trim(); let ini = $("#combatant-modal-ini").val().trim();
ini = (ini != "") ? ini : rollForInitiative($("#combatantModalDice").val(), $("#combatantModalRea").val()); ini = (ini != "") ? ini : rollForInitiative($("#combatant-modal-dice").val(), $("#combatant-modal-rea").val());
// construct jQuery object for table row // construct jQuery object for table row
let $tr = $($.parseHTML(COMBATANT_TABLE_ROW)); let $tr = $($.parseHTML(COMBATANT_TABLE_ROW));
$tr.find(".damage-dropdown").append($.parseHTML(DAMAGE_MONITOR_HTML)); $tr.find(".damage-dropdown").append($.parseHTML(DAMAGE_MONITOR_HTML));
// 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(".combatant-name").attr("data-combatant-name", $("#combatant-modal-name").val().trim());
$tr.find(".combatantDice").text($("#combatantModalDice").val().trim()); $tr.find(".combatant-dice").attr("data-combatant-dice", $("#combatant-modal-dice").val().trim());
$tr.find(".combatantRea").text($("#combatantModalRea").val().trim()); $tr.find(".combatant-rea").attr("data-combatant-rea", $("#combatant-modal-rea").val().trim());
//TODO: retrieve initial damage levels //TODO: retrieve initial damage levels
// add handler to table cells (click to edit) // add handler to table cells (click to edit)
$tr.find(".combatantName, .combatantIni, .combatantDiceAndRea").on("click", handleEditButtonClick); $tr.find(".combatant-name, .combatant-ini, .combatant-dice-and-rea").on("click", handleEditButtonClick);
// add handlers to action buttons // add handlers to action buttons
$tr.find("button.edit-button").on("click", handleEditButtonClick); $tr.find("button.edit-button").on("click", handleEditButtonClick);
$tr.find("button.act-button").on("click", handleActButtonClick); $tr.find("button.act-button").on("click", handleActButtonClick);
@ -212,19 +205,19 @@ function addCombatant(e) {
// add handler to damage monitor // add handler to damage monitor
$tr.find(".damage-stun, .damage-physical").on("click", applyDamage); $tr.find(".damage-stun, .damage-physical").on("click", applyDamage);
// add row to table and sort // add row to table and sort
$("#combatantsTable").append($tr); $("#combatants-table").append($tr);
sortTable(); sortTable();
} }
// event handler for when any damage monitor is clicked // event handler for when any damage monitor is clicked
function applyDamage(e) { function applyDamage(e) {
let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).parents("button")[0]; let $btn = $(e.target).is("button") ? $(e.target) : $(e.target).parent();
// retrieve new damage level and type from button position and "damage-[type]" class // 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();
let damageType = $btn.attr("class").split(" ").filter(function (cls) { let damageType = $btn.attr("class").split(" ").filter(function (cls) {
return cls.substr(0, 7) == "damage-" ? cls : false; return cls.substr(0, 7) == "damage-" ? cls : false;
}).toString().substr(7); }).toString().substr(7);
// add damage level to table row as as data attribute // add damage level to table row as as data attribute
$btn.parents("tr.combatantRow").attr("data-damage-" + damageType, damageLevel); $btn.parents("tr.combatant-row").attr("data-damage-" + damageType, damageLevel);
// select/unselect damage buttons above/below // select/unselect damage buttons above/below
$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");
@ -234,55 +227,54 @@ function applyDamage(e) {
} }
// edit combatant // edit combatant
function editCombatant(e) { function editCombatant(e) {
e.preventDefault(); // e.preventDefault();
// validate form // validate form
if (!validateCombatant()) { if (!validateCombatant()) {
return false; return false;
} }
// get values // get values
let name = $("#combatantModalName").val().trim(); let name = $("#combatant-modal-name").val().trim();
let ini = $("#combatantModalIni").val().trim(); let ini = $("#combatant-modal-ini").val().trim();
let dice = $("#combatantModalDice").val().trim(); let dice = $("#combatant-modal-dice").val().trim();
let rea = $("#combatantModalRea").val().trim(); let rea = $("#combatant-modal-rea").val().trim();
// roll for initiative if ini is empty // roll for initiative if ini is empty
ini = (ini != "") ? ini : rollForInitiative(dice, rea); ini = (ini != "") ? ini : rollForInitiative(dice, rea);
// get correct row // get correct row
let index = parseInt($("#combatantModal").data("row")); let index = parseInt($("#combatant-modal").data("row"));
$tr = $("tr.combatantRow").eq(index); $tr = $("tr.combatant-row").eq(index);
// set new values // set new values
$tr.find(".combatantName").text(name);
$tr.find(".combatantDice").text(dice);
$tr.find(".combatantRea").text(rea);
$tr.attr("data-true-ini", ini); $tr.attr("data-true-ini", ini);
$tr.find(".combatant-name").attr("data-combatant-name", name);
$tr.find(".combatant-dice").attr("data-combatant-dice", dice);
$tr.find(".combatant-rea").attr("data-combatant-rea", rea);
// sort table // sort table
sortTable(); sortTable();
// clean up // clean up
$("#combatantModal").removeAttr("data-row"); $("#combatant-modal").data("row", "");
} }
// remove combatant // remove combatant
function removeCombatant(e) { function removeCombatant(e) {
e.preventDefault(); e.preventDefault();
// remove correct row // remove correct row
let index = parseInt($("#confirmModal").data("row")); let index = parseInt($("#confirm-modal").data("row"));
$(".combatantRow").eq(index).remove(); $(".combatant-row").eq(index).remove();
sortTable(); sortTable();
// clean up // clean up
$("#confirmModal").removeAttr("data-row"); $("#confirm-modal").data("row", "");
} }
// start a new combat round // start a new combat round
function startNewRound(e) { function startNewRound(e) {
e.preventDefault(); e.preventDefault();
// hide modal
// are there rows at all? // are there rows at all?
if ($(".combatantRow").length == 0) { if ($(".combatant-row").length == 0) {
return; return;
} }
// reset ini values // reset ini values
$(".combatantRow").each(function () { $(".combatant-row").each(function () {
if ($(this).find(".combatantDice").text() == "") { if ($(this).find(".combatant-dice").attr("data-combatant-dice") == "") {
$(this).attr("data-true-ini", 1); $(this).attr("data-true-ini", 1);
} else { } else {
$(this).attr("data-true-ini", rollForInitiative(parseInt($(this).find(".combatantDice").text()), parseInt($(this).find(".combatantRea").text()))); $(this).attr("data-true-ini", rollForInitiative(parseInt($(this).find(".combatant-dice").attr("data-combatant-dice")), parseInt($(this).find(".combatant-rea").attr("data-combatant-rea"))));
} }
}); });
// resort table // resort table
@ -291,30 +283,30 @@ function startNewRound(e) {
// add contextual classes and sort combatants by ini value // add contextual classes and sort combatants by ini value
function sortTable() { function sortTable() {
// do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges // do some clean up: remove previous classes from rows, disable act buttons, remove effective ini and damage badges
$(".combatantRow").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" ")); $(".combatant-row").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" "));
$(".combatantRow").find(".act-button").prop("disabled", true).attr("aria-disabled", "true"); $(".combatant-row").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
$(".combatantIni").empty(); $(".combatant-ini").empty();
// mark KO or death with class // mark KO or death with class
$(".combatantRow").each(function () { $(".combatant-row").each(function () {
if (parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10) { if (parseInt($(this).attr("data-damage-stun")) == 10 || parseInt($(this).attr("data-damage-physical")) == 10) {
$(this).addClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]); $(this).addClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]);
} }
}); });
// compute highest effective ini // compute highest effective ini
let iniMax = Math.max.apply(null, $.map($(".combatantRow"), function (tr, i) { let iniMax = Math.max.apply(null, $.map($(".combatant-row"), function (tr, i) {
// write current effective ini to table row // write current effective ini to table row
$(tr).find(".combatantIni").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr))); $(tr).find(".combatant-ini").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr)));
return $(tr).find(".combatantIni").text(); return $(tr).find(".combatant-ini").text();
})); }));
// add damage badges and contextual classes // add damage badges and contextual classes
$(".combatantRow").each(function () { $(".combatant-row").each(function () {
// damage badges // damage badges
if ($(this).attr("data-damage-stun") && $(this).attr("data-damage-stun") != "0") { if ($(this).attr("data-damage-stun") && $(this).attr("data-damage-stun") != "0") {
$(this).find(".combatantIni").append($.parseHTML(STUN_BADGE_HTML)); $(this).find(".combatant-ini").append($.parseHTML(STUN_BADGE_HTML));
$(this).find(".stun-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-stun")]]); $(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") { if ($(this).attr("data-damage-physical") && $(this).attr("data-damage-physical") != "0") {
$(this).find(".combatantIni").append($.parseHTML(PHYSICAL_BADGE_HTML)); $(this).find(".combatant-ini").append($.parseHTML(PHYSICAL_BADGE_HTML));
$(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]); $(this).find(".physical-badge").append(DAMAGE_NIVEAU[DAMAGE_PENALTY[$(this).attr("data-damage-physical")]]);
} }
// K.O./dead -> don't add anything // K.O./dead -> don't add anything
@ -322,12 +314,12 @@ function sortTable() {
return true; return true;
} }
// ini = zero // ini = zero
if (parseInt($(this).find(".combatantIni").text()) == 0) { if (parseInt($(this).find(".combatant-ini").text()) == 0) {
$(this).addClass(CONTEXTUAL_CLASSES["ZERO_INI"]); $(this).addClass(CONTEXTUAL_CLASSES["ZERO_INI"]);
return true; return true;
} }
// ini = max and non-zero // ini = max and non-zero
if (parseInt($(this).find(".combatantIni").text()) == iniMax && iniMax > 0) { if (parseInt($(this).find(".combatant-ini").text()) == iniMax && iniMax > 0) {
$(this).addClass(CONTEXTUAL_CLASSES["MAX_INI"]).find(".act-button").prop("disabled", false).removeAttr("aria-disabled"); $(this).addClass(CONTEXTUAL_CLASSES["MAX_INI"]).find(".act-button").prop("disabled", false).removeAttr("aria-disabled");
return true; return true;
} }
@ -335,9 +327,9 @@ function sortTable() {
$(this).addClass(CONTEXTUAL_CLASSES["REGULAR_INI"]); $(this).addClass(CONTEXTUAL_CLASSES["REGULAR_INI"]);
}) })
// sort rows and append them in new order // sort rows and append them in new order
let $rows = $(".combatantRow").toArray().sort(whoGoesFirst); let $rows = $(".combatant-row").toArray().sort(whoGoesFirst);
for (let i = 0; i < $rows.length; i++) { for (let i = 0; i < $rows.length; i++) {
$("#combatantsTable").append($rows[i]); $("#combatants-table").append($rows[i]);
} }
return; return;
} }
@ -345,10 +337,10 @@ function sortTable() {
function validateCombatant() { function validateCombatant() {
// get input elements // get input elements
let inputElements = { let inputElements = {
name: $("#combatantModalName").get(0), name: $("#combatant-modal-name").get(0),
ini: $("#combatantModalIni").get(0), ini: $("#combatant-modal-ini").get(0),
dice: $("#combatantModalDice").get(0), dice: $("#combatant-modal-dice").get(0),
rea: $("#combatantModalRea").get(0) rea: $("#combatant-modal-rea").get(0)
}; };
// do standard HTML5 form validation first // do standard HTML5 form validation first
// (makes sure that name is not empty and that all other values are numbers within their individual ranges) // (makes sure that name is not empty and that all other values are numbers within their individual ranges)
@ -387,20 +379,20 @@ function validateCombatant() {
*/ */
$(document).ready(function () { $(document).ready(function () {
// add event handlers to navbar buttons // add event handlers to navbar buttons
$("#addCombatantButton").on("click", handleAddButtonClick); $("#add-combatant-button").on("click", handleAddButtonClick);
$("#newRoundButton").on("click", handleNewRoundButton); $("#new-round-button").on("click", handleNewRoundButton);
// add event handlers to modal buttons // add event handlers to modal buttons
$("#combatantModalAddOkButton").on("click", addCombatant); $("#combatant-modal-add-ok-button").on("click", addCombatant);
$("#combatantModalEditOkButton").on("click", editCombatant); $("#combatant-modal-edit-ok-button").on("click", editCombatant);
$("#confirmModalNewRoundOkButton").on("click", startNewRound); $("#confirm-modal-new-round-ok-button").on("click", startNewRound);
$("#confirmModalRemoveCombatantOkButton").on("click", removeCombatant); $("#confirm-modal-remove-combatant-ok-button").on("click", removeCombatant);
// always focus name input field when combatant modal appears // always focus name input field when combatant modal appears
$('#combatantModal').on('shown.bs.modal', function () { $('#combatant-modal').on('shown.bs.modal', function () {
$('#combatantModalName').focus(); $('#combatant-modal-name').focus();
}); });
// always empty input fields when combatant modal disappears // always empty input fields when combatant modal disappears
$("#combatantModal").on('hidden.bs.modal', function (e) { $("#combatant-modal").on('hidden.bs.modal', function (e) {
$("#combatantModal input[id*='combatantModal']").val(""); $("#combatant-modal input[id*='combatant-modal']").val("");
}); });
// Hide damage monitors after click somewhere else // Hide damage monitors after click somewhere else
$("html").on("click", function (e) { $("html").on("click", function (e) {
@ -409,5 +401,4 @@ $(document).ready(function () {
} }
}); });
addTestCombatant(); addTestCombatant();
console.log("trololol");
}); });