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

Render roofs below current elevation level in different color

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent 771ef40a26
commit d93502a407
4 changed files with 82 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/css/map.css
View File

@ -393,7 +393,7 @@ g[data-y="76"] { --i: 76; }
}
.floor {
fill: white;
/* fill: white; */
/* fill: inherit; */
}

39
public/assets/css/radial.css
View File

@ -37,7 +37,7 @@ use[href="#hex"] {
.terrain .floor {
display: inline;
opacity: 1;
fill: #ffffff;
/* fill: #ffffff; */
/* fill-opacity: 0.5; */
/* fill: url(#asterisk); */
stroke: none;
@ -63,6 +63,11 @@ use[href="#hex"] {
display: none;
}
.building use.floor {
fill: gray;
display: inline;
}
[data-view-elevation="-1"] [class*="elevation"] {
display: none;
}
@ -79,21 +84,43 @@ use[href="#hex"] {
display: inline;
}
[data-view-elevation="-1"] .building use.floor {
display: none;
}
[data-view-elevation="-1"] .building use.floor.elevation-basement {
fill: white;
display: inline;
}
[data-view-elevation="0"] .building use.floor.elevation-0 {
fill: white;
}
[data-view-elevation="1"] .building .elevation-1 {
display: inline;
}
[data-view-elevation="2"] .building .elevation-2,
[data-view-elevation="2"] .building .elevation-1:last-child {
[data-view-elevation="1"] .building use.floor.elevation-1 {
fill: white;
}
[data-view-elevation="2"] .building .elevation-2 {
display: inline;
}
[data-view-elevation="3"] .building .elevation-3,
[data-view-elevation="3"] .building .elevation-1:last-child,
[data-view-elevation="3"] .building .elevation-2:last-child {
[data-view-elevation="2"] .building use.floor.elevation-2 {
fill: white;
}
[data-view-elevation="3"] .building .elevation-3 {
display: inline;
}
[data-view-elevation="3"] .building use.floor.elevation-3 {
fill: white;
}
#tree .trunk {
fill: brown;
}

2
public/assets/images/radial.svg
View File

@ -200,7 +200,7 @@
<use href="#cabinet" transform="rotate(90,24.325,-0.675)" id="use4673" />
<use href="#cabinet" transform="rotate(90,-36.295758,12.229118)" id="use4674" />
<use href="#desk" transform="rotate(90,11.175,4.175)" id="use4675" />
<path class="stairs" d="m -28.65,-23.55 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z" id="path4675" />
<path class="stairs" d="m -28.65,-23.55 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z m 0,2.75 h 14 v 2.3 h -14 z" />
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

65
src/radial.js
View File

@ -217,7 +217,13 @@ buildingHexes.bld8 = [
[{ q: -7, r: 4, s: 3 }, { left: 1, top: 1, right: 1, bottom: 1 }]
].reduce((acc, args) => new Map([...generateRadialCoords(acc, ...args)]), new Map());
const mapsheetHexCoords = generateRadialCoords(new Map(), { q: 0, r: 0, s: 0 }, { left: 17, top: 13, right: 17, bottom: 14 }, 'left');
const mapsheetHexCoords = generateRadialCoords(
new Map(),
{ q: 0, r: 0, s: 0 },
{ left: 17, top: 13, right: 17, bottom: 14 },
'left'
);
const gameboard = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid');
@ -399,6 +405,14 @@ function rotate180(coords) {
};
}
function elevationClass(el) {
return `elevation-${el === -1 ? 'basement' : el}`;
}
function addElevationClass(element) {
return el => element.classList.add(elevationClass(el));
}
function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture) {
return buildings.reduce((acc, building) => {
const buildingContainer = document.createElementNS(xmlns, 'g');
@ -414,6 +428,7 @@ 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('building');
buildingStructure.classList.add(building.type);
buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
@ -423,7 +438,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
building.elevationLevels.forEach(elevationLevel => {
const hexContainer = document.createElementNS(xmlns, 'g');
hexContainer.classList.add(`elevation-${elevationLevel === -1 ? 'basement' : elevationLevel}`);
hexContainer.classList.add(elevationClass(elevationLevel));
buildingContainer.appendChild(hexContainer);
buildingGrid = translateCoords(buildingGrid, ({ q, r, s }) => ({ q, r, s, t: elevationLevel }));
@ -437,21 +452,21 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
child.classList.forEach(className => use.classList.add(className));
if (use.classList.contains('floor'))
building.elevationLevels.forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
building.elevationLevels.forEach(addElevationClass(use));
if (use.classList.contains('outer-wall') || use.classList.contains('inner-wall'))
building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
if (use.classList.contains('windows'))
building.elevationLevels.slice(0, -1).filter(el => el >= 0).forEach(el => use.classList.add(`elevation-${el}`));
building.elevationLevels.slice(0, -1).filter(el => el >= 0).forEach(addElevationClass(use));
if (use.classList.contains('exits')) use.classList.add(`elevation-0`);
if ((use.classList.contains('doors') || use.classList.contains('door-edges')) && !use.classList.contains('exits'))
building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
if (use.classList.contains('furniture'))
building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
buildingStructure.appendChild(use);
}
@ -459,9 +474,7 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`);
if (furnitureEl) {
for (let child of furnitureEl.children) {
(child.classList.contains('stairs') ? building.elevationLevels : building.elevationLevels.slice(0, -1)).forEach(el => child.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
}
building.elevationLevels.slice(0, -1).forEach(addElevationClass(furnitureEl));
buildingStructure.appendChild(furnitureEl);
}
@ -481,7 +494,12 @@ function drawMapsheet(gameboard, mapsheet, position) {
const gridContainer = document.createElementNS(xmlns, 'g');
gridContainer.classList.add('elevation-0');
const buildingHexes = drawBuildings(mapsheet.buildings, container, position, document.querySelector(`defs .${mapsheet.id}`));
const buildingHexes = drawBuildings(
mapsheet.buildings,
container,
position,
document.querySelector(`defs .${mapsheet.id}`)
);
const grid = translateCoords(mapsheet.grid, ({ q, r, s }) =>
({ q: q + position.q, r: r + position.r, s: s + position.s })
@ -492,9 +510,14 @@ function drawMapsheet(gameboard, mapsheet, position) {
(mapsheet.features || []).forEach(feature => {
const origin = feature.position({ q: 0, r: 0, s: 0 });
const { x, y } = radialToScreenCoords({ q: origin.q + position.q, r: origin.r + position.r, s: origin.s + position.s });
const use = document.createElementNS(xmlns, 'use');
const { x, y } = radialToScreenCoords({
q: origin.q + position.q,
r: origin.r + position.r,
s: origin.s + position.s
});
use.setAttributeNS(null, 'href', `#${feature.type}`);
use.setAttributeNS(null, 'x', x);
use.setAttributeNS(null, 'y', y);
@ -507,11 +530,11 @@ function drawMapsheet(gameboard, mapsheet, position) {
return new Map([...grid, ...buildingHexes]);
}
const horzMapVect = function(coords) {
const horzMapVect = function (coords) {
return vectorAdd(coords, { q: 1, r: 0, s: -1 }, 33);
}
const vertMapVect = function(coords) {
const vertMapVect = function (coords) {
return vectorAdd(coords, { q: 1, r: -2, s: 1 }, 13);
}
@ -522,12 +545,18 @@ function vectorAdd({ q, r, s }, { q: dq, r: dr, s: ds }, scalar) {
function findMult(arr) {
if (arr.length % 2)
return arr.map((v, index) => {
const row = v.length % 2 ? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv]) : v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
const row = v.length % 2
? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv])
: v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
return [Math.floor(index - arr.length / 2) + 1, row];
});
else
return arr.map((v, index) => {
const row = v.length % 2 ? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv]) : v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
const row = v.length % 2
? v.map((rv, rindex) => [Math.floor(rindex - v.length / 2) + 1, rv])
: v.map((rv, rindex) => [Math.floor(rindex - v.length / 2), rv]).map(([rm, rv]) => [rm > -1 ? rm + 1 : rm, rv]);
return [Math.floor(index - arr.length / 2), row];
}).map(([m, v]) => [m > -1 ? m + 1 : m, v]);
}
@ -584,12 +613,12 @@ sheets = [[mapsheet2], [mapsheet3]];
let finalGrid = new Map();
findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
const vertMapVect = function(coords) {
const vertMapVect = function (coords) {
return vectorAdd(coords, { q: 1, r: -2, s: 1 }, vscalar);
}
row.forEach(([hscalar, ms]) => {
const horzMapVect = function(coords) {
const horzMapVect = function (coords) {
return vectorAdd(coords, { q: -1, r: 0, s: 1 }, hscalar);
}