Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-03 09:26:48 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-03 09:26:48 -0700
commitcff0cc6dd6e244da9c35f620585598a4e396652b (patch)
tree93d759cb21c54f31a090d0e2ec562b4bf00a27fa
parentc4047b56d7b75d8b7ba8b884d8ec6b2660036e12 (diff)
Make stairs visible on roof levels
Diffstat
-rw-r--r--public/assets/css/style.css6
-rw-r--r--public/assets/images/radial.svg14
-rw-r--r--public/index.html4
-rw-r--r--src/index.js6
-rw-r--r--src/radial.js18
5 files changed, 31 insertions, 17 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index f98baca..5960f99 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -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 {
diff --git a/public/assets/images/radial.svg b/public/assets/images/radial.svg
index 69390f9..8e9530c 100644
--- a/public/assets/images/radial.svg
+++ b/public/assets/images/radial.svg
@@ -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>
diff --git a/public/index.html b/public/index.html
index 570123e..25b0596 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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">
diff --git a/src/index.js b/src/index.js
index 24e017d..2ab35fa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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();
diff --git a/src/radial.js b/src/radial.js
index 046b608..c6e52a6 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -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}`);
+
+ 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));
- if (furnitureEl) {
- building.elevationLevels.slice(0, -1).forEach(addElevationClass(furnitureEl));
- buildingStructure.appendChild(furnitureEl);
+ buildingStructure.appendChild(child);
}
return acc;