Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/radial.js100
1 files changed, 82 insertions, 18 deletions
diff --git a/src/radial.js b/src/radial.js
index c0fbdd6..bf02933 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -129,9 +129,9 @@ function generateRadialCoords(l, { q, r, s, t = 0 } = {}, { left, top, right, bo
if ([
!list.has(w),
- wr < bottom + r && wr > -top + r,
- wq > -dRight + q - dr && wq < dLeft + q + dr,
- ws > -dLeft + s - dr && ws < dRight + s + dr,
+ wr <= bottom + r && wr >= -top + r,
+ Math.floor((wq - q - ws + s) / 2) <= dLeft,
+ Math.floor((ws - s - wq + q) / 2) <= dRight,
].every(v => v)) {
list.set(w, dr);
queue.push(w);
@@ -594,14 +594,60 @@ const mapsheets = [mapsheet1, mapsheet2, mapsheet3, mapsheet4].reduce((acc, ms)
let sheets = [];
-const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]');
+const msGrps = [...document.querySelectorAll('.grid .mapsheets > *')].map(g => [...g.querySelectorAll('[class^="mapsheet"]')]);
+
+sheets = msGrps.map(msG => {
+ return msG.map(mapsheetEl => {
+ const mapsheetDef = document.querySelector(`defs #${mapsheetEl.getAttributeNS(null, 'class')}`);
+ const buildings = mapsheetDef.querySelectorAll('[class^="building"]');
+
+ const mapsheet = {
+ id: mapsheetDef.id,
+ grid: generateRadialCoords(
+ new Map(),
+ { q: 0, r: 0, s: 0 },
+ 'left' in mapsheetDef.dataset ? toRect(mapsheetDef.dataset) : { left: 17, top: 13, right: 17, bottom: 14 },
+ 'left'
+ ),
+ buildings: [...buildings].map(bld => {
+ const bldId = bld.getAttributeNS(null, 'class');
+ const bldDef = document.querySelector(`defs #${bldId}`);
+
+ return {
+ type: bld.getAttributeNS(null, 'class'),
+ elevationLevels: range(0, 1),
+ grid: generateRadialCoords(
+ new Map(),
+ { q: 0, r: 0, s: 0 },
+ toRect(bldDef.dataset),
+ 'left'
+ ),
+ position: ({ q, r, s }) => {
+ const { q: dq, r: dr, s: ds } = toRad(bld.dataset);
+ return { q: q + +dq, r: r + +dr, s: s + +ds };
+ }
+ }
+ })
+ }
-sheets = [...scenarioMapsheets].map(m => {
- const [mapName] = m.classList;
- return [mapsheets[mapName]];
+ return mapsheet;
+ });
});
-scenarioMapsheets.forEach(el => el.remove());
+sheets = []
+
+const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]');
+
+// sheets = [...scenarioMapsheets].reduce((acc, m) => {
+// const [mapName] = m.classList;
+// if (mapsheets[mapName]) {
+// acc.push([mapsheets[mapName]]);
+// m.remove();
+// }
+// return acc;
+// }, []);
+
+//scenarioMapsheets.forEach(el => el.remove());
document.querySelectorAll('use[href^="#building"]').forEach(el => el.remove());
// sheets = [[mapsheet1]];
@@ -647,15 +693,33 @@ function addGroup(container, className) {
return g;
}
-const { left, right, top, bottom } = document.currentScript.dataset;
-
-if (left && right && top && bottom) {
- const map = generateRadialCoords(
- new Map(),
- { q: 0, r: 0, s: 0 },
- { left: +left, top: +top, right: +right, bottom: +bottom },
- 'both'
- );
+// const { left, right, top, bottom } = document.currentScript.dataset;
+//
+// if (left && right && top && bottom) {
+// const map = generateRadialCoords(
+// new Map(),
+// { q: 0, r: 0, s: 0 },
+// { left: +left, top: +top, right: +right, bottom: +bottom },
+// 'both'
+// );
+//
+// drawHexes(addGroup(grid, 'elevation-0'), map);
+// }
+
+function toRect({ left, right, top, bottom }) {
+ return { left: +left, right: +right, top: +top, bottom: +bottom };
+}
- drawHexes(addGroup(grid, 'elevation-0'), map);
+function toRad({ q, r, s }) {
+ return { q: +q, r: +r, s: +s };
}
+
+const mapsheetEls = document.querySelectorAll('.grid .mapsheet');
+
+drawHexes(addGroup(grid, 'elevation-0'), translateCoords(generateRadialCoords(
+ new Map(),
+ { q: 5, r: -4, s: -1 },
+ { left: 2, top: 4, right: 3, bottom: 5 }
+ , 'both'
+), ({ q, r, s }) => ({ q, r, s })), true);
+// ), ({ q, r, s }) => ({ q: -r, r: -s, s: -q })), true);