Fix vectorAdd calculation; draw grid hexes after buildings

public/assets/css/map.css

@@ -16,7 +16,7 @@ text {
 
 use[href="#hex"] {
   opacity: 0.25;
-  fill: transparent;
+  fill: purple;
   fill-opacity: 0.5;
   stroke-width: 0.5px;
   stroke: black;
@@ -236,7 +236,7 @@ g[data-y]:nth-child(odd) {
   transform: scale(var(--scale));
 }
 
-[data-x]:hover use[href="#hex"] {
+[data-x]:hover use[href="#hex"], [data-q][data-r][data-s][data-t]:hover use[href="#hex"] {
   opacity: 1;
   fill: orange;
   stroke: black;

public/assets/images/scenario_template.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" standalone="no"?>
 <svg viewBox="-10 -10 200 300"
   xmlns="http://www.w3.org/2000/svg">
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
+  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
   <style>
     #background {
       stroke: #304b75;

src/modules/gameboard.js

@@ -23,7 +23,8 @@ function getCellOccupant(cell) {
 }
 
 function getCells(svg) {
-  return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]');
+  // return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]');
+  return svg.querySelectorAll('[data-q][data-r][data-s][data-t]');
 }
 
 function getLockedSightLine(svg) {

src/radial.js

@@ -88,6 +88,10 @@ function drawHexes(el, list, renderText = false) {
     const { x, y } = radialToScreenCoords({ q, r, s });
 
     const cell = document.createElementNS(xmlns, 'g');
+    cell.dataset.q = q;
+    cell.dataset.r = r;
+    cell.dataset.s = s;
+    cell.dataset.t = t;
     cell.setAttributeNS(null, 'transform', `translate(${x}, ${y})`);
 
     const use = document.createElementNS(xmlns, 'use');
@@ -469,7 +473,6 @@ function drawMapsheet(gameboard, mapsheet, position) {
 
   const gridContainer = document.createElementNS(xmlns, 'g');
   gridContainer.classList.add('elevation-0');
-  container.appendChild(gridContainer);
 
   const buildingHexes = drawBuildings(mapsheet.buildings, container, position, document.querySelector(`defs .${mapsheet.id}`));
 
@@ -492,6 +495,8 @@ function drawMapsheet(gameboard, mapsheet, position) {
     gridContainer.appendChild(use);
   });
 
+  container.appendChild(gridContainer);
+
   return new Map([...grid, ...buildingHexes]);
   // return { id, grid, buildings };
 }
@@ -505,7 +510,7 @@ const vertMapVect = function(coords) {
 }
 
 function vectorAdd({ q, r, s }, { q: dq, r: dr, s: ds }, scalar) {
-  return ({ q: q - dq * scalar, r: r + dr * scalar, s: s - ds * scalar });
+  return ({ q: q + dq * scalar, r: r + dr * scalar, s: s + ds * scalar });
 }
 
 function findMult(arr) {
@@ -553,9 +558,11 @@ 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 = [
   [mapsheet2, mapsheet1],
   [mapsheet3, mapsheet4]
@@ -571,6 +578,10 @@ sheets = [
 // const map1building2furniture = document.querySelector('defs .mapsheet2 .building2 .furniture');
 // document.querySelector('.gameboard .building2 .structure').appendChild(map1building2furniture);
 
+// console.log(mapsheet2);
+
+let finalGrid = new Map();
+
 findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
   const vertMapVect = function(coords) {
     return vectorAdd(coords, { q: 1, r: -2, s: 1 }, vscalar);
@@ -578,13 +589,22 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
 
   row.forEach(([hscalar, ms]) => {
     const horzMapVect = function(coords) {
-      return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar);
+      return vectorAdd(coords, { q: -1, r: 0, s: 1 }, hscalar);
     }
 
     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');