Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-06-20 19:47:54 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-06-20 19:47:54 -0700
commit508c9ed10dd8bc480bf40c6eb536591df62ede99 (patch)
tree046e1080f61fd10235f25220742aa5227789c1eb /src
parent505fc231508000dcc07d5ad52e3795eadb8464cf (diff)
Add elevation to map keys
Diffstat (limited to 'src')
-rw-r--r--src/radial.js137
1 files changed, 95 insertions, 42 deletions
diff --git a/src/radial.js b/src/radial.js
index 42e2e34..a6ddd25 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -15,8 +15,13 @@ const horzSpacing = hex.inradius;
const vertSpacing = hex.circumradius * 3 / 2;
-function toKey({ q, r, s }) {
- return `${[q, r, s]}`;
+function toKey({ q, r, s, t = 0 } = {}) {
+ return `${[q, r, s, t]}`;
+}
+
+function fromKey(key) {
+ const split = key.split(',');
+ return { q: +split[0], r: +split[1], s: +split[2], t: +(split[3] || 1) };
}
function sameSigns(a, b) {
@@ -24,15 +29,16 @@ function sameSigns(a, b) {
}
function getNeighbors(coords) {
- const [q, r, s] = coords.split(',').map(n => +n);
+ // const [q, r, s] = coords.split(',').map(n => +n);
+ const { q, r, s, t } = fromKey(coords);
return [
- toKey({ q: q + 1, r: r, s: s - 1 }),
- toKey({ q: q - 1, r: r, s: s + 1 }),
- toKey({ q: q + 1, r: r - 1, s: s }),
- toKey({ q: q - 1, r: r + 1, s: s }),
- toKey({ q: q, r: r + 1, s: s - 1 }),
- toKey({ q: q, r: r - 1, s: s + 1 }),
+ toKey({ q: q + 1, r: r, s: s - 1, t }),
+ toKey({ q: q - 1, r: r, s: s + 1, t }),
+ toKey({ q: q + 1, r: r - 1, s: s, t }),
+ toKey({ q: q - 1, r: r + 1, s: s, t }),
+ toKey({ q: q, r: r + 1, s: s - 1, t }),
+ toKey({ q: q, r: r - 1, s: s + 1, t }),
]
}
@@ -116,7 +122,8 @@ function radialToScreenCoords({ q, r, s }) {
function drawHexes(el, list, renderText = false) {
for ([key, v] of list) {
- const [q, r, s] = key.split(',').map(n => +n);
+ // const [q, r, s] = key.split(',').map(n => +n);
+ const { q, r, s, t } = fromKey(key);
const { x, y } = radialToScreenCoords({ q, r, s });
const cell = document.createElementNS(xmlns, 'g');
@@ -126,7 +133,7 @@ function drawHexes(el, list, renderText = false) {
use.setAttributeNS(null, 'href', '#hex');
cell.appendChild(use);
- if (renderText) addHexText(q, r, s, v).forEach(txt => cell.appendChild(txt));
+ if (renderText) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt));
el.appendChild(cell);
}
@@ -140,28 +147,25 @@ function translateRadialCoords({ q, r, s }, direction, distance = 1) {
};
}
-
-function generateRadialCoords(l, { q, r, s }, { left, top, right, bottom }, offset) {
- const origin = toKey({ q, r, s });
+function generateRadialCoords(l, { q, r, s, t = 0 } = {}, { left, top, right, bottom }, offset) {
+ const origin = toKey({ q, r, s, t });
const list = new Map(l);
- list.set(origin, 0);
+ list.set(origin, t);
let queue = [origin];
while (queue.length > 0) {
const v = queue.shift();
getNeighbors(v).forEach(w => {
- const [wq, wr, ws] = w.split(',').map(n => +n);
+ // const [wq, wr, ws] = w.split(',').map(n => +n);
+ const { q: wq, r: wr, s: ws } = fromKey(w);
const rDist = Math.abs(wr - r);
const alternating = rDist % 2;
const dr = (rDist + alternating) / 2;
- let dLeft = left;
- let dRight = right;
-
- if (['left', 'both'].includes(offset)) dRight -= alternating;
- if (['right', 'both'].includes(offset)) dLeft -= alternating;
+ const dLeft = ['right', 'both'].includes(offset) ? left - alternating : left;
+ const dRight = ['left', 'both'].includes(offset) ? right - alternating : right;
if ([
!list.has(w),
@@ -182,8 +186,9 @@ function translateCoords(map, translator) {
const translated = new Map();
for ([key, val] of map) {
- const [q, r, s] = key.split(',').map(n => +n);
- translated.set(toKey(translator({ q, r, s })), val);
+ // const [q, r, s] = key.split(',').map(n => +n);
+ const { q, r, s, t } = fromKey(key);
+ translated.set(toKey(translator({ q, r, s, t })), val);
}
return translated;
@@ -223,11 +228,11 @@ function placeBuilding(buildingSelector, mapsheetSelector) {
bld2map2.appendChild(bld2elvBasement);
const bld2elv1 = bld2grid.cloneNode(true);
- bld2elv1.classList.add('elevation-1');
+ bld2elv1.classList.add('elevation-0');
bld2map2.appendChild(bld2elv1);
const bld2elv2 = bld2grid.cloneNode(true);
- bld2elv2.classList.add('elevation-2');
+ bld2elv2.classList.add('elevation-1');
bld2map2.appendChild(bld2elv2);
const bld2elvRoof = bld2grid.cloneNode(true);
@@ -284,11 +289,11 @@ function placeBuilding(buildingSelector, mapsheetSelector) {
// buildingCoords.forEach(building => drawHexes(bldElevationBasement, building));
// const bldElevation1 = document.createElementNS(xmlns, 'g');
-// bldElevation1.classList.add('elevation-1');
+// bldElevation1.classList.add('elevation-0');
// buildingCoords.forEach(building => drawHexes(bldElevation1, building));
// const bldElevation2 = document.createElementNS(xmlns, 'g');
-// bldElevation2.classList.add('elevation-2');
+// bldElevation2.classList.add('elevation-1');
// buildingCoords.forEach(building => drawHexes(bldElevation2, building));
// buildings.appendChild(bldElevationBasement);
@@ -296,13 +301,20 @@ function placeBuilding(buildingSelector, mapsheetSelector) {
// buildings.appendChild(bldElevation2);
const elevation1 = document.createElementNS(xmlns, 'g');
-elevation1.classList.add('elevation-1');
+elevation1.classList.add('elevation-0');
const elevation2 = document.createElementNS(xmlns, 'g');
-elevation2.classList.add('elevation-2');
+elevation2.classList.add('elevation-1');
const buildingHexes = {};
+buildingHexes.bld1 = generateRadialCoords(
+ new Map(),
+ { q: 0, r: 0, s: 0 },
+ { left: 3, top: 5, right: 3, bottom: 5 },
+ 'both'
+);
+
buildingHexes.bld2 = generateRadialCoords(
new Map(),
{ q: 0, r: 0, s: 0 },
@@ -324,13 +336,6 @@ buildingHexes.bld2 = generateRadialCoords(
'left'
);
-buildingHexes.bld1 = generateRadialCoords(
- new Map(),
- { q: 0, r: 0, s: 0 },
- { left: 3, top: 5, right: 3, bottom: 5 },
- 'both'
-);
-
buildingHexes.bld3 = generateRadialCoords(
new Map(),
{ q: 0, r: 0, s: 0 },
@@ -423,7 +428,7 @@ const mapsheet3BuildingCoords = [
// drawHexes(elevation2, translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 12, r: r + 8, s: s + 4 })), true);
// drawHexes(elevation1, buildingHexes.bld7, true);
-const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 });
+const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left');
const mapsheet1hexCoords = new Map(mapsheetHexCoords);
const mapsheet2hexCoords = new Map(mapsheetHexCoords);
@@ -479,7 +484,7 @@ function drawScenario1() {
const [map2elevation1, map3elevation1] = [mapsheet2container, mapsheet3container].map(el => {
const hexContainer = document.createElementNS(xmlns, 'g');
- hexContainer.classList.add('elevation-1');
+ hexContainer.classList.add('elevation-0');
el.appendChild(hexContainer);
return hexContainer;
});
@@ -499,7 +504,7 @@ function drawScenario1() {
({ q: q + 7, r: r - 14, s: s + 7 })
);
- ['elevation-1', 'elevation-2', 'elevation-basement'].forEach(elevation => {
+ ['elevation-0', 'elevation-1', 'elevation-basement'].forEach(elevation => {
const hexContainer = document.createElementNS(xmlns, 'g');
hexContainer.classList.add(elevation);
buildingContainer.appendChild(hexContainer);
@@ -518,7 +523,7 @@ function drawScenario1() {
({ q: q - 6, r: r + 12, s: s - 6 })
);
- ['elevation-1', 'elevation-2', 'elevation-basement'].forEach(elevation => {
+ ['elevation-0', 'elevation-1', 'elevation-basement'].forEach(elevation => {
const hexContainer = document.createElementNS(xmlns, 'g');
hexContainer.classList.add(elevation);
buildingContainer.appendChild(hexContainer);
@@ -530,9 +535,57 @@ function drawScenario1() {
// const gameboardGrid = svg.querySelector('.grid');
-drawScenario1();
+// drawScenario1();
+
+
+function drawMapsheets([mapsheet]) {
+ // const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left');
+
+ const container = document.createElementNS(xmlns, 'g');
+ container.id = 'mapsheet2';
+ gameboard.appendChild(container);
+
+ const [elevation1] = [container].map(el => {
+ const hexContainer = document.createElementNS(xmlns, 'g');
+ hexContainer.classList.add('elevation-0');
+ el.appendChild(hexContainer);
+ return hexContainer;
+ });
+
+ [
+ [elevation1, mapsheetHexCoords, ({ q, r, s }) => ({ q, r, s })],
+ ].forEach(([el, coords, translator]) => drawHexes(el, translateCoords(coords, translator), true));
+
+ mapsheet2BuildingCoords.forEach((buildingCoords, index) => {
+ const buildingContainer = document.createElementNS(xmlns, 'g');
+ buildingContainer.classList.add(`building`);
+ buildingContainer.classList.add(`building${index}`);
+ container.appendChild(buildingContainer);
+
+ const translatedCoords = translateCoords(buildingCoords, ({ q, r, s }) =>
+ ({ q, r, s })
+ );
+
+ [-1, 0, 1].forEach(elevationLevel => {
+ const hexContainer = document.createElementNS(xmlns, 'g');
+ hexContainer.classList.add(`elevation-${elevationLevel === -1 ? 'basement' : elevationLevel}`);
+ buildingContainer.appendChild(hexContainer);
+
+ drawHexes(hexContainer, translateCoords(translatedCoords, ({ q, r, s }) => ({ q, r, s, t: elevationLevel })), true);
+ });
+ });
+}
+
+drawMapsheets([]);
+
+function addGroup(container, className) {
+ const g = document.createElementNS(xmlns, 'g');
+ g.classList.add(className);
+ container.appendChild(g);
+ return g;
+}
-// drawHexes(document.querySelector('#mapsheet1'), mapsheet1, true);
+// drawHexes(addGroup(gameboard, 'elevation-0'), buildingHexes.bld2, true);
// placeBuilding('.building2', '#mapsheet2');
// drawHexes(document.querySelector('#mapsheet2 .grid'), mapsheet2, true);