ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add elevation to map keys

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:31 -07:00
parent c8b3468abc
commit ecb2a09dfe
2 changed files with 117 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/radial.js
View File

@@ -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();
// drawHexes(document.querySelector('#mapsheet1'), mapsheet1, true);
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(addGroup(gameboard, 'elevation-0'), buildingHexes.bld2, true);
// placeBuilding('.building2', '#mapsheet2');
// drawHexes(document.querySelector('#mapsheet2 .grid'), mapsheet2, true);