Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-30 10:17:45 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-30 10:17:45 -0700
commit82d3a4b415ba920176058d615b697e84a49adabc (patch)
tree7bc250d9f332689e3dc0c4e7aec5949175a0f9fa /public
parenta4888a3e0905f3561781cb0ef4686befc0dff122 (diff)
Create record sheet dynamically when map is loaded
Diffstat (limited to 'public')
-rw-r--r--public/index.html108
-rw-r--r--public/map.css42
-rw-r--r--public/map1.svg95
-rw-r--r--public/map2.svg67
-rw-r--r--public/map3.svg67
-rw-r--r--public/map4.svg33
-rw-r--r--public/soldier_record_block.js1
-rw-r--r--public/style.css76
8 files changed, 297 insertions, 192 deletions
diff --git a/public/index.html b/public/index.html
index 4f15e08..cdab46c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -94,10 +94,10 @@
<div id="map-container">
<div id="toggle-firing-arc-vis">
- <div>Davion</div>
- <input type="checkbox" data-allegiance="davion" />
- <div>Liao</div>
- <input type="checkbox" data-allegiance="liao" />
+ <div>Defender</div>
+ <input type="checkbox" data-allegiance="defender"/>
+ <div>Attacker</div>
+ <input type="checkbox" data-allegiance="attacker"/>
</div>
<div class="map-placeholder">
@@ -114,64 +114,46 @@
<div id="content">
<input type="checkbox" class="visible"/>
<div>
- Set firing arc:
- <button type="button" class="set-firing-arc" data-size="small">
- <img src="firing_arc_small.png" height="12" /> 2 MP
- </button>
- <button type="button" class="set-firing-arc" data-size="medium">
- <img src="firing_arc_medium.png" height="12" /> 4 MP
- </button>
- <button type="button" class="set-firing-arc" data-size="large">
- <img src="firing_arc_large.png" height="12" /> 6 MP
- </button>
- Prone: <input type="checkbox" id="toggle-prone-counter" />
- <button type="button" class="set-grenade">
- <img src="icon_grenade.png" height="12" />
- </button>
Turn:
<span id="turn-count" data-update="0">
<span name="count">0</span>
<span class="inning-top">◓</span>
<span class="inning-bottom">◒</span>
</span>
-
- <dialog id="map-dialog">
- <form>
- <p>
- <label>
- Map:
- <select>
- <option value="map1">Map1</option>
- <option value="map2">Map2</option>
- <option value="map3">Map3</option>
- </select>
- </label>
- </p>
- <div>
- <button value="cancel" formmethod="dialog">Cancel</button>
- <button id="confirm-btn" value="default">Confirm</button>
- </div>
- </form>
- </dialog>
- <button id="show-dialog">Change map</button>
+ <button id="show-dialog">Change scenario</button>
+ <span style="white-space: nowrap;">
+ Prone: <input type="checkbox" id="toggle-prone-counter" />
+ <button type="button" class="set-firing-arc" data-size="small">
+ <img src="firing_arc_small.png" height="12" /> 2 MP
+ </button>
+ <button type="button" class="set-firing-arc" data-size="medium">
+ <img src="firing_arc_medium.png" height="12" /> 4 MP
+ </button>
+ <button type="button" class="set-firing-arc" data-size="large">
+ <img src="firing_arc_large.png" height="12" /> 6 MP
+ </button>
+ <button type="button" class="set-grenade">
+ <img src="icon_grenade.png" height="12" />
+ </button>
+ </span>
</div>
<div id="record-sheet">
- <div>
+ <div id="attacker-record">
<!-- <img class="logo" src="logo-davion.png" /> -->
<p>
- <strong>Davion</strong>
- <button type="button" class="end-move" data-allegiance="davion">
+ <strong class="name">Attacker</strong>
+ <button type="button" class="end-move" data-allegiance="attacker">
End Movement
</button>
- <button type="button" class="end-turn" data-allegiance="liao">
+ <button type="button" class="end-turn" data-allegiance="defender">
End Turn
</button>
<br>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry -->
</p>
- <div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="davion">
+ <!-- <div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
@@ -219,30 +201,30 @@
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span>
<span slot="primary-weapon-range-long">18-105</span>
- </div>
+ </div> -->
</div>
- <div>
+ <div id="defender-record">
<!-- <img class="logo" src="logo-liao.png" /> -->
<p>
- <strong>Liao</strong>
- <button type="button" class="end-move" data-allegiance="liao">
+ <strong class="name">Defender</strong>
+ <button type="button" class="end-move" data-allegiance="defender">
End Movement
</button>
- <button type="button" class="end-turn" data-allegiance="davion">
+ <button type="button" class="end-turn" data-allegiance="attacker">
End Turn
</button>
<br>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard -->
</p>
- <div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="liao">
+ <!-- <div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="liao">
+ </div> -->
+ <!-- <div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
@@ -283,12 +265,32 @@
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span>
<span slot="primary-weapon-range-long">18-105</span>
- </div>
+ </div> -->
</div>
</div>
</div>
- <script src="soldier_record_block.js"></script>
+ <dialog id="map-dialog">
+ <form>
+ <p>
+ <label>
+ Scenario:
+ <select>
+ <option value="map1">Scenario 1: Side Show</option>
+ <option value="map2">Scenario 2: Dragon Hunting</option>
+ <option value="map3">Scenario 3: Race Against Time</option>
+ <option value="map4">Test</option>
+ </select>
+ </label>
+ </p>
+ <div>
+ <button value="cancel" formmethod="dialog">Cancel</button>
+ <button id="confirm-btn" value="default">Confirm</button>
+ </div>
+ </form>
+ </dialog>
+
<script src="index.js"></script>
+ <script src="soldier_record_block.js"></script>
</body>
</html>
diff --git a/public/map.css b/public/map.css
index 1a57998..0c2fed9 100644
--- a/public/map.css
+++ b/public/map.css
@@ -22,13 +22,6 @@ use[href="#hex"] {
stroke: black;
}
-/* use[href="#hex"]:hover, use[href="#hex"].hover
- {
- opacity: 1;
- fill: orange;
- stroke: orangered;
-} */
-
use[href="#hex"].active {
opacity: 0.2;
fill: teal;
@@ -41,10 +34,13 @@ use[href="#hex"].active {
fill-opacity: 0.04;
}
+polyline {
+ fill: none;
+}
+
polyline.move-trace {
stroke: white;
stroke-dasharray: 2;
- fill: none;
}
#background {
@@ -73,6 +69,11 @@ g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
+g.weapon-symbol {
+ stroke: white;
+ stroke-width: 0.5px;
+}
+
g.troop-counter-template text {
fill: white;
font-size: 12px;
@@ -108,11 +109,11 @@ g.clone [href="#counter-prone"] {
opacity: 0.5;
}
-g[data-allegiance="davion"].clone {
+g[data-allegiance="defender"].clone {
fill: rgb(255, 126, 126);
}
-g[data-allegiance="liao"].clone {
+g[data-allegiance="attacker"].clone {
fill: rgb(130, 190, 130);
}
@@ -128,11 +129,11 @@ text.counter, #troop-counter text {
user-select: none;
}
-polygon.firing-arc[data-allegiance="davion"] {
+polygon.firing-arc[data-allegiance="defender"] {
fill: red;
}
-polygon.firing-arc[data-allegiance="liao"] {
+polygon.firing-arc[data-allegiance="attacker"] {
fill: green;
}
@@ -172,7 +173,7 @@ polygon.firing-arc[data-allegiance="liao"] {
stroke-opacity: inherit;
}
-use[href*="#t-"] {
+g.counter use, use[href*="#t-"] {
r: 5px;
}
@@ -191,11 +192,11 @@ g.selected use {
}
}
-.counter[data-allegiance="liao"] {
- fill: #008000;
+.counter[data-allegiance="attacker"] {
+ fill: green;
}
-.counter[data-allegiance="davion"] {
+.counter[data-allegiance="defender"] {
fill: red;
}
@@ -203,14 +204,6 @@ g.selected use {
transform: translate(19px, 31px) scale(4);
}
-g.start-locations > g:first-child:not([data-y]) {
- --i: -2;
-}
-
-g.start-locations > g:last-child:not([data-y]) {
- --i: 52;
-}
-
/* Inradius and circumradius values come from the hexagon */
.grid, g.start-locations {
--inradius: 8.66px;
@@ -249,7 +242,6 @@ g[data-y]:nth-child(odd) {
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
}
-g[data-y="-2"] { --i: -2; }
g[data-y="0"] { --i: 0; }
g[data-y="1"] { --i: 1; }
g[data-y="2"] { --i: 2; }
diff --git a/public/map1.svg b/public/map1.svg
index efae907..6d767ba 100644
--- a/public/map1.svg
+++ b/public/map1.svg
@@ -3,6 +3,10 @@
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-18 -150 2320 3360" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
+ <style>
+ g[data-edge="north"] { --i: -2; }
+ g[data-edge="south"] { --i: 52; }
+ </style>
<defs>
<!-- <g id="hex">
<polygon points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@@ -21,6 +25,35 @@
<g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
<g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+ <g id="semi-auto">
+ <line x1="-2" y1="1" x2="2" y2="1"/>
+ <line x1="-2" y1="2" x2="2" y2="2"/>
+ </g>
+
+ <g id="auto">
+ <line x1="-2" y1="0" x2="2" y2="0"/>
+ <line x1="-2" y1="1" x2="2" y2="1"/>
+ <line x1="-2" y1="2" x2="2" y2="2"/>
+ </g>
+
+ <g id="rifle" class="weapon-symbol">
+ <use href="#semi-auto"/>
+ <line x1="0" y1="-5" x2="0" y2="5"/>
+ <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+ </g>
+
+ <g id="smg" class="weapon-symbol">
+ <use href="#auto"/>
+ <line x1="0" y1="-5" x2="0" y2="4.5"/>
+ <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
+ </g>
+
+ <g id="blazer" class="weapon-symbol">
+ <use href="#auto"/>
+ <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
+ <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+ </g>
+
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
<image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
@@ -50,24 +83,52 @@
<g id="shapes"/>
<g id="lines"/>
</g>
- <g class="start-locations">
- <g>
- <g data-x="13" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
- <g data-x="14" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
- <g data-x="15" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
- <g data-x="16" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
- <g data-x="17" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
- <g data-x="18" class="counter" data-allegiance="liao" data-number="6"><use href="#t-6"/></g>
- <g data-x="19" class="counter" data-allegiance="liao" data-number="7"><use href="#t-7"/></g>
+ <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
+ <g data-edge="north">
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+ </g>
</g>
- <g>
- <g data-x="13" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
- <g data-x="14" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
- <g data-x="15" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
- <g data-x="16" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
- <g data-x="17" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
- <g data-x="18" class="counter" data-allegiance="davion" data-number="6"><use href="#t-6"/></g>
- <g data-x="19" class="counter" data-allegiance="davion" data-number="7"><use href="#t-7"/></g>
+ <g data-edge="south">
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+ </g>
</g>
</g>
<g class="grid">
diff --git a/public/map2.svg b/public/map2.svg
index 013118d..c0ac9a4 100644
--- a/public/map2.svg
+++ b/public/map2.svg
@@ -4,13 +4,12 @@
<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
<style>
- use[href="#hex"] {
- opacity: 0.2;
- }
-
#image-maps image {
transform: none;
}
+
+ g[data-edge="north"] { --i: -2; }
+ g[data-edge="south"] { --i: 78; }
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@@ -44,22 +43,54 @@
<g id="shapes"/>
<g id="lines"/>
</g>
- <!-- <g class="start-locations">
- <g data-y="-2">
- <g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
- <g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
- <g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
- <g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
- <g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
+ <g class="start-locations">
+ <g data-edge="north">
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+ </g>
</g>
- <g data-y="6">
- <g data-x="0" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
- <g data-x="1" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
- <g data-x="2" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
- <g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
- <g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
+ <g data-edge="south">
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+ </g>
</g>
- </g> -->
+ </g>
<g class="grid"/>
</g>
<script href="map.js" data-cols="33" data-rows="77"></script>
diff --git a/public/map3.svg b/public/map3.svg
index 587c697..25a9518 100644
--- a/public/map3.svg
+++ b/public/map3.svg
@@ -4,13 +4,12 @@
<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
<style>
- use[href="#hex"] {
- opacity: 0.2;
- }
-
#image-maps image {
transform: translate(-10px, 0px);
}
+
+ g[data-edge="north"] { --i: -2; }
+ g[data-edge="south"] { --i: 26; }
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@@ -41,22 +40,54 @@
<g id="shapes"/>
<g id="lines"/>
</g>
- <!-- <g class="start-locations">
- <g data-y="-2">
- <g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
- <g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
- <g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
- <g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
- <g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
+ <g class="start-locations">
+ <g data-edge="north">
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+ </g>
</g>
- <g data-y="6">
- <g data-x="0" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
- <g data-x="1" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
- <g data-x="2" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
- <g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
- <g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
+ <g data-edge="south">
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+ </g>
</g>
- </g> -->
+ </g>
<g class="grid"/>
</g>
<script href="map.js" data-cols="33" data-rows="25"></script>
diff --git a/public/map4.svg b/public/map4.svg
new file mode 100644
index 0000000..c556811
--- /dev/null
+++ b/public/map4.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
+ <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
+ <defs>
+ <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+ <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+ <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+ <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+ <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+ <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+ <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+ <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+ <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+
+ <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+ <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+ </defs>
+
+ <rect id="background"/>
+
+ <g class="gameboard">
+ <g id="firing-arcs">
+ <g id="shapes"/>
+ <g id="lines"/>
+ </g>
+ <g class="grid"/>
+ </g>
+ <script href="map.js" data-cols="33" data-rows="25"></script>
+</svg>
diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js
index 0bf5a9a..3931649 100644
--- a/public/soldier_record_block.js
+++ b/public/soldier_record_block.js
@@ -49,7 +49,6 @@ customElements.define(
}
connectedCallback() {
- // this.shadowRoot.querySelectorAll('.grenades *').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
}
},
diff --git a/public/style.css b/public/style.css
index 22f592f..c229889 100644
--- a/public/style.css
+++ b/public/style.css
@@ -86,6 +86,10 @@ div#content {
background-color: gray;
}
+#record-sheet .name {
+ text-transform: capitalize;
+}
+
#record-sheet > div {
/* padding: 0 2px; */
overflow-y: auto;
@@ -233,72 +237,20 @@ g#points g.hover use.counter {
r: 7px;
}
-g#points g.hover use.counter:not(.clone) {
- /* stroke: orange; */
- /* stroke-width: 2px; */
-}
-
-g#points use.counter[data-allegiance="davion"] {
- fill: red;
-}
-
-g#points use.counter[data-allegiance="liao"] {
- fill: green;
-}
-
g#points use.clone {
stroke: white;
stroke-width: 0.5px;
stroke-dasharray: 1;
}
-g#points use[data-allegiance="davion"].clone {
+g#points use[data-allegiance="defender"].clone {
fill: rgb(255, 126, 126);
}
-g#points use[data-allegiance="liao"].clone {
+g#points use[data-allegiance="attacker"].clone {
fill: rgb(130, 190, 130);
}
-
-/* ======================================================= */
-
-/* g#counters {
- pointer-events: none;
-} */
-
-/* g#counters use {
- r: 5px;
-}
-
-g#counters use:hover {
- stroke: orange;
- stroke-width: 2px;
- r: 8px;
-} */
-
-/* g#counters use[data-allegiance="davion"] {
- fill: red;
-}
-
-g#counters use[data-allegiance="liao"] {
- fill: green;
-} */
-
-/* g#counters use.clone {
- stroke: white;
- stroke-width: 0.5px;
- stroke-dasharray: 1;
-}
-
-g#counters use[data-allegiance="davion"].clone {
- fill: rgb(255, 126, 126);
-}
-
-g#counters use[data-allegiance="liao"].clone {
- fill: rgb(130, 190, 130);
-} */
-
text.counter, #troop-counter text {
font-size: 12px;
font-weight: bold;
@@ -314,11 +266,11 @@ text.counter, #troop-counter text {
user-select: none;
}
-polygon.firing-arc[data-allegiance="davion"] {
+polygon.firing-arc[data-allegiance="defender"] {
fill: red;
}
-polygon.firing-arc[data-allegiance="liao"] {
+polygon.firing-arc[data-allegiance="attacker"] {
fill: green;
}
@@ -353,11 +305,11 @@ button.set-firing-arc img {
background-color: white;
}
-.soldier-record[data-allegiance="liao"] [slot="troop-number"] svg {
+.soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg {
fill: green;
}
-.soldier-record[data-allegiance="davion"] [slot="troop-number"] svg {
+.soldier-record[data-allegiance="defender"] [slot="troop-number"] svg {
fill: red;
}
@@ -377,11 +329,11 @@ button.set-firing-arc img {
font-family: monospace;
}
-.soldier-record[data-allegiance="davion"] [slot="troop-number"] img {
+.soldier-record[data-allegiance="defender"] [slot="troop-number"] img {
fill: red;
}
-.soldier-record[data-allegiance="liao"] [slot="troop-number"] img {
+.soldier-record[data-allegiance="attacker"] [slot="troop-number"] img {
fill: green;
}
@@ -419,6 +371,10 @@ img.logo {
display: none;
}
+#map-dialog {
+ border: 1px solid black;
+}
+
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;