From 0f4907988aa29211e2b05a3234b0827bd4acc7fd Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 22 Jun 2024 08:47:38 -0700 Subject: Draw whole scenario grid --- public/radial.html | 165 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 127 insertions(+), 38 deletions(-) (limited to 'public/radial.html') diff --git a/public/radial.html b/public/radial.html index 28bfa5a..eb67c94 100644 --- a/public/radial.html +++ b/public/radial.html @@ -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; + } - + + @@ -185,8 +261,21 @@ - + + + + 🡅 + + 2 + + 1 + + 0 + + -1 + 🡇 + -- cgit v1.2.3