- changed icons
- modified layout for use on small screens
@ -2,16 +2,16 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#dummy-row:only-child {
|
#dummy-row:only-child {
|
||||||
display: block;
|
display: table-row;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:invalid {
|
input:invalid {
|
||||||
border: 2px solid red;
|
border: 2px solid red;
|
||||||
}
|
}
|
||||||
|
|
||||||
td.combatantDice, td.combatantRea {
|
/*td.combatantDice, td.combatantRea {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:disabled {
|
button:disabled {
|
||||||
}
|
} */
|
||||||
|
|||||||
BIN
img/001-refresh.png
Normal file
|
After Width: | Height: | Size: 646 B |
BIN
img/002-dead-body.png
Normal file
|
After Width: | Height: | Size: 750 B |
BIN
img/003-shooting.png
Normal file
|
After Width: | Height: | Size: 580 B |
BIN
img/004-edit-button.png
Normal file
|
After Width: | Height: | Size: 575 B |
BIN
img/005-add.png
Normal file
|
After Width: | Height: | Size: 576 B |
BIN
img/006-dice.png
Normal file
|
After Width: | Height: | Size: 712 B |
49
index.html
@ -25,10 +25,10 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="navbar navbar-expand bg-success bg-opacity-25">
|
<header class="navbar navbar-expand bg-success bg-opacity-25">
|
||||||
<span class="navbar-brand text-bold ps-4">Shadowrun 2 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" id="addCombatantButton" title="Add combatant"><img src="png/001-add.png" /></button>
|
<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="addCombatantButton" title="Add combatant"><img src="img/005-add.png" /></button>
|
||||||
<button type="submit" class="btn btn-light btn-rounded mx-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="png/009-refresh.png" /></button>
|
<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="img/001-refresh.png" /></button>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
</br>
|
</br>
|
||||||
@ -36,24 +36,24 @@
|
|||||||
<table class="table table-sm" id="combatantsTable">
|
<table class="table table-sm" id="combatantsTable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="col-sm-5 text-start" title="Name">Name</th>
|
<th class="col-4 text-start" title="Name">Name</th>
|
||||||
<th class="col-sm-2 text-center" title="Initiative">Initiative</th>
|
<th class="col-2 text-center" title="Initiative">Ini</th>
|
||||||
<th class="col-sm-2 text-center" title="Initiative Dice and Reaction">Ini Dice & REA</th>
|
<th class="col-2 text-center" title="Initiative Dice and Reaction"><img src="img/006-dice.png" />+R</th>
|
||||||
<th class="col-sm-3 text-center" title="Available Actions">Actions</th>
|
<th class="col-4 text-center" title="Actions">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="align-middle">
|
<tbody>
|
||||||
<tr id="dummy-row">
|
<!-- <tr id="dummy-row" colspan="100%">
|
||||||
<td class="col-sm text-muted" colspan="4">No combatants yet …</td>
|
<td class="col-sm text-muted">No combatants yet …</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
--> </tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal fade" id="newRoundModal" tabindex="-2">
|
<div class="modal fade" id="newRoundModal" tabindex="-2">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog modal-sm">
|
||||||
<div class="modal-content modal-sm">
|
<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>
|
||||||
<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>
|
||||||
@ -70,33 +70,32 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal fade" id="combatantModal" tabindex="-1">
|
<div class="modal fade" id="combatantModal" tabindex="-1">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog modal-sm">
|
||||||
<div class="modal-content modal-sm">
|
<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="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;">
|
||||||
<div class="form-outline mb-4">
|
<div class="my-2">
|
||||||
<input type="text" maxlength="40" class="form-control" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required />
|
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-outline mb-4">
|
<div class="my-2">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="number" min="1" max="5" class="form-control" id="combatantModalDice" form="combatantModalForm" placeholder="Dice" />
|
<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>
|
<span class="input-group-text">D+</span>
|
||||||
<input type="number" min="1" max="25" class="form-control" id="combatantModalRea" form="combatantModalForm" placeholder="REA" />
|
<input type="number" min="1" max="25" class="form-control form-control-sm" id="combatantModalRea" form="combatantModalForm" placeholder="REA" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-outline mb-4">
|
<div class="my-2">
|
||||||
</div>
|
<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" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" />
|
|
||||||
</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="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button>
|
||||||
<button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK (add)</button>
|
<button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK</button>
|
||||||
<button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK (edit)</button>
|
<button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
20
js/sr2ini.js
@ -224,25 +224,15 @@ function addCombatant (e) {
|
|||||||
|
|
||||||
// construct jQuery object for table row
|
// construct jQuery object for table row
|
||||||
let $tr = $($.parseHTML( [
|
let $tr = $($.parseHTML( [
|
||||||
'<tr class="combatantRow">\n',
|
'<tr class="combatantRow align-middle">\n',
|
||||||
'<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
|
'<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
|
||||||
'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
|
'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
|
||||||
'<td>\n',
|
'<td class="text-center combatantDiceAndRea" title="Iniative dice and reaction"><span class="combatantDice">', dice, '</span>D+<span class="combatantRea">', rea, '</span></td>\n',
|
||||||
'<div>\n',
|
|
||||||
'<table class="table table-sm table-borderless m-0 p-0 combatantDiceAndRea">\n',
|
|
||||||
'<tr>\n',
|
|
||||||
'<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</td>\n',
|
|
||||||
'<td class="text-center"><img src="png/002-dice.png" />+</td>\n',
|
|
||||||
'<td class="combatantRea text-start" title="Reaction">', rea, '</td>\n',
|
|
||||||
'</tr>\n',
|
|
||||||
'</table>\n',
|
|
||||||
'</div>\n',
|
|
||||||
'</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 edit-button" title="Edit combatant\'s values"><img src="png/005-edit-button.png" /></button>\n',
|
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values"><img src="img/004-edit-button.png" /></button>\n',
|
||||||
'<button type="button" class="btn btn-light btn-rounded mx-1 act-button" title="Act and reduce ini by 10"><img src="png/004-shooting.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/003-shooting.png" /></button>\n',
|
||||||
'<button type="button" class="btn btn-light btn-rounded mx-1 remove-button" title="Remove combatant"><img src="png/003-dead-body.png" /></button>\n',
|
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 remove-button" title="Remove combatant"><img src="img/002-dead-body.png" /></button>\n',
|
||||||
'</div>\n',
|
'</div>\n',
|
||||||
'</td>\n',
|
'</td>\n',
|
||||||
'</tr>'].join("")
|
'</tr>'].join("")
|
||||||
|
|||||||
BIN
png/001-add.png
|
Before Width: | Height: | Size: 796 B |
BIN
png/002-dice.png
|
Before Width: | Height: | Size: 924 B |
|
Before Width: | Height: | Size: 1021 B |
|
Before Width: | Height: | Size: 831 B |
|
Before Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 806 B |
|
Before Width: | Height: | Size: 929 B |
|
Before Width: | Height: | Size: 938 B |
|
Before Width: | Height: | Size: 1.1 KiB |