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

Compare commits

base: ccm:9b215251691781ce22d8d9497533e1bd02246774
Branches Tags
ccm:trunk
..
compare: ccm:trunk
Branches Tags
ccm:trunk

11 Commits
9b21525169 ... trunk

Author SHA1 Message Date
Catalin Constantin Mititiuc
10f68a82e9 Add all weapon-type platoon examples 2025-08-28 11:53:30 -07:00
Catalin Constantin Mititiuc
8fa7958ba0 Complete military symbols and add a map 2025-08-28 10:45:28 -07:00
Catalin Constantin Mititiuc
f98df324ac WIP: toggle grid line vis 2025-07-25 15:04:01 -07:00
Catalin Constantin Mititiuc
48024506e0 Add a blank map 2025-07-24 17:01:25 -07:00
Catalin Constantin Mititiuc
3104a811fb Update site title 2025-07-24 16:48:28 -07:00
Catalin Constantin Mititiuc
8909218624 Update README 2025-07-24 16:45:24 -07:00
Catalin Constantin Mititiuc
da43d21acd Add title property to UI elements 2025-07-24 16:38:20 -07:00
Catalin Constantin Mititiuc
6775d76e38 Add titles to edge inputs and fix content visibility toggle margin 2025-07-24 15:24:35 -07:00
Catalin Constantin Mititiuc
e8257eee37 Fix edge input margins and button pointer events 2025-07-24 14:48:55 -07:00
Catalin Constantin Mititiuc
d11f401970 Fix weird height issue with the 'auto-center map' button 2025-07-24 14:41:45 -07:00
Catalin Constantin Mititiuc
151018be5c Add command to install 'pan-zoom' package to README 2025-06-17 10:29:33 -07:00
16 changed files with 1692 additions and 69 deletions
Expand all files Collapse all files

12
README.md
View File

@@ -1,3 +1,9 @@
## Infantry Platoon Combat
* virtual board game
* turn-based, top-down, hex grid
* platoon-level, squad-based combat
## Live ## Live
<a href="https://apps.miti.sh/btroops" target="_blank">Demo</a> <a href="https://apps.miti.sh/btroops" target="_blank">Demo</a>
@@ -18,6 +24,12 @@
4. Visit `localhost:8080` with browser to view app. 4. Visit `localhost:8080` with browser to view app.
## Command to install `pan-zoom` package from repo
```console
$ ./npm install --save https://git.miti.sh/ccm/pan-zoom/archive/v0.3.0.tar.gz
```
## Integration tests ## Integration tests
### Run ### Run

4
public/assets/css/map.css
View File

@@ -238,6 +238,10 @@ pattern use {
--y-step: calc((3 / 2) * var(--circumradius)); --y-step: calc((3 / 2) * var(--circumradius));
} }
g.start-locations {
display: none;
}
g[data-y], g.start-locations > g { g[data-y], g.start-locations > g {
--translateX: 0; --translateX: 0;
transform: translate(var(--translateX), calc(var(--y-step) * var(--i))); transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));

10
public/assets/css/style.css
View File

@@ -440,7 +440,11 @@ div#content {
box-sizing: border-box; box-sizing: border-box;
} }
#edge-inputs > div > * { #edge-inputs > div {
margin: 2px 0;
}
#edge-inputs label, #edge-inputs button {
pointer-events: initial; pointer-events: initial;
} }
@@ -449,7 +453,6 @@ div#content {
} }
label[for="content-visibility-toggle"] { label[for="content-visibility-toggle"] {
margin-top: 2px;
display: inline-block; display: inline-block;
padding: 0 4px; padding: 0 4px;
background-color: #EEE; background-color: #EEE;
@@ -494,12 +497,10 @@ input#content-visibility-toggle {
} }
#toggle-firing-arc-vis label, .opt-toggle label { #toggle-firing-arc-vis label, .opt-toggle label {
display: block;
background-color: #DDD; background-color: #DDD;
border: 1px solid #666; border: 1px solid #666;
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 5px;
margin: 3px;
width: fit-content; width: fit-content;
user-select: none; user-select: none;
} }
@@ -558,7 +559,6 @@ input#content-visibility-toggle {
} }
div#dice { div#dice {
margin: 3px;
padding: 2px; padding: 2px;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
border-radius: 4px; border-radius: 4px;

15
public/assets/images/blank-map.svg Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets" data-width="34" data-height="13">
<g><use class="mapsheet" href="#mapsheet"/></g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

99
public/assets/images/counters.svg
View File

@@ -1,6 +1,5 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24" <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" /> <circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
@@ -34,18 +33,27 @@
</g> </g>
<g id="semi-auto"> <g id="semi-auto">
<line x1="-2" y1="0" x2="2" y2="0"/>
<line x1="-2" y1="1" x2="2" y2="1"/> <line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
</g> </g>
<g id="auto"> <g id="auto">
<line x1="-2" y1="0" x2="2" y2="0"/> <line x1="-2" y1="-0.5" x2="2" y2="-0.5"/>
<line x1="-2" y1="1" x2="2" y2="1"/> <line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<line x1="-2" y1="2" x2="2" y2="2"/> <line x1="-2" y1="1.5" x2="2" y2="1.5"/>
</g> </g>
<g id="laser"> <g id="laser">
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 0,5"/> <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2 -3,2.5 3,3.5 0,4 0,5"/>
</g>
<g id="nonlethalhand">
<line x1="-2" y1="-4.25" x2="2" y2="-4.25"/>
<line x1="0" y1="-4.25" x2="0" y2="5"/>
</g>
<g id="lethalhand" style="r: inherit;">
<line x1="0" y1="-5" x2="0" y2="5"/>
</g> </g>
</defs> </defs>
@@ -95,6 +103,16 @@
</g> </g>
</g> </g>
<g id="laserriflegl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<circle cy="-2" r="1"/>
<use href="#semi-auto"/>
<use href="#laser"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="gyrojetrifle" style="r: inherit;" class="weapon-symbol"> <g id="gyrojetrifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
@@ -145,28 +163,67 @@
<!--Hand-to-Hand Weapons--> <!--Hand-to-Hand Weapons-->
<g id="nonlethalhand" style="r: inherit;" class="weapon-symbol"> <g id="fist" style="r: inherit;">
<use style="r: inherit;" href="#counter-base"/>
</g>
<g id="blackjack" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="-4.25" x2="2" y2="-4.25"/> <use style="r: inherit;" href="#nonlethalhand"/>
<line x1="0" y1="-4.25" x2="0" y2="5"/>
</g> </g>
</g> </g>
<g id="lethalhand" style="r: inherit;" class="weapon-symbol"> <g id="stunstick" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none; stroke-linejoin: bevel">
<line x1="0" y1="-5" x2="0" y2="5"/> <use style="r: inherit;" href="#nonlethalhand"/>
<polyline points="-1.5,-2.5 1.5,-2.5 -1.5,0.5 1.5,0.5"/>
</g> </g>
</g> </g>
<g id="bayonetknife" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="club" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="neuralwhip" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="sword" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<g id="vibroblade" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use style="r: inherit;" href="#lethalhand"/>
</g>
</g>
<!--Area-Effect Weapons--> <!--Area-Effect Weapons-->
<g id="srm" style="r: inherit;" class="weapon-symbol"> <g id="srm" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="0" y1="-4.75" x2="0" y2="5"/> <line x1="0" y1="-4.75" x2="0" y2="5"/>
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/> <path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/>
</g> </g>
</g> </g>
@@ -230,7 +287,8 @@
<g id="satchelcharge" style="r: inherit;" class="weapon-symbol"> <g id="satchelcharge" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<rect x="-1" y="-3.25" width="2" height="2" /> <line x1="-1" y1="-3.25" x2="1" y2="-1.25"/>
<line x1="1" y1="-3.25" x2="-1" y2="-1.25"/>
<line x1="0" y1="-5" x2="0" y2="5"/> <line x1="0" y1="-5" x2="0" y2="5"/>
</g> </g>
</g> </g>
@@ -245,7 +303,7 @@
<g id="hflamer" style="r: inherit;" class="weapon-symbol"> <g id="hflamer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="1" x2="2" y2="1"/> <use href="#auto" />
<path d="M -1,5 V -3.5 c 0,-1.5 2,-1.5 2,0"/> <path d="M -1,5 V -3.5 c 0,-1.5 2,-1.5 2,0"/>
</g> </g>
</g> </g>
@@ -253,7 +311,6 @@
<g id="inferno" style="r: inherit;" class="weapon-symbol"> <g id="inferno" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="0.5" x2="2" y2="0.5"/>
<path d="M -1,5 V -2.5 c 0,-1.5 2,-1.5 2,0"/> <path d="M -1,5 V -2.5 c 0,-1.5 2,-1.5 2,0"/>
<path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/> <path d="M -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/>
</g> </g>
@@ -295,9 +352,10 @@
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="4.5" x2="2" y2="4.5"/> <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<line x1="-2" y1="1" x2="2" y2="1"/> <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 0,4.5"/> 0,2 -3,2.5 3,3.5 0,4 0,4.5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/> <polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g> </g>
</g> </g>
@@ -306,7 +364,8 @@
<g style="stroke: white; stroke-width: 0.5px; fill: none;"> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="-2" y1="4.5" x2="2" y2="4.5"/> <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<use href="#auto"/> <use href="#auto"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 0,4.5"/> <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1
0,2 -3,2.5 3,3.5 0,4 0,4.5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/> <polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g> </g>
</g> </g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

224
public/assets/images/flamer-platoon-map.svg Normal file
View File

@@ -0,0 +1,224 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hflamer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autogl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hflamer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autogl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hflamer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autogl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hflamer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

225
public/assets/images/machine-gun-platoon-map.svg Normal file
View File

@@ -0,0 +1,225 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autopistol"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autopistol"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autopistol"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autopistol"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

282
public/assets/images/map5.svg Normal file
View File

@@ -0,0 +1,282 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#pistol"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserpistol"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserriflegl"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#gyrojetrifle"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autopistol"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#fist"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blackjack"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#stunstick"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#club"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#neuralwhip"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#bayonetknife"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#sword"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="8">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#vibroblade"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsrm"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#law"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#grenade"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#gl"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#autogl"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#lrrifle"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="8">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#satchelcharge"/>
<use class="troop-number" href="counters.svg#number-8"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="9">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#flamer"/>
<use class="troop-number" href="counters.svg#number-9"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="10">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hflamer"/>
<use class="troop-number" href="counters.svg#number-10"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="11">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#inferno"/>
<use class="troop-number" href="counters.svg#number-11"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
<g data-edge="north" data-y="5">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hmg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#splaser"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mpppc"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

224
public/assets/images/portable-laser-platoon-map.svg Normal file
View File

@@ -0,0 +1,224 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserriflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#splaser"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserriflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#splaser"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserriflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#splaser"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#laserrifle"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

224
public/assets/images/rifle-platoon-map.svg Normal file
View File

@@ -0,0 +1,224 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#mmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

224
public/assets/images/srm-platoon-map.svg Normal file
View File

@@ -0,0 +1,224 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
<g id="mapsheet" class="mapsheet"></g>
</defs>
<g class="gameboard">
<g class="grid">
<g class="mapsheets"></g>
</g>
<g style="display: unset;" class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" data-y="1">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
</g>
<g data-edge="north" data-y="2">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
</g>
<g data-edge="north" data-y="3">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
</g>
</g>
<g data-edge="north" data-y="4">
<g data-x="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="2">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="3">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsrm"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="4">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsrm"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="5">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="6">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsrm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
<g data-x="7">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#hsrm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

120
public/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>BTroops - Infantry Combat, Solo Basic</title> <title>Infantry Platoon Combat, Solo Basic</title>
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
@@ -113,54 +113,67 @@
<div id="edge-inputs"> <div id="edge-inputs">
<div id="content-visibility"> <div id="content-visibility">
<input type="checkbox" class="visible" id="content-visibility-toggle" /> <input type="checkbox" class="visible" id="content-visibility-toggle" />
<label for="content-visibility-toggle"> <label for="content-visibility-toggle" title="Hide/Show tab">
<span class="open">«</span> <span class="open">«</span>
<span class="close">»</span> <span class="close">»</span>
</label> </label>
</div> </div>
<div class="opt-toggle">
<input type="checkbox" id="toggle-grid-line-vis" checked />
<label for="toggle-grid-line-vis" title="Toggle grid line visibility">
<span class="off">1</span><span class="on">0</span>
</label>
</div>
<div class="opt-toggle"> <div class="opt-toggle">
<input type="checkbox" id="toggle-grid-vis" checked /> <input type="checkbox" id="toggle-grid-vis" checked />
<label for="toggle-grid-vis"> <label for="toggle-grid-vis" title="Toggle grid visibility">
<span class="off">⬡</span><span class="on">⬢</span> <span class="off">⬡</span><span class="on">⬢</span>
</label> </label>
</div> </div>
<div class="opt-toggle"> <div class="opt-toggle">
<input type="checkbox" id="auto-center-map" /> <input type="checkbox" id="auto-center-map" />
<label for="auto-center-map"> <label for="auto-center-map" title="Auto-center map on selected units">
<span class="off">⦾</span><span class="on">⦿</span> <!-- These chars have a weird height issue -->
<!-- <span class="off">⦾</span><span class="on">⦿</span> -->
<span class="off">○</span><span class="on">●</span>
</label> </label>
</div> </div>
<div id="toggle-firing-arc-vis"> <div id="toggle-firing-arc-vis">
<input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" /> <input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
<label style="color: red;" for="defender-firing-arc-vis"> <label style="color: red;" for="defender-firing-arc-vis"
title="Hide/show defender's placed firing arcs">
<span class="hidden">▽</span><span class="visible">▼</span> <span class="hidden">▽</span><span class="visible">▼</span>
</label> </label>
<br/>
<input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" /> <input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
<label style="color: blue;" for="attacker-firing-arc-vis"> <label style="color: blue;" for="attacker-firing-arc-vis"
title="Hide/show attacker's placed firing arcs">
<span class="hidden">▽</span><span class="visible">▼</span> <span class="hidden">▽</span><span class="visible">▼</span>
</label> </label>
</div> </div>
<div class="select-elevation"> <div class="select-elevation">
<button class="up">🡅</button> <button class="up" title="View elevation 1 level above current">🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" /> <input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label> <label for="select-elevation-3" title="View elevation level 3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" /> <input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label> <label for="select-elevation-2" title="View elevation level 2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" /> <input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label> <label for="select-elevation-1" title="View elevation level 1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked /> <input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label> <label for="select-elevation-0" title="View elevation ground level">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" /> <input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label> <label for="select-elevation-basement" title="View elevation basement
<button class="down">🡇</button> level" >-1</label>
<button class="down" title="View elevation 1 level below current">🡇</button>
</div> </div>
<div id="dice"> <div id="dice">
<button type="button" id="roll-dice">Roll</button> <button type="button" id="roll-dice" title="Roll two six-sided dice">Roll</button>
<div class="die"> <div class="die">
<div> <div>
<span class="dot"></span> <span class="dot"></span>
@@ -213,52 +226,59 @@
<div> <div>
Turn: Turn:
<span id="turn-count" data-update="0"> <span id="turn-count" data-update="0">
<span name="count">0</span> <span name="count" title="Turns count">0</span>
<span class="inning-top">◓</span> <span class="inning-top" title="1st inning">◓</span>
<span class="inning-bottom">◒</span> <span class="inning-bottom" title="2nd inning">◒</span>
</span> </span>
<button id="show-dialog" type="button">Scenario</button> <button id="show-dialog" type="button" title="Select a scenario">Scenario</button>
<button id="download-save" type="button">Save</button> <button id="download-save" type="button" disabled>Save</button>
<button id="upload-save" type="button">Load</button> <button id="upload-save" type="button" disabled>Load</button>
<button id="fullscreen" type="button"> <button id="fullscreen" type="button" title="Fullscreen">
<img src="assets/images/icon_full_screen.png" height="12" /> <img src="assets/images/icon_full_screen.png" height="12" />
</button> </button>
<span style="white-space: nowrap;"> <span style="white-space: nowrap;">
<button type="button" class="set-firing-arc" data-size="small"> <button type="button" class="set-firing-arc" data-size="small"
title="Set a small firing arc (2 MP) for selected unit">
<img src="assets/images/firing_arc_small.png" height="12" /> 2 MP <img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
</button> </button>
<button type="button" class="set-firing-arc" data-size="medium"> <button type="button" class="set-firing-arc" data-size="medium"
title="Set a medium firing arc (4 MP) for selected unit">
<img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
</button> </button>
<button type="button" class="set-firing-arc" data-size="large"> <button type="button" class="set-firing-arc" data-size="large"
title="Set a large firing arc (6 MP) for selected unit">
<img src="assets/images/firing_arc_large.png" height="12" /> 6 MP <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
</button> </button>
<button type="button" class="set-mech-template">Mech</button> <button type="button" class="set-mech-template" title="Place a mech
<button type="button" class="attacker"> template counter (A/D keys to rotate, Q/E to torso-twist)">Mech</button>
<button type="button" class="attacker" title="Place an attacker's
counter">
<img src="assets/images/counter_attacker.svg" height="12" /> <img src="assets/images/counter_attacker.svg" height="12" />
</button> </button>
<button type="button" class="defender"> <button type="button" class="defender" title="Place a defender's
counter">
<img src="assets/images/counter_defender.svg" height="12" /> <img src="assets/images/counter_defender.svg" height="12" />
</button> </button>
</span> </span>
<div class="counters-list"> <div class="counters-list">
<button type="button" class="grenade"> <button type="button" class="grenade" title="Place a grenade counter">
<img src="assets/images/icon_grenade.png" height="12" /> <img src="assets/images/icon_grenade.png" height="12" />
</button> </button>
<button type="button" class="prone"> <button type="button" class="prone" title="Place a prone counter">
<img src="assets/images/icon_prone.png" height="12" /> <img src="assets/images/icon_prone.png" height="12" />
</button> </button>
<button type="button" class="basement"> <button type="button" class="basement" title="Place a basement level
counter">
<img src="assets/images/icon_basement.png" height="12" /> <img src="assets/images/icon_basement.png" height="12" />
</button> </button>
<button type="button" class="1st-floor"> <button type="button" class="1st-floor" title="Place a level 1 counter">
<img src="assets/images/icon_1st_floor.png" height="12" /> <img src="assets/images/icon_1st_floor.png" height="12" />
</button> </button>
<button type="button" class="2nd-floor"> <button type="button" class="2nd-floor" title="Place a level 2 counter">
<img src="assets/images/icon_2nd_floor.png" height="12" /> <img src="assets/images/icon_2nd_floor.png" height="12" />
</button> </button>
<button type="button" class="3rd-floor"> <button type="button" class="3rd-floor" title="Place a level 3 counter">
<img src="assets/images/icon_3rd_floor.png" height="12" /> <img src="assets/images/icon_3rd_floor.png" height="12" />
</button> </button>
</div> </div>
@@ -269,20 +289,26 @@
<!-- <img class="logo" src="logo-davion.png" /> --> <!-- <img class="logo" src="logo-davion.png" /> -->
<div class="records-header"> <div class="records-header">
<div><strong class="name">Attacker</strong></div> <div><strong class="name">Attacker</strong></div>
<div><button type="button" class="end-move" data-allegiance="attacker"> <div><button type="button" class="end-move"
data-allegiance="attacker" title="Mark/Unmark attacker's selected
unit's turn as 'taken' and auto-select the next available unit">
End Movement End Movement
</button></div> </button></div>
<div><button type="button" class="end-turn" data-allegiance="defender"> <div><button type="button" class="end-turn"
data-allegiance="defender" title="End attacker's turn and
auto-select defender's first available unit">
End Turn End Turn
</button></div> </button></div>
<div><button type="button" class="view-squad" value="previous">&lt;</button></div> <div><button type="button" class="view-squad" value="previous"
<div class="squad-number"> title="View previous squad">&lt;</button></div>
<div class="squad-number" title="Current squad">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle> <circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text> <text>1</text>
</svg> </svg>
</div> </div>
<div><button type="button" class="view-squad" value="next">&gt;</button></div> <div><button type="button" class="view-squad" value="next"
title="View next squad">&gt;</button></div>
<!-- 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 -->
</div> </div>
@@ -292,22 +318,28 @@
<!-- <img class="logo" src="logo-liao.png" /> --> <!-- <img class="logo" src="logo-liao.png" /> -->
<div class="records-header"> <div class="records-header">
<div><strong class="name">Defender</strong></div> <div><strong class="name">Defender</strong></div>
<div><button type="button" class="end-move" data-allegiance="defender"> <div><button type="button" class="end-move" data-allegiance="defender"
title="Mark/Unmark defender's selected
unit's turn as 'taken' and auto-select the next available unit">
End Movement End Movement
</button></div> </button></div>
<div><button type="button" class="end-turn" data-allegiance="attacker"> <div><button type="button" class="end-turn"
data-allegiance="attacker" title="End defender's turn and
auto-select attacker's first available unit">
End Turn End Turn
</button></div> </button></div>
<div><button type="button" class="view-squad" value="previous">&lt;</button></div> <div><button type="button" class="view-squad" value="previous"
title="View previous squad">&lt;</button></div>
<div> <div>
<div class="squad-number"> <div class="squad-number" title="Current squad">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle> <circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text> <text>1</text>
</svg> </svg>
</div> </div>
</div> </div>
<div><button type="button" class="view-squad" value="next">&gt;</button></div> <div><button type="button" class="view-squad" value="next"
title="View next squad">&gt;</button></div>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard --> Aldebaran Home Guard -->
</div> </div>

6
src/index.js
View File

@@ -277,6 +277,12 @@ document.querySelector('#toggle-grid-vis').addEventListener('change', function (
svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none'; svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';
}); });
document.querySelector('#toggle-grid-line-vis').addEventListener('change', function () {
const doc = document.querySelector('object').contentDocument;
const currentOp = parseFloat(doc.styleSheets[1].cssRules[4].style.opacity);
doc.styleSheets[1].cssRules[4].style.opacity = currentOp > 0 ? 0 : 0.5;
});
document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => { document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => {
const currentSquad = b.closest('.records-header').querySelector('.squad-number text'); const currentSquad = b.closest('.records-header').querySelector('.squad-number text');
const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`); const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`);

54
src/modules/record_sheet.js
View File

@@ -68,6 +68,12 @@ const weapons = {
shortRange: '1-17', shortRange: '1-17',
longRange: '18-105' longRange: '18-105'
}, },
laserriflegl: {
name: 'Laser Rifle w/GL',
damage: '5L',
shortRange: '1-17',
longRange: '18-105'
},
gyrojetrifle: { gyrojetrifle: {
name: 'Gyrojet Rifle', name: 'Gyrojet Rifle',
damage: '6L', damage: '6L',
@@ -164,6 +170,54 @@ const weapons = {
shortRange: 'Special', shortRange: 'Special',
longRange: 'Special' longRange: 'Special'
}, },
fist: {
name: 'Fist',
damage: '(curr. MP/2)B',
shortRange: 'Adj.',
longRange: '-'
},
blackjack: {
name: 'Blackjack',
damage: '5B',
shortRange: 'Adjacent',
longRange: '-'
},
stunstick: {
name: 'Stun Stick',
damage: '8B',
shortRange: 'Adjacent',
longRange: '-'
},
neuralwhip: {
name: 'Neural Whip',
damage: '8B, 3L',
shortRange: 'Adjacent',
longRange: '-'
},
sword: {
name: 'Sword',
damage: '4L',
shortRange: 'Adjacent',
longRange: '-'
},
vibroblade: {
name: 'Vibro-Blade',
damage: '5L',
shortRange: 'Adjacent',
longRange: '-'
},
bayonetknife: {
name: 'Bayonet/Knife',
damage: '3L',
shortRange: 'Adjacent',
longRange: '-'
},
club: {
name: 'Club',
damage: '4B, 1L',
shortRange: 'Adjacent',
longRange: '-'
},
} }
function createIcon(number) { function createIcon(number) {

3
src/modules/scenario.js
View File

@@ -102,6 +102,9 @@ export async function build(svg, request) {
if (scenarioBuildings) if (scenarioBuildings)
svg.querySelector('.gameboard .buildings').replaceWith(svg.ownerDocument.importNode(scenarioBuildings, true)); svg.querySelector('.gameboard .buildings').replaceWith(svg.ownerDocument.importNode(scenarioBuildings, true));
if (startLocs)
grid.after(svg.ownerDocument.importNode(startLocs, true));
await loadScript(scenario, svg, 'radial') await loadScript(scenario, svg, 'radial')
return loadScript(scenario, svg, 'map'); return loadScript(scenario, svg, 'map');
} }

35
src/modules/scenarios.js
View File

@@ -2,6 +2,13 @@ import sideShow from './assets/images/scenario-side_show.svg';
import dragonHunting from './assets/images/scenario-dragon_hunting.svg'; import dragonHunting from './assets/images/scenario-dragon_hunting.svg';
import raceAgainstTime from './assets/images/scenario-race_against_time.svg'; import raceAgainstTime from './assets/images/scenario-race_against_time.svg';
import map4 from './assets/images/map4.svg'; import map4 from './assets/images/map4.svg';
import map5 from './assets/images/map5.svg';
import riflePlatoonMap from './assets/images/rifle-platoon-map.svg';
import machineGunPlatoonMap from './assets/images/machine-gun-platoon-map.svg';
import portableLaserPlatoonMap from './assets/images/portable-laser-platoon-map.svg';
import flamerPlatoonMap from './assets/images/flamer-platoon-map.svg';
import srmPlatoonMap from './assets/images/srm-platoon-map.svg';
import blankMap from './assets/images/blank-map.svg';
export const scenarios = { export const scenarios = {
'scenario-side_show': { 'scenario-side_show': {
@@ -19,5 +26,33 @@ export const scenarios = {
'map4': { 'map4': {
hashed: map4, hashed: map4,
title: 'Test map' title: 'Test map'
},
'map5': {
hashed: map5,
title: 'Weapon symbols'
},
'riflePlatoonMap': {
hashed: riflePlatoonMap,
title: 'Rifle Platoon'
},
'machineGunPlatoonMap': {
hashed: machineGunPlatoonMap,
title: 'Machine Gun Platoon'
},
'portableLaserPlatoonMap': {
hashed: portableLaserPlatoonMap,
title: 'Portable Laser Platoon'
},
'flamerPlatoonMap': {
hashed: flamerPlatoonMap,
title: 'Flamer Platoon'
},
'srmPlatoonMap': {
hashed: srmPlatoonMap,
title: 'SRM Platoon'
},
'blank-map': {
hashed: blankMap,
title: 'Blank map'
} }
} }