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

Draw whole scenario grid

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2024-06-22 08:47:38 -07:00
parent 508c9ed10d
commit 0f4907988a
2 changed files with 310 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
public/radial.html
View File

@@ -25,44 +25,11 @@
use[href="#hex"] {
stroke: #666;
fill: wheat;
/* fill: wheat; */
fill: navajowhite;
/* fill: url(#asterisk); */
}
.elevation-basement {
fill: lightgray;
display: none;
}
.elevation-0 {
/* filter: blur(.5px); */
/* opacity: 0.5; */
display: none;
}
.elevation-0 use[href="#hex"] {
/* fill: green; */
}
.elevation-1 {
/* fill: rgb(240, 216, 172); */
display: none;
}
.elevation-1 use[href="#hex"]{
fill: lightblue;
}
.elevation-roof {
display: none;
}
.buildings .elevation-0,
.building .elevation-0 {
/* display: none; */
fill: lightgreen;
}
.building .doors {
display: inline;
fill: none;
@@ -101,12 +68,49 @@
display: none;
}
/* [class^="elevation"] {
display: none;
}
[class="elevation-0"] {
display: inline;
} */
.elevation-basement {
fill: lightgray;
display: none;
}
.elevation-0 use[href="#hex"] {
/* fill: green; */
}
.elevation-1, .elevation-2 {
display: inline;
}
.elevation-1 use[href="#hex"] {
fill: lightblue;
}
.elevation-2 use[href="#hex"] {
fill: lightpink;
}
.building .elevation-1 {
fill: lightblue;
}
.elevation-roof {
display: none;
}
.building .elevation-basement use {
fill: lightgray;
}
.building .elevation-0 use {
fill: lightgreen;
fill: white;
}
.building .elevation-1 use {
@@ -121,18 +125,59 @@
display: none;
}
.building [class^="elevation"] {
display: none;
}
[data-view-elevation="-1"] [class^="elevation"] {
display: none;
}
[data-view-elevation="-1"] .building .elevation-basement {
display: inline;
}
[data-view-elevation="0"] .elevation-0 {
display: inline;
}
[data-view-elevation="1"] > .elevation-0,
[data-view-elevation="1"] > .elevation-1 {
display: inline;
}
[data-view-elevation="1"] .building .elevation-1 {
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;
}
@@ -150,11 +195,42 @@
/* display: none; */
/* opacity: 0.2 */
}
.select-elevation {
position: fixed;
right: 0;
top: 50%;
margin-right: 10px;
background-color: #FFFFFF99;
border: 1px solid gray;
padding: 2px;
font-family: sans-serif;
font-size: 10pt;
}
.select-elevation label {
display: block;
margin: 2px 0;
text-align: center;
border: 1px solid transparent;
user-select: none;
}
.select-elevation input {
display: none;
}
input:checked + label {
border: 1px solid salmon;
border-radius: 3px;
background-color: #cdd9e9;
}
</style>
</head>
<body>
<svg viewBox="-300 -400 600 800" xmlns="http://www.w3.org/2000/svg">
<!-- <svg viewBox="-300 -400 600 800" xmlns="http://www.w3.org/2000/svg"> -->
<svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
@@ -185,8 +261,21 @@
</g>
</defs>
<g class="gameboard view-elevation-0"></g>
<g class="gameboard" data-view-elevation="0"></g>
</svg>
<div class="select-elevation">
<button>🡅</button>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label>
<button>🡇</button>
</div>
<script src="radial.js"></script>
</body>