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

WIP: split hexes and building structure into different layers

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2024-07-01 16:30:15 -07:00
parent e199c0d75a
commit ce6cd0be50
7 changed files with 74 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.js
View File

@@ -210,7 +210,7 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
document.querySelectorAll('[name="select-elevation"]').forEach(el => {
el.addEventListener('change', function (e) {
document.querySelector('object').contentDocument.querySelector('.grid').dataset.viewElevation = this.value;
document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value;
});
});

53
src/modules/gameboard.js
View File

@@ -23,7 +23,6 @@ function getCellOccupant(cell) {
}
function getCells(svg) {
// return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]');
return svg.querySelectorAll('[data-q][data-r][data-s][data-t]');
}
@@ -86,35 +85,49 @@ function clearSightLine() {
Observable.notify('distance');
}
function updateSightLine(cell) {
const CURRENT_ELEVATION_LEVEL = 0;
const { q: sq, r: sr, s: ss } = cell.dataset;
const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
function getSightLineHexes(source, target) {
const { q: sq, r: sr, s: ss } = source.dataset;
const { q: tq, r: tr, s: ts } = target.dataset;
const sourceIndex = { q: +sq, r: +sr, s: +ss };
const targetIndex = { q: +tq, r: +tr, s: +ts };
const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
.map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
const selector = sightLine
.calcIndexes(sourceIndex, targetIndex)
.map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"] use[href="#hex"]`)
.join(', ');
const hexes = svg.querySelectorAll(selector);
return svg.querySelectorAll(selector);
}
function updateSightLine(cell) {
// const CURRENT_ELEVATION_LEVEL = 0;
// const { q: sq, r: sr, s: ss } = cell.dataset;
// const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
// const sourceIndex = { q: +sq, r: +sr, s: +ss };
// const targetIndex = { q: +tq, r: +tr, s: +ts };
// const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
// .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
// .join(', ');
const hexes = getSightLineHexes(cell, sightLine.getLockTarget());
sightLine.setHexes(hexes);
sightLine.update(getCellPosition(cell));
Observable.notify('distance', hexes.length - 1);
}
function drawSightLine(sourceCell, targetCell) {
const CURRENT_ELEVATION_LEVEL = 0;
const { q: sq, r: sr, s: ss } = sourceCell.dataset;
const { q: tq, r: tr, s: ts } = targetCell.dataset;
const sourceIndex = { q: +sq, r: +sr, s: +ss };
const targetIndex = { q: +tq, r: +tr, s: +ts };
// const CURRENT_ELEVATION_LEVEL = 0;
// const { q: sq, r: sr, s: ss } = sourceCell.dataset;
// const { q: tq, r: tr, s: ts } = targetCell.dataset;
// const sourceIndex = { q: +sq, r: +sr, s: +ss };
// const targetIndex = { q: +tq, r: +tr, s: +ts };
const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
.map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
.join(', ');
// const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
// .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
// .join(', ');
const hexes = svg.querySelectorAll(selector);
const hexes = getSightLineHexes(sourceCell, targetCell);
sightLine.setHexes(hexes);
const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
svg.querySelector('.gameboard').appendChild(line);
@@ -175,7 +188,6 @@ function selectOffBoard() {
}
function select(data) {
console.log('select', data);
const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
const isSelected = counter?.classList.contains(soldier.getSelectedClass());
@@ -223,7 +235,6 @@ export function start(el) {
placing.push(toPlace);
getLockedSightLine(svg) ? updateSightLine(toPlace.parentElement) : drawSightLine(toPlace.parentElement, cell);
} else {
// deselect();
Observable.notify('select');
}
} else if (!occupant.classList.contains('clone')) {
@@ -242,7 +253,7 @@ export function start(el) {
} else if (!toPlace && occupant) {
Observable.notify('select', occupant);
} else {
console.log('removing cell contents');
console.log('removing cell contents', cell);
getCellContents(cell).forEach(el => el.remove());
}
@@ -331,7 +342,7 @@ export function toggleFiringArcVisibility() {
export function setFiringArc() {
const counter = getSelected(),
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q');
if (isOnBoard(counter)) {
firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));

40
src/radial.js
View File

@@ -414,9 +414,12 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps });
const transform = origin.transform || ((x, y) => `translate(${x}, ${y})`);
const buildingStructure = document.createElementNS(xmlns, 'g');
buildingStructure.classList.add('structure');
buildingStructure.classList.add('building');
buildingStructure.classList.add(building.type);
buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
buildingContainer.appendChild(buildingStructure);
const [mapsheet] = container.classList;
document.querySelector(`.buildings .${mapsheet}`).appendChild(buildingStructure);
building.elevationLevels.forEach(elevationLevel => {
const hexContainer = document.createElementNS(xmlns, 'g');
@@ -468,9 +471,13 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
function drawMapsheet(gameboard, mapsheet, position) {
const container = document.createElementNS(xmlns, 'g');
container.id = mapsheet.id;
container.classList.add(mapsheet.id);
gameboard.appendChild(container);
const buildingContainer = document.createElementNS(xmlns, 'g');
buildingContainer.classList.add(mapsheet.id);
document.querySelector('.buildings').appendChild(buildingContainer);
const gridContainer = document.createElementNS(xmlns, 'g');
gridContainer.classList.add('elevation-0');
@@ -498,7 +505,6 @@ function drawMapsheet(gameboard, mapsheet, position) {
container.appendChild(gridContainer);
return new Map([...grid, ...buildingHexes]);
// return { id, grid, buildings };
}
const horzMapVect = function(coords) {
@@ -558,27 +564,22 @@ let sheets = [];
// sheets = [[mapsheet1]];
// sheets = [[mapsheet2]];
// sheets = [[mapsheet2, mapsheet3]];
sheets = [[mapsheet2], [mapsheet3]];
// sheets = [[mapsheet2], [mapsheet1], [mapsheet3]];
// drawMapsheet(grid, mapsheet2, vectorAdd({ q: 0, r: 0, s: 0 }, { q: 1, r: -2, s: 1 }, 6));
sheets = [
[mapsheet2, mapsheet1],
[mapsheet3, mapsheet4]
];
// sheets = [
// [mapsheet2, mapsheet1],
// [mapsheet3, mapsheet4]
// ];
// drawBuildings([{
// type: 'building2',
// elevationLevels: range(-1, 2),
// grid: new Map(buildingHexes.bld2),
// position: coords => coords
// }], gameboard, { q: 0, r: 0, s: 0 });
// const map1building2furniture = document.querySelector('defs .mapsheet2 .building2 .furniture');
// document.querySelector('.gameboard .building2 .structure').appendChild(map1building2furniture);
// console.log(mapsheet2);
// }], grid, { q: 0, r: 0, s: 0 });
let finalGrid = new Map();
@@ -593,18 +594,10 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
}
ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
// console.log(ms);
finalGrid = new Map([...finalGrid, ...ms]);
})
});
const origin = document.querySelector('[transform="translate(0, 0)"]');
// console.log(origin);
// console.log([...finalGrid.entries()].find(([k, v]) => v === origin));
console.log(finalGrid.get('0,0,0,0'));
const circle = document.createElementNS(xmlns, 'circle');
circle.setAttributeNS(null, 'r', 5);
circle.setAttributeNS(null, 'fill', 'green');
@@ -627,4 +620,3 @@ function addGroup(container, className) {
container.appendChild(g);
return g;
}