Radial coords for rectangular hex grid

src/radial.js

@@ -20,9 +20,9 @@ function getNeighbors(coords) {
   ]
 }
 
-function generateRadialCoords({ q, r, s }, radius) {
+function generateRadialCoords(l, { q, r, s }, radius) {
   const origin = toKey(q, r, s);
-  const list = new Set();
+  const list = new Set(l);
   const neighbors = new Set();
 
   let next = new Set();
@@ -49,6 +49,23 @@ function sameSigns(a, b) {
   return a > -1 && b > -1 || a < 0 && b < 0;
 }
 
+function generateRadialCoordsRect({ rows, columns }, { q = 0, r = 0, s = 0 } = {}) {
+  const list = new Set();
+
+  for (let col = 0; col < columns; col++) {
+    for (let rw = 0; rw < rows; rw++) {
+      const alternate = rw % 2;
+      const dq = -(alternate + rw) / 2 + alternate - col;
+      const dr = rw;
+      const ds = -(rw + alternate) / 2 + col;
+
+      list.add(toKey(q + dq, r + dr, s + ds));
+    }
+  }
+
+  return list;
+}
+
 const hex = {
   inradius: 8.66,
   circumradius: 10,
@@ -57,10 +74,15 @@ const hex = {
 const horzSpacing = hex.inradius;
 const vertSpacing = hex.circumradius * 3 / 2;
 
-const list = generateRadialCoords({ q: 0, r: 0, s: 0 }, 2);
+// let list = generateRadialCoords(new Map(), { q: 2, r: 0, s: -2 }, 1);
+// list = generateRadialCoords(list, { q: -2, r: 0, s: 2 }, 1);
+// list = generateRadialCoords(list, { q: 0, r: 0, s: 0 }, 0);
+const list = generateRadialCoordsRect({ rows: 4, columns: 5 }, { q: 7, r: -4, s: -3 });
 const svg = document.querySelector('svg');
 const xmlns = 'http://www.w3.org/2000/svg';
 
+// const map = new Map();
+
 list.forEach(key => {
   const [q, r, s] = key.split(',').map(n => +n);
 
@@ -99,4 +121,5 @@ list.forEach(key => {
 
   [use, qText, rText, sText].forEach(el => g.appendChild(el));
   svg.appendChild(g);
+  // map.set(key, g);
 });