Integrated project into toolchain around node.js, npm and parcel. Had to modify directory structure, asset links, filenames and quite a bit more. Works now.
This commit is contained in:
parent
26a9c216ab
commit
7cbd8d6c38
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.cache/
|
||||||
|
.parcel-cache/
|
||||||
|
package-lock.json
|
||||||
|
.eslintrc.json
|
||||||
|
.parcelrc
|
||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
@ -1,3 +1,3 @@
|
|||||||
# SR2-Ini
|
# sr2ini
|
||||||
|
|
||||||
Simple Initiative tracker for Shadowrun 2e (and maybe 3e at a later time).
|
Simple Initiative tracker for Shadowrun 2e.
|
||||||
7
css/bootstrap.min.css
vendored
7
css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
110
index.html
110
index.html
@ -1,110 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<title>Shadowrun 2e Ini Tracker</title>
|
|
||||||
|
|
||||||
<!-- Style sheets -->
|
|
||||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
||||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">-->
|
|
||||||
<link href="css/custom.css" rel="stylesheet">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- javascript files -->
|
|
||||||
<script src="js/bootstrap.min.js" type="text/javascript"></script>
|
|
||||||
<script src="js/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>-->
|
|
||||||
<script src="js/sr2ini.js" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<header class="navbar navbar-expand">
|
|
||||||
<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="#confirmModal" title="Start new round"><img src="img/newround.png" /></button>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div class="table-responsive overflow-visible">
|
|
||||||
<table class="table table-sm" id="combatantsTable">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="col-4 text-start" title="Name">Name</th>
|
|
||||||
<th class="col-2 text-center" title="Initiative">Ini</th>
|
|
||||||
<th class="col-2 text-center" title="Initiative Dice and Reaction"><img src="img/dice.png" />+R</th>
|
|
||||||
<th class="col-4 text-center" title="Actions">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal fade" id="confirmModal" tabindex="-2">
|
|
||||||
<div class="modal-dialog modal-sm">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">Start New Round</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>Are you sure?</p>
|
|
||||||
</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="confirmModalNewRoundOkButton" data-bs-dismiss="modal">OK</button>
|
|
||||||
<button type="submit" class="btn btn-primary d-none" id="confirmModalRemoveCombatantOkButton" data-bs-dismiss="modal">OK</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal fade" id="combatantModal" tabindex="-1">
|
|
||||||
<div class="modal-dialog modal-sm">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">Add New Combatant</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form id="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;">
|
|
||||||
<div class="my-2">
|
|
||||||
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required />
|
|
||||||
</div>
|
|
||||||
<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" />
|
|
||||||
<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" />
|
|
||||||
</div>
|
|
||||||
<div class="my-2">
|
|
||||||
<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>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<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 d-none" id="combatantModalEditOkButton">OK</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<footer class="footer fixed-bottom bg-light">
|
|
||||||
<hr />
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
js/bootstrap.min.js
vendored
7
js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
2
js/jquery.min.js
vendored
2
js/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
34
package.json
Normal file
34
package.json
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "sr2ini",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Simple Initiative tracker for Shadowrun 2e.",
|
||||||
|
"source": "src/index.html",
|
||||||
|
"devDependencies": {
|
||||||
|
"@parcel/transformer-sass": "^2.8.3",
|
||||||
|
"parcel": "^2.8.3",
|
||||||
|
"parcel-reporter-static-files-copy": "^1.5.0"
|
||||||
|
},
|
||||||
|
"staticFiles": {
|
||||||
|
"staticPath": "src/img"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
|
||||||
|
"build": "npx parcel build",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@git.unterdemradar.de:tobias/sr2ini.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"Shadowrun",
|
||||||
|
"Initiative tracker",
|
||||||
|
"sr2e"
|
||||||
|
],
|
||||||
|
"author": "Eclipse",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.2.3",
|
||||||
|
"jquery": "^3.6.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,9 @@
|
|||||||
|
/* 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");
|
||||||
}
|
}
|
||||||
|
|
||||||
span.navbar-brand {
|
span.navbar-brand {
|
||||||
@ -45,11 +49,11 @@ input:invalid {
|
|||||||
.damage-monitor th {
|
.damage-monitor th {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
/* background-color: white;*/
|
/* background-color: white;*/
|
||||||
/* border: solid darkgray 1px;*/
|
/* border: solid darkgray 1px;*/
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.damage-monitor td {
|
.damage-monitor td {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -68,12 +72,14 @@ input:invalid {
|
|||||||
|
|
||||||
.damage-monitor td button img {
|
.damage-monitor td button img {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer p {
|
footer p {
|
||||||
font-size: x-small;
|
font-size: x-small;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer hr {
|
footer hr {
|
||||||
margin: .5rem 0;
|
margin: .5rem 0;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 795 B After Width: | Height: | Size: 795 B |
|
Before Width: | Height: | Size: 981 B After Width: | Height: | Size: 981 B |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 617 B After Width: | Height: | Size: 617 B |
|
Before Width: | Height: | Size: 712 B After Width: | Height: | Size: 712 B |
|
Before Width: | Height: | Size: 575 B After Width: | Height: | Size: 575 B |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 846 B After Width: | Height: | Size: 846 B |
|
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 549 B |
|
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 719 B |
105
src/index.html
Normal file
105
src/index.html
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>Shadowrun 2e Ini Tracker</title>
|
||||||
|
|
||||||
|
<!-- Style sheets -->
|
||||||
|
<link href="css/custom.scss" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- javascript files -->
|
||||||
|
<script type="module" src="js/sr2ini.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="navbar navbar-expand">
|
||||||
|
<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" 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="newRoundButton" data-bs-toggle="modal" data-bs-target="#confirmModal" title="Start new round"><img src="img/newround.png" /></button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="table-responsive overflow-visible">
|
||||||
|
<table class="table table-sm" id="combatantsTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="col-4 text-start" title="Name">Name</th>
|
||||||
|
<th class="col-2 text-center" title="Initiative">Ini</th>
|
||||||
|
<th class="col-2 text-center" title="Initiative Dice and Reaction"><img src="img/dice.png" />+R</th>
|
||||||
|
<th class="col-4 text-center" title="Actions">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="confirmModal" tabindex="-2">
|
||||||
|
<div class="modal-dialog modal-sm">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Start New Round</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Are you sure?</p>
|
||||||
|
</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="confirmModalNewRoundOkButton" data-bs-dismiss="modal">OK</button>
|
||||||
|
<button type="submit" class="btn btn-primary d-none" id="confirmModalRemoveCombatantOkButton" data-bs-dismiss="modal">OK</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="combatantModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-sm">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Add New Combatant</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;">
|
||||||
|
<div class="my-2">
|
||||||
|
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required />
|
||||||
|
</div>
|
||||||
|
<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" />
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<div class="my-2">
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" id="combatantModalCancelButton" 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 d-none" id="combatantModalEditOkButton" data-bs-dismiss="modal">OK</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<footer class="footer fixed-bottom bg-light">
|
||||||
|
<hr />
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -1,26 +1,30 @@
|
|||||||
|
// 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="combatantRow align-middle" data-true-ini="">\n', //TODO: add data-damage-* attributes with initial damage levels
|
||||||
'<td class="combatantName" title="Combatant\'s name"></td>\n',
|
'<td class="combatantName" title="Combatant\'s name" data-bs-toggle="modal" data-bs-target="#combatantModal"></td>\n',
|
||||||
'<td class="combatantIni text-center" title="Effective initiative (w/ wound penalties)"></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="text-center combatantDiceAndRea" title="Iniative dice and reaction"><span class="combatantDice"></span>D+<span class="combatantRea"></span></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-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"><img src="img/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="#combatantModal"><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="img/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="img/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',
|
||||||
'</div>\n',
|
'</div>\n',
|
||||||
'</div>\n',
|
'</div>\n',
|
||||||
'</td>\n',
|
'</td>\n',
|
||||||
'</tr>'].join("");
|
'</tr>'].join("");
|
||||||
|
|
||||||
const DAMAGE_MONITOR_HTML = [
|
const DAMAGE_MONITOR_HTML = [
|
||||||
'<table class="bg-light damage-monitor text-center align-middle d-none">\n',
|
'<table class="bg-light damage-monitor text-center align-middle d-none">\n',
|
||||||
'<tr>\n',
|
'<tr>\n',
|
||||||
@ -36,68 +40,54 @@ 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"></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="img/zzz.png" height="16" /></button></td><td><button class="btn btn-sm btn-danger damage-physical" title="dead"><img src="img/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="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="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>';
|
||||||
|
|
||||||
const CONTEXTUAL_CLASSES = {
|
const CONTEXTUAL_CLASSES = {
|
||||||
MAX_INI: "table-primary",
|
MAX_INI: "table-primary",
|
||||||
ZERO_INI: "table-secondary",
|
ZERO_INI: "table-secondary",
|
||||||
REGULAR_INI: "table-success",
|
REGULAR_INI: "table-success",
|
||||||
KO_OR_DEAD: "ko-or-dead",
|
KO_OR_DEAD: "ko-or-dead",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* helper functions
|
* helper functions
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// 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));
|
||||||
return diceRolls.reduce((a, b) => a + b, 0) + parseInt(rea);
|
return diceRolls.reduce((a, b) => a + b, 0) + parseInt(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(".combatantIni").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(".combatantIni").text()) || 0;
|
||||||
|
|
||||||
// compare ini
|
// compare ini
|
||||||
let comparer = tmpB - tmpA;
|
let compIni = tmpB - tmpA;
|
||||||
if (comparer != 0) {
|
if (compIni != 0) {
|
||||||
return comparer;
|
return compIni;
|
||||||
}
|
}
|
||||||
// tie; compare reaction
|
// tie; compare reaction
|
||||||
else {
|
else {
|
||||||
if ( $(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "" ) {
|
if ($(a).find(".combatantRea").text() == "" || $(b).find(".combatantRea").text() == "") {
|
||||||
return 0;
|
return 0;
|
||||||
} else {
|
} else {
|
||||||
return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text());
|
return parseInt($(b).find(".combatantRea").text()) - parseInt($(a).find(".combatantRea").text());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// returns a combatant's effective ini value (modified by wound penalties)
|
// returns a combatant's effective ini value (modified by wound penalties)
|
||||||
function getEffectiveIni(tr) {
|
function getEffectiveIni(tr) {
|
||||||
// return -1 if combatant is K.O. or dead
|
// return -1 if combatant is K.O. or dead
|
||||||
if ($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) {
|
if ($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"])) {
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// otherwise compute effective ini (true ini minus wound penalties)
|
// otherwise compute effective ini (true ini minus wound penalties)
|
||||||
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 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];
|
||||||
return Math.max(effectiveIni, 0);
|
return Math.max(effectiveIni, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// add test combatant for testing purposes (duh)
|
// add test combatant for testing purposes (duh)
|
||||||
function addTestCombatant() {
|
function addTestCombatant() {
|
||||||
// Eclipse
|
// Eclipse
|
||||||
@ -105,351 +95,254 @@ function addTestCombatant() {
|
|||||||
$("#combatantModalName").val("Eclipse");
|
$("#combatantModalName").val("Eclipse");
|
||||||
$("#combatantModalDice").val(3);
|
$("#combatantModalDice").val(3);
|
||||||
$("#combatantModalRea").val(6);
|
$("#combatantModalRea").val(6);
|
||||||
// $("#combatantModalIni").val(12);
|
// $("#combatantModalIni").val(12);
|
||||||
setTimeout(function(){
|
setTimeout(function () {
|
||||||
$("#combatantModalAddOkButton").click();
|
$("#combatantModalAddOkButton").click();
|
||||||
},500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Event handler functions
|
* Event handler functions
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// 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(".combatantRow").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(".combatantRow").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");
|
$("#combatantModal .modal-title").text("Add Combatant");
|
||||||
$("#combatantModalAddOkButton").removeClass("d-none");
|
$("#combatantModalAddOkButton").removeClass("d-none");
|
||||||
$("#combatantModalEditOkButton").addClass("d-none");
|
$("#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");
|
||||||
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
|
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
|
||||||
if ( e.which == 13 || e.which == 10 ) {
|
if (e.which == 13 || e.which == 10) {
|
||||||
addCombatant(e);
|
addCombatant(e);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// show modal
|
|
||||||
$("#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");
|
||||||
|
|
||||||
// hide all damage monitors
|
// hide all damage monitors
|
||||||
$(".damage-monitor:visible").addClass("d-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 ( hiddenAtClick ) {
|
if (hiddenAtClick) {
|
||||||
$(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none");
|
$(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none");
|
||||||
}
|
}
|
||||||
return false;
|
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
|
||||||
let $tr = $(e.target).parents(".combatantRow");
|
let $tr = $(e.target).parents(".combatantRow");
|
||||||
|
|
||||||
// restyle modal
|
// restyle modal
|
||||||
$("#combatantModal .modal-title").text("Edit Combatant");
|
$("#combatantModal .modal-title").text("Edit Combatant");
|
||||||
$("#combatantModalAddOkButton").addClass("d-none");
|
$("#combatantModalAddOkButton").addClass("d-none");
|
||||||
$("#combatantModalEditOkButton").removeClass("d-none");
|
$("#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());
|
||||||
$("#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"));
|
||||||
|
|
||||||
// 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
|
$("#combatantModal").data("row", $(".combatantRow").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");
|
$("#combatantModal input[id*='combatantModal']").off("keydown");
|
||||||
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
|
$("#combatantModal input[id*='combatantModal']").on("keydown", function (e) {
|
||||||
if ( e.which == 13 || e.which == 10 ) {
|
if (e.which == 13 || e.which == 10) {
|
||||||
editCombatant(e);
|
editCombatant(e);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// show modal
|
|
||||||
$("#combatantModal").modal("show");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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").removeClass("d-none");
|
$("#confirmModalNewRoundOkButton").removeClass("d-none");
|
||||||
$("#confirmModalRemoveCombatantOkButton").addClass("d-none");
|
$("#confirmModalRemoveCombatantOkButton").addClass("d-none");
|
||||||
|
|
||||||
// show modal
|
|
||||||
$("#comfirmModal").modal("show");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 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");
|
$("#confirmModal .modal-title").text("Remove Combatant");
|
||||||
$("#confirmModalRemoveCombatantOkButton").removeClass("d-none");
|
$("#confirmModalRemoveCombatantOkButton").removeClass("d-none");
|
||||||
$("#confirmModalNewRoundOkButton").addClass("d-none");
|
$("#confirmModalNewRoundOkButton").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
|
$("#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
|
||||||
|
|
||||||
// show modal
|
|
||||||
$("#comfirmModal").modal("show");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
// hide modal
|
|
||||||
$("#combatantModal").modal("hide");
|
|
||||||
|
|
||||||
// roll for initiative if necessary
|
// roll for initiative if necessary
|
||||||
let ini = $("#combatantModalIni").val().trim();
|
let ini = $("#combatantModalIni").val().trim();
|
||||||
ini = (ini != "") ? ini : rollForInitiative($("#combatantModalDice").val(), $("#combatantModalRea").val());
|
ini = (ini != "") ? ini : rollForInitiative($("#combatantModalDice").val(), $("#combatantModalRea").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(".combatantName").text($("#combatantModalName").val().trim());
|
||||||
$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());
|
||||||
|
//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(".combatantName, .combatantIni, .combatantDiceAndRea").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);
|
||||||
$tr.find("button.damage-button").on("click", handleDamageButtonClick);
|
$tr.find("button.damage-button").on("click", handleDamageButtonClick);
|
||||||
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
|
$tr.find("button.remove-button").on("click", handleRemoveButtonClick);
|
||||||
|
|
||||||
// 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);
|
$("#combatantsTable").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);
|
|
||||||
|
|
||||||
// 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.combatantRow").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");
|
||||||
$btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active");
|
$btn.parent().parent().prevAll().find("button.damage-" + damageType).addClass("active");
|
||||||
|
|
||||||
// resort
|
// resort
|
||||||
sortTable();
|
sortTable();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
// hide modal
|
|
||||||
$("#combatantModal").modal("hide");
|
|
||||||
|
|
||||||
// get values
|
// get values
|
||||||
let name = $("#combatantModalName").val().trim();
|
let name = $("#combatantModalName").val().trim();
|
||||||
let ini = $("#combatantModalIni").val().trim();
|
let ini = $("#combatantModalIni").val().trim();
|
||||||
let dice = $("#combatantModalDice").val().trim();
|
let dice = $("#combatantModalDice").val().trim();
|
||||||
let rea = $("#combatantModalRea").val().trim();
|
let rea = $("#combatantModalRea").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($("#combatantModal").data("row"));
|
||||||
$tr = $("tr.combatantRow").eq(index);
|
$tr = $("tr.combatantRow").eq(index);
|
||||||
|
|
||||||
// set new values
|
// set new values
|
||||||
$tr.find(".combatantName").text(name);
|
$tr.find(".combatantName").text(name);
|
||||||
$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);
|
||||||
|
|
||||||
// sort table
|
// sort table
|
||||||
sortTable();
|
sortTable();
|
||||||
|
|
||||||
// clean up
|
// clean up
|
||||||
$("#combatantModal").removeAttr("data-row");
|
$("#combatantModal").removeAttr("data-row");
|
||||||
}
|
}
|
||||||
|
|
||||||
// remove combatant
|
// remove combatant
|
||||||
function removeCombatant (e) {
|
function removeCombatant(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// hide modal
|
|
||||||
$("#confirmModal").modal("hide");
|
|
||||||
|
|
||||||
// remove correct row
|
// remove correct row
|
||||||
let index = parseInt($("#confirmModal").data("row"));
|
let index = parseInt($("#confirmModal").data("row"));
|
||||||
$(".combatantRow").eq(index).remove();
|
$(".combatantRow").eq(index).remove();
|
||||||
|
sortTable();
|
||||||
// clean up
|
// clean up
|
||||||
$("#confirmModal").removeAttr("data-row");
|
$("#confirmModal").removeAttr("data-row");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// start a new combat round
|
// start a new combat round
|
||||||
function startNewRound (e) {
|
function startNewRound(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// hide modal
|
// hide modal
|
||||||
$("#confirmModal").modal("hide");
|
|
||||||
|
|
||||||
// are there rows at all?
|
// are there rows at all?
|
||||||
if ( $(".combatantRow").length == 0 ) {
|
if ($(".combatantRow").length == 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// reset ini values
|
// reset ini values
|
||||||
$(".combatantRow").each( function() {
|
$(".combatantRow").each(function () {
|
||||||
if ( $(this).find(".combatantDice").text() == "" ) {
|
if ($(this).find(".combatantDice").text() == "") {
|
||||||
$(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(".combatantDice").text()), parseInt($(this).find(".combatantRea").text())));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// resort table
|
// resort table
|
||||||
sortTable();
|
sortTable();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 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(" "));
|
$(".combatantRow").removeClass(Object.values(CONTEXTUAL_CLASSES).join(" "));
|
||||||
$(".combatantRow").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
|
$(".combatantRow").find(".act-button").prop("disabled", true).attr("aria-disabled", "true");
|
||||||
$(".combatantIni").empty();
|
$(".combatantIni").empty();
|
||||||
|
|
||||||
// mark KO or death with class
|
// mark KO or death with class
|
||||||
$(".combatantRow").each(function() {
|
$(".combatantRow").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($(".combatantRow"), 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(".combatantIni").text($(tr).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ? 0 : getEffectiveIni($(tr)));
|
||||||
return $(tr).find(".combatantIni").text();
|
return $(tr).find(".combatantIni").text();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// add damage badges and contextual classes
|
// add damage badges and contextual classes
|
||||||
$(".combatantRow").each(function() {
|
$(".combatantRow").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(".combatantIni").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(".combatantIni").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
|
||||||
if ( $(this).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"]) ) {
|
if ($(this).hasClass(CONTEXTUAL_CLASSES["KO_OR_DEAD"])) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
// ini = zero
|
// ini = zero
|
||||||
if ( parseInt($(this).find(".combatantIni").text()) == 0 ) {
|
if (parseInt($(this).find(".combatantIni").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(".combatantIni").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;
|
||||||
}
|
}
|
||||||
// everything else
|
// everything else
|
||||||
$(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 = $(".combatantRow").toArray().sort(whoGoesFirst);
|
||||||
for ( var i = 0; i < $rows.length; i++ ) {
|
for (let i = 0; i < $rows.length; i++) {
|
||||||
$("#combatantsTable").append($rows[i]);
|
$("#combatantsTable").append($rows[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// validate a combatant row form by checking for all conditions, including regular HTML5 validation
|
// validate a combatant row form by checking for all conditions, including regular HTML5 validation
|
||||||
function validateCombatant() {
|
function validateCombatant() {
|
||||||
|
|
||||||
// get input elements
|
// get input elements
|
||||||
let inputElements = {
|
let inputElements = {
|
||||||
name: $("#combatantModalName").get(0),
|
name: $("#combatantModalName").get(0),
|
||||||
@ -457,77 +350,64 @@ function validateCombatant() {
|
|||||||
dice: $("#combatantModalDice").get(0),
|
dice: $("#combatantModalDice").get(0),
|
||||||
rea: $("#combatantModalRea").get(0)
|
rea: $("#combatantModalRea").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)
|
||||||
let valid = true;
|
let valid = true;
|
||||||
Object.values(inputElements).forEach(function(input) {
|
Object.values(inputElements).forEach(function (input) {
|
||||||
if ( ! input.reportValidity() ) {
|
if (!input.reportValidity()) {
|
||||||
valid = false;
|
valid = false;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if ( ! valid ) {
|
if (!valid) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// now for some custom validation; first we need to get the input values
|
// now for some custom validation; first we need to get the input values
|
||||||
let ini = inputElements["ini"].value.trim();
|
let ini = inputElements["ini"].value.trim();
|
||||||
let dice = inputElements["dice"].value.trim();
|
let dice = inputElements["dice"].value.trim();
|
||||||
let rea = inputElements["rea"].value.trim();
|
let rea = inputElements["rea"].value.trim();
|
||||||
|
|
||||||
// invalidate if ini, dice and rea are all empty
|
// invalidate if ini, dice and rea are all empty
|
||||||
if ( ini == "" && ( dice == "" || rea == "" ) ) {
|
if (ini == "" && (dice == "" || rea == "")) {
|
||||||
inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three");
|
inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three");
|
||||||
inputElements["ini"].reportValidity();
|
inputElements["ini"].reportValidity();
|
||||||
inputElements["ini"].setCustomValidity("");
|
inputElements["ini"].setCustomValidity("");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// invalidate if dice or rea is empty but not both
|
// invalidate if dice or rea is empty but not both
|
||||||
if ( ( dice == "" ) != ( rea == "" ) ) {
|
if ((dice == "") != (rea == "")) {
|
||||||
inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
|
inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
|
||||||
inputElements["dice"].reportValidity();
|
inputElements["dice"].reportValidity();
|
||||||
inputElements["dice"].setCustomValidity("");
|
inputElements["dice"].setCustomValidity("");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ok then
|
// ok then
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Initialize document
|
* Initialize document
|
||||||
*/
|
*/
|
||||||
|
$(document).ready(function () {
|
||||||
$(document).ready(function(){
|
|
||||||
// add event handlers to navbar buttons
|
// add event handlers to navbar buttons
|
||||||
$("#addCombatantButton").on("click", handleAddButtonClick);
|
$("#addCombatantButton").on("click", handleAddButtonClick);
|
||||||
$("#newRoundButton").on("click", handleNewRoundButton);
|
$("#newRoundButton").on("click", handleNewRoundButton);
|
||||||
|
|
||||||
// add event handlers to modal buttons
|
// add event handlers to modal buttons
|
||||||
$("#combatantModalAddOkButton").on("click", addCombatant);
|
$("#combatantModalAddOkButton").on("click", addCombatant);
|
||||||
$("#combatantModalEditOkButton").on("click", editCombatant);
|
$("#combatantModalEditOkButton").on("click", editCombatant);
|
||||||
$("#confirmModalNewRoundOkButton").on("click", startNewRound);
|
$("#confirmModalNewRoundOkButton").on("click", startNewRound);
|
||||||
$("#confirmModalRemoveCombatantOkButton").on("click", removeCombatant);
|
$("#confirmModalRemoveCombatantOkButton").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() {
|
$('#combatantModal').on('shown.bs.modal', function () {
|
||||||
$('#combatantModalName').focus();
|
$('#combatantModalName').focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
// always empty input fields when combatant modal disappears
|
// always empty input fields when combatant modal disappears
|
||||||
$("#combatantModal").on('hidden.bs.modal', function (e) {
|
$("#combatantModal").on('hidden.bs.modal', function (e) {
|
||||||
$("#combatantModal input[id*='combatantModal']").val("");
|
$("#combatantModal input[id*='combatantModal']").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) {
|
||||||
if ( $(e.target).parents(".damage-monitor").length == 0 ) {
|
if ($(e.target).parents(".damage-monitor").length == 0) {
|
||||||
$(".damage-monitor:visible").addClass("d-none");
|
$(".damage-monitor:visible").addClass("d-none");
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
addTestCombatant();
|
addTestCombatant();
|
||||||
});
|
console.log("trololol");
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user