| 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-05-17 22:04:09 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-17 22:04:09 -0700 |
| commit | f7606768b4390bd7dcc43cbeff93aecd24b37105 (patch) | |
| tree | fca247ffa4bc75446f8b83ad1470410c370c682a | |
| parent | a6f3e2f0e04b563815db79f4d1c4f1d3ce81f423 (diff) | |
Tree grove and map 4 building
| -rw-r--r-- | public/assets/css/map.css | 2 | ||||
| -rw-r--r-- | public/assets/images/map1.svg | 22 | ||||
| -rw-r--r-- | public/assets/images/map2.svg | 45 | ||||
| -rw-r--r-- | public/assets/images/map3.svg | 49 |
4 files changed, 92 insertions, 26 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css index 6c10e2e..22431da 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -405,7 +405,7 @@ g[data-y="76"] { --i: 76; } } .building, #terrain { - /* opacity: 0.5; */ + opacity: 1; } .building .floor { diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg index 63663e0..61dd787 100644 --- a/public/assets/images/map1.svg +++ b/public/assets/images/map1.svg @@ -28,41 +28,22 @@ <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> <rect x="-8.66" y="-15" width="17.32" height="30"/> - <!-- <line x1="-5" y1="-15" x2="5" y2="-15" /> --> <use y="-15" href="#ast-line"/> - <!-- <line style="transform-origin: 0 -15px; transform: rotate(60deg)" x1="-5" y1="-15" x2="5" y2="-15" /> --> <use y="-15" style="transform-origin: 0 -15px; transform: rotate(60deg)" href="#ast-line"/> - <!-- <line style="transform-origin: 0 -15px; transform: rotate(-60deg)" x1="-5" y1="-15" x2="5" y2="-15" /> --> <use y="-15" style="transform-origin: 0 -15px; transform: rotate(-60deg)" href="#ast-line"/> - <!-- <line x1="-5" y1="15" x2="5" y2="15" /> --> <use y="15" href="#ast-line"/> - <!-- <line style="transform-origin: 0 15px; transform: rotate(60deg)" x1="-5" y1="15" x2="5" y2="15" /> --> <use y="15" style="transform-origin: 0 15px; transform: rotate(60deg)" href="#ast-line"/> - <!-- <line style="transform-origin: 0 15px; transform: rotate(-60deg)" x1="-5" y1="15" x2="5" y2="15" /> --> <use y="15" style="transform-origin: 0 15px; transform: rotate(-60deg)" href="#ast-line"/> - <!-- <line x1="3.66" y1="0" x2="10" y2="0" /> --> <use x="8.66" href="#ast-line"/> - <!-- <line style="transform-origin: 8.66px 0; transform: rotate(60deg)" x1="3.66" y1="0" x2="10" y2="0" /> --> <use x="8.66" style="transform-origin: 8.66px 0; transform: rotate(60deg)" href="#ast-line"/> - <!-- <line style="transform-origin: 8.66px 0; transform: rotate(-60deg)" x1="3.66" y1="0" x2="10" y2="0" /> --> <use x="8.66" style="transform-origin: 8.66px 0; transform: rotate(-60deg)" href="#ast-line"/> - <!-- <line x1="-10" y1="0" x2="-3.66" y2="0" /> --> <use x="-8.66" href="#ast-line"/> - <!-- <line style="transform-origin: -8.66px 0; transform: rotate(60deg)" x1="-10" y1="0" x2="-3.66" y2="0" /> --> <use x="-8.66" style="transform-origin: -8.66px 0; transform: rotate(60deg)" href="#ast-line"/> - <!-- <line style="transform-origin: -8.66px 0; transform: rotate(-60deg)" x1="-10" y1="0" x2="-3.66" y2="0" /> --> <use x="-8.66" style="transform-origin: -8.66px 0; transform: rotate(-60deg)" href="#ast-line"/> </pattern> - <g id="hex"> - <polygon points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> - <!-- <circle cx="0" cy="0" r="2"/> --> - <!-- <line x1="-1" y1="0" x2="1" y2="0" /> - <line x1="-1" y1="0" x2="1" y2="0" /> - <line x1="-1" y1="0" x2="1" y2="0" /> --> - </g> - + <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> <circle id="counter-base" cx="0" cy="0" r="5"/> <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g> @@ -484,7 +465,6 @@ <polygon id="desk" points="-26,-56 -20,-56 -20,-42 -26,-42 -27,-43 -27,-46 -29,-46 -29,-52 -27,-52 -27,-55"/> </defs> - <!-- <g id="image-maps"> <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/> <image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" /> diff --git a/public/assets/images/map2.svg b/public/assets/images/map2.svg index 5a44d17..f1a56a6 100644 --- a/public/assets/images/map2.svg +++ b/public/assets/images/map2.svg @@ -1,6 +1,6 @@ <?xml version="1.0" standalone="no"?> <svg viewBox="-150 -150 600 800" 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="http://localhost:8080/assets/css/map.css" type="text/css" /> <style> #image-maps image { transform: none; @@ -46,8 +46,49 @@ <g class="gameboard"> <g id="terrain"> <use x="251" y="524" href="#tree"/> + <use x="237.75" y="531.25" href="#tree"/> + <use x="268.5" y="523.75" href="#tree"/> + <use x="290" y="516" href="#tree"/> + <use x="302.75" y="523.75" href="#tree"/> + <use x="277.25" y="538.75" href="#tree"/> + <use x="298.5" y="546.25" href="#tree"/> + <use x="320.25" y="554" href="#tree"/> + <use x="246.75" y="561" href="#tree"/> + <use x="273" y="561.25" href="#tree"/> + <use x="255.25" y="575.75" href="#tree"/> + <use x="289.75" y="576.25" href="#tree"/> + <use x="237.75" y="590.25" href="#tree"/> + <use x="272.5" y="590.75" href="#tree"/> + <use x="307" y="590.75" href="#tree"/> + <use x="272.75" y="606" href="#tree"/> + <use x="298.5" y="605.5" href="#tree"/> + <use x="238.5" y="621.5" href="#tree"/> + <use x="264.25" y="621" href="#tree"/> + <use x="315.5" y="620.75" href="#tree"/> + <use style="transform: translate(245px, 514px) rotate(28deg)" href="#bush"/> <use style="transform: translate(243.5px, 542px) rotate(-145deg)" href="#bush"/> + <use style="transform: translate(278px, 513px) rotate(110deg)" href="#bush"/> + <use style="transform: translate(308.5px, 513.5px) rotate(-140deg)" href="#bush"/> + <use style="transform: translate(317.5px, 520.75px) rotate(110deg)" href="#bush"/> + <use style="transform: translate(324.5px, 531px) rotate(-150deg)" href="#bush"/> + <use style="transform: translate(311.5px, 543.5px) rotate(100deg)" href="#bush"/> + <use style="transform: translate(240.5px, 571.5px) rotate(-110deg)" href="#bush"/> + <use style="transform: translate(260.25px, 561px) rotate(165deg)" href="#bush"/> + <use style="transform: translate(312.5px, 562.75px) rotate(-175deg)" href="#bush"/> + <use style="transform: translate(325px, 574.5px) rotate(110deg)" href="#bush"/> + <use style="transform: translate(268.25px, 578.5px) rotate(-130deg)" href="#bush"/> + <use style="transform: translate(277.25px, 572.75px) rotate(-70deg)" href="#bush"/> + <use style="transform: translate(308.75px, 573.5px) rotate(-80deg)" href="#bush"/> + <use style="transform: translate(318.5px, 587px) rotate(120deg)" href="#bush"/> + <use style="transform: translate(234px, 605.25px) rotate(170deg)" href="#bush"/> + <use style="transform: translate(244.25px, 600.5px) rotate(145deg)" href="#bush"/> + <use style="transform: translate(255px, 605.5px) rotate(-170deg)" href="#bush"/> + <use style="transform: translate(259.5px, 592.75px) rotate(100deg)" href="#bush"/> + <use style="transform: translate(285px, 615px) rotate(0deg)" href="#bush"/> + <use style="transform: translate(295.5px, 629.25px) rotate(0deg)" href="#bush"/> + <use style="transform: translate(303px, 620px) rotate(0deg)" href="#bush"/> + <use style="transform: translate(311.5px, 605px) rotate(-70deg)" href="#bush"/> </g> <g id="firing-arcs"> <g id="shapes"/> @@ -103,5 +144,5 @@ </g> <g class="grid"/> </g> - <script data-cols="33" data-rows="77"></script> + <script data-cols="33" data-rows="77" href="http://localhost:8080/map.js"/> </svg> diff --git a/public/assets/images/map3.svg b/public/assets/images/map3.svg index 171e2c9..e7055af 100644 --- a/public/assets/images/map3.svg +++ b/public/assets/images/map3.svg @@ -1,6 +1,6 @@ <?xml version="1.0" standalone="no"?> <svg viewBox="-150 -150 600 800" 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="http://localhost:8080/assets/css/map.css" type="text/css" /> <style> #image-maps image { transform: translate(-10px, 0px); @@ -24,6 +24,48 @@ <image id="counter-prone" href="counter_prone.jpg" width="10"/> <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> + + <g id="building8" class="building"> + <polygon class="floor" points=" + -95.625,-108.625 -47.625,-108.625 -38.625,-93.625 70,-93.625 78.4,-108.625 113,-108.625 + 113,-89 89.625,-40 89.625,8.625 122.2,8.625 122.2,94 78.75,94 78.75,59.75 7.75,59.75 + -17.25,108.75 -122.25,108.75 -122.25,9 -95.625,9 + "/> + <path style="stroke-width: 2;" class="walls" d=" + M -95.625 -108.625 h 48 l 9 15 h 108.5 l 8.5 -15 h 34.5 + v 19.5 l -23.25 49 v 48.75 h 32.5 v 85.25 + h -43.25 v -34.25 h -71 l -25 49 h -105 + v -99.5 h 26.5 z + m 60 15 v 30.5 m 0 18 v 15.5 m 105.5 -64 v 30 m -14.75 -8.5 v 9 h -69 v -8 + M -95.625 -29.5 h 185 m 0 38.25 h -185 + m -26 31.75 h 60.5 m -60.5 35 h 60.5 m 0 33 v -99.75 + m 69 0 v 50.75 m 0 -19.25 h -42.5 v 68 m 113.5 -40 v -28.75 h 43 + "/> + <path style="stroke: white;" class="walls" d=" + M -95.625 -108.625 h 48 l 9 15 h 108.5 l 8.5 -15 h 34.5 + v 19.5 l -23.25 49 v 48.75 h 32.5 v 85.25 + h -43.25 v -34.25 h -71 l -25 49 h -105 + v -99.5 h 26.5 z + m 60 15 v 30.5 m 0 18 v 15.5 m 105.5 -64 v 30 m -14.75 -8.5 v 9 h -69 v -8 + M -95.625 -29.5 h 185 m 0 38.25 h -185 + m -26 31.75 h 60.5 m -60.5 35 h 60.5 m 0 33 v -99.75 + m 69 0 v 50.75 m 0 -19.25 h -42.5 v 68 m 113.5 -40 v -28.75 h 43 + "/> + <path class="windows" d=" + M -78.25 -108.625 h 10 m 50 15 h 14 m 39 0 h 10 m 35 -15 h 10 + m 23.1 4.5 v 10 m -23.2 81.5 v 10 m 12 11.2 h 16.5 m 4 19 v 10 m 0 24 v 10 + m -21.25 22.25 h -17 m -19.5 -34.25 h -14.5 m -51 17.5 l -4.5 9 + m -116.5 3 v -10 m 0 -24 v -10 m 0 -23 v -10 m 26.5 -14.5 v -10 m 0 -35 v -10 m 0 -20 v -10 + "/> + <path class="door-edges" d=" + M 89.6 -27.5 v 10 m 6.75 57 h 10 m -57.75 -30.75 h -16.5 m -24.25 36.25 v 10 + m -42.5 20.75 v 10 m -26.5 1.75 v -10 m -24 -2 h -10 m 0 -35 h 10 m 100 -70 h 15.5 + "/> + <path class="doors" d=" + M 89.6 -25 v 5 m 9 59.5 h 5.5 m -57.75 -30.75 h -12 m -26.5 38.75 v 5.25 + m -42.5 25.5 v 5 m -26.5 1.75 v -5 m -26 -4.5 h -6 m .25 -35 h 5.5 m 104.5 -70 h 11 + "/> + </g> </defs> <rect id="background"/> @@ -34,6 +76,9 @@ </g> <g class="gameboard"> + <g id="buildings"> + <use x="263.125" y="188.625" href="#building8"/> + </g> <g id="firing-arcs"> <g id="shapes"/> <g id="lines"/> @@ -88,5 +133,5 @@ </g> <g class="grid"/> </g> - <script data-cols="33" data-rows="25"></script> + <script data-cols="33" data-rows="25" href="http://localhost:8080/map.js"/> </svg> |
