ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make map dot pattern

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:30 -07:00
parent 32147aaa4a
commit d7f54a2255
2 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/assets/css/map.css
View File

@ -44,7 +44,7 @@ polyline.move-trace {
}
#background {
fill: #bacae3;
/* fill: #bacae3; */
}
#map2 {
@ -400,8 +400,12 @@ g[data-y="76"] { --i: 76; }
transform: scale(0.9);
}
#buildings {
/* display: none; */
}
.building, #terrain {
opacity: 1;
/* opacity: 0.5; */
}
.building .floor {

69
public/assets/images/map1.svg
View File

@ -5,24 +5,56 @@
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 52; }
g#hex line {
opacity: 1;
#background {
stroke: #304b75;
}
g#hex line {
stroke-width: 0.2px;
transform: scale(1.2);
pattern use {
stroke: black;
stroke-width: 0.3px;
}
g#hex line:nth-child(2) {
transform: rotate(60deg) scale(1.2);
pattern rect {
fill: #bacae3;
}
g#hex line:nth-child(3) {
transform: rotate(-60deg) scale(1.2);
.building .floor {
opacity: 0.3;
}
</style>
<defs>
<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">
<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"/> -->
@ -452,30 +484,31 @@
<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"/>
<g id="image-maps">
<!-- <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" />
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/>
</g>
</g> -->
<rect id="background" fill="url(#asterisk)"/>
<g class="gameboard">
<g id="buildings">
<use x="359.75" y="488.75" href="#building1"/>
<use x="219" y="280" href="#building1"/>
<use x="359" y="488.75" href="#building1"/>
<use x="220" y="280" href="#building1"/>
<use x="108" y="282" href="#building2"/>
<use style="transform: translate(184.5px, 467px) rotate(180deg)" href="#building2"/>
<use style="transform: translate(185px, 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 style="transform: translate(499px, 486px) rotate(180deg)" href="#building4"/>
<use x="103" y="84.75" href="#building5"/>
<use x="102" y="684.75" href="#building5"/>
<use x="103" 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"/>
<use x="427.75" y="110" href="#building7"/>
<use x="418" y="696" href="#building7"/>
<use x="419" y="696" href="#building7"/>
</g>
<g id="firing-arcs">
<g id="shapes"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 99 KiB