1 files changed, 41 insertions, 13 deletions
diff --git a/src/radial.js b/src/radial.js
index 5a8ae5a..9978b14 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -77,7 +77,7 @@ function radialToScreenCoords({ q, r, s }) {
     x = Math.abs(q) + Math.abs(s);
 
   x = (q > s ? -1 : 1) * x * horzSpacing;
-  y = r * vertSpacing;
+  const y = r * vertSpacing;
 
   return { x, y };
 }
@@ -408,7 +408,7 @@ let mapsheet30 = {
     {
       type: 'building4',
       grid: new Map(buildingHexes.bld4),
-      position: ({ q, r, s }) => ({ q: q - 9, r: r - 6, s: s + 15 })
+      position: reflectR({ q: -10, r: -5, s: 15 })
     },
     {
       type: 'building5',
@@ -418,7 +418,7 @@ let mapsheet30 = {
     {
       type: 'building6',
       grid: new Map(buildingHexes.bld6),
-      position: reflectR({ q: 1, r: 6, s: -7 })
+      position: reflectR({ q: 0, r: 6, s: -6 })
     },
     {
       type: 'building7',
@@ -431,10 +431,10 @@ let mapsheet30 = {
 function reflectR(coords) {
   return function ({ q, r, s }) {
     return {
-      q: -s + coords.q,
+      q: -q + coords.q,
       r: -r + coords.r,
-      s: -q + coords.s,
-      transform: "scale(1 -1)"
+      s: -s + coords.s,
+      transform: "rotate(180)"
     };
   };
 }
@@ -487,11 +487,20 @@ function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps
 
     const buildingTemplate = document.querySelector(`defs #${building.type}`);
     const origin = building.position({ q: 0, r: 0, s: 0 });
+    const { x: rx, y: ry }  = radialToScreenCoords(origin);
     const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps });
 
+    console.log(x, y);
+
     const buildingStructure = document.createElementNS(xmlns, 'g');
     buildingStructure.classList.add('structure');
-    buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) ${origin.transform ? origin.transform : ''}`);
+
+    if (origin.transform) {
+      buildingStructure.setAttributeNS(null, 'transform', `rotate(180 ${x}, ${y}) translate(${x}, ${y})`);
+    } else {
+      buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y})`);
+    }
+
     buildingContainer.appendChild(buildingStructure);
 
     for (let child of buildingTemplate.children) {
@@ -568,15 +577,34 @@ function findScalar(arr) {
 
 // mapsheet10 = drawMapsheet(gameboard, mapsheet10, { q: -1, r: 0, s: 1 });
 
-// const sheets = [[mapsheet10]];
+let sheets = [];
 
-// drawHexes(gameboard, buildingHexes.bld7, true);
+// sheets = [[mapsheet30]];
+
+// drawHexes(gameboard, buildingHexes.bld4, true);
+// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: -9, r: -6, s: 15 })), true);
+// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: 0, r: 0, s: 0 })), true);
+
+const buildingTemplate = document.querySelector(`defs #building4`);
+const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 });
+
+const buildingStructure = document.createElementNS(xmlns, 'g');
+buildingStructure.classList.add('structure');
+buildingStructure.classList.add('building');
+buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) rotate(180)`);
+// gameboard.appendChild(buildingStructure);
+
+for (let child of buildingTemplate.children) {
+  const use = document.createElementNS(xmlns, 'use');
+  use.setAttributeNS(null, 'href', `#${child.id}`);
+  child.classList.forEach(className => use.classList.add(className));
+  buildingStructure.appendChild(use);
+}
 
-// drawHexes(addGroup(gameboard, 'part-1'), bld8, true);
 
-const sheets = [[mapsheet20], [mapsheet30]];
-// const sheets = [[mapsheet2], [mapsheet10], [mapsheet3]];
-// const sheets = [[mapsheet4]];
+sheets = [[mapsheet20], [mapsheet30]];
+// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]];
+// const sheets = [[mapsheet30]];
 
 // const sheets = [
 //   [mapsheet2, mapsheet1],