429 lines
22 KiB
HTML
429 lines
22 KiB
HTML
<link rel="stylesheet" href="{ROOT_URL}app/plugins/dice/css/dice.css" crossorigin="anonymous">
|
|
<script src="{ROOT_URL}app/plugins/dice/js/dice.js" type="module" defer></script>
|
|
|
|
<h1 class="text-center">Dice</h1>
|
|
<div id="roll-results" class="row well well-sm" style="display: none;">
|
|
<dl class="dl-horizontal roll-result-well">
|
|
<dt>Dice</dt>
|
|
<dd id="last-roll-dice"></dd>
|
|
<dt>Dice (with Modifiers)</dt>
|
|
<dd id="last-roll-dice-with-mods"></dd>
|
|
<dt>Dice Total</dt>
|
|
<dd id="dice-total"></dd>
|
|
<dt>Total Value</dt>
|
|
<dd id="dice-total-with-bonuses"></dd>
|
|
</dl>
|
|
<div id="roll-type" style="display: none;"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Coin Flip -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d2-last-roll">Last Flip</label>
|
|
<h3 id="d2-last-roll">-</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d2-die-count">Coin Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d2-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d2-die-count" name="d2-die-count" class="form-control" autocomplete="on" aria-label="Coin Count" placeholder="Coin Count">
|
|
<div class="input-group-btn">
|
|
<button id="d2-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d2-roll" class="d2-die die-btn btn btn-primary">
|
|
Flip Coin(s)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D4 -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d4-last-roll">Last Roll</label>
|
|
<h3 id="d4-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d4-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d4-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d4-die-count" name="d4-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d4-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d4-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d4-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d4-mod" name="d4-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d4-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d4-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d4-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d4-bonus" name="d4-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d4-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d4-roll" class="d4-die die-btn btn btn-primary">
|
|
D4
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D6 -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d6-last-roll">Last Roll</label>
|
|
<h3 id="d6-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d6-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d6-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d6-die-count" name="d6-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d6-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d6-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d6-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d6-mod" name="d6-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d6-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d6-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d6-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d6-bonus" name="d6-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d6-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d6-roll" class="d6-die die-btn btn btn-primary">
|
|
D6
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D8 -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d8-last-roll">Last Roll</label>
|
|
<h3 id="d8-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d8-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d8-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d8-die-count" name="d8-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d8-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d8-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d8-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d8-mod" name="d8-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d8-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d8-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d8-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d8-bonus" name="d8-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d8-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d8-roll" class="d8-die die-btn btn btn-primary">
|
|
D8
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D10 -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d10-last-roll">Last Roll</label>
|
|
<h3 id="d10-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d10-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d10-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d10-die-count" name="d10-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d10-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d10-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d10-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d10-mod" name="d10-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d10-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d10-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d10-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d10-bonus" name="d10-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d10-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d10-roll" class="d10-die die-btn btn btn-primary">
|
|
D10
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D12 -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d12-last-roll">Last Roll</label>
|
|
<h3 id="d12-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d12-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d12-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d12-die-count" name="d12-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d12-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d12-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d12-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d12-mod" name="d12-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d12-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d12-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d12-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d12-bonus" name="d12-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d12-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d12-roll" class="d12-die die-btn btn btn-primary">
|
|
D12
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D20 -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d20-last-roll">Last Roll</label>
|
|
<h3 id="d20-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d20-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d20-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d20-die-count" name="d20-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d20-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d20-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d20-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d20-mod" name="d20-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d20-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d20-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d20-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d20-bonus" name="d20-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d20-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d20-roll" class="d20-die die-btn btn btn-primary">
|
|
D20
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Percentile -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="d100-last-roll">Last Roll</label>
|
|
<h3 id="d100-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d100-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="d100-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="d100-die-count" name="d100-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="d100-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d100-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="d100-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="d100-mod" name="d100-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="d100-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="d100-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="d100-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="d100-bonus" name="d100-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="d100-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="d100-roll" class="d100-die die-btn btn btn-primary">
|
|
Percentile (D-100)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Die -->
|
|
<div class="col-lg-4 center-inputs">
|
|
<div class="col-lg-12 text-center">
|
|
<label class="sr-only" for="dx-last-roll">Last Roll</label>
|
|
<h3 id="dx-last-roll">0</h3>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="dx-face-count">Face Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="dx-minus" class="face-minus btn btn-danger" aria-label="Remove Face">-</button>
|
|
</div>
|
|
<input type="number" id="dx-face-count" name="dx-face-count" class="form-control" autocomplete="on" aria-label="Face Count" placeholder="Face Count">
|
|
<div class="input-group-btn">
|
|
<button id="dx-plus" class="face-plus btn btn-success" aria-label="Add Face">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="dx-die-count">Die Count</label>
|
|
<div class="input-group-btn">
|
|
<button id="dx-minus" class="die-minus btn btn-danger" aria-label="Remove Die">-</button>
|
|
</div>
|
|
<input type="number" id="dx-die-count" name="dx-die-count" class="form-control" autocomplete="on" aria-label="Die Count" placeholder="Die Count">
|
|
<div class="input-group-btn">
|
|
<button id="dx-plus" class="die-plus btn btn-success" aria-label="Add Die">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="dx-mod">Modifier</label>
|
|
<div class="input-group-btn">
|
|
<button id="dx-mod-minus" class="mod-minus btn btn-danger" aria-label="Decrease Modifier">-</button>
|
|
</div>
|
|
<input type="number" id="dx-mod" name="dx-mod" class="form-control" autocomplete="on" aria-label="Modifier" placeholder="Modifier">
|
|
<div class="input-group-btn">
|
|
<button id="dx-mod-plus" class="mod-plus btn btn-success" aria-label="Increase Modifier">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-number">
|
|
<label class="sr-only" for="dx-bonus">Bonus</label>
|
|
<div class="input-group-btn">
|
|
<button id="dx-bonus-minus" class="bonus-minus btn btn-danger" aria-label="Decrease Bonus">-</button>
|
|
</div>
|
|
<input type="number" id="dx-bonus" name="dx-bonus" class="form-control" autocomplete="on" aria-label="Bonus" placeholder="Bonus">
|
|
<div class="input-group-btn">
|
|
<button id="dx-bonus-plus" class="bonus-plus btn btn-success" aria-label="Increase Bonus">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 text-center">
|
|
<button id="dx-roll" class="dx-die die-btn btn btn-primary">
|
|
Custom (D-X)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roll History -->
|
|
<div id="roll-history" class="row" style="display: none;">
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Roll History</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">Roll Type</th>
|
|
<th class="text-center">Dice Values</th>
|
|
<th class="text-center">Modified Dice Values</th>
|
|
<th class="text-center">Dice Total</th>
|
|
<th class="text-center">Modified Total</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="roll-history-table">
|
|
{diceHistory}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="panel-footer round-footer">
|
|
<span class="pull-right">
|
|
<button id="history-clear" class="btn btn-danger">
|
|
Clear History
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div> |