Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-17 12:26:29 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-17 12:26:29 -0700
commitb89222872ad3edecd31325952aa6904c4da1d5f0 (patch)
tree823c208ade38aa40ebcf66918bfd95592b5169e3
parent9d4f58472d00558e809cd43642259ba109e25037 (diff)
Building layouts complete
Diffstat
-rw-r--r--public/assets/css/map.css12
-rw-r--r--public/assets/images/map1.svg102
-rw-r--r--public/index.html4
-rw-r--r--src/index.js51
4 files changed, 119 insertions, 50 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 9f12832..067f5c3 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -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 {
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
index bef74ee..3109b9e 100644
--- a/public/assets/images/map1.svg
+++ b/public/assets/images/map1.svg
@@ -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>
diff --git a/public/index.html b/public/index.html
index d907d05..215ada8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
diff --git a/src/index.js b/src/index.js
index b90c579..10970de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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');
-
- 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');
-
- 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');
- }
- };
-
- svg.prepend(linkEl);
+ 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');
+
+ // linkEl.onload = function (e) {
+ // console.log('map.css loaded');
+
+ // if (scriptEl) {
+ // scriptEl.onload = function () {
+ // console.log('map.js loaded');
+
+ // };
+ // 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();