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

Fix elevation view styles

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent 526cc26240
commit e7aebda9dc
5 changed files with 32 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ text {
}
use[href="#hex"] {
opacity: 0.5;
opacity: 0;
fill: transparent;
fill-opacity: 0.5;
stroke-width: 0.5px;
@ -392,11 +392,7 @@ g[data-y="76"] { --i: 76; }
/* fill: inherit; */
}
.building path {
fill: none;
}
.furniture {
.furniture, .stairs {
fill: rgb(104, 185, 181);
}

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

@ -67,20 +67,6 @@ use[href="#hex"] {
stroke-linecap: square;
}
.view-elevation-roof .doors,
.view-elevation-roof .inner-wall,
.view-elevation-roof .outer-wall {
display: none;
}
/* [class^="elevation"] {
display: none;
}
[class="elevation-0"] {
display: inline;
} */
.elevation-basement {
fill: lightgray;
display: none;
@ -157,7 +143,8 @@ use[href="#hex"] {
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits),
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits) {
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
display: inline;
}
@ -171,7 +158,12 @@ use[href="#hex"] {
display: inline;
}
[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'] {
[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'],
[data-view-elevation="1"] .building .elevation-1 + .structure .doors,
[data-view-elevation="1"] .building .elevation-1 + .structure .door-edges,
[data-view-elevation="1"] .building .elevation-1 + .structure .windows,
[data-view-elevation="1"] .building .elevation-1 + .structure .furniture,
[data-view-elevation="1"] .building .elevation-1 ~ .structure .exits {
display: none;
}
@ -184,7 +176,12 @@ use[href="#hex"] {
display: inline;
}
[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'] {
[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'],
[data-view-elevation="2"] .building .elevation-2 + .structure .doors,
[data-view-elevation="2"] .building .elevation-2 + .structure .door-edges,
[data-view-elevation="2"] .building .elevation-2 + .structure .windows,
[data-view-elevation="2"] .building .elevation-2 + .structure .furniture,
[data-view-elevation="2"] .building .elevation-2 ~ .structure .exits {
display: none;
}
@ -197,7 +194,12 @@ use[href="#hex"] {
display: inline;
}
[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'] {
[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'],
[data-view-elevation="3"] .building .elevation-3 + .structure .doors,
[data-view-elevation="3"] .building .elevation-3 + .structure .door-edges,
[data-view-elevation="3"] .building .elevation-3 + .structure .windows,
[data-view-elevation="3"] .building .elevation-3 + .structure .furniture,
[data-view-elevation="3"] .building .elevation-3 ~ .structure .exits {
display: none;
}
@ -218,52 +220,11 @@ use[href="#hex"] {
display: inline;
}
.view-elevation-0 .elevation-0 {
display: inline;
}
.view-elevation-1 .elevation-0 {
display: inline;
}
.view-elevation-1 .elevation-1 {
display: inline;
}
.view-elevation-1 .building .elevation-0 {
display: none;
}
.view-elevation-1 .building .elevation-1 {
/* display: none; */
}
.view-elevation-roof .elevation-roof {
display: inline;
}
.view-elevation-basement [class^="elevation"] {
display: none;
}
.view-elevation-basement .elevation-basement {
display: inline;
}
.view-elevation-basement .doors {
display: none;
}
.building [class*="elevation"] use {
/* fill-opacity: 0.33; */
stroke: black;
}
.building {
/* display: none; */
/* opacity: 0.2 */
}
#tree .trunk {
fill: brown;
}

7
public/assets/images/scenario_template.svg
View File

@ -1,5 +1,6 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="-10 -10 200 300"
xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
<style>
@ -46,7 +47,7 @@
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<g class="gameboard" data-view-elevation="0">
<g class="gameboard">
<rect id="background"/>
<rect id="dots" fill="url(#asterisk)"/>
@ -56,6 +57,6 @@
<g id="lines"/>
</g>
<g class="grid"/>
<g class="grid" data-view-elevation="0"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

12
src/index.js
View File

@ -208,13 +208,11 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
});
});
// document.querySelectorAll('[name="select-elevation"]').forEach(el => {
// const gameboard = document.querySelector('.gameboard');
// el.addEventListener('change', function (e) {
// gameboard.dataset.viewElevation = this.value
// });
// });
document.querySelectorAll('[name="select-elevation"]').forEach(el => {
el.addEventListener('change', function (e) {
document.querySelector('object').contentDocument.querySelector('.grid').dataset.viewElevation = this.value;
});
});
contentVisToggleEl.addEventListener('input', toggleContentVis);
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');

3
src/modules/scenario.js
View File

@ -3,7 +3,7 @@ async function loadScript(scenario, svg, script) {
const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script');
scriptEl.onload = () => {
console.log('map.js loaded');
console.log(`${script}.js loaded`);
resolve();
};
@ -18,7 +18,6 @@ async function loadScript(scenario, svg, script) {
scriptEl.dataset.cols = dataset.cols;
}
// scriptEl.setAttributeNS(null, 'href', '../../map.js');
scriptEl.setAttributeNS(null, 'href', `../../${script}.js`);
svg.append(scriptEl);
});