index : btroops | |
Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
aboutsummaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/assets/css/map.css | 8 | ||||
-rw-r--r-- | public/assets/css/radial.css | 5 | ||||
-rw-r--r-- | public/assets/css/style.css | 36 | ||||
-rw-r--r-- | public/assets/images/counters-test.svg | 31 | ||||
-rw-r--r-- | public/assets/images/counters.svg | 2 | ||||
-rw-r--r-- | public/assets/images/radial.svg (renamed from public/radial.html) | 64 | ||||
-rw-r--r-- | public/assets/images/scenario_template.svg | 3 | ||||
-rw-r--r-- | public/index.html | 19 |
8 files changed, 81 insertions, 87 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css index 3d532ed..207c8e6 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -15,7 +15,7 @@ text { } use[href="#hex"] { - opacity: 0; + opacity: 0.5; fill: transparent; fill-opacity: 0.5; stroke-width: 0.5px; @@ -60,6 +60,10 @@ g.weapon-symbol :not(use[href="#counter-base"]) { stroke-width: 0.5px; } +/* g.weapon-symbol { + r: 5px; +} */ + g.troop-counter-template text { fill: white; font-size: 12px; @@ -425,7 +429,7 @@ g[data-y="76"] { --i: 76; } .building .doors { stroke: white; - stroke-width: 2.25 + stroke-width: 2.25px } #test-arcs line, #test-arcs polyline { diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css index e4217b7..4ad1903 100644 --- a/public/assets/css/radial.css +++ b/public/assets/css/radial.css @@ -21,7 +21,7 @@ text { use[href="#hex"] { stroke: #666; /* fill: wheat; */ - fill: navajowhite; + /* fill: navajowhite; */ /* fill: url(#asterisk); */ } @@ -334,6 +334,3 @@ input:checked+label { fill: lightgreen; } -.furniture { - fill: violet; -} diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 5fa37f8..b5d7b8a 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -173,6 +173,10 @@ polygon.firing-arc[data-allegiance="attacker"] { fill: blue; } +.weapon-symbol polyline { + fill: none; +} + .soldier-record[data-allegiance="defender"] svg { fill: red; } @@ -191,6 +195,14 @@ polygon.firing-arc[data-allegiance="attacker"] { stroke-width: 0.5px; } +.weapon-symbol { + stroke: none; +} + +[href="#counter-base"] { + stroke: none; +} + .soldier-record svg { width: 20px; height: 20px; @@ -400,6 +412,30 @@ div#dice { animation: roll-out 0.125s linear 1; } +.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; +} + @keyframes roll-out { 0% { transform: scaleX(1); diff --git a/public/assets/images/counters-test.svg b/public/assets/images/counters-test.svg deleted file mode 100644 index b7d5cd9..0000000 --- a/public/assets/images/counters-test.svg +++ /dev/null @@ -1,31 +0,0 @@ -<?xml version="1.0" standalone="no"?> -<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg"> - <defs> - <circle id="counter-base" cx="0" cy="0" r="5"/> - - <g id="semi-auto"> - <line x1="-2" y1="1" x2="2" y2="1"/> - <line x1="-2" y1="2" x2="2" y2="2"/> - </g> - - <g id="auto"> - <line x1="-2" y1="0" x2="2" y2="0"/> - <line x1="-2" y1="1" x2="2" y2="1"/> - <line x1="-2" y1="2" x2="2" y2="2"/> - </g> - </defs> - - <g id="rifle" class="weapon-symbol"> - - </g> - - <g id="smg" class="weapon-symbol"> - </g> - - <g id="blazer" class="weapon-symbol"> - <use href="#counter-base"/> - <use href="#auto"/> - <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/> - <polyline points="-2,-3.5 0,-5 2,-3.5"/> - </g> -</svg> diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg index c0c1983..da1a6d8 100644 --- a/public/assets/images/counters.svg +++ b/public/assets/images/counters.svg @@ -1,7 +1,7 @@ <?xml version="1.0" standalone="no"?> <svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg"> <defs> - <circle id="counter-base" style="r: inherit;" cx="0" cy="0" r="5"/> + <circle id="counter-base" style="r: inherit;" cx="0" cy="0" /> <g style="r: inherit;" id="number-1"> <use style="r: inherit;" href="#counter-base"/> diff --git a/public/radial.html b/public/assets/images/radial.svg index 9e96d10..946662a 100644 --- a/public/radial.html +++ b/public/assets/images/radial.svg @@ -1,29 +1,26 @@ -<!DOCTYPE html> -<html> - -<head> - <link rel="stylesheet" href="assets/css/radial.css"> -</head> - -<body> - <!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> --> - <!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> --> +<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <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" /> - <pattern id="asterisk" viewBox="-15 -15 30 30" width="30" height="30" patternUnits="userSpaceOnUse"> - <rect x="-15" y="-15" width="30" height="30" fill="wheat" /> - <use y="-15" x="-15" href="#ast-line" /> - <use y="-15" x="15" href="#ast-line" /> - <use y="15" x="-15" href="#ast-line" /> - <use y="15" x="15" href="#ast-line" /> + <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/> + + <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> + <use href="#ast-line"/> + <use class="cw-60-deg" href="#ast-line"/> + <use class="ccw-60-deg" href="#ast-line"/> + + <use x="-8.66" y="-15" href="#ast-line"/> + <use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/> + + <use x="8.66" y="-15" href="#ast-line"/> + <use x="8.66" y="-15" transform="rotate(-60 8.66 -15)" href="#ast-line"/> - <use y="-15" x="-15" transform="rotate(60, -15, -15)" href="#ast-line" /> - <use y="15" x="15" transform="rotate(60, 15, 15)" href="#ast-line" /> - <use y="-15" x="15" transform="rotate(-60, 15, -15)" href="#ast-line" /> - <use y="15" x="-15" transform="rotate(-60, -15, 15)" href="#ast-line" /> - </pattern> + <use x="-8.66" y="15" href="#ast-line"/> + <use x="-8.66" y="15" transform="rotate(-60 -8.66 15)" href="#ast-line"/> + + <use x="8.66" y="15" href="#ast-line"/> + <use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/> + </pattern> <g id="building8" class="building"> <path id="building8-floor" class="floor" @@ -150,7 +147,7 @@ </g> <g id="terrain" class="terrain"> - <rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" id="rect3415" /> + <rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" /> <g id="terrain-trees"> <use href="#tree" transform="translate(-27,-45.25)" /> <use href="#tree" transform="translate(-40.25,-38)" /> @@ -570,25 +567,4 @@ </g> </g> </defs> - - <g class="gameboard" data-view-elevation="0"></g> </svg> - - <div class="select-elevation"> - <button>🡅</button> - <input type="radio" id="select-elevation-3" name="select-elevation" value="3" /> - <label for="select-elevation-3">3</label> - <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> - -</html> diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg index 3a6045a..6c298b7 100644 --- a/public/assets/images/scenario_template.svg +++ b/public/assets/images/scenario_template.svg @@ -1,6 +1,7 @@ <?xml version="1.0" standalone="no"?> <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> #background { stroke: #304b75; @@ -45,7 +46,7 @@ <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> </defs> - <g class="gameboard"> + <g class="gameboard" data-view-elevation="0"> <rect id="background"/> <rect id="dots" fill="url(#asterisk)"/> diff --git a/public/index.html b/public/index.html index 14410e9..4d32ce6 100644 --- a/public/index.html +++ b/public/index.html @@ -103,6 +103,21 @@ <input type="checkbox" data-allegiance="attacker"/> </div> + <div class="select-elevation"> + <button>🡅</button> + <input type="radio" id="select-elevation-3" name="select-elevation" value="3" /> + <label for="select-elevation-3">3</label> + <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> + <div id="dice"> <button type="button" id="roll-dice">Roll</button> <div class="die"> @@ -227,10 +242,6 @@ <label> Load scenario: <select> - <option value="map4">Test</option> - <option value="contour-lines">Contour Lines</option> - <option value="pendle">Pendle</option> - <option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option> </select> </label> </p> |