2 files changed, 54 insertions, 1 deletions
diff --git a/src/index.js b/src/index.js
index 2da4f2f..46f39fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -159,6 +159,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el =>
 );
 
 document.querySelector('.set-grenade').addEventListener('click', gameboard.setGrenade);
+document.querySelector('.set-mech-template').addEventListener('click', gameboard.setMechTemplate);
 
 document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
   el.addEventListener('input', gameboard.toggleFiringArcVisibility)
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 65c4bb1..d35b2b9 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -38,6 +38,10 @@ function isGrenade(el) {
   return el && el.getAttribute('href') === '#counter-grenade';
 }
 
+function isMechTemplate(el) {
+  return el && el.getAttribute('class') === 'mech-template';
+}
+
 function isClone(counter) {
   const isClone = counter.classList.contains('clone'),
     { allegiance: clAl, number: clNum } = counter.dataset;
@@ -203,8 +207,9 @@ export function start(el) {
       const occupant = getCellOccupant(cell);
       let toPlace = placing.pop();
 
-      if (isGrenade(toPlace)) {
+      if (isGrenade(toPlace) || isMechTemplate(toPlace)) {
         getHex(cell).after(toPlace);
+        removeEventListener("keydown", handleMechTemplateRotation);
       } else if (toPlace && !occupant) {
         soldier.place(svg, toPlace, cell);
         toPlace.removeEventListener('click', selectOffBoard);
@@ -266,6 +271,10 @@ export function start(el) {
     cell.addEventListener('pointerover', () => {
       const selected = getSelected();
 
+      if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
+        cell.appendChild(placing[0]);
+      }
+
       if (selected && svg.querySelector('.grid').contains(selected) && !getLockedSightLine(svg) && cell !== selected.parentElement) {
         clearSightLine();
         drawSightLine(selected.parentElement, cell);
@@ -442,3 +451,46 @@ export function setGrenade() {
 
   placing.push(counter);
 }
+
+function handleMechTemplateRotation(event) {
+  const counter = placing[0];
+  const upper = placing[0].querySelector('use[href="#mech-template-upper"]');
+
+  if (event.key === 'a') {
+    let direction = +counter.style.transform.match(/-?\d+/) || 0;
+    direction -= 60;
+    counter.style.transform = `rotate(${direction}deg)`;
+  } else if (event.key === 'd') {
+    let direction = +counter.style.transform.match(/-?\d+/) || 0;
+    direction += 60;
+    counter.style.transform = `rotate(${direction}deg)`;
+  } else if (event.key === 'q') {
+    let facing = +upper.style.transform.match(/-?\d+/) || 0;
+    facing = facing <= -60 ? -60 : facing - 60;
+    upper.style.transform = `rotate(${facing}deg)`;
+  } else if (event.key === 'e') {
+    let facing = +upper.style.transform.match(/-?\d+/) || 0;
+    facing = facing >= 60 ? 60 : facing + 60;
+    upper.style.transform = `rotate(${facing}deg)`;
+  }
+}
+
+export function setMechTemplate() {
+  const counter = document.createElementNS(svgns, 'g');
+  counter.setAttributeNS(null, 'class', 'mech-template');
+  counter.style.pointerEvents = 'none';
+  counter.style.transition = 'transform 0.5s';
+
+  const lower = document.createElementNS(svgns, 'use');
+  lower.setAttributeNS(null, 'href', '#mech-template-lower');
+
+  const upper = document.createElementNS(svgns, 'use');
+  upper.setAttributeNS(null, 'href', '#mech-template-upper');
+  upper.style.transition = 'transform 0.5s';
+
+  counter.appendChild(lower);
+  counter.appendChild(upper);
+
+  addEventListener("keydown", handleMechTemplateRotation);
+  placing.push(counter);
+}