Complete military symbols and add a map

public/assets/css/map.css

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

public/assets/images/counters.svg

@@ -1,6 +1,5 @@
 <?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>
     <circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
 
@@ -34,18 +33,27 @@
     </g>
 
     <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="2" x2="2" y2="2"/>
     </g>
 
     <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 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>
   </defs>
 
@@ -145,28 +153,67 @@
 
   <!--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"/>
     <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 id="lethalhand" style="r: inherit;" class="weapon-symbol">
+  <g id="stunstick" style="r: inherit;" class="weapon-symbol">
     <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 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-->
 
   <g id="srm" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
     <g style="stroke: white; stroke-width: 0.5px; fill: none;">
       <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"/>
     </g>
   </g>
@@ -230,7 +277,8 @@
   <g id="satchelcharge" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
     <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"/>
     </g>
   </g>
@@ -245,7 +293,7 @@
   <g id="hflamer" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
     <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"/>
     </g>
   </g>
@@ -253,7 +301,6 @@
   <g id="inferno" style="r: inherit;" class="weapon-symbol">
     <use style="r: inherit;" href="#counter-base"/>
     <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 -2,4.75 V -2.5 C -2,-5.5 2,-5.5 2,-2.5 V 4.75"/>
     </g>
@@ -295,9 +342,10 @@
     <use style="r: inherit;" href="#counter-base"/>
     <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="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"/>
+
     </g>
   </g>
 
@@ -306,7 +354,8 @@
     <g style="stroke: white; stroke-width: 0.5px; fill: none;">
       <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
       <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"/>
     </g>
   </g>

public/assets/images/map5.svg

@@ -0,0 +1,275 @@
+<?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#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>

src/modules/record_sheet.js

@@ -164,6 +164,54 @@ const weapons = {
     shortRange: '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) {

src/modules/scenario.js

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

src/modules/scenarios.js

@@ -2,6 +2,7 @@ import sideShow from './assets/images/scenario-side_show.svg';
 import dragonHunting from './assets/images/scenario-dragon_hunting.svg';
 import raceAgainstTime from './assets/images/scenario-race_against_time.svg';
 import map4 from './assets/images/map4.svg';
+import map5 from './assets/images/map5.svg';
 import blankMap from './assets/images/blank-map.svg';
 
 export const scenarios = {
@@ -21,6 +22,10 @@ export const scenarios = {
     hashed: map4,
     title: 'Test map'
   },
+  'map5': {
+    hashed: map5,
+    title: 'Weapon symbols'
+  },
   'blank-map': {
     hashed: blankMap,
     title: 'Blank map'