Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-24 16:42:49 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-24 16:42:49 -0700
commitb5143808d2d907102346413e70aa28641effcacc (patch)
tree9a758058ea6634a16b180a4e39f85fe7f4ac2482 /index.html
parent1935310fbf26769938a6e9a4008623c7b44fc5a8 (diff)
WIP: template work
Diffstat (limited to 'index.html')
-rw-r--r--index.html294
1 files changed, 268 insertions, 26 deletions
diff --git a/index.html b/index.html
index 36594b0..179d02a 100644
--- a/index.html
+++ b/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">
+ <!-- technically called the Physical Status Track -->
+ <p class="damage">
+ <span>
+ 10
+ <label>
+ <input type="radio" name="d1" checked>
+ <span class="damage-selector lethal">8</span>
+ </label>
+ <label>
+ <input type="radio" name="d1">
+ <span class="damage-selector clear">8</span>
+ </label>
+ <label>
+ <input type="radio" name="d1">
+ <span class="damage-selector bruise">8</span>
+ </label>
+ </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="checkbox" /> Bruise
+ <input type="radio" name="d3" checked>
+ <span class="damage-selector lethal">8</span>
</label>
<label>
- <input type="checkbox" /> Lethal
+ <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="checkbox" />
- Bruise
+ <input type="radio" name="d4">
+ <span class="damage-selector clear">+1<br>8</span>
</label>
<label>
- <input type="checkbox" />
- Lethal
+ <input type="radio" name="d4">
+ <span class="damage-selector bruise">+1<br>8</span>
</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>
+ 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>
- </p> -->
- <p class="damage">
- <!-- <span> -->
+ <span>
+ 5
<label>
- <input type="radio" name="d1" checked>
- <span class="damage-selector lethal"></span>
+ <input type="radio" name="d6" checked>
+ <span class="damage-selector lethal">+2<br>7</span>
</label>
<label>
- <input type="radio" name="d1">
- <span class="damage-selector clear"></span>
+ <input type="radio" name="d6">
+ <span class="damage-selector clear">+2<br>7</span>
</label>
<label>
- <input type="radio" name="d1">
- <span class="damage-selector bruise"></span>
+ <input type="radio" name="d6">
+ <span class="damage-selector bruise">+2<br>7</span>
</label>
- <!-- </span> -->
+ </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">&nbsp;</span>
+ </label>
+ <label>
+ <input type="radio" name="d12">
+ <span class="damage-selector clear">&nbsp;</span>
+ </label>
+ <label>
+ <input type="radio" name="d12">
+ <span class="damage-selector bruise">&nbsp;</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>