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

WIP: render radial coord hexes/maps

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:32 -07:00
parent 8dd62a5459
commit fdb3840564
13 changed files with 113 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/index.js
View File

@@ -18,7 +18,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'),
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
fileName = localStorage.getItem('map') || 'scenario-side_show',
// fileName = localStorage.getItem('map') || 'scenario-side_show',
fileName = localStorage.getItem('map') || 'radial',
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
fileInputEl = document.querySelector('input[type="file"]'),
dice = document.querySelectorAll('.die'),
@@ -64,6 +65,7 @@ async function buildScenario(req) {
panzoom.start(svg);
gameboard.start(svg);
recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
}
@@ -206,6 +208,14 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
});
});
// document.querySelectorAll('[name="select-elevation"]').forEach(el => {
// const gameboard = document.querySelector('.gameboard');
// el.addEventListener('change', function (e) {
// gameboard.dataset.viewElevation = this.value
// });
// });
contentVisToggleEl.addEventListener('input', toggleContentVis);
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();

8
src/modules/record_sheet.js
View File

@@ -180,11 +180,11 @@ export function start(startLoc, units) {
for (const affiliation in forces) {
const container = document.querySelector(`#${affiliation}-record`);
const records = container.querySelector('.records');
const name = startLoc?.dataset[`${affiliation}Name`];
// const name = startLoc?.dataset[`${affiliation}Name`];
if (name) {
container.querySelector('.name').textContent = name;
}
// if (name) {
// container.querySelector('.name').textContent = name;
// }
forces[affiliation].forEach(r => records.appendChild(r));
}

15
src/modules/scenario.js
View File

@@ -1,4 +1,4 @@
async function loadScript(scenario, svg) {
async function loadScript(scenario, svg, script) {
return new Promise((resolve, reject) => {
const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
@@ -11,14 +11,15 @@ async function loadScript(scenario, svg) {
reject(Error('Script failed to load.'));
};
const dataset = scenario.querySelector('script').dataset;
const dataset = scenario.querySelector('script')?.dataset || {};
if ('cols' in dataset && 'rows' in dataset) {
scriptEl.dataset.rows = dataset.rows;
scriptEl.dataset.cols = dataset.cols;
}
scriptEl.setAttributeNS(null, 'href', '../../map.js');
// scriptEl.setAttributeNS(null, 'href', '../../map.js');
scriptEl.setAttributeNS(null, 'href', `../../${script}.js`);
svg.append(scriptEl);
});
}
@@ -46,6 +47,7 @@ export async function requestResource(url) {
}
export async function build(svg, request) {
const defs = svg.querySelector('defs');
const gb = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid');
@@ -67,8 +69,6 @@ export async function build(svg, request) {
await Promise.all(
Object.keys(refs).map(filename => requestResource(`assets/images/${filename}`))
).then(result => {
const defs = svg.querySelector('defs');
Object.keys(refs).forEach((filename, index) => {
const external = result[index];
@@ -98,5 +98,8 @@ export async function build(svg, request) {
grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true));
}
return loadScript(scenario, svg);
defs.replaceWith(scenario.querySelector('defs'));
await loadScript(scenario, svg, 'radial')
return loadScript(scenario, svg, 'map');
}

123
src/radial.js
View File

@@ -1,7 +1,7 @@
if (window.IS_DEV) {
const source = new EventSource('/esbuild');
source.addEventListener('change', () => location.reload());
}
// if (window.IS_DEV) {
// const source = new EventSource('/esbuild');
// source.addEventListener('change', () => location.reload());
// }
const xmlns = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
@@ -94,7 +94,7 @@ function drawHexes(el, list, renderText = false) {
use.setAttributeNS(null, 'href', '#hex');
cell.appendChild(use);
if (renderText) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt));
if (false) addHexText(q, r, s, t).forEach(txt => cell.appendChild(txt));
list.set(key, cell);
el.appendChild(cell);
@@ -154,62 +154,6 @@ function translateCoords(map, translator) {
return translated;
}
document.querySelectorAll('[name="select-elevation"]').forEach(el => {
const gameboard = document.querySelector('.gameboard');
el.addEventListener('change', function (e) {
gameboard.dataset.viewElevation = this.value
});
});
// function placeBuilding(buildingSelector, mapsheetSelector) {
// const building = svg.querySelector(buildingSelector);
// const bld2grid = document.createElementNS(xmlns, 'g');
// const bld2origin = { q: 0, r: 0, s: 0 };
// const bld2map2 = svg.querySelector(`${mapsheetSelector} ${buildingSelector}`);
// const [q, r, s] = bld2map2.dataset.placement.split(',').map(n => +n);
// const map2bld2place = { q, r, s };
// bld2hexes = building.querySelector('[data-grid-footprint]').dataset.gridFootprint.split(':').map(coords => {
// const [q, r, s] = coords.split(',').map(n => +n);
// const { q: tq, r: tr, s: ts } = translateRadialCoords({ q, r, s }, map2bld2place);
// return [toKey({ q: tq, r: tr, s: ts }), null];
// });
// const bld2screenCoords = radialToScreenCoords(translateRadialCoords(bld2origin, map2bld2place));
// const bld2structure = document.createElementNS(xmlns, 'g');
// bld2structure.setAttributeNS(null, 'transform', `translate(${bld2screenCoords.x}, ${bld2screenCoords.y})`)
// building.querySelectorAll('[data-grid-footprint] > *').forEach(el => {
// const use = document.createElementNS(xmlns, 'use');
// use.setAttributeNS(null, 'href', `#${el.id}`);
// el.classList.forEach(className => use.classList.add(className));
// bld2structure.appendChild(use);
// });
// drawHexes(bld2grid, new Map(bld2hexes), true);
// const bld2elvBasement = bld2grid.cloneNode(true);
// bld2elvBasement.classList.add('elevation-basement');
// bld2map2.appendChild(bld2elvBasement);
// const bld2elv1 = bld2grid.cloneNode(true);
// bld2elv1.classList.add('elevation-0');
// bld2map2.appendChild(bld2elv1);
// const bld2elv2 = bld2grid.cloneNode(true);
// bld2elv2.classList.add('elevation-1');
// bld2map2.appendChild(bld2elv2);
// const bld2elvRoof = bld2grid.cloneNode(true);
// bld2elvRoof.classList.add('elevation-roof');
// bld2map2.appendChild(bld2elvRoof);
// bld2map2.appendChild(bld2structure);
// }
const buildingHexes = {};
buildingHexes.bld1 = generateRadialCoords(
@@ -269,62 +213,9 @@ buildingHexes.bld8 = [
[{ q: -7, r: 4, s: 3 }, { left: 1, top: 1, right: 1, bottom: 1 }]
].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map());
const mapsheet1BuildingCoords = [
translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })),
translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: -s + 14, r: -r - 6, s: -q - 8 })),
translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 })),
translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: -s - 12, r: -r + 7, s: -q + 5 })),
generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 4, top: 5, right: 3, bottom: 5 }),
];
const mapsheet2BuildingCoords = [
translateCoords(buildingHexes.bld1, ({ q, r, s }) => ({ q: q, r: r + 7, s: s - 7 })),
translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })),
translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: q - 14, r: r + 5, s: s + 9 })),
translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: q - 8, r: r + 6, s: s + 2 })),
translateCoords(buildingHexes.bld5, ({ q, r, s }) => ({ q: q + 13, r: r - 6, s: s - 7 })),
translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: q + 7, r: r - 6, s: s - 1 })),
translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 6, r: r - 5, s: s + 11 })),
];
const mapsheet3BuildingCoords = [
translateCoords(buildingHexes.bld1, ({ q, r, s }) => ({ q: q - 2, r: r - 5, s: s + 7 })),
translateCoords(buildingHexes.bld2, ({ q, r, s }) => ({ q: -s + 9, r: -r - 6, s: -q - 3 })),
translateCoords(buildingHexes.bld3, ({ q, r, s }) => ({ q: -s + 17, r: -r - 7, s: -q - 10 })),
translateCoords(buildingHexes.bld4, ({ q, r, s }) => ({ q: q - 9, r: r - 6, s: s + 15 })),
translateCoords(buildingHexes.bld5, ({ q, r, s }) => ({ q: q + 6, r: r + 8, s: s - 14 })),
translateCoords(buildingHexes.bld6, ({ q, r, s }) => ({ q: -s + 1, r: -r + 6, s: -q - 7 })),
translateCoords(buildingHexes.bld7, ({ q, r, s }) => ({ q: q - 12, r: r + 8, s: s + 4 })),
]
const mapsheet4BuildingCoords = [
translateCoords(buildingHexes.bld8, ({ q, r, s }) => ({ q: q + 1, r: r + 1, s: s - 2 })),
]
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);
const mapsheet3hexCoords = new Map(mapsheetHexCoords);
const mapsheet4hexCoords = new Map(mapsheetHexCoords);
mapsheet1BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet1hexCoords.delete(coords);
});
mapsheet2BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet2hexCoords.delete(coords);
});
mapsheet3BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet3hexCoords.delete(coords);
});
mapsheet4BuildingCoords.forEach(building => {
for ([coords, v] of building) mapsheet4hexCoords.delete(coords);
});
const gameboard = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid');
const mapsheet1 = {
id: 'mapsheet1',
@@ -666,7 +557,7 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar);
}
ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
})
});