Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
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
parent1935310fbf26769938a6e9a4008623c7b44fc5a8 (diff)
WIP: template work
Diffstat
-rw-r--r--damage_block.css61
-rw-r--r--index.html294
-rw-r--r--index.js41
-rw-r--r--soldier_record_block.css32
-rw-r--r--style.css55
5 files changed, 439 insertions, 44 deletions
diff --git a/damage_block.css b/damage_block.css
new file mode 100644
index 0000000..46e55a0
--- /dev/null
+++ b/damage_block.css
@@ -0,0 +1,61 @@
+.damage-selector, .damage-effect-indicator {
+ width: 20px;
+ height: 30px;
+}
+
+.damage-selector {
+ margin: 0;
+ padding: 0;
+ border: 1px solid black;
+ display: inline-block;
+}
+
+.damage-effect-indicator {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ display: block;
+ pointer-events: none;
+ font-family: monospace;
+}
+
+.damage-selector.clear {
+ background-color: white;
+}
+
+.damage-selector.bruise {
+ background-color: orange;
+}
+
+.damage-selector.lethal {
+ background-color: red;
+}
+
+label input[type="radio"] {
+ position: absolute;
+ opacity: 0;
+ margin: 0;
+ padding: 0;
+}
+
+label {
+ display: none;
+ margin: 0;
+ padding: 0;
+}
+
+label:first-of-type {
+ display: block;
+}
+
+label:has(input:checked) {
+ display: none;
+}
+
+label:has(+ label input:checked) {
+ display: none;
+}
+
+label:has(input:checked) + label {
+ display: block;
+} \ No newline at end of file
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>
diff --git a/index.js b/index.js
index fc3d4d5..695eae5 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,42 @@
+class SoldierRecordBlock extends HTMLDivElement {
+ constructor() {
+ super();
+
+ let template = document.getElementById('soldier-record-block');
+ let templateContent = template.content;
+
+ const shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+
+ customElements.define(
+ 'damage-block',
+ class extends HTMLSpanElement {
+ constructor() {
+ super();
+
+ let template = document.getElementById('damage-block');
+ let templateContent = template.content;
+
+ const shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+ }
+ },
+ { extends: 'span' }
+ );
+
+ this.shadowRoot
+ .querySelector('input[type="number"]')
+ .addEventListener('click', e => e.stopPropagation())
+ ;
+ }
+}
+
+customElements.define(
+ 'soldier-record-block',
+ SoldierRecordBlock,
+ { extends: 'div'}
+);
+
function isEven(n) {
return n % 2 === 0;
}
@@ -274,6 +313,8 @@ document.querySelectorAll('.soldier-record').forEach(el =>
})
);
+document.querySelectorAll('#record-sheet .damage').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
+
document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
diff --git a/soldier_record_block.css b/soldier_record_block.css
new file mode 100644
index 0000000..02b5241
--- /dev/null
+++ b/soldier_record_block.css
@@ -0,0 +1,32 @@
+span {
+ font-size: smaller;
+ font-family: monospace;
+ margin-right: 1em;
+}
+
+.damage span {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.damage span[slot="block-number"] {
+ font-family: serif;
+ font-size: unset;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+ul li {
+ display: inline;
+ margin-left: 1em;
+}
+
+p {
+ margin: 0;
+}
diff --git a/style.css b/style.css
index 93552b0..0f08fff 100644
--- a/style.css
+++ b/style.css
@@ -45,7 +45,10 @@ rect#map {
}
polygon.firing-arc {
- opacity: 0.1;
+ /* opacity: 0.1; */
+ fill: transparent;
+ stroke-width: 2px;
+ stroke: black;
}
button.set-firing-arc img {
@@ -82,12 +85,30 @@ line.ruler {
margin: 0;
}
+.damage label {
+ margin: 0;
+ padding: 0;
+}
-label span {
+.damage span {
+ margin: 0;
+ padding: 0;
+}
+
+.damage > span {
display: inline-block;
- width: 10px;
- height: 10px;
+ text-align: center;
+ font-family: serif;
+ vertical-align: middle;
+}
+
+.damage-selector {
+ width: 20px;
+ height: 30px;
+ margin: 0;
+ padding: 0;
border: 1px solid black;
+ display: inline-block;
}
.damage-selector.clear {
@@ -102,8 +123,11 @@ label span {
background-color: red;
}
-label {
- display: block;
+.damage label input {
+ position: absolute;
+ opacity: 0;
+ margin: 0;
+ padding: 0;
}
/* .soldier-record p.damage span {
@@ -163,29 +187,24 @@ input:checked + label + input + label {
}
*/
-input {
- position: absolute;
- opacity: 0;
-}
-
-label span {
+label {
display: none;
}
-label:first-of-type span {
- display: inline-block;
+label:first-of-type {
+ display: block;
}
-label:has(input:checked) span {
+label:has(input:checked) {
display: none;
}
-label:has(+ label input:checked) span {
+label:has(+ label input:checked) {
display: none;
}
-label:has(input:checked) + label span {
- display: inline-block;
+label:has(input:checked) + label {
+ display: block;
}
image#img1 {