| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-01 16:30:15 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-01 16:30:15 -0700 |
| commit | ce6cd0be50975f565e52454cfb37e142eac51fc9 (patch) | |
| tree | 1085acaf1b29ca82a3865c8727e57dac885ddc67 /src/modules | |
| parent | e199c0d75a18b08e8c97247b384dd66a304eb97e (diff) | |
WIP: split hexes and building structure into different layers
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/gameboard.js | 53 |
1 files changed, 32 insertions, 21 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 1cdec7b..45b2cb5 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -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)); |