| 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/radial.js | |
| parent | e199c0d75a18b08e8c97247b384dd66a304eb97e (diff) | |
WIP: split hexes and building structure into different layers
Diffstat (limited to 'src/radial.js')
| -rw-r--r-- | src/radial.js | 40 |
1 files changed, 16 insertions, 24 deletions
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; } - |