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 2024-04-30 10:17:45 -07:00
parent a4888a3e09
commit 82d3a4b415
14 changed files with 426 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
public/index.html
View File

@ -94,10 +94,10 @@
<div id="map-container"> <div id="map-container">
<div id="toggle-firing-arc-vis"> <div id="toggle-firing-arc-vis">
<div>Davion</div> <div>Defender</div>
<input type="checkbox" data-allegiance="davion" /> <input type="checkbox" data-allegiance="defender"/>
<div>Liao</div> <div>Attacker</div>
<input type="checkbox" data-allegiance="liao" /> <input type="checkbox" data-allegiance="attacker"/>
</div> </div>
<div class="map-placeholder"> <div class="map-placeholder">
@ -114,7 +114,15 @@
<div id="content"> <div id="content">
<input type="checkbox" class="visible"/> <input type="checkbox" class="visible"/>
<div> <div>
Set firing arc: Turn:
<span id="turn-count" data-update="0">
<span name="count">0</span>
<span class="inning-top">◓</span>
<span class="inning-bottom">◒</span>
</span>
<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"> <button type="button" class="set-firing-arc" data-size="small">
<img src="firing_arc_small.png" height="12" /> 2 MP <img src="firing_arc_small.png" height="12" /> 2 MP
</button> </button>
@ -124,54 +132,28 @@
<button type="button" class="set-firing-arc" data-size="large"> <button type="button" class="set-firing-arc" data-size="large">
<img src="firing_arc_large.png" height="12" /> 6 MP <img src="firing_arc_large.png" height="12" /> 6 MP
</button> </button>
Prone: <input type="checkbox" id="toggle-prone-counter" />
<button type="button" class="set-grenade"> <button type="button" class="set-grenade">
<img src="icon_grenade.png" height="12" /> <img src="icon_grenade.png" height="12" />
</button> </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> </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>
</div> </div>
<div id="record-sheet"> <div id="record-sheet">
<div> <div id="attacker-record">
<!-- <img class="logo" src="logo-davion.png" /> --> <!-- <img class="logo" src="logo-davion.png" /> -->
<p> <p>
<strong>Davion</strong> <strong class="name">Attacker</strong>
<button type="button" class="end-move" data-allegiance="davion"> <button type="button" class="end-move" data-allegiance="attacker">
End Movement End Movement
</button> </button>
<button type="button" class="end-turn" data-allegiance="liao"> <button type="button" class="end-turn" data-allegiance="defender">
End Turn End Turn
</button> </button>
<br> <br>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry --> 17th Kestral Mechanized Infantry -->
</p> </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="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-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span> <span slot="primary-weapon-damage">4L</span>
@ -219,30 +201,30 @@
<span slot="primary-weapon-damage">4L</span> <span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span> <span slot="primary-weapon-range-short">1-17</span>
<span slot="primary-weapon-range-long">18-105</span> <span slot="primary-weapon-range-long">18-105</span>
</div> -->
</div> </div>
</div> <div id="defender-record">
<div>
<!-- <img class="logo" src="logo-liao.png" /> --> <!-- <img class="logo" src="logo-liao.png" /> -->
<p> <p>
<strong>Liao</strong> <strong class="name">Defender</strong>
<button type="button" class="end-move" data-allegiance="liao"> <button type="button" class="end-move" data-allegiance="defender">
End Movement End Movement
</button> </button>
<button type="button" class="end-turn" data-allegiance="davion"> <button type="button" class="end-turn" data-allegiance="attacker">
End Turn End Turn
</button> </button>
<br> <br>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard --> Aldebaran Home Guard -->
</p> </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="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-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span> <span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-27</span> <span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span> <span slot="primary-weapon-range-long">28-75</span>
</div> </div> -->
<div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="liao"> <!-- <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="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-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span> <span slot="primary-weapon-damage">4L</span>
@ -283,12 +265,32 @@
<span slot="primary-weapon-damage">4L</span> <span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span> <span slot="primary-weapon-range-short">1-17</span>
<span slot="primary-weapon-range-long">18-105</span> <span slot="primary-weapon-range-long">18-105</span>
</div> </div> -->
</div> </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="index.js"></script>
<script src="soldier_record_block.js"></script>
</body> </body>
</html> </html>

42
public/map.css
View File

@ -22,13 +22,6 @@ use[href="#hex"] {
stroke: black; stroke: black;
} }
/* use[href="#hex"]:hover, use[href="#hex"].hover
{
opacity: 1;
fill: orange;
stroke: orangered;
} */
use[href="#hex"].active { use[href="#hex"].active {
opacity: 0.2; opacity: 0.2;
fill: teal; fill: teal;
@ -41,10 +34,13 @@ use[href="#hex"].active {
fill-opacity: 0.04; fill-opacity: 0.04;
} }
polyline {
fill: none;
}
polyline.move-trace { polyline.move-trace {
stroke: white; stroke: white;
stroke-dasharray: 2; stroke-dasharray: 2;
fill: none;
} }
#background { #background {
@ -73,6 +69,11 @@ g.troop-counter-template, g.troop-counter-template use {
r: inherit; r: inherit;
} }
g.weapon-symbol {
stroke: white;
stroke-width: 0.5px;
}
g.troop-counter-template text { g.troop-counter-template text {
fill: white; fill: white;
font-size: 12px; font-size: 12px;
@ -108,11 +109,11 @@ g.clone [href="#counter-prone"] {
opacity: 0.5; opacity: 0.5;
} }
g[data-allegiance="davion"].clone { g[data-allegiance="defender"].clone {
fill: rgb(255, 126, 126); fill: rgb(255, 126, 126);
} }
g[data-allegiance="liao"].clone { g[data-allegiance="attacker"].clone {
fill: rgb(130, 190, 130); fill: rgb(130, 190, 130);
} }
@ -128,11 +129,11 @@ text.counter, #troop-counter text {
user-select: none; user-select: none;
} }
polygon.firing-arc[data-allegiance="davion"] { polygon.firing-arc[data-allegiance="defender"] {
fill: red; fill: red;
} }
polygon.firing-arc[data-allegiance="liao"] { polygon.firing-arc[data-allegiance="attacker"] {
fill: green; fill: green;
} }
@ -172,7 +173,7 @@ polygon.firing-arc[data-allegiance="liao"] {
stroke-opacity: inherit; stroke-opacity: inherit;
} }
use[href*="#t-"] { g.counter use, use[href*="#t-"] {
r: 5px; r: 5px;
} }
@ -191,11 +192,11 @@ g.selected use {
} }
} }
.counter[data-allegiance="liao"] { .counter[data-allegiance="attacker"] {
fill: #008000; fill: green;
} }
.counter[data-allegiance="davion"] { .counter[data-allegiance="defender"] {
fill: red; fill: red;
} }
@ -203,14 +204,6 @@ g.selected use {
transform: translate(19px, 31px) scale(4); 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 */ /* Inradius and circumradius values come from the hexagon */
.grid, g.start-locations { .grid, g.start-locations {
--inradius: 8.66px; --inradius: 8.66px;
@ -249,7 +242,6 @@ g[data-y]:nth-child(odd) {
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale)); 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="0"] { --i: 0; }
g[data-y="1"] { --i: 1; } g[data-y="1"] { --i: 1; }
g[data-y="2"] { --i: 2; } 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"> "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-18 -150 2320 3360" xmlns="http://www.w3.org/2000/svg"> <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"/> <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> <defs>
<!-- <g id="hex"> <!-- <g id="hex">
<polygon points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> <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-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="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-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/> <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
<image id="numbers" href="rendered_numbers.png" width="182" height="22"/> <image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
@ -50,24 +83,52 @@
<g id="shapes"/> <g id="shapes"/>
<g id="lines"/> <g id="lines"/>
</g> </g>
<g class="start-locations"> <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g> <g data-edge="north">
<g data-x="13" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g> <g data-x="13">
<g data-x="14" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g> <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
<g data-x="15" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g> </g>
<g data-x="16" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g> <g data-x="14">
<g data-x="17" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g> <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
<g data-x="18" class="counter" data-allegiance="liao" data-number="6"><use href="#t-6"/></g> </g>
<g data-x="19" class="counter" data-allegiance="liao" data-number="7"><use href="#t-7"/></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-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 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> </g>
</g> </g>
<g class="grid"> <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"> <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"/> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
<style> <style>
use[href="#hex"] {
opacity: 0.2;
}
#image-maps image { #image-maps image {
transform: none; transform: none;
} }
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 78; }
</style> </style>
<defs> <defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> <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="shapes"/>
<g id="lines"/> <g id="lines"/>
</g> </g>
<!-- <g class="start-locations"> <g class="start-locations">
<g data-y="-2"> <g data-edge="north">
<g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g> <g data-x="13">
<g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g> <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
<g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g> </g>
<g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g> <g data-x="14">
<g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g> <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-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 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> </g>
</g> -->
<g class="grid"/> <g class="grid"/>
</g> </g>
<script href="map.js" data-cols="33" data-rows="77"></script> <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"> <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"/> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
<style> <style>
use[href="#hex"] {
opacity: 0.2;
}
#image-maps image { #image-maps image {
transform: translate(-10px, 0px); transform: translate(-10px, 0px);
} }
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 26; }
</style> </style>
<defs> <defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> <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="shapes"/>
<g id="lines"/> <g id="lines"/>
</g> </g>
<!-- <g class="start-locations"> <g class="start-locations">
<g data-y="-2"> <g data-edge="north">
<g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g> <g data-x="13">
<g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g> <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
<g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g> </g>
<g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g> <g data-x="14">
<g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g> <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-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 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> </g>
</g> -->
<g class="grid"/> <g class="grid"/>
</g> </g>
<script href="map.js" data-cols="33" data-rows="25"></script> <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() { connectedCallback() {
// this.shadowRoot.querySelectorAll('.grenades *').forEach(el => el.addEventListener('click', e => e.stopPropagation()));
this.shadowRoot.querySelector('.grenades').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; background-color: gray;
} }
#record-sheet .name {
text-transform: capitalize;
}
#record-sheet > div { #record-sheet > div {
/* padding: 0 2px; */ /* padding: 0 2px; */
overflow-y: auto; overflow-y: auto;
@ -233,72 +237,20 @@ g#points g.hover use.counter {
r: 7px; 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 { g#points use.clone {
stroke: white; stroke: white;
stroke-width: 0.5px; stroke-width: 0.5px;
stroke-dasharray: 1; stroke-dasharray: 1;
} }
g#points use[data-allegiance="davion"].clone { g#points use[data-allegiance="defender"].clone {
fill: rgb(255, 126, 126); fill: rgb(255, 126, 126);
} }
g#points use[data-allegiance="liao"].clone { g#points use[data-allegiance="attacker"].clone {
fill: rgb(130, 190, 130); 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 { text.counter, #troop-counter text {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -314,11 +266,11 @@ text.counter, #troop-counter text {
user-select: none; user-select: none;
} }
polygon.firing-arc[data-allegiance="davion"] { polygon.firing-arc[data-allegiance="defender"] {
fill: red; fill: red;
} }
polygon.firing-arc[data-allegiance="liao"] { polygon.firing-arc[data-allegiance="attacker"] {
fill: green; fill: green;
} }
@ -353,11 +305,11 @@ button.set-firing-arc img {
background-color: white; background-color: white;
} }
.soldier-record[data-allegiance="liao"] [slot="troop-number"] svg { .soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg {
fill: green; fill: green;
} }
.soldier-record[data-allegiance="davion"] [slot="troop-number"] svg { .soldier-record[data-allegiance="defender"] [slot="troop-number"] svg {
fill: red; fill: red;
} }
@ -377,11 +329,11 @@ button.set-firing-arc img {
font-family: monospace; font-family: monospace;
} }
.soldier-record[data-allegiance="davion"] [slot="troop-number"] img { .soldier-record[data-allegiance="defender"] [slot="troop-number"] img {
fill: red; fill: red;
} }
.soldier-record[data-allegiance="liao"] [slot="troop-number"] img { .soldier-record[data-allegiance="attacker"] [slot="troop-number"] img {
fill: green; fill: green;
} }
@ -419,6 +371,10 @@ img.logo {
display: none; display: none;
} }
#map-dialog {
border: 1px solid black;
}
@media (width >= 1800px) { @media (width >= 1800px) {
#record-sheet { #record-sheet {
flex-direction: row; flex-direction: row;

31
src/index.js
View File

@ -16,15 +16,21 @@ object.addEventListener('load', function (e) {
const svg = this.contentDocument.querySelector('svg'); const svg = this.contentDocument.querySelector('svg');
panzoom.start(svg); panzoom.start(svg);
gameboard.start(svg); gameboard.start(svg);
});
gameboard.setDistanceCallback((count = '-') => { recordSheet.clear();
distanceOutput.querySelector('#hex-count').textContent = count;
distanceOutput.style.display = count === '-' ? 'none' : 'block';
});
gameboard.setProneFlagCallback(checked => proneToggle.checked = checked); const recordTemplate = document.querySelector('template#soldier-record-block');
gameboard.setSelectCallback(data => recordSheet.select(data)); const startLoc = svg.querySelector('.start-locations');
const forces = recordSheet.createRecords(gameboard.getUnits(), recordTemplate);
for (const affiliation in forces) {
const container = document.querySelector(`#${affiliation}-record`);
const name = startLoc.dataset[`${affiliation}Name`];
if (name) {
container.querySelector('.name').textContent = name;
}
forces[affiliation].forEach(r => container.appendChild(r));
}
document.querySelectorAll('.soldier-record').forEach(el => document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', () => { el.addEventListener('click', () => {
@ -38,6 +44,17 @@ document.querySelectorAll('.soldier-record').forEach(el =>
}) })
); );
window.game = gameboard;
});
gameboard.setDistanceCallback((count = '-') => {
distanceOutput.querySelector('#hex-count').textContent = count;
distanceOutput.style.display = count === '-' ? 'none' : 'block';
});
gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);
gameboard.setSelectCallback(data => recordSheet.select(data));
document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => { document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
recordSheet.endMove(); recordSheet.endMove();
gameboard.endMove(); gameboard.endMove();

13
src/map.js
View File

@ -4,16 +4,23 @@ const svg = document.querySelector('svg');
const gb = svg.querySelector('.gameboard'); const gb = svg.querySelector('.gameboard');
const bg = svg.querySelector('#background'); const bg = svg.querySelector('#background');
const imageMaps = svg.querySelector('#image-maps'); const imageMaps = svg.querySelector('#image-maps');
const grid = gb.querySelector('.grid');
if ('cols' in dataset && 'rows' in dataset) { if ('cols' in dataset && 'rows' in dataset) {
const cellTemplate = svg.querySelector('#hex'); const cellTemplate = svg.querySelector('#hex');
const grid = gb.querySelector('.grid');
createCells(grid, dataset, cellTemplate.id); createCells(grid, dataset, cellTemplate.id);
} }
setElAttrs(bg, calcComputedBboxFor(imageMaps)); const sequence = getComputedStyle(gb).transform.match(/-?\d+\.?\d*/g);
const mtx = new DOMMatrix(sequence || '');
bg.style.transform = mtx;
const bbox = grid.getBBox();
bbox.height += 5;
setElAttrs(bg, bbox);
svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb))); svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));
function setElAttrs(el, attrs) { function setElAttrs(el, attrs) {

4
src/modules/game/firing_arc.js
View File

@ -13,8 +13,8 @@ const horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
}, },
firingArcVisibility = { firingArcVisibility = {
davion: false, defender: false,
liao: false attacker: false
}, },
clippedFiringArcRadius = 25; clippedFiringArcRadius = 25;

4
src/modules/game/soldier.js
View File

@ -29,6 +29,10 @@ function getCounterAndClones(svg, counter) {
return svg.querySelectorAll(`.counter${dataSelector(counter)}`); return svg.querySelectorAll(`.counter${dataSelector(counter)}`);
} }
export function getAllCounters(container) {
return container.querySelectorAll('g.counter[data-allegiance][data-number]');
}
export function getCounter(svg, selected) { export function getCounter(svg, selected) {
return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`); return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
} }

36
src/modules/gameboard.js
View File

@ -2,6 +2,10 @@ import * as firingArc from './game/firing_arc.js';
import * as sightLine from './game/sight_line.js'; import * as sightLine from './game/sight_line.js';
import * as soldier from './game/soldier.js'; import * as soldier from './game/soldier.js';
let svg, distanceCallback, proneFlagCallback, selectCallback,
selected,
placing = [];
function getCellContents(cell) { function getCellContents(cell) {
return cell.querySelectorAll('*:not(use[href="#hex"])'); return cell.querySelectorAll('*:not(use[href="#hex"])');
} }
@ -26,8 +30,8 @@ function getLockedSightLine(svg) {
return svg.querySelector('line.sight-line:not(.active)'); return svg.querySelector('line.sight-line:not(.active)');
} }
export function getSightLine(svg) { function getSightLine() {
return svg.querySelector('line.sight-line'); return sightLine.getSightLine();
} }
function getActiveSightLine(svg) { function getActiveSightLine(svg) {
@ -109,8 +113,9 @@ function drawSightLine(sourceCell, targetCell) {
distanceCallback && distanceCallback(hexes.length - 1); distanceCallback && distanceCallback(hexes.length - 1);
} }
let svg, distanceCallback, proneFlagCallback, selectCallback, export function getUnits() {
placing = []; return soldier.getAllCounters(svg);
}
export function setDistanceCallback(callback) { export function setDistanceCallback(callback) {
distanceCallback = callback; distanceCallback = callback;
@ -143,13 +148,7 @@ export function start(el) {
} else if (toPlace && !state.occupant) { } else if (toPlace && !state.occupant) {
soldier.place(svg, toPlace, cell); soldier.place(svg, toPlace, cell);
placing.push(toPlace); placing.push(toPlace);
const lockedSl = getLockedSightLine(svg); getLockedSightLine(svg) ? updateSightLine(cell) : clearSightLine();
if (!lockedSl) {
clearSightLine();
} else {
updateSightLine(cell);
}
} else if (toPlace && state.occupant) { } else if (toPlace && state.occupant) {
if (toPlace === state.occupant) { if (toPlace === state.occupant) {
if ('previous' in toPlace.dataset) { if ('previous' in toPlace.dataset) {
@ -187,13 +186,7 @@ export function start(el) {
toPlace = state.occupant; toPlace = state.occupant;
soldier.removeClones(svg, toPlace); soldier.removeClones(svg, toPlace);
soldier.getTrace(svg, toPlace).remove(); soldier.getTrace(svg, toPlace).remove();
const lockedSl = getLockedSightLine(svg); getLockedSightLine(svg) ? updateSightLine(cell) : clearSightLine();
if (!lockedSl) {
clearSightLine();
} else {
updateSightLine(cell);
}
} else { } else {
const index = getGridIndex(state.occupant), const index = getGridIndex(state.occupant),
trace = soldier.getTrace(svg, toPlace), trace = soldier.getTrace(svg, toPlace),
@ -242,10 +235,15 @@ export function start(el) {
}); });
cell.addEventListener('pointerover', () => { cell.addEventListener('pointerover', () => {
// should we draw a sight line?
// conditions:
// we have a soldier selected
// that soldier's counter is on the board
// the sight line is not locked
let selected = getSelected(); let selected = getSelected();
if (selected) { if (selected) {
let sl = getSightLine(svg), let sl = getSightLine(),
isOnBoard = selected.parentElement.hasAttribute('data-x'), isOnBoard = selected.parentElement.hasAttribute('data-x'),
sourceCell = selected.parentElement; sourceCell = selected.parentElement;

67
src/modules/record_sheet.js
View File

@ -1,3 +1,51 @@
function createIcon(number) {
const svgns = 'http://www.w3.org/2000/svg';
const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
icon.setAttributeNS(null, 'viewBox', '-5 -5 10 10')
icon.setAttribute('xmlns', svgns);
circle.setAttributeNS(null, 'cx', 0);
circle.setAttributeNS(null, 'cy', 0);
circle.setAttributeNS(null, 'r', 5);
text.textContent = number;
icon.appendChild(circle);
icon.appendChild(text);
return icon;
}
function createRecord({ dataset: { allegiance, number }}) {
const div = document.createElement('div', { is: 'soldier-record-block' }),
spans = Array(5).fill('span').map(t => document.createElement(t)),
[tn, pwt, pwd, pwrs, pwrl] = spans;
div.setAttribute('class', 'soldier-record');
div.dataset.number = number;
div.dataset.allegiance = allegiance;
tn.setAttribute('slot', 'troop-number');
tn.appendChild(createIcon(number));
pwt.setAttribute('slot', 'primary-weapon-type');
pwt.textContent = 'Rifle';
pwd.setAttribute('slot', 'primary-weapon-damage');
pwd.textContent = '4L';
pwrs.setAttribute('slot', 'primary-weapon-range-short');
pwrs.textContent = '1-27';
pwrl.setAttribute('slot', 'primary-weapon-range-long');
pwrl.textContent = '28-75';
spans.forEach(el => div.appendChild(el));
return div;
}
export function unSelect() { export function unSelect() {
const selected = getSelected(); const selected = getSelected();
@ -30,3 +78,22 @@ export function endMove() {
unSelect(); unSelect();
} }
export function createRecords(units, { content }) {
const grouped = Array.from(units).reduce((acc, unit) => {
acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]);
return acc;
}, {});
for (const al in grouped) {
grouped[al] = grouped[al].map(createRecord);
}
return grouped;
}
export function clear() {
document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
document.querySelector('#attacker-record .name').textContent = 'attacker';
document.querySelector('#defender-record .name').textContent = 'defender';
}