210 lines
9.0 KiB
HTML
210 lines
9.0 KiB
HTML
<link rel="stylesheet" href="{ROOT_URL}app/plugins/initiativetracker/css/initiative.css" crossorigin="anonymous">
|
|
<script src="{ROOT_URL}app/plugins/initiativetracker/js/initiative.js" type="module" defer></script>
|
|
|
|
<div id="initiative-container" class="initiative-container">
|
|
|
|
<div class="row">
|
|
<h2>Initiative Tracker</h2>
|
|
</div>
|
|
|
|
<!-- Tracker Settings -->
|
|
<div class="row well well-sm">
|
|
<div class="checkbox">
|
|
<label><input type="checkbox" name="trackHP" id="trackHP"> Track HP</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label><input type="checkbox" name="trackAC" id="trackAC"> Track AC</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label><input type="checkbox" name="trackRounds" id="trackRounds"> Track Rounds</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Character Form -->
|
|
<div id="character-form" class="character-form row well well-sm">
|
|
<div class="form-group col-lg-3">
|
|
<label for="name">Name</label>
|
|
<input type="text" class="form-control" name="name" id="name" autocomplete="on">
|
|
</div>
|
|
<div class="form-group col-lg-2">
|
|
<label for="initiative">Initiative</label>
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<button id="d20-roll" class="btn btn-default" aria-label="Roll a d20 for initiative.">Roll</button>
|
|
</div>
|
|
<input type="number" class="form-control" name="initiative" id="initiative">
|
|
</div>
|
|
</div>
|
|
<div class="form-group col-lg-1 ac-tracker" style="display: none;">
|
|
<label for="ac">AC</label>
|
|
<input type="number" class="form-control" name="ac" id="ac">
|
|
</div>
|
|
<div class="form-group col-lg-1 hp-tracker" style="display: none;">
|
|
<label for="hp">HP</label>
|
|
<input type="number" class="form-control" name="hp" id="hp">
|
|
</div>
|
|
<div class="form-group col-lg-2">
|
|
<label for="pc">Type</label><br>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="characterType" id="pc" value="pc" checked> PC
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="characterType" id="npc" value="npc"> NPC
|
|
</label>
|
|
</div>
|
|
<div class="form-group col-lg-3">
|
|
<button id="character-add" class="btn btn-primary">
|
|
Add
|
|
</button>
|
|
<button id="character-reset" class="btn btn-danger">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initiative List -->
|
|
<div id="character-container" style="display: none;">
|
|
|
|
<div id="initiative-list" class="well well-sm">
|
|
<!-- Tab Header -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active">
|
|
<a data-target="#cmb-list" role="tab" data-toggle="tab">
|
|
Combined
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-target="#pc-list" role="tab" data-toggle="tab">
|
|
PC
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-target="#npc-list" role="tab" data-toggle="tab">
|
|
NPC
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<!-- Combined List -->
|
|
<div role="tabpanel" class="tab-pane active" id="cmb-list">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="text-center">Initiative</th>
|
|
<th class="ac-tracker text-center" style="display: none;">AC</th>
|
|
<th class="hp-tracker text-center" style="display: none;">HP</th>
|
|
<th class="text-center">Type</th>
|
|
<th class="text-right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="character-list">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- PC List -->
|
|
<div role="tabpanel" class="tab-pane" id="pc-list">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="text-center">Initiative</th>
|
|
<th class="ac-tracker text-center" style="display: none;">AC</th>
|
|
<th class="hp-tracker text-center" style="display: none;">HP</th>
|
|
<th class="text-center">Type</th>
|
|
<th class="text-right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="character-list-pc">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- NPC List -->
|
|
<div role="tabpanel" class="tab-pane" id="npc-list">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="text-center">Initiative</th>
|
|
<th class="ac-tracker text-center" style="display: none;">AC</th>
|
|
<th class="hp-tracker text-center" style="display: none;">HP</th>
|
|
<th class="text-center">Type</th>
|
|
<th class="text-right"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="character-list-npc">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List Controls -->
|
|
<div class="row list-controls row">
|
|
<div class="form-group col-lg-3">
|
|
<button id="list-reset" class="d4-die die-btn btn btn-warning">
|
|
Reset Round
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-lg-3">
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<button id="character-sort" class="btn btn-primary" aria-label="Sort the List.">Sort</button>
|
|
</div>
|
|
<select class="form-control" id="sortBy">
|
|
<option value="initiative">Initiative</option>
|
|
<option value="name">Name</option>
|
|
<option value="ac">AC</option>
|
|
<option value="hp">HP</option>
|
|
<option value="type">Type</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group col-lg-3">
|
|
<button id="list-next" class="btn btn-success">
|
|
Next Character
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-lg-3 list-controls-last">
|
|
<button id="list-clear" class="btn btn-danger">
|
|
Clear List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Round Controls -->
|
|
<div class="row rounds-tracker" style="display: none;">
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Round History</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr id="rounds-history-header-row">
|
|
<th id="rounds-history-header">Character</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rounds-history">
|
|
</tbody>
|
|
</table>
|
|
<div class="form-group col-lg-2">
|
|
<button id="rounds-clear" class="d4-die die-btn btn btn-danger">
|
|
Clear History
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer round-footer">
|
|
<b>Round Count</b>: <span id="round-count"></span>
|
|
<span class="pull-right round-reset">
|
|
<button id="rounds-reset" class="btn btn-warning">
|
|
Reset Round Count
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |