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

Make stairs visible on roof levels

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-03 09:26:48 -07:00
parent c4047b56d7
commit cff0cc6dd6
5 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/assets/css/style.css
View File

@ -490,9 +490,11 @@ input#content-visibility-toggle {
}
.select-elevation input:checked+label {
border: 1px solid salmon;
border: 1px solid #666;
border-radius: 3px;
background-color: #cdd9e9;
background-color: orangered;
color: white;
font-weight: bold;
}
div#dice {

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

@ -200,8 +200,8 @@
<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" />
</g>
<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 class="building4">
@ -309,8 +309,8 @@
<use href="#cabinet" transform="translate(19.900087,16.070002)" id="use4800" />
<use href="#cabinet" transform="translate(30.31,-22.5)" id="use4801" />
<use href="#cabinet" transform="rotate(90,15.735,23.235)" id="use4802" />
<path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
</g>
<path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
</g>
<g class="building6">
@ -349,8 +349,8 @@
<use href="#cabinet" transform="translate(43.32444,-29.937889)" />
<use href="#cabinet" transform="rotate(90,56.56,4.06)" />
<use href="#cabinet" transform="rotate(90,44.975,19.975)" />
<path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
</g>
<path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
</g>
</g>
@ -384,8 +384,8 @@
<use href="#desk" transform="translate(-2.3299985,-14.999999)" />
<use href="#desk" transform="translate(8.520001,-55.500002)" />
<use href="#desk" transform="translate(-26.119999,-55.500002)" />
<path class="stairs" d="M -6.1299992,40.399998 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z" />
</g>
<path class="stairs" d="M -6.1299992,40.399998 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z m 0,-2.75 H -20.129999 v -2.3 h 13.9999998 z" />
</g>
<g class="building3">
@ -430,8 +430,8 @@
<use href="#cabinet" transform="translate(19.47,15.262772)" />
<use href="#cabinet" transform="translate(27.97,-23.75)" />
<use href="#cabinet" transform="rotate(90,15.735,23.235)" />
<path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
</g>
<path class="stairs" d="m 49.915,-22.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z m 0,3.5 h 12.75 v 3 h -12.75 z" />
</g>
<g class="building6">
@ -472,15 +472,14 @@
<use href="#cabinet" transform="translate(43.32444,-29.937889)" />
<use href="#cabinet" transform="rotate(90,56.56,4.06)" />
<use href="#cabinet" transform="rotate(90,44.975,19.975)" />
<path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
</g>
<path class="stairs" d="m 14.58,-54.75 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
</g>
</g>
<g class="mapsheet4">
<g class="building8">
<g class="furniture">
<path class="stairs" d="m 54.02,5.2499999 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
<use href="#couch" transform="translate(-77.94,-90.000001)" />
<use href="#couch" transform="translate(8.6600002,-87.000003)" />
<use href="#couch" transform="translate(25.98,-87.000003)" />
@ -518,6 +517,7 @@
<use href="#cabinet" transform="rotate(90,-4.9251985,38.609082)" />
<use href="#cabinet" transform="translate(90.183883,50.534279)" />
</g>
<path class="stairs" d="m 54.02,5.2499999 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z m 3.3,0 v -10.5 h 3 v 10.5 z" />
</g>
</g>
</defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

4
public/index.html
View File

@ -125,6 +125,10 @@
</label>
</div>
<div id="toggle-grid-vis">
<input type="checkbox" checked />
</div>
<div id="toggle-firing-arc-vis">
<input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
<label style="color: red;" for="defender-firing-arc-vis">

6
src/index.js
View File

@ -249,6 +249,12 @@ document.querySelectorAll('[name="select-elevation"]').forEach(el => {
});
});
document.querySelector('#toggle-grid-vis input').addEventListener('change', function () {
const svg = document.querySelector('object').contentDocument.querySelector('svg');
svg.querySelector('.grid').style.display = this.checked ? 'inline' : 'none';
svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';
});
contentVisToggleEl.addEventListener('input', toggleContentVis);
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis();

18
src/radial.js
View File

@ -413,7 +413,7 @@ function addElevationClass(element) {
return el => element.classList.add(elevationClass(el));
}
function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture) {
function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, features) {
return buildings.reduce((acc, building) => {
const buildingContainer = document.createElementNS(xmlns, 'g');
buildingContainer.classList.add(`building`);
@ -465,17 +465,19 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
if ((use.classList.contains('doors') || use.classList.contains('door-edges')) && !use.classList.contains('exits'))
building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
if (use.classList.contains('furniture'))
building.elevationLevels.slice(0, -1).forEach(addElevationClass(use));
buildingStructure.appendChild(use);
}
const furnitureEl = furniture && furniture.querySelector(`.${building.type} .furniture`);
const featuresEl = features && features.querySelector(`.${building.type}`);
if (furnitureEl) {
building.elevationLevels.slice(0, -1).forEach(addElevationClass(furnitureEl));
buildingStructure.appendChild(furnitureEl);
for (let child of [...featuresEl.children]) {
if (child.classList.contains('furniture'))
building.elevationLevels.slice(0, -1).forEach(addElevationClass(child));
if (child.classList.contains('stairs'))
building.elevationLevels.forEach(addElevationClass(child));
buildingStructure.appendChild(child);
}
return acc;