| 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-06-24 14:33:57 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-24 14:33:57 -0700 |
| commit | c09ed771987642314e187bec32c2d63f7814a71a (patch) | |
| tree | 2640d3a8dd56500b59359f8a03c4c5b8223b573c /src/radial.js | |
| parent | 08a1cc452dc7c3e8dbb9b15b67992087df6663fa (diff) | |
Rotate buildings correctly
Diffstat (limited to 'src/radial.js')
| -rw-r--r-- | src/radial.js | 54 |
1 files changed, 41 insertions, 13 deletions
diff --git a/src/radial.js b/src/radial.js index 5a8ae5a..9978b14 100644 --- a/src/radial.js +++ b/src/radial.js @@ -77,7 +77,7 @@ function radialToScreenCoords({ q, r, s }) { x = Math.abs(q) + Math.abs(s); x = (q > s ? -1 : 1) * x * horzSpacing; - y = r * vertSpacing; + const y = r * vertSpacing; return { x, y }; } @@ -408,7 +408,7 @@ let mapsheet30 = { { type: 'building4', grid: new Map(buildingHexes.bld4), - position: ({ q, r, s }) => ({ q: q - 9, r: r - 6, s: s + 15 }) + position: reflectR({ q: -10, r: -5, s: 15 }) }, { type: 'building5', @@ -418,7 +418,7 @@ let mapsheet30 = { { type: 'building6', grid: new Map(buildingHexes.bld6), - position: reflectR({ q: 1, r: 6, s: -7 }) + position: reflectR({ q: 0, r: 6, s: -6 }) }, { type: 'building7', @@ -431,10 +431,10 @@ let mapsheet30 = { function reflectR(coords) { return function ({ q, r, s }) { return { - q: -s + coords.q, + q: -q + coords.q, r: -r + coords.r, - s: -q + coords.s, - transform: "scale(1 -1)" + s: -s + coords.s, + transform: "rotate(180)" }; }; } @@ -487,11 +487,20 @@ function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps const buildingTemplate = document.querySelector(`defs #${building.type}`); const origin = building.position({ q: 0, r: 0, s: 0 }); + const { x: rx, y: ry } = radialToScreenCoords(origin); const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps }); + console.log(x, y); + const buildingStructure = document.createElementNS(xmlns, 'g'); buildingStructure.classList.add('structure'); - buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) ${origin.transform ? origin.transform : ''}`); + + if (origin.transform) { + buildingStructure.setAttributeNS(null, 'transform', `rotate(180 ${x}, ${y}) translate(${x}, ${y})`); + } else { + buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y})`); + } + buildingContainer.appendChild(buildingStructure); for (let child of buildingTemplate.children) { @@ -568,15 +577,34 @@ function findScalar(arr) { // mapsheet10 = drawMapsheet(gameboard, mapsheet10, { q: -1, r: 0, s: 1 }); -// const sheets = [[mapsheet10]]; +let sheets = []; -// drawHexes(gameboard, buildingHexes.bld7, true); +// sheets = [[mapsheet30]]; + +// drawHexes(gameboard, buildingHexes.bld4, true); +// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: -9, r: -6, s: 15 })), true); +// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: 0, r: 0, s: 0 })), true); + +const buildingTemplate = document.querySelector(`defs #building4`); +const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 }); + +const buildingStructure = document.createElementNS(xmlns, 'g'); +buildingStructure.classList.add('structure'); +buildingStructure.classList.add('building'); +buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) rotate(180)`); +// gameboard.appendChild(buildingStructure); + +for (let child of buildingTemplate.children) { + const use = document.createElementNS(xmlns, 'use'); + use.setAttributeNS(null, 'href', `#${child.id}`); + child.classList.forEach(className => use.classList.add(className)); + buildingStructure.appendChild(use); +} -// drawHexes(addGroup(gameboard, 'part-1'), bld8, true); -const sheets = [[mapsheet20], [mapsheet30]]; -// const sheets = [[mapsheet2], [mapsheet10], [mapsheet3]]; -// const sheets = [[mapsheet4]]; +sheets = [[mapsheet20], [mapsheet30]]; +// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]]; +// const sheets = [[mapsheet30]]; // const sheets = [ // [mapsheet2, mapsheet1], |