ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create record sheet dynamically when map is loaded

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:29 -07:00
parent 7455dd0173
commit 17fd1c813b
14 changed files with 426 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
public/index.html
View File

@@ -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>

42
public/map.css
View File

@@ -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; }

95
public/map1.svg
View File

@@ -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">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 82 KiB

67
public/map2.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

67
public/map3.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

33
public/map4.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
public/soldier_record_block.js
View File

@@ -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());
}
},

76
public/style.css
View File

@@ -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;