WIP: split hexes and building structure into different layers

public/assets/css/map.css

@@ -15,7 +15,7 @@ text {
 }
 
 use[href="#hex"] {
-  opacity: 0.25;
+  opacity: 0;
   fill: transparent;
   fill-opacity: 0.5;
   stroke-width: 0.5px;

public/assets/css/radial.css

@@ -47,7 +47,7 @@ use[href="#hex"] {
   display: inline;
   opacity: 1;
   fill: #ffffff;
-  fill-opacity: 0.5;
+  /* fill-opacity: 0.5; */
   /* fill: url(#asterisk); */
   stroke: none;
 }
@@ -72,6 +72,14 @@ use[href="#hex"] {
   display: none;
 }
 
+[data-view-elevation="-1"] [class*="elevation"] {
+  display: none;
+}
+
+[data-view-elevation="-1"] #background {
+  fill: #333;
+}
+
 [data-view-elevation="-1"] .building .elevation-basement {
   display: inline;
 }
@@ -84,14 +92,21 @@ use[href="#hex"] {
   display: inline;
 }
 
-[data-view-elevation="2"] .building .elevation-2 {
+[data-view-elevation="2"] .building .elevation-2,
+[data-view-elevation="2"] .building .elevation-1:last-child {
   display: inline;
 }
 
-[data-view-elevation="3"] .building .elevation-3 {
+[data-view-elevation="3"] .building .elevation-3,
+[data-view-elevation="3"] .building .elevation-1:last-child,
+[data-view-elevation="3"] .building .elevation-2:last-child {
   display: inline;
 }
 
+#dots {
+  pointer-events: none;
+}
+
 /*
 [data-view-elevation="-1"] .building > *,
 [data-view-elevation="-1"] .building > .structure > * {

public/assets/images/radial.svg

@@ -23,6 +23,9 @@
       <use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
     </pattern>
 
+    <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+    <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+
     <g id="building8" class="building">
       <path id="building8-floor" class="floor" d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z" />
       <path id="building8-outer-wall" class="outer-wall" d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z m 77.94,30 v 15 h 69.28 v -15 m -86.6,37.5 v 7.5 m 0,-60 V -75 M 73.61,-112.5 V -75 M -90.93,-37.5 H 90.93 m 0,45 H -90.93 m 173.2,45 v -15 h 43.3 m -112.58,0 h -43.3 v 60 m 43.3,-45 v -45 m -69.28,30 h -60.62 m 60.62,30 h -60.62 m 60.62,-60 v 90" />

public/assets/images/scenario_template.svg

@@ -47,9 +47,9 @@
     <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
   </defs>
 
-  <g class="gameboard">
+  <g class="gameboard" data-view-elevation="0">
     <rect id="background"/>
-
+    <g class="buildings"/>
     <rect id="dots" fill="url(#asterisk)"/>
 
     <g id="firing-arcs">
@@ -57,6 +57,6 @@
       <g id="lines"/>
     </g>
 
-    <g class="grid" data-view-elevation="0"/>
+    <g class="grid"/>
   </g>
 </svg>

src/index.js

@@ -210,7 +210,7 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
 
 document.querySelectorAll('[name="select-elevation"]').forEach(el => {
   el.addEventListener('change', function (e) {
-    document.querySelector('object').contentDocument.querySelector('.grid').dataset.viewElevation = this.value;
+    document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value;
   });
 });
 

src/modules/gameboard.js

@@ -23,7 +23,6 @@ function getCellOccupant(cell) {
 }
 
 function getCells(svg) {
-  // return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]');
   return svg.querySelectorAll('[data-q][data-r][data-s][data-t]');
 }
 
@@ -86,35 +85,49 @@ function clearSightLine() {
   Observable.notify('distance');
 }
 
-function updateSightLine(cell) {
+function getSightLineHexes(source, target) {
-  const CURRENT_ELEVATION_LEVEL = 0;
+  const { q: sq, r: sr, s: ss } = source.dataset;
-  const { q: sq, r: sr, s: ss } = cell.dataset;
+  const { q: tq, r: tr, s: ts } = target.dataset;
-  const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
   const sourceIndex = { q: +sq, r: +sr, s: +ss };
   const targetIndex = { q: +tq, r: +tr, s: +ts };
 
-  const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
+  const selector = sightLine
-    .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
+    .calcIndexes(sourceIndex, targetIndex)
+    .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"] use[href="#hex"]`)
     .join(', ');
 
-  const hexes = svg.querySelectorAll(selector);
+  return svg.querySelectorAll(selector);
+}
+
+function updateSightLine(cell) {
+  // const CURRENT_ELEVATION_LEVEL = 0;
+  // const { q: sq, r: sr, s: ss } = cell.dataset;
+  // const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
+  // const sourceIndex = { q: +sq, r: +sr, s: +ss };
+  // const targetIndex = { q: +tq, r: +tr, s: +ts };
+
+  // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
+  //   .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
+  //   .join(', ');
+
+  const hexes = getSightLineHexes(cell, sightLine.getLockTarget());
   sightLine.setHexes(hexes);
   sightLine.update(getCellPosition(cell));
   Observable.notify('distance', hexes.length - 1);
 }
 
 function drawSightLine(sourceCell, targetCell) {
-  const CURRENT_ELEVATION_LEVEL = 0;
+  // const CURRENT_ELEVATION_LEVEL = 0;
-  const { q: sq, r: sr, s: ss } = sourceCell.dataset;
+  // const { q: sq, r: sr, s: ss } = sourceCell.dataset;
-  const { q: tq, r: tr, s: ts } = targetCell.dataset;
+  // const { q: tq, r: tr, s: ts } = targetCell.dataset;
-  const sourceIndex = { q: +sq, r: +sr, s: +ss };
+  // const sourceIndex = { q: +sq, r: +sr, s: +ss };
-  const targetIndex = { q: +tq, r: +tr, s: +ts };
+  // const targetIndex = { q: +tq, r: +tr, s: +ts };
 
-  const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
+  // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
-    .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
+  //   .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
-    .join(', ');
+  //   .join(', ');
 
-  const hexes = svg.querySelectorAll(selector);
+  const hexes = getSightLineHexes(sourceCell, targetCell);
   sightLine.setHexes(hexes);
   const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
   svg.querySelector('.gameboard').appendChild(line);
@@ -175,7 +188,6 @@ function selectOffBoard() {
 }
 
 function select(data) {
-  console.log('select', data);
   const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
   const isSelected = counter?.classList.contains(soldier.getSelectedClass());
 
@@ -223,7 +235,6 @@ export function start(el) {
             placing.push(toPlace);
             getLockedSightLine(svg) ? updateSightLine(toPlace.parentElement) : drawSightLine(toPlace.parentElement, cell);
           } else {
-            // deselect();
             Observable.notify('select');
           }
         } else if (!occupant.classList.contains('clone')) {
@@ -242,7 +253,7 @@ export function start(el) {
       } else if (!toPlace && occupant) {
         Observable.notify('select', occupant);
       } else {
-        console.log('removing cell contents');
+        console.log('removing cell contents', cell);
         getCellContents(cell).forEach(el => el.remove());
       }
 
@@ -331,7 +342,7 @@ export function toggleFiringArcVisibility() {
 
 export function setFiringArc() {
   const counter = getSelected(),
-    isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
+    isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q');
 
   if (isOnBoard(counter)) {
     firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));

src/radial.js

@@ -414,9 +414,12 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
     const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps });
     const transform = origin.transform || ((x, y) => `translate(${x}, ${y})`);
     const buildingStructure = document.createElementNS(xmlns, 'g');
-    buildingStructure.classList.add('structure');
+    buildingStructure.classList.add('building');
+    buildingStructure.classList.add(building.type);
     buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
-    buildingContainer.appendChild(buildingStructure);
+
+    const [mapsheet] = container.classList;
+    document.querySelector(`.buildings .${mapsheet}`).appendChild(buildingStructure);
 
     building.elevationLevels.forEach(elevationLevel => {
       const hexContainer = document.createElementNS(xmlns, 'g');
@@ -468,9 +471,13 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
 
 function drawMapsheet(gameboard, mapsheet, position) {
   const container = document.createElementNS(xmlns, 'g');
-  container.id = mapsheet.id;
+  container.classList.add(mapsheet.id);
   gameboard.appendChild(container);
 
+  const buildingContainer = document.createElementNS(xmlns, 'g');
+  buildingContainer.classList.add(mapsheet.id);
+  document.querySelector('.buildings').appendChild(buildingContainer);
+
   const gridContainer = document.createElementNS(xmlns, 'g');
   gridContainer.classList.add('elevation-0');
 
@@ -498,7 +505,6 @@ function drawMapsheet(gameboard, mapsheet, position) {
   container.appendChild(gridContainer);
 
   return new Map([...grid, ...buildingHexes]);
-  // return { id, grid, buildings };
 }
 
 const horzMapVect = function(coords) {
@@ -558,27 +564,22 @@ let sheets = [];
 
 // sheets = [[mapsheet1]];
 // sheets = [[mapsheet2]];
-// sheets = [[mapsheet2, mapsheet3]];
+sheets = [[mapsheet2], [mapsheet3]];
 // sheets = [[mapsheet2], [mapsheet1], [mapsheet3]];
 
 // drawMapsheet(grid, mapsheet2, vectorAdd({ q: 0, r: 0, s: 0 }, { q: 1, r: -2, s: 1 }, 6));
 
-sheets = [
+// sheets = [
-  [mapsheet2, mapsheet1],
+//   [mapsheet2, mapsheet1],
-  [mapsheet3, mapsheet4]
+//   [mapsheet3, mapsheet4]
-];
+// ];
 
 // drawBuildings([{
 //   type: 'building2',
 //   elevationLevels: range(-1, 2),
 //   grid: new Map(buildingHexes.bld2),
 //   position: coords => coords
-// }], gameboard, { q: 0, r: 0, s: 0 });
+// }], grid, { q: 0, r: 0, s: 0 });
-
-// const map1building2furniture = document.querySelector('defs .mapsheet2 .building2 .furniture');
-// document.querySelector('.gameboard .building2 .structure').appendChild(map1building2furniture);
-
-// console.log(mapsheet2);
 
 let finalGrid = new Map();
 
@@ -593,18 +594,10 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
     }
 
     ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
-    // console.log(ms);
     finalGrid = new Map([...finalGrid, ...ms]);
   })
 });
 
-const origin = document.querySelector('[transform="translate(0, 0)"]');
-// console.log(origin);
-
-// console.log([...finalGrid.entries()].find(([k, v]) => v === origin));
-
-console.log(finalGrid.get('0,0,0,0'));
-
 const circle = document.createElementNS(xmlns, 'circle');
 circle.setAttributeNS(null, 'r', 5);
 circle.setAttributeNS(null, 'fill', 'green');
@@ -627,4 +620,3 @@ function addGroup(container, className) {
   container.appendChild(g);
   return g;
 }
-