added main html and javascript files, as well as some libraries (jquery and bootstrap)
This commit is contained in:
parent
ac8c0eae9f
commit
305270c0cb
7
css/bootstrap.min.css
vendored
Normal file
7
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
48
index.html
Normal file
48
index.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!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>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<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="js/jquery-3.6.0.js"></script>
|
||||
<script src="js/sr2ini.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<table class="table table-sm" id="combatants">
|
||||
<thead>
|
||||
<tr id="combatants-headrow">
|
||||
<th title="Initiative">Ini</th>
|
||||
<th title="Name">Name</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="sortable">
|
||||
<tr id="formRow">
|
||||
<form name="combForm" id="combForm" onsubmit="return false;">
|
||||
<td>
|
||||
<input type="number" min="0" max="99" class="form-control" id="combIni" placeholder="new combatant's ini" required />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" maxlength="40" class="form-control" id="combName" placeholder="new combatant's name" required />
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-primary btn-sm" id="combAddButton" title="Combatant's name …">Add</button>
|
||||
</td>
|
||||
</form>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
7
js/bootstrap.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10881
js/jquery-3.6.0.js
vendored
Normal file
10881
js/jquery-3.6.0.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
171
js/sr2ini.js
Normal file
171
js/sr2ini.js
Normal file
@ -0,0 +1,171 @@
|
||||
/* Notes
|
||||
- different behavior sr2/3; but I'll only implement 2e now
|
||||
- Initiative could also offer to enter Ini dice (1-5) and Reaction (0-20); that way the app itself could roll their ini
|
||||
- highlight current combatant -> es ist sowieso immer der ganz oben dran (Ausnahme: mehrere mit der gleichen ini)
|
||||
- how do I handle several combatants with the same ini?
|
||||
- style mit bootstrap
|
||||
*/
|
||||
|
||||
|
||||
|
||||
// keydown handler for editable ini elements; gets called when for every key press while editing an ini value
|
||||
function handleIniKeydown (e) {
|
||||
var keycode = e.which;
|
||||
|
||||
// not among the allowed keys: ignore the keystroke
|
||||
if ( !
|
||||
( keycode == 8 //backspace
|
||||
|| keycode == 9 //tab
|
||||
|| keycode == 46 //del
|
||||
|| keycode == 27 //escape
|
||||
|| keycode >= 35 && keycode <= 40 //arrows, pos1, end
|
||||
|| keycode >= 48 && keycode <= 57 && $(this).text().length <= 1 ) ) //number key, and text length is less than 2
|
||||
{
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
// enter key: trigger blur
|
||||
// note: keycode is 13 except on safari and iphone where it's 10
|
||||
if ( keycode == 13 || keycode == 10 ) {
|
||||
$(this).trigger("blur");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// keydown handler for editable name elements
|
||||
function handleNameKeydown (e) {
|
||||
// enter key: don't add newline, just trigger blur
|
||||
// note: keycode is 13 except on safari and iphone where it's 10
|
||||
if ( e.which == 13 || e.keycode == 10 ) {
|
||||
e.preventDefault();
|
||||
$(this).trigger("blur");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// click handler for act buttons
|
||||
function handleActButtonClick (e) {
|
||||
// find current table row
|
||||
let $tr = $(e.target).parents("tr.combRow").clone(true);
|
||||
|
||||
// reduce ini by 10 but not lower than 0
|
||||
let ini = parseInt($tr.find(".ini-editable").text()) - 10;
|
||||
if ( ini <= 0 ) {
|
||||
ini = 0;
|
||||
$tr.addClass("ini-zero");
|
||||
}
|
||||
$tr.find(".ini-editable").text(ini);
|
||||
|
||||
// remove original current table row and insert clone at newly calculated position
|
||||
$(e.target).parents("tr.combRow").remove();
|
||||
insertCombRow($tr);
|
||||
}
|
||||
|
||||
|
||||
// click handler for remove buttons
|
||||
function handleRemoveButtonClick (e) {
|
||||
// remove table row
|
||||
$(e.target).parents("tr.combRow").remove();
|
||||
}
|
||||
|
||||
// Blur handler for ini fields. Sets CSS classes and repositions the combatant row
|
||||
function handleIniBlur (e) {
|
||||
// find current table row
|
||||
let $tr = $(e.target).parents("tr.combRow").clone(true);
|
||||
|
||||
// add/remove class ini-zero
|
||||
if ( $tr.find(".ini-editable").text() == "0" ) {
|
||||
$tr.addClass("ini-zero");
|
||||
} else {
|
||||
$tr.removeClass("ini-zero");
|
||||
}
|
||||
|
||||
//reposition
|
||||
$(e.target).parents("tr.combRow").remove();
|
||||
insertCombRow($tr);
|
||||
}
|
||||
|
||||
// inserts a combatant table row (in form of a jQuery object) at the correct position in the table
|
||||
function insertCombRow($tr) {
|
||||
let ini = parseInt($tr.find(".ini-editable").text());
|
||||
let $combRows = $("tr.combRow");
|
||||
|
||||
// find correct position for new row
|
||||
|
||||
// no combatants in table? put the new row below the form row
|
||||
if ( $combRows.length == 0 ) {
|
||||
$("tr#formRow").after($tr);
|
||||
}
|
||||
|
||||
// ini is less than the lowest in table? put the new row at the end
|
||||
else if ( ini <= parseInt($combRows.last().find(".ini-editable").text() ) ) {
|
||||
$("tbody#sortable").append($tr);
|
||||
}
|
||||
|
||||
// compare ini with the ones in table from the top down) and put the new row in the first spot where its ini is larger
|
||||
else {
|
||||
for ( var i = 0; i < $combRows.length; i++ ) {
|
||||
if ( ini > parseInt($combRows.eq(i).find(".ini-editable").text()) ) {
|
||||
$("tr.combRow:eq(" + i + ")").before($tr);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// add new combatant
|
||||
function addCombatant (e) {
|
||||
// form not validating? return
|
||||
if ( ! ( $("#combForm")[0].checkValidity() ) ) {
|
||||
console.log("form's not validating :-(");
|
||||
// do some javascript magic to trigger a form submit which will show validation messages while not actually going through
|
||||
$('<input type="submit"/>').hide().appendTo("#combForm").click().remove();
|
||||
return;
|
||||
}
|
||||
|
||||
// strip ini value of leading zero
|
||||
let ini = $("#combIni").val();
|
||||
if ( ini.length == 2 && ini[0] == "0" ) {
|
||||
ini = ini[1];
|
||||
}
|
||||
console.log("Ini is: " + ini);
|
||||
|
||||
// construct jQuery object for table row
|
||||
let $tr = $($.parseHTML( [
|
||||
'<tr class="combRow', ini == "0" ? ' ini-zero' : '', '">\n',
|
||||
'<td contenteditable="true" class="ini-editable" title="click to edit">', ini , '</td>',
|
||||
'<td contenteditable="true" class="name-editable" title="click to edit">', $("#combName").val(), '</td>',
|
||||
'<td>',
|
||||
'<button type="button" class="btn btn-default act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>',
|
||||
'<button type="button" class="btn btn-default remove-button" title="Remove combatant">Remove</button>',
|
||||
'</td>',
|
||||
'</tr>'].join("")
|
||||
));
|
||||
|
||||
// add handlers to table row object
|
||||
$tr.find(".ini-editable").on("keydown", handleIniKeydown).on("blur", handleIniBlur);
|
||||
$tr.find(".name-editable").on("keydown", handleNameKeydown);
|
||||
$tr.find(".act-button").on("click", handleActButtonClick);
|
||||
$tr.find(".remove-button").on("click", handleRemoveButtonClick);
|
||||
|
||||
// insert combatant row
|
||||
insertCombRow($tr);
|
||||
|
||||
//reset form values
|
||||
$("#combIni, #combName").val("");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
// add handlers for using the Add button or enter key in the new combatant form
|
||||
$("#combAddButton").on("click", addCombatant);
|
||||
$("#combIni, #combName").on("keydown", function (e) {
|
||||
if ( e.which == 13 || e.which == 10 ) {
|
||||
$("#combAddButton").trigger("click");
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user