From c4047b56d7b75d8b7ba8b884d8ec6b2660036e12 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 2 Jul 2024 20:57:41 -0700
Subject: Render roofs below current elevation level in different color
---
src/radial.js | 65 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 file changed, 47 insertions(+), 18 deletions(-)
(limited to 'src')
diff --git a/src/radial.js b/src/radial.js
index ef65e02..046b608 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -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);
}
--
cgit v1.2.3