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

Building layouts complete

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-05-17 12:26:29 -07:00
parent 9d4f58472d
commit b89222872a
4 changed files with 115 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -387,10 +387,6 @@ g[data-y="76"] { --i: 76; }
[data-x="31"] { --i: 31; }
[data-x="32"] { --i: 32; }
#terrain {
opacity: 0.5;
}
#tree .trunk {
fill: brown;
}
@ -404,13 +400,13 @@ g[data-y="76"] { --i: 76; }
transform: scale(0.9);
}
.building {
opacity: 0.5;
.building, #terrain {
opacity: 1;
}
.building .floor {
/* fill: white; */
fill: none;
fill: white;
/* fill: none; */
}
.building path {

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

@ -1,6 +1,6 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-18 -150 2320 3360" xmlns="http://www.w3.org/2000/svg">
<!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="/assets/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>
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 52; }
@ -136,6 +136,7 @@
</g>
<g id="building2" class="building">
<polygon class="floor" points="-33.5,-60.5 33.5,-60.5 33.5,-34 52,-3.5 52,30.5 35.5,60.5 -34,60.5 -52,34.5 -52,-3.5 -33.5,-34"/>
<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
@ -192,6 +193,7 @@
</g>
<g id="building3" class="building">
<rect class="floor" x="-32.25" y="-44" width="64.5" height="88"/>
<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
@ -230,6 +232,7 @@
</g>
<g id="building4" class="building">
<rect class="floor" x="-35.25" y="-62.25" width="70.5" height="124.5"/>
<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
@ -276,6 +279,7 @@
</g>
<g id="building5" class="building">
<rect class="floor" x="-75" y="-32.75" width="150" height="65.5"/>
<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
@ -333,6 +337,7 @@
</g>
<g id="building6" class="building">
<rect class="floor" x="-23" y="-58.75" width="46" height="117.5"/>
<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
@ -366,6 +371,84 @@
"/>
</g>
<g id="building7" class="building">
<polygon class="floor" points="
-113.25,-56.5 -73.25,-56.5 -50.75,-69.5 113.25,-69.5 113.25,43.5 10.75,43.5
5.75,32 -80.25,32 -87.25,44.5 -113.25,44.5
"/>
<path style="stroke-width: 2;" class="walls" d="
M -113.25 -56.5 h 40 l 22.5 -13 h 164 v 113
h -102.5 l -5 -11.5 h -86 l -7 12.5 h -26 z
m 0 38 h 13 m 19.5 1.5 h 46.5 v -52.5
m 0 37 h 44 v -37
m 0 30.5 h 37.5 v -30.5
m 0 30.5 h 33
m 0 -30.5 v 81 h 33
m -34.5 32 v -31.5 h -98.5 v 20
m 65.5 11.5 v -31.5
m -47 0 v 20
m -37 0 v -19.5 h -21 v -12 h -21.5 v 14
m 26.5 17.5 v -19.5
m -18.5 1.5 v 18
"/>
<path style="stroke: white;" class="walls" d="
M -113.25 -56.5 h 40 l 22.5 -13 h 164 v 113
h -102.5 l -5 -11.5 h -86 l -7 12.5 h -26 z
m 0 38 h 13 m 19.5 1.5 h 46.5 v -52.5
m 0 37 h 44 v -37
m 0 30.5 h 37.5 v -30.5
m 0 30.5 h 33
m 0 -30.5 v 81 h 33
m -34.5 32 v -31.5 h -98.5 v 20
m 65.5 11.5 v -31.5
m -47 0 v 20
m -37 0 v -19.5 h -21 v -12 h -21.5 v 14
m 26.5 17.5 v -19.5
m -18.5 1.5 v 18
"/>
<path class="windows" d="
M -94.75 -56.5 h 10.25
m 19 -4.5 l 9 -5.25
m 32 -3.25 h 10
m 77 0 h 10
m 40.75 2 v 9.5
m 0 32.75 v 10
m -5.5 58.75 h -10.5
m -24.5 0 h -10
m -25 0 h -10
m -17.25 -.75 l -4 -9
m -87.75 0 l -5 9
m -27 -.5 v -10
m 0 -63.5 v -10
"/>
<path class="door-edges" d="
M 12 -69.5 h 10
m -3 30.5 h 10
m 24.25 0 h 10
m 17 13.25 v 10
m 21 27.25 h -16
m -12.5 .5 h -10
m -24.5 0 h -10
m -31.75 0 h -14
m -22.75 .5 h -12
m 25 -45 h 16
M -113.25 -9.5 v 10
"/>
<path class="doors" d="
M 14.5 -69.5 h 5
m 2 30.5 h 5
m 29.25 0 h 5
m 19.5 15.75 v 5
m 18.5 29.75 h -11
m -17.5 .5 h -5
m -29.5 0 h -5
m -36.75 0 h -9
m -27.75 .5 h -7
m 25 -45 h 11
M -113.25 -6.75 v 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>
@ -391,19 +474,8 @@
<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>
<use x="427.75" y="110" href="#building7"/>
<use x="418" y="696" href="#building7"/>
</g>
<g id="firing-arcs">
<g id="shapes"/>
@ -2245,5 +2317,5 @@
</g>
</g>
</g>
<script></script>
<script href="http://localhost:8080/map.js"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 97 KiB

4
public/index.html
View File

@ -120,7 +120,7 @@
<span class="inning-top">◓</span>
<span class="inning-bottom">◒</span>
</span>
<button id="show-dialog" type="button">Change map</button>
<button id="show-dialog" type="button">Scenario</button>
<button id="download-save" type="button">Save</button>
<button id="upload-save" type="button">Load</button>
<button id="fullscreen" type="button">
@ -182,7 +182,7 @@
<form>
<p>
<label>
Map:
Load scenario:
<select>
<option value="map1">BattleTroops Scenario 1: Side Show</option>
<option value="map2">BattleTroops Scenario 2: Dragon Hunting</option>

43
src/index.js
View File

@ -66,36 +66,37 @@ function clearMoveEndedIndicators(records) {
function load() {
const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations'),
scriptEl = this.contentDocument.querySelector('script');
startLocs = svg.querySelector('.start-locations')
// , scriptEl = this.contentDocument.querySelector('script')
;
const linkEl = document.createElement('link');
linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
linkEl.setAttribute('rel', 'stylesheet');
linkEl.setAttribute('href', 'http://localhost:8080/assets/css/map.css');
linkEl.setAttribute('type', 'text/css');
// const linkEl = document.createElement('link');
// linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
// 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');
// linkEl.onload = function (e) {
// console.log('map.css loaded');
if (scriptEl) {
scriptEl.onload = function () {
console.log('map.js loaded');
gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
};
scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
}
};
// if (scriptEl) {
// scriptEl.onload = function () {
// console.log('map.js loaded');
svg.prepend(linkEl);
// };
// scriptEl.setAttribute('href', 'http://localhost:8080/map.js');
// }
// };
// svg.prepend(linkEl);
this.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
URL.revokeObjectURL(this.data);
panzoom.start(svg);
recordSheet.clear();
gameboard.start(svg);
recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
}
document.querySelectorAll('.end-turn').forEach(el =>
@ -173,7 +174,7 @@ document.querySelector('#download-save').addEventListener('click', e => {
element.setAttribute('download', 'save.svg');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
element.style.display = 'none';
// element.style.display = 'none';
// document.body.appendChild(element);
element.click();