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

Put grid cells above buildings

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent 99b399b90e
commit 8d0d95678e
3 changed files with 51 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ text {
}
use[href="#hex"] {
opacity: 0;
opacity: 0.25;
fill: transparent;
fill-opacity: 0.5;
stroke-width: 0.5px;

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

@ -68,78 +68,37 @@ use[href="#hex"] {
stroke-linecap: square;
}
.elevation-basement {
fill: lightgray;
.building [class*="elevation"] {
display: none;
}
.elevation-0 use[href="#hex"] {
/* fill: green; */
}
.elevation-1,
.elevation-2 {
[data-view-elevation="-1"] .building .elevation-basement {
display: inline;
}
.elevation-1 use[href="#hex"] {
fill: lightblue;
[data-view-elevation="0"] .building .elevation-0 {
display: inline;
}
.elevation-2 use[href="#hex"] {
fill: lightpink;
[data-view-elevation="1"] .building .elevation-1 {
display: inline;
}
.building .elevation-1 {
fill: lightblue;
[data-view-elevation="2"] .building .elevation-2 {
display: inline;
}
.elevation-roof {
display: none;
}
.building .elevation-basement use {
fill: lightgray;
}
.building .elevation-0 use {
fill: white;
}
.building .elevation-1 use {
fill: lightblue;
}
.building .elevation-2 use {
fill: lightgreen;
}
.building .elevation-3 use {
fill: lightpink;
}
.view-elevation-roof .floor {
fill: darkgray;
}
.building .elevation-1 {
display: none;
}
.building > * {
display: none;
}
[data-view-elevation="-1"] [class^="elevation"] {
display: none;
[data-view-elevation="3"] .building .elevation-3 {
display: inline;
}
/*
[data-view-elevation="-1"] .building > *,
[data-view-elevation="-1"] .building > .structure > * {
display: none;
}
} */
[data-view-elevation="-1"] .building > .elevation-basement,
/* [data-view-elevation="-1"] .building > .elevation-basement,
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure,
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
@ -147,9 +106,9 @@ use[href="#hex"] {
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
display: inline;
}
} */
[data-view-elevation="0"] .building .elevation-0,
/* [data-view-elevation="0"] .building .elevation-0,
[data-view-elevation="0"] .building .elevation-0 ~ .structure {
display: inline;
}
@ -219,12 +178,7 @@ use[href="#hex"] {
[data-view-elevation="1"] .building .elevation-1 {
display: inline;
}
.building [class*="elevation"] use {
/* fill-opacity: 0.33; */
stroke: black;
}
} */
#tree .trunk {
fill: brown;

44
src/radial.js
View File

@ -405,6 +405,15 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
let buildingGrid = translateCoords(building.grid, building.position);
buildingGrid = translateCoords(buildingGrid, ({ q, r, s }) => ({ q: q + pq, r: r + pr, s: s + ps }));
const buildingTemplate = document.querySelector(`defs #${building.type}`);
const origin = building.position({ q: 0, r: 0, s: 0 });
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.setAttributeNS(null, 'transform', transform(x, y));
buildingContainer.appendChild(buildingStructure);
building.elevationLevels.forEach(elevationLevel => {
const hexContainer = document.createElementNS(xmlns, 'g');
hexContainer.classList.add(`elevation-${elevationLevel === -1 ? 'basement' : elevationLevel}`);
@ -415,24 +424,39 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
acc = new Map([...acc, ...buildingGrid]);
});
const buildingTemplate = document.querySelector(`defs #${building.type}`);
const origin = building.position({ q: 0, r: 0, s: 0 });
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.setAttributeNS(null, 'transform', transform(x, y));
buildingContainer.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));
if (use.classList.contains('floor'))
building.elevationLevels.forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
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}`));
if (use.classList.contains('windows'))
building.elevationLevels.slice(0, -1).filter(el => el >= 0).forEach(el => use.classList.add(`elevation-${el}`));
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}`));
if (use.classList.contains('furniture'))
building.elevationLevels.slice(0, -1).forEach(el => use.classList.add(`elevation-${el === -1 ? 'basement' : el}`));
buildingStructure.appendChild(use);
}
const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`);
if (furnitureEl) buildingStructure.appendChild(furnitureEl);
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}`));
}
buildingStructure.appendChild(furnitureEl);
}
return acc;
}, new Map());