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

Fix mapsheet1 building 4 positioning

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent 4dbc4ee128
commit 577e2c28b1
2 changed files with 51 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/radial.html
View File

@ -259,8 +259,8 @@
<body> <body>
<!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> --> <!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> -->
<!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> --> <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg"> <!-- <svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg"> -->
<defs> <defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" /> <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" /> <line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
@ -299,11 +299,19 @@
<g id="building3" class="building"> <g id="building3" class="building">
<path id="building3-floor" class="floor" d="m -30.310003,52.5 v -89.999997 h 60.62001 V 52.5 Z" /> <path id="building3-floor" class="floor" d="m -30.310003,52.5 v -89.999997 h 60.62001 V 52.5 Z" />
<path id="building3-outer-wall" class="outer-wall" <path id="building3-outer-wall" class="outer-wall"
d="m 21.650012,0 h 8.659995 m -34.640005,-37.5 v 45 m 0,30 v -15 m 8.66,30.000001 V 37.500003 m -34.64,0 h 60.620005 m -60.620005,15 v -90 h 60.620005 v 90 z" /> d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" />
<path id="building3-inner-wall" class="inner-wall" <path id="building3-inner-wall" class="inner-wall"
d="m 21.650012,0 h 8.659995 m -34.640005,-37.5 v 45 m 0,30 v -15 m 8.66,30.000001 V 37.500003 m -34.64,0 h 60.620005 m -60.620005,15 v -90 h 60.620005 v 90 z" /> d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" />
</g> </g>
<!-- <g id="building4" class="building">
<rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309999" y="-67.5" />
<path id="building4-outer-wall" class="outer-wall"
d="M -30.310008,37.5 H -12.99001 M 21.65,-7.500004 l -10e-6,-30 M 38.96999,37.5 h -34.64 M 38.97,-7.500004 H 4.33 L 4.32999,52.5 m 34.64,-90.000004 h -34.64 m 1e-5,-30 -1e-5,45 h -34.639998 m 0,-45 H 38.96999 V 52.5 h -69.279998 z" />
<path id="building4-inner-wall" class="inner-wall"
d="M -30.310008,37.5 H -12.99001 M 21.65,-7.500004 l -10e-6,-30 M 38.96999,37.5 h -34.64 M 38.97,-7.500004 H 4.33 L 4.32999,52.5 m 34.64,-90.000004 h -34.64 m 1e-5,-30 -1e-5,45 h -34.639998 m 0,-45 H 38.96999 V 52.5 h -69.279998 z" />
</g> -->
<g id="building4" class="building"> <g id="building4" class="building">
<rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309992" y="-52.499996" /> <rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309992" y="-52.499996" />
<path id="building4-outer-wall" class="outer-wall" <path id="building4-outer-wall" class="outer-wall"

63
src/radial.js
View File

@ -340,7 +340,32 @@ let mapsheet10 = {
type: 'building2', type: 'building2',
grid: buildingHexes.bld2, grid: buildingHexes.bld2,
position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 }) position: ({ q, r, s }) => ({ q: q + 7, r: r + 7, s: s - 14 })
} },
{
type: 'building3',
grid: new Map(buildingHexes.bld3),
position: ({ q, r, s }) => ({ q: q - 6, r: r - 6, s: s + 12 })
},
{
type: 'building4',
grid: generateRadialCoords(
new Map(),
{ q: 0, r: 0, s: 0 },
{ left: 2, top: 4, right: 3, bottom: 5 },
'right'
),
position: ({ q, r, s }) => ({
q: q + 15,
r: r - 7,
s: s - 8,
transform: (x, y) => `translate(${x + horzSpacing}, ${y})`
})
},
{
type: 'building6',
grid: new Map(buildingHexes.bld6),
position: rotate180({ q: -13, r: 7, s: 6 })
},
] ]
}; };
@ -398,17 +423,17 @@ let mapsheet30 = {
{ {
type: 'building2', type: 'building2',
grid: new Map(buildingHexes.bld2), grid: new Map(buildingHexes.bld2),
position: reflectR({ q: 9, r: -6, s: -3 }) position: rotate180({ q: 9, r: -6, s: -3 })
}, },
{ {
type: 'building3', type: 'building3',
grid: new Map(buildingHexes.bld3), grid: new Map(buildingHexes.bld3),
position: reflectR({ q: 17, r: -7, s: -10 }) position: rotate180({ q: 17, r: -7, s: -10 })
}, },
{ {
type: 'building4', type: 'building4',
grid: new Map(buildingHexes.bld4), grid: new Map(buildingHexes.bld4),
position: reflectR({ q: -10, r: -5, s: 15 }) position: rotate180({ q: -10, r: -5, s: 15 })
}, },
{ {
type: 'building5', type: 'building5',
@ -418,7 +443,7 @@ let mapsheet30 = {
{ {
type: 'building6', type: 'building6',
grid: new Map(buildingHexes.bld6), grid: new Map(buildingHexes.bld6),
position: reflectR({ q: 0, r: 6, s: -6 }) position: rotate180({ q: 0, r: 6, s: -6 })
}, },
{ {
type: 'building7', type: 'building7',
@ -428,13 +453,13 @@ let mapsheet30 = {
] ]
}; };
function reflectR(coords) { function rotate180(coords) {
return function ({ q, r, s }) { return function ({ q, r, s }) {
return { return {
q: -q + coords.q, q: -q + coords.q,
r: -r + coords.r, r: -r + coords.r,
s: -s + coords.s, s: -s + coords.s,
transform: "rotate(180)" transform: (x, y) => `rotate(180 ${x}, ${y}) translate(${x}, ${y})`
}; };
}; };
} }
@ -487,20 +512,11 @@ function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps
const buildingTemplate = document.querySelector(`defs #${building.type}`); const buildingTemplate = document.querySelector(`defs #${building.type}`);
const origin = building.position({ q: 0, r: 0, s: 0 }); 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 }); 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})`);
console.log(x, y);
const buildingStructure = document.createElementNS(xmlns, 'g'); const buildingStructure = document.createElementNS(xmlns, 'g');
buildingStructure.classList.add('structure'); buildingStructure.classList.add('structure');
buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
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); buildingContainer.appendChild(buildingStructure);
for (let child of buildingTemplate.children) { for (let child of buildingTemplate.children) {
@ -582,8 +598,8 @@ let sheets = [];
// sheets = [[mapsheet30]]; // sheets = [[mapsheet30]];
// drawHexes(gameboard, buildingHexes.bld4, true); // drawHexes(gameboard, buildingHexes.bld4, true);
// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: -9, r: -6, s: 15 })), true); // drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: -9, r: -6, s: 15 })), true);
// drawHexes(gameboard, translateCoords(buildingHexes.bld4, reflectR({ q: 0, r: 0, s: 0 })), true); // drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: 0, r: 0, s: 0 })), true);
const buildingTemplate = document.querySelector(`defs #building4`); const buildingTemplate = document.querySelector(`defs #building4`);
const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 }); const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 });
@ -602,9 +618,9 @@ for (let child of buildingTemplate.children) {
} }
sheets = [[mapsheet20], [mapsheet30]]; // sheets = [[mapsheet20], [mapsheet30]];
// const sheets = [[mapsheet20], [mapsheet10], [mapsheet30]]; // sheets = [[mapsheet20], [mapsheet10], [mapsheet30]];
// const sheets = [[mapsheet30]]; sheets = [[mapsheet10]];
// const sheets = [ // const sheets = [
// [mapsheet2, mapsheet1], // [mapsheet2, mapsheet1],
@ -621,7 +637,6 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar); return vectorAdd(coords, { q: 1, r: 0, s: -1 }, hscalar);
} }
console.log(horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 }))); ms = drawMapsheet(gameboard, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
}) })
}); });