1 files changed, 27 insertions, 20 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index d8b43f8..65c4bb1 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -295,24 +295,27 @@ export function start(el) {
 
   // soldier.place(svg, soldier.createCounter(attacker, 'blazer'), getCell(0, 0, 0, 0));
   // soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
-  const img = document.createElementNS("http://www.w3.org/2000/svg", 'image');
+
+  const svgns = "http://www.w3.org/2000/svg";
+  const img = document.createElementNS(svgns, 'image');
   img.setAttribute('href', '/assets/images/mech_template.png');
   img.setAttribute('width', '77');
   img.setAttribute('height', '77');
   img.setAttribute('transform', 'translate(-38.75, -38.5)');
+  img.style.opacity = 0.2;
   img.style.pointerEvents = 'none';
 
-  const mech = document.createElementNS("http://www.w3.org/2000/svg", 'g');
+  const mech = document.createElementNS(svgns, 'g');
   mech.setAttribute('transform', 'rotate(0) translate(-2.25, 0)');
   mech.style.pointerEvents = 'none';
 
-  const deadZone = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
+  const deadZone = document.createElementNS(svgns, 'circle');
   deadZone.style.stroke = 'red';
   deadZone.style.strokeOpacity = 0.5;
   deadZone.style.pointerEvents = 'none';
   deadZone.setAttribute('r', '36.5');
 
-  const leftFoot = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+  const leftFoot = document.createElementNS(svgns, 'rect');
   leftFoot.style.fill = 'red';
   leftFoot.style.fillOpacity = 0.5;
   leftFoot.setAttribute('x', '-16.25');
@@ -320,7 +323,7 @@ export function start(el) {
   leftFoot.setAttribute('width', '34.5');
   leftFoot.setAttribute('height', '12.25');
 
-  const rightFoot = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+  const rightFoot = document.createElementNS(svgns, 'rect');
   rightFoot.style.fill = 'red';
   rightFoot.style.fillOpacity = 0.5;
   rightFoot.setAttribute('x', '-16.25');
@@ -329,51 +332,51 @@ export function start(el) {
   rightFoot.setAttribute('height', '12.25');
   rightFoot.setAttribute('transform', 'scale(1 -1)');
 
-  const forwardArc = document.createElementNS("http://www.w3.org/2000/svg", 'path');
+  const forwardArc = document.createElementNS(svgns, 'path');
   forwardArc.setAttribute('d', 'M -4,0 L -32.55,-16.5 A 36.5 36.5 0 0 0 -32.55,16.5 Z');
 
-  const rearArc = document.createElementNS("http://www.w3.org/2000/svg", 'path');
+  const rearArc = document.createElementNS(svgns, 'path');
   rearArc.setAttribute('d', 'M 4,0 L 32.55,-16.5 A 36.5 36.5 0 0 1 32.55,16.5 Z');
 
-  const forwardRightArc = document.createElementNS("http://www.w3.org/2000/svg", 'path');
+  const forwardRightArc = document.createElementNS(svgns, 'path');
   forwardRightArc.setAttribute('d', 'M 0,2.3 L -32.55,-16.5 A 36.5 36.5 0 0 1 0,-36.5 Z');
 
-  const forwardLeftArc = document.createElementNS("http://www.w3.org/2000/svg", 'path');
+  const forwardLeftArc = document.createElementNS(svgns, 'path');
   forwardLeftArc.setAttribute('d', 'M 0,-2.3 L -32.55,16.5 A 36.5 36.5 0 0 0 0,36.5 Z');
 
-  const rightArc = document.createElementNS("http://www.w3.org/2000/svg", 'path');
+  const rightArc = document.createElementNS(svgns, 'path');
   rightArc.setAttribute('d', 'M 0,2.3 L 32.55,-16.5 A 36.5 36.5 0 0 0 0,-36.5 Z');
 
-  const leftArc = document.createElementNS("http://www.w3.org/2000/svg", 'path');
+  const leftArc = document.createElementNS(svgns, 'path');
   leftArc.setAttribute('d', 'M 0,-2.3 L 32.55,16.5 A 36.5 36.5 0 0 1 0,36.5 Z');
 
-  const arcs = document.createElementNS("http://www.w3.org/2000/svg", 'g');
+  const arcs = document.createElementNS(svgns, 'g');
   arcs.setAttribute('mask', 'url(#mech-template-mask)');
   arcs.style.stroke = 'white';
   arcs.style.strokeOpacity = 0.5;
 
-  const mask = document.createElementNS("http://www.w3.org/2000/svg", 'mask');
+  const mask = document.createElementNS(svgns, 'mask');
   mask.id = 'mech-template-mask';
 
-  const visible = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
+  const visible = document.createElementNS(svgns, 'circle');
   visible.setAttribute('fill', 'white');
   visible.setAttribute('r', '36.5');
 
-  const invisible = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+  const invisible = document.createElementNS(svgns, 'rect');
   invisible.setAttribute('x', '-16.25');
   invisible.setAttribute('y', '-18');
   invisible.setAttribute('width', '34.5');
   invisible.setAttribute('height', '36');
   invisible.setAttribute('fill', 'black');
 
-  const arrow = document.createElementNS("http://www.w3.org/2000/svg", 'polyline');
+  const arrow = document.createElementNS(svgns, 'polyline');
   arrow.setAttribute('points', '-23,-3 -25,0 -23,3');
   arrow.style.stroke = 'black';
 
   mask.append(visible);
   mask.append(invisible);
 
-  //mech.append(img);
+  mech.append(img);
   mech.append(deadZone);
   mech.append(leftFoot);
   mech.append(rightFoot);
@@ -386,10 +389,14 @@ export function start(el) {
   arcs.append(leftArc);
   mech.append(arcs);
 
-  const cell = getCell(-1, 1, 0, 0);
+  const cell = getCell(-4, 6, -2, 0);
+
+  //cell.append(mask);
+  //cell.append(mech);
 
-  cell.append(mask);
-  cell.append(mech);
+  const mechTemplate = document.createElementNS(svgns, 'use');
+  mechTemplate.setAttribute('href', '#mech-template');
+  cell.append(mechTemplate);
   console.log(cell);
   ///////////