197 lines
11 KiB
HTML
197 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Shadowrun 2e Ini Tracker</title>
|
|
<meta name="description" content="A simple Initiative tracker for Shadowrun 2e" />
|
|
<meta name="author" content="Eclipse729" />
|
|
|
|
<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.css">
|
|
<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
|
|
|
|
<script type="module" src="js/sr2ini.js"></script>
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
|
<link rel="manifest" href="/icons/sr2ini.iconmanifest">
|
|
<link rel="shortcut icon" href="/icons/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#004aa5">
|
|
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
|
<meta name="theme-color" content="gold">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- navbar -->
|
|
<div class="container">
|
|
<header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
|
|
<span class="navbar-brand ps-4">SR2 Initiative Tracker</span>
|
|
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
|
|
<button type="submit" class="sr2-button" id="add-combatant-button" title="Add combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><svg viewbox="0 0 512 512"><use href="#add" /></svg>
|
|
</button>
|
|
<button type="submit" class="sr2-button" id="new-round-button" title="Start new round" data-bs-toggle="modal" data-bs-target="#confirm-modal"><svg viewbox="0 0 512 512" ><use href="#newround" /></svg>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
|
|
<!-- combatants table -->
|
|
<div class="container">
|
|
<main class="table-responsive overflow-visible">
|
|
<table class="table table-sm table-borderless" id="combatants-table">
|
|
<thead>
|
|
<tr data-augmented-ui="tl-clip-y tr-clip-y">
|
|
<th class="th-name" data-augmented-ui="tl-clip-y both" title="Name" scope="col">Name</th>
|
|
<th class="th-ini" data-augmented-ui="both" title="Initiative" scope="col">Ini</th>
|
|
<th class="th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction" scope="col">D+R</th>
|
|
<th class="th-actions" data-augmented-ui="tr-clip-y both" title="Actions" scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- confirm modal -->
|
|
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
|
|
<div class="modal-header" data-augmented-ui="inlay">
|
|
<h2 class="modal-title">Start New Round</h2>
|
|
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
|
</div>
|
|
<div class="modal-body" data-augmented-ui="inlay">
|
|
<p>Are you sure?</p>
|
|
</div>
|
|
<div class="modal-footer" data-augmented-ui="inlay">
|
|
<button type="button" class="sr2-button" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="sr2-button" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
|
|
<button type="submit" class="sr2-button display-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- combatant modal (add & edit) -->
|
|
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
|
|
<div class="modal-header" data-augmented-ui="inlay">
|
|
<h2 class="modal-title">Add New Combatant</h2>
|
|
<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">✖</button>
|
|
</div>
|
|
<div class="modal-body" data-augmented-ui="inlay">
|
|
<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
|
|
<div>
|
|
<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
|
|
</div>
|
|
<div class="input-group input-group-sm">
|
|
<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-form" placeholder="Dice">
|
|
<span class="input-group-text">D+</span>
|
|
<input type="number" min="0" max="30" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
|
|
<span class="input-group-text"> </span>
|
|
<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="combatant-form" placeholder="Ini">
|
|
</div>
|
|
<div class="range-group">
|
|
<label for="combatant-modal-stun" class="form-label">Stun damage <span id="combatant-modal-penalty-stun"></span></label>
|
|
<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-stun" list="damage-level">
|
|
<datalist id="damage-level">
|
|
<option>0</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
|
|
</datalist>
|
|
<div class="label-swap">
|
|
<label for="combatant-modal-physical" class="form-label">Physical damage <span id="combatant-modal-penalty-physical"></span></label>
|
|
<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-physical" list="damage-level">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer" data-augmented-ui="inlay">
|
|
<button type="button" class="sr2-button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
|
|
<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" >OK</button>
|
|
<button type="submit" class="sr2-button display-none" id="combatant-modal-edit-ok-button" >OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SVG icon <symbol> definitions (for later <use>)-->
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="display-none">
|
|
<defs>
|
|
<!-- add combatant -->
|
|
<symbol id="add" >
|
|
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
|
|
<rect height="96" width="64" x="224" y="0" />
|
|
<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
|
|
<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
|
|
<path d="M 128 272 q 64 32 128 32 v -32 Z" />
|
|
<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
|
|
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
|
|
<rect x="0" y="448" width="96" height="64" />
|
|
<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
|
|
<rect x="192" y="480" width="64" height="32" />
|
|
<rect x="288" y="368" width="228" height="64" />
|
|
<rect x="368" y="288" width="64" height="228" />
|
|
</symbol>
|
|
<!-- new round -->
|
|
<symbol id="newround" >
|
|
<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
|
|
<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
|
|
</symbol>
|
|
<!-- act (-10) -->
|
|
<symbol id="act" >
|
|
<path d="M 96 228 q 6 2 8 8 v 40 q -2 6 -8 8 h -88 q -6 -2 -8 -8 v -40 q 2 -6 8 -8 z" />
|
|
<path d="M 84 178 q -5.5 4.5 -11 0 l -24 -24 q -4.5 -5.5 0 -11 l 76 -76 q 9 -3 12 -4 h 68 q 6 2 8 8 v 368 q -2 6 -8 8 h -44 q -6 -2 -8 -8 v -324 q -0 -8 -5.5 -2.5 z" />
|
|
<path d="M 295 444 h 174 q 11 0 21 -11 l 11 -11 q 11 -11 11 -27 v -285 q 0 -16 -11 -27 l -11 -11 q -11 -11 -21 -11 h -174 q -11 0 -21 11 l -11 11 q -11 11 -11 27 v 285 q 0 16 11 27 l 11 11 q 11 11 21 11 z M 452 144 v 216 q 0 8 -1 11 t -5 6 t -6 5 t -10 1 h -96 q -8 0 -10 -1 t -6 -5 t -5 -6 t -1 -11 v -216 q 0 -8 1 -11 t 5 -6 t 6 -5 t 10 -1 h 96 q 8 0 10 1 t 6 5 t 5 6 t 1 11 z" />
|
|
</symbol>
|
|
<!-- take damage -->
|
|
<symbol id="take-damage" >
|
|
<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
|
|
</symbol>
|
|
<!-- more actions -->
|
|
<symbol id="more-actions" >
|
|
<polygon points="32 32 480 32 256 480" />
|
|
</symbol>
|
|
<!-- edit combatant -->
|
|
<symbol id="edit" >
|
|
<polygon points="0 512 0 352 224 128 384 288 160 512" />
|
|
<polygon points="352 0 512 160 416 256 256 96" />
|
|
</symbol>
|
|
<!-- clone combatant -->
|
|
<symbol id="clone" >
|
|
<rect x="0" y="0" width="512" height="128" />
|
|
<rect x="0" y="384" width="512" height="128" />
|
|
<polygon points="128 192 384 192 256 320" />
|
|
</symbol>
|
|
<!-- delete combatant -->
|
|
<symbol id="delete" >
|
|
<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
|
|
<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
|
|
</symbol>
|
|
<!-- K.O. -->
|
|
<symbol id="ko" >
|
|
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
|
|
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
|
|
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
|
|
</symbol>
|
|
<!-- dead -->
|
|
<symbol id="dead" >
|
|
<rect x="208" y="0" width="96" height="512" />
|
|
<rect x="80" y="112" width="352" height="96" />
|
|
</symbol>
|
|
</defs>
|
|
</svg>
|
|
|
|
<!-- footer -->
|
|
<div class="footer-container container">
|
|
<footer data-augmented-ui="tl-clip br-clip both">
|
|
<p><a href="https://git.unterdemradar.de/tobias/sr2ini" tabindex="-1" title="sr2ini">sr2ini</a> | Copyright (C) 2023 by Eclipse729 | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|