| 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 | |
| parent | e199c0d75a18b08e8c97247b384dd66a304eb97e (diff) | |
WIP: split hexes and building structure into different layers
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.js | 2 | ||||
| -rw-r--r-- | src/modules/gameboard.js | 53 | ||||
| -rw-r--r-- | src/radial.js | 40 |
3 files changed, 49 insertions, 46 deletions
diff --git a/src/index.js b/src/index.js index bc4fd8f..bb299be 100644 --- a/src/index.js +++ b/src/index.js @@ -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; }); }); 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)); diff --git a/src/radial.js b/src/radial.js index 2c261bf..ef65e02 100644 --- a/src/radial.js +++ b/src/radial.js @@ -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; } - |