Add ability to change maps

src/modules/gameboard.js

@@ -19,14 +19,14 @@ function getCellOccupant(cell) {
 }
 
 function getCells(svg) {
-  return svg.querySelectorAll('g[data-y] > g[data-x]');
+  return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]');
 }
 
 function getLockedSightLine(svg) {
   return svg.querySelector('line.sight-line:not(.active)');
 }
 
-function getSightLine(svg) {
+export function getSightLine(svg) {
   return svg.querySelector('line.sight-line');
 }
 
@@ -63,7 +63,7 @@ function getCellPosition(cell) {
 }
 
 function getCell(x, y) {
-  return svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`);
+  return svg.querySelector(`g.grid > g[data-y="${y}"] > g[data-x="${x}"]`);
 }
 
 function getCounterAtGridIndex(x, y) {
@@ -85,7 +85,7 @@ function updateSightLine(cell) {
     { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.getLockTarget();
 
   const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
-    .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+    .map(([x, y]) => `g.grid g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
     .join(', ');
 
   const hexes = svg.querySelectorAll(selector);
@@ -99,7 +99,7 @@ function drawSightLine(sourceCell, targetCell) {
     { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
 
   const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
-    .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+    .map(([x, y]) => `g.grid g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
     .join(', ');
 
   const hexes = svg.querySelectorAll(selector);
@@ -277,9 +277,9 @@ export function start(el) {
   });
 
   // debug
-  const c = soldier.getCounter(svg, { dataset: { allegiance: 'davion', number: '1' }});
-  soldier.place(svg, c, getCell(17, 25));
-  select(c);
+  // const c = soldier.getCounter(svg, { dataset: { allegiance: 'davion', number: '1' }});
+  // soldier.place(svg, c, getCell(17, 25));
+  // select(c);
 }
 
 export function select(selected) {

src/modules/record_sheet.js

@@ -14,9 +14,9 @@ export function getSelected() {
 
 export function select(data) {
   const selector =
-    `#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`
+  `#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`
 
-    unSelect();
+  unSelect();
   document.querySelector(selector).classList.add('selected');
   document.getElementById('toggle-prone-counter').checked = data.prone;
 }