WIP: template work
This commit is contained in:
316
index.html
316
index.html
@@ -5,6 +5,107 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<template id="damage-block">
|
||||
<link rel="stylesheet" href="damage_block.css">
|
||||
|
||||
<slot name="block-number"></slot>
|
||||
<span class="damage-effect-indicator">
|
||||
<slot name="firing-modifier"></slot><br>
|
||||
<slot name="movement-points"></slot>
|
||||
</span>
|
||||
<label>
|
||||
<input type="radio" name="damage" checked>
|
||||
<span class="damage-selector lethal"></span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="damage">
|
||||
<span class="damage-selector clear"></span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="damage">
|
||||
<span class="damage-selector bruise"></span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<template id="physical-status-track">
|
||||
<link rel="stylesheet" href="physical_status_track_style.css">
|
||||
</template>
|
||||
|
||||
<template id="soldier-record-block">
|
||||
<link rel="stylesheet" href="soldier_record_block.css">
|
||||
|
||||
<p class="damage">
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">10</span>
|
||||
<span slot="movement-points">8</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">9</span>
|
||||
<span slot="movement-points">8</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">8</span>
|
||||
<span slot="movement-points">8</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">7</span>
|
||||
<span slot="movement-points">8</span>
|
||||
<span slot="firing-modifier">+1</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">6</span>
|
||||
<span slot="movement-points">7</span>
|
||||
<span slot="firing-modifier">+1</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">5</span>
|
||||
<span slot="movement-points">7</span>
|
||||
<span slot="firing-modifier">+2</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">4</span>
|
||||
<span slot="movement-points">6</span>
|
||||
<span slot="firing-modifier">+2</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">3</span>
|
||||
<span slot="movement-points">6</span>
|
||||
<span slot="firing-modifier">+2</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">2</span>
|
||||
<span slot="movement-points">5</span>
|
||||
<span slot="firing-modifier">+3</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">1</span>
|
||||
<span slot="movement-points">4</span>
|
||||
<span slot="firing-modifier">+3</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">0</span>
|
||||
<span slot="movement-points">None</span>
|
||||
<span slot="firing-modifier">0</span>
|
||||
</span>
|
||||
<span is="damage-block">
|
||||
<span slot="block-number">DEAD</span>
|
||||
<span slot="movement-points"></span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p><span>Troop Number</span> 1</p>
|
||||
<p><span>Primary Weapon Type</span> Rifle</p>
|
||||
<ul>
|
||||
<li><span>Damage</span> 4L</li>
|
||||
<li><span>Short</span> 1-27</li>
|
||||
<li><span>Long</span> 28-75</li>
|
||||
</ul>
|
||||
<p>
|
||||
<span>Hand Grenades</span>
|
||||
<input type="number" min="0" max="4" value="4" />
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
|
||||
@@ -55,52 +156,189 @@
|
||||
17th Kestral Mechanized Infantry -->
|
||||
</p>
|
||||
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
|
||||
<!-- <p class="damage">
|
||||
<span>
|
||||
<label>
|
||||
<input type="checkbox" /> Bruise
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Lethal
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Bruise
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Lethal
|
||||
</label>
|
||||
</span>
|
||||
</p> -->
|
||||
<!-- <p class="damage">
|
||||
<span>
|
||||
<input type="radio" name="d1" id="clear" checked>
|
||||
<label for="clear">lethal</label>
|
||||
<input type="radio" name="d1" id="bruise">
|
||||
<label for="bruise">clear</label>
|
||||
<input type="radio" name="d1" id="lethal">
|
||||
<label for="lethal">bruise</label>
|
||||
</span>
|
||||
</p> -->
|
||||
|
||||
<!-- technically called the Physical Status Track -->
|
||||
<p class="damage">
|
||||
<!-- <span> -->
|
||||
<span>
|
||||
10
|
||||
<label>
|
||||
<input type="radio" name="d1" checked>
|
||||
<span class="damage-selector lethal"></span>
|
||||
<span class="damage-selector lethal">8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d1">
|
||||
<span class="damage-selector clear"></span>
|
||||
<span class="damage-selector clear">8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d1">
|
||||
<span class="damage-selector bruise"></span>
|
||||
<span class="damage-selector bruise">8</span>
|
||||
</label>
|
||||
<!-- </span> -->
|
||||
</span>
|
||||
<span>
|
||||
9
|
||||
<label>
|
||||
<input type="radio" name="d2" checked>
|
||||
<span class="damage-selector lethal">8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d2">
|
||||
<span class="damage-selector clear">8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d2">
|
||||
<span class="damage-selector bruise">8</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
8
|
||||
<label>
|
||||
<input type="radio" name="d3" checked>
|
||||
<span class="damage-selector lethal">8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d3">
|
||||
<span class="damage-selector clear">8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d3">
|
||||
<span class="damage-selector bruise">8</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
7
|
||||
<label>
|
||||
<input type="radio" name="d4" checked>
|
||||
<span class="damage-selector lethal">+1<br>8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d4">
|
||||
<span class="damage-selector clear">+1<br>8</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d4">
|
||||
<span class="damage-selector bruise">+1<br>8</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
6
|
||||
<label>
|
||||
<input type="radio" name="d5" checked>
|
||||
<span class="damage-selector lethal">+1<br>7</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d5">
|
||||
<span class="damage-selector clear">+1<br>7</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d5">
|
||||
<span class="damage-selector bruise">+1<br>7</span>
|
||||
</label>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
5
|
||||
<label>
|
||||
<input type="radio" name="d6" checked>
|
||||
<span class="damage-selector lethal">+2<br>7</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d6">
|
||||
<span class="damage-selector clear">+2<br>7</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d6">
|
||||
<span class="damage-selector bruise">+2<br>7</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
4
|
||||
<label>
|
||||
<input type="radio" name="d7" checked>
|
||||
<span class="damage-selector lethal">+2<br>6</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d7">
|
||||
<span class="damage-selector clear">+2<br>6</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d7">
|
||||
<span class="damage-selector bruise">+2<br>6</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
3
|
||||
<label>
|
||||
<input type="radio" name="d8" checked>
|
||||
<span class="damage-selector lethal">+2<br>6</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d8">
|
||||
<span class="damage-selector clear">+2<br>6</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d8">
|
||||
<span class="damage-selector bruise">+2<br>6</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
2
|
||||
<label>
|
||||
<input type="radio" name="d9" checked>
|
||||
<span class="damage-selector lethal">+3<br>5</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d9">
|
||||
<span class="damage-selector clear">+3<br>5</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d9">
|
||||
<span class="damage-selector bruise">+3<br>5</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
1
|
||||
<label>
|
||||
<input type="radio" name="d10" checked>
|
||||
<span class="damage-selector lethal">+3<br>4</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d10">
|
||||
<span class="damage-selector clear">+3<br>4</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d10">
|
||||
<span class="damage-selector bruise">+3<br>4</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
0
|
||||
<label>
|
||||
<input type="radio" name="d11" checked>
|
||||
<span class="damage-selector lethal">None<br>0</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d11">
|
||||
<span class="damage-selector clear">None<br>0</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d11">
|
||||
<span class="damage-selector bruise">None<br>0</span>
|
||||
</label>
|
||||
</span>
|
||||
<span>
|
||||
DEAD
|
||||
<label>
|
||||
<input type="radio" name="d12" checked>
|
||||
<span class="damage-selector lethal"> </span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d12">
|
||||
<span class="damage-selector clear"> </span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="d12">
|
||||
<span class="damage-selector bruise"> </span>
|
||||
</label>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p><span>Troop Number</span> 1</p>
|
||||
@@ -110,7 +348,10 @@
|
||||
<li><span>Short</span> 1-27</li>
|
||||
<li><span>Long</span> 28-75</li>
|
||||
</ul>
|
||||
<p><span>Hand Grenades</span> 4</p>
|
||||
<p>
|
||||
<span>Hand Grenades</span>
|
||||
<input type="number" min="0" max="4" value="4" />
|
||||
</p>
|
||||
</div>
|
||||
<div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
|
||||
Troop Number: 2<br>
|
||||
@@ -130,6 +371,7 @@
|
||||
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
||||
Aldebaran Home Guard -->
|
||||
</p>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao"></div>
|
||||
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
|
||||
Troop Number: 1<br>
|
||||
Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br>
|
||||
|
||||
Reference in New Issue
Block a user