Add some team color counters

public/assets/images/counter_attacker.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="703.54913"
+   height="703.54913"
+   viewBox="0 0 703.54913 703.54913"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><rect
+     style="display:none;opacity:0.398;fill:#ffffff;stroke-width:0.177726"
+     id="rect46"
+     width="703.54913"
+     height="703.54913"
+     x="1.6503907e-06"
+     y="1.6503907e-06" /><circle
+     style="display:inline;fill:#ff0000;stroke:none;stroke-width:2"
+     id="path4"
+     cx="351.77457"
+     cy="351.77457"
+     r="6" /><rect
+     style="fill:#0000ff;stroke:none;stroke-width:17.8495"
+     id="rect1"
+     width="396.55869"
+     height="396.55869"
+     x="153.49522"
+     y="153.49522" /></svg>

public/assets/images/counter_defender.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="703.54913"
+   height="703.54913"
+   viewBox="0 0 703.54913 703.54913"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><rect
+     style="display:none;opacity:0.398;fill:#ffffff;stroke-width:0.177726"
+     id="rect46"
+     width="703.54913"
+     height="703.54913"
+     x="1.6503907e-06"
+     y="1.6503907e-06" /><circle
+     style="display:inline;fill:#ff0000;stroke:none;stroke-width:2"
+     id="path4"
+     cx="351.77457"
+     cy="351.77457"
+     r="6" /><rect
+     style="fill:#ff0000;stroke:none;stroke-width:17.8495"
+     id="rect1"
+     width="396.55869"
+     height="396.55869"
+     x="153.49522"
+     y="153.49522" /></svg>

public/assets/images/scenario_template.svg

@@ -26,6 +26,14 @@
       <use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
     </pattern>
 
+    <g id="counter-attacker">
+      <rect x="0" y="0" width="10" height="10" fill="beige" stroke="black" stroke-width="0.5"/>
+      <image href="counter_attacker.svg" width="10"/>
+    </g>
+    <g id="counter-defender">
+      <rect x="0" y="0" width="10" height="10" fill="beige" stroke="black" stroke-width="0.5"/>
+      <image href="counter_defender.svg" width="10"/>
+    </g>
     <g id="counter-grenade">
       <rect x="0" y="0" width="10" height="10" fill="beige" stroke="black" stroke-width="0.5"/>
       <image href="counter_grenade2.svg" width="10"/>

public/index.html

@@ -231,6 +231,12 @@
           <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
         </button>
         <button type="button" class="set-mech-template">Mech</button>
+        <button type="button" class="attacker">
+          <img src="assets/images/counter_attacker.svg" height="12" />
+        </button>
+        <button type="button" class="defender">
+          <img src="assets/images/counter_defender.svg" height="12" />
+        </button>
       </span>
       <div class="counters-list">
         <button type="button" class="grenade">

src/index.js

@@ -162,7 +162,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el =>
   el.addEventListener('click', gameboard.setFiringArc)
 );
 
-document.querySelectorAll('.counters-list button').forEach(el => {
+document.querySelectorAll('.counters-list button, button.attacker, button.defender').forEach(el => {
   el.addEventListener('click', e => gameboard.setCounter(el.className));
 });