WIP: Buildings
This commit is contained in:
parent
021b8d3a9a
commit
9d4f58472d
@ -387,8 +387,59 @@ g[data-y="76"] { --i: 76; }
|
||||
[data-x="31"] { --i: 31; }
|
||||
[data-x="32"] { --i: 32; }
|
||||
|
||||
.buildings {
|
||||
display: none;
|
||||
#terrain {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#tree .trunk {
|
||||
fill: brown;
|
||||
}
|
||||
|
||||
#tree .branches {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
#bush {
|
||||
fill: green;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.building {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.building .floor {
|
||||
/* fill: white; */
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.building path {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.building .furniture {
|
||||
fill: violet;
|
||||
}
|
||||
|
||||
.building path.walls {
|
||||
stroke: black;
|
||||
stroke-linecap: square;
|
||||
}
|
||||
|
||||
.building .windows, .building .door-edges, .building .doors {
|
||||
stroke-linecap: square;
|
||||
}
|
||||
|
||||
.building .windows, .building .doors, .building .door-edges {
|
||||
stroke-width: 2.5px;
|
||||
}
|
||||
|
||||
.building .windows, .building .door-edges {
|
||||
stroke: lightseagreen;
|
||||
}
|
||||
|
||||
.building .doors {
|
||||
stroke: orange;
|
||||
}
|
||||
|
||||
#test-arcs line, #test-arcs polyline {
|
||||
|
||||
@ -84,6 +84,289 @@
|
||||
<symbol id="n8" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
|
||||
<symbol id="n9" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
|
||||
<symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
|
||||
|
||||
<g id="building1" class="building">
|
||||
<rect class="floor" x="-33.25" y="-62.25" width="66.5" height="124.5"/>
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
M -33.25 -62.25 V 62.25 H 33.25 V -62.25 Z
|
||||
M -6.75 -37.75 V 6.25 H 2.25 V 62.25
|
||||
M -33.25 16.25 H -7.75 V 62.25
|
||||
M 2.25 39.25 H 33.25
|
||||
M 13.75 6.25 V -1.25 H 33.25
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
M -33.25 -62.25 V 62.25 H 33.25 V -62.25 Z
|
||||
M -6.75 -37.75 V 6.25 H 2.25 V 62.25
|
||||
M -33.25 16.25 H -7.75 V 62.25
|
||||
M 2.25 39.25 H 33.25
|
||||
M 13.75 6.25 V -1.25 H 33.25
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
M -33.25 -45.74 V -33.25
|
||||
M -33.25 40.75 V 53.75
|
||||
M 11.75 62.25 H 31.25
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
M -33.25 -16.25 V -13.75 M -33.25 -5.75 V -3.25
|
||||
M -7.75 26.25 V 29.25 M -7.75 36.25 V 39.25
|
||||
M 2.25 13.75 V 16.25 M 2.25 24.25 V 26.75
|
||||
M 2.25 40.25 V 42.75 M 2.25 50.75 V 53.25
|
||||
M -3.25 -62.25 H -0.75 M 11.25 -62.25 H 13.25
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
M -33.25 -13.75 V -5.75
|
||||
M -7.75 29.25 V 36.25
|
||||
M 2.25 16.25 V 24.25
|
||||
M 2.25 42.75 V 50.75
|
||||
M -0.75 -62.25 H 11.25
|
||||
"/>
|
||||
|
||||
<g class="furniture">
|
||||
<rect class="couch" x="-28.75" y="-51.75" width="16" height="8.5"/>
|
||||
<rect class="coffee-table" x="12.75" y="-48.75" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="22.75" y="-34.75" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="-18.75" y="-2.75" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="-31.75" y="24.25" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="22.25" y="27.25" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="23.25" y="10.75" width="5" height="9.5"/>
|
||||
<rect class="coffee-table" x="12.25" y="-29.75" width="5" height="9.5"/>
|
||||
<rect class="bed" x="-19.75" y="42.25" width="10" height="18"/>
|
||||
<rect class="bed" x="17.25" y="41.25" width="10" height="18"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="building2" class="building">
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
M -33.5 -60.5 V -34 L -52 -3 V 31 L -35 60.5 H 34.5
|
||||
L 52 31.5 V -3.5 L 34.5 -34 V -60.5 Z
|
||||
M -33.5 -34 H 34.5 M 1 -34 V -60.5
|
||||
M 9.5 -34 V 5.5 H -52
|
||||
M -18 5.5 V 60.5
|
||||
M 9.5 5.5 L 20 12 M 35.5 21 L 51 30.5
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
M -33.5 -60.5 V -34 L -52 -3 V 31 L -35 60.5 H 34.5
|
||||
L 52 31.5 V -3.5 L 34.5 -34 V -60.5 Z
|
||||
M -33.5 -34 H 34.5 M 1 -34 V -60.5
|
||||
M 9.5 -34 V 5.5 H -52
|
||||
M -18 5.5 V 60.5
|
||||
M 9.5 5.5 L 20 12 M 35.5 21 L 51 30.5
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
M -27 -60.5 H -17
|
||||
M 42 -21 L 47 -12.2
|
||||
M 52 10 V 20.5
|
||||
M 38.7 53.5 L 44.1 44.5
|
||||
M -37.7 55.8 L -43 46.6
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
M 7 -60.5 H 17.5
|
||||
M -19 -34 H -9
|
||||
M 15.5 -34 H 25.5
|
||||
M -40.5 5.5 H -23.5
|
||||
M -12 5.5 H -1.5
|
||||
M -6 60.5 H 10.5
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
M 9.5 -60.5 H 15
|
||||
M -16.5 -34 H -11.5
|
||||
M 18 -34 H 23
|
||||
M -38 5.5 H -26
|
||||
M -9.5 5.5 H -4
|
||||
M -3.5 60.5 H 8
|
||||
"/>
|
||||
<g class="furniture">
|
||||
<rect class="couch" x="-46" y="11" width="8.5" height="16"/>
|
||||
<rect class="couch" x="-15.5" y="36" width="16" height="8.5"/>
|
||||
<rect class="coffee-table" x="3.5" y="-54.5" width="5" height="9.5"/>
|
||||
<rect class="coffee-table" x="-2" y="-20" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="40" y="-4.5" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" x="-29.5" y="36" width="9.5" height="5"/>
|
||||
<rect class="coffee-table" style="transform-origin: 13.25px 16.5px; transform: rotate(-57deg)" x="8.5" y="14.5" width="9.5" height="5"/>
|
||||
<use href="#desk"/>
|
||||
<use x="-5.5" y="27.5" href="#desk"/>
|
||||
<use x="44" y="48" href="#desk"/>
|
||||
<use style="transform-origin: -24px -49px; transform: rotate(90deg)" x="87.8" y="-44.4" href="#desk"/>
|
||||
<use style="transform-origin: -24px -49px; transform: rotate(180deg)" x="-51.5" y="-2" href="#desk"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="building3" class="building">
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
M -32.25 -44 h 64.5 v 88 h -64 z
|
||||
m 37.5 0 v 18
|
||||
m -37.5 0 h 64.5
|
||||
m -36.5 0 v 10.5
|
||||
m 0 21 V 44
|
||||
m 24.5 -34.5 h 12
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
M -32.25 -44 h 64.5 v 88 h -64 z
|
||||
m 37.5 0 v 18
|
||||
m -37.5 0 h 64.5
|
||||
m -36.5 0 v 10.5
|
||||
m 0 21 V 44
|
||||
m 24.5 -34.5 h 12
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
M -13.75 -44 h 10.5
|
||||
M 32.25 -10 v 10
|
||||
M 23 44 h -10.5
|
||||
M -32.25 29 v -10.5
|
||||
m 0 -21 v -10
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
M 12 -44 h 10.5
|
||||
m -45 18 h 10.5
|
||||
m 24.5 0 h 10.5
|
||||
M -22 44 h 10.5
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
M 15 -44 h 5
|
||||
m -40 18 h 5.5
|
||||
m 29 0 h 5.5
|
||||
M -19.5 44 h 5.5
|
||||
"/>
|
||||
</g>
|
||||
|
||||
<g id="building4" class="building">
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
M -35.25 -62.25 h 70.5 v 124.5 h -70.5 z
|
||||
m 35.5 0 v 50 h -35.5
|
||||
m 35.5 -14 h 35
|
||||
m -17 0 v 30
|
||||
m 17 0 h -34.5 v 58
|
||||
m 34.5 -22.25 h -34
|
||||
m -16 1.5 h -20
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
M -35.25 -62.25 h 70.5 v 124.5 h -70.5 z
|
||||
m 35.5 0 v 50 h -35.5
|
||||
m 35.5 -14 h 35
|
||||
m -17 0 v 30
|
||||
m 17 0 h -34.5 v 58
|
||||
m 34.5 -22.25 h -34
|
||||
m -16 1.5 h -20
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
M 35.25 -44 v 10.5
|
||||
m 0 51 v 10
|
||||
m -14.5 34.75 h -15.5
|
||||
m -40.5 -50 v -10
|
||||
m 0 -18 v -10
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
M -27 -62.25 h 10
|
||||
m 20 36 h 10
|
||||
m -31 14 h 10
|
||||
m 26.25 -1.5 v 10
|
||||
m -15.25 7.5 h 10
|
||||
m -12.25 40 v 10
|
||||
m -31 8.5 h 16
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
M -24.5 -62.25 h 5
|
||||
m 25 36 h 5
|
||||
m -26 14 h 5
|
||||
m 28.75 1 v 5
|
||||
m -13 10 h 5.5
|
||||
m -10 42.25 v 5.5
|
||||
m -28.5 10.75 h 11
|
||||
"/>
|
||||
</g>
|
||||
|
||||
<g id="building5" class="building">
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
M -75 -32.75 h 150 v 65.5 h -150 z
|
||||
m 0 13 h 8 m 13 0 h 7
|
||||
m 0 -13 v 26.5
|
||||
m 43 -26.5 v 26.5
|
||||
m 38 -26.5 v 26.5
|
||||
m 23.5 -26.5 v 65.5
|
||||
m -132.5 -39 h 7 m 14 0 h 111
|
||||
m 15 1.5 h 3
|
||||
m -105.25 -1.5 v 7.5
|
||||
m 0 17.5 v 13.5
|
||||
m 36.5 0 v -13.5
|
||||
m 4.5 -19 v -6
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
M -75 -32.75 h 150 v 65.5 h -150 z
|
||||
m 0 13 h 8 m 13 0 h 7
|
||||
m 0 -13 v 26.5
|
||||
m 43 -26.5 v 26.5
|
||||
m 38 -26.5 v 26.5
|
||||
m 23.5 -26.5 v 65.5
|
||||
m -132.5 -39 h 7 m 14 0 h 111
|
||||
m 15 1.5 h 3
|
||||
m -105.25 -1.5 v 7.5
|
||||
m 0 17.5 v 13.5
|
||||
m 36.5 0 v -13.5
|
||||
m 4.5 -19 v -6
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
M -21 -32.75 h 10
|
||||
m 33 0 h 10
|
||||
m 6.5 0 h 10
|
||||
m 9 51 v 10
|
||||
m -31 4.5 h -16
|
||||
m -19.5 0 h -16
|
||||
M -75 2 v 10
|
||||
m 0 7 v 10
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
M -75 -17.75 v 9.5
|
||||
m 150 -22 v 10
|
||||
m -17.5 21 v 10
|
||||
m -2 -17 h -9
|
||||
m -38 0 h -10
|
||||
m -10.5 0 h -10
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
M -75 -15.75 v 5.5
|
||||
m 150 -18 v 6
|
||||
m -17.5 25 v 6
|
||||
m -4 -15 h -5
|
||||
m -43 0 h -4.5
|
||||
m -15.5 0 h -5
|
||||
"/>
|
||||
</g>
|
||||
|
||||
<g id="building6" class="building">
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
M -23 -58.75 h 46 v 117.5 h -46 z
|
||||
m 19.5 0 v 44 h 26.5
|
||||
M -23 26.25 h 46
|
||||
m -18.5 0 v -16
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
M -23 -58.75 h 46 v 117.5 h -46 z
|
||||
m 19.5 0 v 44 h 26.5
|
||||
M -23 26.25 h 46
|
||||
m -18.5 0 v -16
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
M 3.5 -58.75 h 10
|
||||
m 9.5 56 v 10.5
|
||||
m 0 20.5 v 10.5
|
||||
M -23 -31 v 10.5
|
||||
m 0 18 v 10.5
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
M -23 -46.5 v 10
|
||||
m 23.5 21.75 h 16.5
|
||||
m -30.75 41 h 10
|
||||
m -10 32.5 h 10
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
M -23 -44 v 5
|
||||
m 26 24.25 h 11.5
|
||||
m -26 41 h 5.5
|
||||
m -5 32.5 h 5
|
||||
"/>
|
||||
</g>
|
||||
|
||||
<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>
|
||||
|
||||
<rect id="background"/>
|
||||
@ -95,6 +378,33 @@
|
||||
</g>
|
||||
|
||||
<g class="gameboard">
|
||||
<g id="buildings">
|
||||
<use x="359.75" y="488.75" href="#building1"/>
|
||||
<use x="219" y="280" href="#building1"/>
|
||||
<use x="108" y="282" href="#building2"/>
|
||||
<use style="transform: translate(184.5px, 467px) rotate(180deg)" href="#building2"/>
|
||||
<use x="51.25" y="456" href="#building3"/>
|
||||
<use style="transform: translate(485.5px, 264.5px) rotate(180deg)" href="#building3"/>
|
||||
<use x="377.25" y="278.75" href="#building4"/>
|
||||
<use style="transform: translate(500px, 486px) rotate(180deg)" href="#building4"/>
|
||||
<use x="103" y="84.75" href="#building5"/>
|
||||
<use x="102" y="684.75" href="#building5"/>
|
||||
<use x="224" y="85.75" href="#building6"/>
|
||||
<use style="transform: translate(224.5px, 665.25px) rotate(180deg)" href="#building6"/>
|
||||
|
||||
<g id="building7" class="building">
|
||||
<path style="stroke-width: 2;" class="walls" d="
|
||||
"/>
|
||||
<path style="stroke: white;" class="walls" d="
|
||||
"/>
|
||||
<path class="windows" d="
|
||||
"/>
|
||||
<path class="door-edges" d="
|
||||
"/>
|
||||
<path class="doors" d="
|
||||
"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="firing-arcs">
|
||||
<g id="shapes"/>
|
||||
<g id="lines"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 94 KiB |
@ -24,6 +24,13 @@
|
||||
|
||||
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
|
||||
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
|
||||
|
||||
<g id="tree">
|
||||
<circle class="branches" r="6.5" />
|
||||
<circle class="trunk" r="2" />
|
||||
</g>
|
||||
|
||||
<path id="bush" d="m -4.8419646,1.6815712 c -0.2224,-0.58797 0.0373,-1.22438 -0.11465,-1.82718 -0.13335,-0.57348 -0.0486,-1.19322 0.31662,-1.6677 0.37485,-0.58981 0.9292504,-1.02199 1.5203804,-1.37775 0.37791,-0.29058 0.8322,-0.69438 1.3447,-0.48093 0.52883,0.22124 1.11777002,0.36526 1.69168002,0.27538 0.45164,-0.13122 0.78493,-0.50193 1.10890998,-0.82213 0.23823,-0.4706 0.79876,-0.76529 1.26021,-0.37753 0.75174,0.33698 1.53457,0.94104 1.60186,1.82553 0.009,0.47845 0.33305,0.83858 0.6865,1.11902 0.3949,0.43049 0.5194497,1.08616 0.39622,1.64816 -0.12486,0.51765 -0.59592,0.79391 -1.00538,1.0662 -0.3993,0.35161 -0.92629,0.72761 -0.88679,1.32791 0.0351,0.43819 -0.044,0.93411 -0.4491,1.18369 -0.75886,0.59794 -1.65352998,1.04869 -2.62829997769,1.12983 C -0.59642418,4.8046512 -1.2461242,4.8453312 -1.7811342,4.5051412 c -0.38949,-0.19045 -0.66499,-0.546 -0.75306,-0.96928 -0.19955,-0.51044 -0.67924,-0.93234 -1.24126,-0.95844 -0.4601204,-0.10269 -0.8649404,-0.47575 -1.0665104,-0.89585 z"/>
|
||||
</defs>
|
||||
|
||||
<rect id="background"/>
|
||||
@ -37,6 +44,11 @@
|
||||
</g>
|
||||
|
||||
<g class="gameboard">
|
||||
<g id="terrain">
|
||||
<use x="251" y="524" href="#tree"/>
|
||||
<use style="transform: translate(245px, 514px) rotate(28deg)" href="#bush"/>
|
||||
<use style="transform: translate(243.5px, 542px) rotate(-145deg)" href="#bush"/>
|
||||
</g>
|
||||
<g id="firing-arcs">
|
||||
<g id="shapes"/>
|
||||
<g id="lines"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 5.2 KiB |
@ -74,6 +74,7 @@ function load() {
|
||||
linkEl.setAttribute('rel', 'stylesheet');
|
||||
linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css');
|
||||
linkEl.setAttribute('type', 'text/css');
|
||||
|
||||
linkEl.onload = function (e) {
|
||||
console.log('map.css loaded');
|
||||
|
||||
@ -86,6 +87,7 @@ function load() {
|
||||
scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
|
||||
}
|
||||
};
|
||||
|
||||
svg.prepend(linkEl);
|
||||
|
||||
this.style.opacity = 1;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user