From 021b8d3a9a25b751180781b000696841da83e0b1 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 15 May 2024 18:08:24 -0700 Subject: Apply styles and map script to manually loaded files --- public/assets/css/style.css | 1 + public/assets/images/map1.svg | 4 ++-- public/assets/images/map2.svg | 2 +- public/assets/images/map3.svg | 2 +- public/assets/images/map4.svg | 2 +- src/index.js | 27 +++++++++++++++++++++++---- src/modules/gameboard.js | 2 ++ src/modules/record_sheet.js | 12 ++++++------ 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 @@ 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 @@ - + 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 @@ - + 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 @@ - + 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(); -- cgit v1.2.3