Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-12 18:27:18 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-12 18:27:18 -0700
commit5465a0741a075de714053e7196adf8492272877c (patch)
tree149f08f0243f89263bac40a8ba84550b1652bbed /src
parent9c537765ae4feeaeccaafa306bd59c310ca26bf4 (diff)
Build scenarios from data in SVG files
Diffstat (limited to 'src')
-rw-r--r--src/radial.js88
1 files changed, 50 insertions, 38 deletions
diff --git a/src/radial.js b/src/radial.js
index bf02933..6ad04b0 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -438,7 +438,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, features)
acc = new Map([...acc, ...buildingGrid]);
});
- for (let child of buildingTemplate.children) {
+ for (let child of buildingTemplate.querySelector('.structure').children) {
const use = document.createElementNS(xmlns, 'use');
use.setAttributeNS(null, 'href', `#${child.id}`);
child.classList.forEach(className => use.classList.add(className));
@@ -559,27 +559,29 @@ function findMult(arr) {
}).map(([m, v]) => [m > -1 ? m + 1 : m, v]);
}
-function findScalar(arr) {
+function findScalar(arr, width, height) {
let pos;
let neg;
if (arr.length % 2) {
- pos = -13;
- neg = -13;
+ pos = -height;
+ neg = -height;
} else {
- pos = -7;
- neg = -6;
+ const vert = Math.floor(height / 2);
+ pos = -vert - height % 2;
+ neg = -vert;
}
return arr.map(([mult, v]) => {
let hpos, hneg;
if (v.length % 2) {
- hpos = 33;
- hneg = 33;
+ hpos = width;
+ hneg = width;
} else {
- hpos = 16;
- hneg = 17;
+ const horz = Math.floor(width / 2);
+ hpos = horz;
+ hneg = horz + width % 2;
}
const row = v.map(([hmult, hv]) => [hmult < 0 ? hmult * hneg : hmult * hpos, hv]);
@@ -594,38 +596,48 @@ const mapsheets = [mapsheet1, mapsheet2, mapsheet3, mapsheet4].reduce((acc, ms)
let sheets = [];
-const msGrps = [...document.querySelectorAll('.grid .mapsheets > *')].map(g => [...g.querySelectorAll('[class^="mapsheet"]')]);
+const mapsheetsContainer = document.querySelector('.grid .mapsheets');
+let { width, height } = mapsheetsContainer.dataset;
+width = width ? +width - 1 : 33;
+height = height ? +height : 13;
+
+const mapRect = {
+ left: width ? Math.floor(+width / 2) : 17,
+ right: width ? Math.floor(+width / 2) + +width % 2 : 17,
+ top: height ? height - 1: 13,
+ bottom: height ? height : 14
+};
+
+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 buildings = mapsheetDef.children;
+ const offset = height % 2 ? 'left' : 'right';
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'
- ),
+ grid: generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, mapRect, offset),
buildings: [...buildings].map(bld => {
const bldId = bld.getAttributeNS(null, 'class');
const bldDef = document.querySelector(`defs #${bldId}`);
+ const grid = [...bldDef.querySelectorAll('.footprint g')].reduce((acc, coordEl) => {
+ acc = generateRadialCoords(acc, toRad(coordEl.dataset), toRect(coordEl.dataset), coordEl.dataset.offset);
+ return acc;
+ }, new Map());
+
+ const { q: dq, r: dr, s: ds } = toRad(bld.dataset);
+ const position = bld.dataset.rotate ? rotate180({ q: +dq, r: +dr, s: +ds }) : ({ q, r, s }) => ({ q: q + +dq, r: r + +dr, s: s + +ds });
+
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 };
- }
+ elevationLevels: bld.dataset.el ? range(...bld.dataset.el?.split(',').map(n => +n)) : range(0, 1),
+ grid: grid,
+ position: position
}
})
}
@@ -634,7 +646,7 @@ sheets = msGrps.map(msG => {
});
});
-sheets = []
+// sheets = []
const scenarioMapsheets = document.querySelectorAll('.grid [class^="mapsheet"]');
@@ -671,7 +683,7 @@ document.querySelectorAll('use[href^="#building"]').forEach(el => el.remove());
let finalGrid = new Map();
-findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
+findScalar(findMult(sheets), +width + 1, +height).forEach(([vscalar, row]) => {
const vertMapVect = function (coords) {
return vectorAdd(coords, { q: 1, r: -2, s: 1 }, vscalar);
}
@@ -714,12 +726,12 @@ function toRad({ q, r, s }) {
return { q: +q, r: +r, s: +s };
}
-const mapsheetEls = document.querySelectorAll('.grid .mapsheet');
+// 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);
+// 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);