Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-15 18:08:24 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-15 18:08:24 -0700
commit021b8d3a9a25b751180781b000696841da83e0b1 (patch)
treeb67f6b727ed90a2fe3e7030195bbf720d7ba7e7b
parentbd31e3e4a64775d3e2ea2efeb5b2122e384b30e3 (diff)
Apply styles and map script to manually loaded files
Diffstat
-rw-r--r--public/assets/css/style.css1
-rw-r--r--public/assets/images/map1.svg4
-rw-r--r--public/assets/images/map2.svg2
-rw-r--r--public/assets/images/map3.svg2
-rw-r--r--public/assets/images/map4.svg2
-rw-r--r--src/index.js27
-rw-r--r--src/modules/gameboard.js2
-rw-r--r--src/modules/record_sheet.js12
8 files changed, 37 insertions, 15 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 91ef42c..2888841 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -378,6 +378,7 @@ img.logo {
.map-placeholder {
position: absolute;
+ user-select: none;
}
input[type="file"] {
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
index fe2da24..04ca8a9 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="../css/map.css" type="text/css"/>
+ <!-- <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="/assets/css/map.css" type="text/css"/> -->
<style>
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 52; }
@@ -1935,5 +1935,5 @@
</g>
</g>
</g>
- <script href="../../map.js"></script>
+ <script></script>
</svg>
diff --git a/public/assets/images/map2.svg b/public/assets/images/map2.svg
index 64be1d3..04f0a10 100644
--- a/public/assets/images/map2.svg
+++ b/public/assets/images/map2.svg
@@ -91,5 +91,5 @@
</g>
<g class="grid"/>
</g>
- <script href="../../map.js" data-cols="33" data-rows="77"></script>
+ <script data-cols="33" data-rows="77"></script>
</svg>
diff --git a/public/assets/images/map3.svg b/public/assets/images/map3.svg
index e2a92a8..171e2c9 100644
--- a/public/assets/images/map3.svg
+++ b/public/assets/images/map3.svg
@@ -88,5 +88,5 @@
</g>
<g class="grid"/>
</g>
- <script href="../../map.js" data-cols="33" data-rows="25"></script>
+ <script data-cols="33" data-rows="25"></script>
</svg>
diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg
index 8911ca7..d5c3326 100644
--- a/public/assets/images/map4.svg
+++ b/public/assets/images/map4.svg
@@ -86,5 +86,5 @@
<g class="grid"/>
</g>
- <script href="../../map.js" data-cols="33" data-rows="50"></script>
+ <script data-cols="33" data-rows="50"></script>
</svg>
diff --git a/src/index.js b/src/index.js
index 1a7a6c7..3710843 100644
--- a/src/index.js
+++ b/src/index.js
@@ -65,16 +65,35 @@ function clearMoveEndedIndicators(records) {
}
function load() {
- URL.revokeObjectURL(this.data);
const svg = this.contentDocument.querySelector('svg'),
- startLocs = svg.querySelector('.start-locations');
+ 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);
this.style.opacity = 1;
mapPlaceholder.style.opacity = 0;
+ URL.revokeObjectURL(this.data);
panzoom.start(svg);
- gameboard.start(svg);
- recordSheet.start(startLocs, gameboard.getUnits(), gameboard.unSelect, gameboard.select);
+ recordSheet.clear();
}
document.querySelectorAll('.end-turn').forEach(el =>
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index e20949a..abf37b0 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -270,6 +270,8 @@ export function start(el) {
}
});
});
+
+ console.log('gameboard.js loaded');
}
export function select(selected) {
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 78dbace..4abccc6 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -83,12 +83,6 @@ function createRecords(units) {
return grouped;
}
-function clear() {
- document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
- document.querySelector('#attacker-record .name').textContent = 'attacker';
- document.querySelector('#defender-record .name').textContent = 'defender';
-}
-
function addEventListeners(unSelectCounter, selectCounter) {
document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', () => {
@@ -103,6 +97,12 @@ function addEventListeners(unSelectCounter, selectCounter) {
);
}
+export function clear() {
+ document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
+ document.querySelector('#attacker-record .name').textContent = 'attacker';
+ document.querySelector('#defender-record .name').textContent = 'defender';
+}
+
export function unSelect() {
const selected = getSelected();