| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-22 08:47:38 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-22 08:47:38 -0700 |
| commit | 0f4907988aa29211e2b05a3234b0827bd4acc7fd (patch) | |
| tree | 7ec6765bdaabdb4b0a5651df56f4808b5c4bc13a /public | |
| parent | 508c9ed10dd8bc480bf40c6eb536591df62ede99 (diff) | |
Draw whole scenario grid
Diffstat (limited to 'public')
| -rw-r--r-- | public/radial.html | 165 |
1 files changed, 127 insertions, 38 deletions
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; + } </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> |