2 files changed, 51 insertions, 28 deletions
diff --git a/public/radial.html b/public/radial.html
index 1fe2bd6..20b4bfb 100644
--- a/public/radial.html
+++ b/public/radial.html
@@ -259,8 +259,8 @@
 
 <body>
   <!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> -->
-  <!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> -->
-    <svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
+  <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg">
+  <!-- <svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg"> -->
     <defs>
       <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
       <line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
@@ -299,11 +299,19 @@
       <g id="building3" class="building">
         <path id="building3-floor" class="floor" d="m -30.310003,52.5 v -89.999997 h 60.62001 V 52.5 Z" />
         <path id="building3-outer-wall" class="outer-wall"
-          d="m 21.650012,0 h 8.659995 m -34.640005,-37.5 v 45 m 0,30 v -15 m 8.66,30.000001 V 37.500003 m -34.64,0 h 60.620005 m -60.620005,15 v -90 h 60.620005 v 90 z" />
+          d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" />
         <path id="building3-inner-wall" class="inner-wall"
-          d="m 21.650012,0 h 8.659995 m -34.640005,-37.5 v 45 m 0,30 v -15 m 8.66,30.000001 V 37.500003 m -34.64,0 h 60.620005 m -60.620005,15 v -90 h 60.620005 v 90 z" />
+          d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" />
       </g>
 
+      <!-- <g id="building4" class="building">
+        <rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309999" y="-67.5" />
+        <path id="building4-outer-wall" class="outer-wall"
+          d="M -30.310008,37.5 H -12.99001 M 21.65,-7.500004 l -10e-6,-30 M 38.96999,37.5 h -34.64 M 38.97,-7.500004 H 4.33 L 4.32999,52.5 m 34.64,-90.000004 h -34.64 m 1e-5,-30 -1e-5,45 h -34.639998 m 0,-45 H 38.96999 V 52.5 h -69.279998 z" />
+        <path id="building4-inner-wall" class="inner-wall"
+          d="M -30.310008,37.5 H -12.99001 M 21.65,-7.500004 l -10e-6,-30 M 38.96999,37.5 h -34.64 M 38.97,-7.500004 H 4.33 L 4.32999,52.5 m 34.64,-90.000004 h -34.64 m 1e-5,-30 -1e-5,45 h -34.639998 m 0,-45 H 38.96999 V 52.5 h -69.279998 z" />
+      </g> -->
+
       <g id="building4" class="building">
         <rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309992" y="-52.499996" />
         <path id="building4-outer-wall" class="outer-wall"
diff --git a/src/radial.js b/src/radial.js
index 9978b14..3e89f23 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -340,7 +340,32 @@ let mapsheet10 = {
       type: 'building2',
       grid: buildingHexes.bld2,
       position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })
-    }
+    },
+    {
+      type: 'building3',
+      grid: new Map(buildingHexes.bld3),
+      position: ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 })
+    },
+    {
+      type: 'building4',
+      grid: generateRadialCoords(
+        new Map(),
+        { q: 0, r: 0, s: 0 },
+        { left: 2, top: 4, right: 3, bottom: 5 },
+        'right'
+      ),
+      position: ({ q, r, s }) => ({
+        q: q + 15,
+        r: r - 7,
+        s: s - 8,
+        transform: (x, y) => `translate(${x + horzSpacing}, ${y})`
+      })
+    },
+    {
+      type: 'building6',
+      grid: new Map(buildingHexes.bld6),
+      position: rotate180({ q: -13, r: 7, s: 6 })
+    },
   ]
 };
 
@@ -398,17 +423,17 @@ let mapsheet30 = {
     {
       type: 'building2',
       grid: new Map(buildingHexes.bld2),
-      position: reflectR({ q: 9, r: -6, s: -3 })
+      position: rotate180({ q: 9, r: -6, s: -3 })
     },
     {
       type: 'building3',
       grid: new Map(buildingHexes.bld3),
-      position: reflectR({ q: 17, r: -7, s: -10 })
+      position: rotate180({ q: 17, r: -7, s: -10 })
     },
     {
       type: 'building4',
       grid: new Map(buildingHexes.bld4),
-      position: reflectR({ q: -10, r: -5, s: 15 })
+      position: rotate180({ q: -10, r: -5, s: 15 })
     },
     {
       type: 'building5',
@@ -418,7 +443,7 @@ let mapsheet30 = {
     {
       type: 'building6',
       grid: new Map(buildingHexes.bld6),
-      position: reflectR({ q: 0, r: 6, s: -6 })
+      position: rotate180({ q: 0, r: 6, s: -6 })
     },
     {
       type: 'building7',
@@ -428,13 +453,13 @@ let mapsheet30 = {
   ]
 };
 
-function reflectR(coords) {
+function rotate180(coords) {
   return function ({ q, r, s }) {
     return {
       q: -q + coords.q,
       r: -r + coords.r,
       s: -s + coords.s,
-      transform: "rotate(180)"
+      transform: (x, y) => `rotate(180 ${x}, ${y}) translate(${x}, ${y})`
     };
   };
 }
@@ -487,20 +512,11 @@ 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 transform = origin.transform || ((x, y) => `translate(${x}, ${y})`);
     const buildingStructure = document.createElementNS(xmlns, 'g');
     buildingStructure.classList.add('structure');
-
-    if (origin.transform) {
-      buildingStructure.setAttributeNS(null, 'transform', `rotate(180 ${x}, ${y}) translate(${x}, ${y})`);
-    } else {
-      buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y})`);
-    }
-
+    buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
     buildingContainer.appendChild(buildingStructure);
 
     for (let child of buildingTemplate.children) {
@@ -582,8 +598,8 @@ let sheets = [];
 // 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);
+// drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: -9, r: -6, s: 15 })), true);
+// drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: 0, r: 0, s: 0 })), true);
 
 const buildingTemplate = document.querySelector(`defs #building4`);
 const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 });
@@ -602,9 +618,9 @@ for (let child of buildingTemplate.children) {
 }
 
 
-sheets = [[mapsheet20], [mapsheet30]];
-// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]];
-// const sheets = [[mapsheet30]];
+// sheets = [[mapsheet20], [mapsheet30]];
+// sheets = [[mapsheet20], [mapsheet10], [mapsheet30]];
+sheets = [[mapsheet10]];
 
 // const sheets = [
 //   [mapsheet2, mapsheet1],
@@ -621,7 +637,6 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
       return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar);
     }
 
-    console.log(horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
     ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
   })
 });