From 31cd389b466926638a2a9722a4b55542f9a966b3 Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:32 -0700
Subject: [PATCH] Fix vectorAdd calculation; draw grid hexes after buildings

---
 public/assets/css/map.css                  |  4 ++--
 public/assets/images/scenario_template.svg |  2 +-
 src/modules/gameboard.js                   |  3 ++-
 src/radial.js                              | 28 ++++++++++++++++++----
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 38d8f23..af1028e 100644
--- a/public/assets/css/map.css
+++ b/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;
diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg
index dc387bb..20798a9 100644
--- a/public/assets/images/scenario_template.svg
+++ b/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;
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index d9919ec..afb582b 100644
--- a/src/modules/gameboard.js
+++ b/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) {
diff --git a/src/radial.js b/src/radial.js
index 6177a65..2c261bf 100644
--- a/src/radial.js
+++ b/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');