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

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));