ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rotate buildings correctly

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:31 -07:00
parent 982d171578
commit 4dbc4ee128
2 changed files with 63 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/radial.js
View File

@@ -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(addGroup(gameboard, 'part-1'), bld8, true);
// 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 sheets = [[mapsheet20], [mapsheet30]];
// const sheets = [[mapsheet2], [mapsheet10], [mapsheet3]];
// const sheets = [[mapsheet4]];
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);
}
sheets = [[mapsheet20], [mapsheet30]];
// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]];
// const sheets = [[mapsheet30]];
// const sheets = [
// [mapsheet2, mapsheet1],