From f02fb4d411c2a3443acd00cb6fe87b768f6a053d Mon Sep 17 00:00:00 2001 From: Mal Date: Tue, 19 Sep 2023 11:44:56 +0200 Subject: [PATCH] Tilorswift levels will be loaded asynchronously now --- js/FileLoader.js | 6 +- js/Level.js | 14 +-- js/ui/LoadLevelDialog.js | 5 ++ tilorswift/js/Tilorswift.js | 172 ++++++++++++++++++------------------ tilorswift/js/module.js | 18 ++-- 5 files changed, 117 insertions(+), 98 deletions(-) diff --git a/js/FileLoader.js b/js/FileLoader.js index 5dfefbd..5f417b6 100644 --- a/js/FileLoader.js +++ b/js/FileLoader.js @@ -4,7 +4,8 @@ export default class FileLoader { this.filename = filename; this.content = ''; - this.loadContent(); + + this.onLoad = () => {}; } getContent() @@ -19,10 +20,11 @@ export default class FileLoader request.onreadystatechange = () => { if (request.status === 200 && request.readyState === 4) { this.content = request.responseText; + this.onLoad(this.content); } }; request.open('GET', this.filename, false); request.send(); } -} \ No newline at end of file +} diff --git a/js/Level.js b/js/Level.js index 55df447..d7f2757 100644 --- a/js/Level.js +++ b/js/Level.js @@ -74,15 +74,17 @@ export default class Level this.gravity = gravity; } - static createFromFile(filename) + static createFromFile(filename, callback = () => {}) { let loader = new FileLoader(filename); - let levelData = JSON.parse(loader.getContent()); - let terrain = Terrain.createFromJson(levelData); - let level = new Level(terrain); - level.setGravity(levelData.gravity); + loader.onLoad = (data) => { + const json = JSON.parse(data); + const level = new Level(Terrain.createFromJson(json)); + level.setGravity(json.gravity); - return level; + callback(level); + } + loader.loadContent(); } static createFromJson(json) diff --git a/js/ui/LoadLevelDialog.js b/js/ui/LoadLevelDialog.js index aa4ed51..4d8a26d 100644 --- a/js/ui/LoadLevelDialog.js +++ b/js/ui/LoadLevelDialog.js @@ -36,4 +36,9 @@ export class LoadLevelDialog extends Dialog } ); } + + openFileBrowser() + { + this.fileInput.click(); + } } diff --git a/tilorswift/js/Tilorswift.js b/tilorswift/js/Tilorswift.js index 9cf519c..6ad1e80 100644 --- a/tilorswift/js/Tilorswift.js +++ b/tilorswift/js/Tilorswift.js @@ -69,6 +69,92 @@ export default class Tilorswift this.addEventListeners(); } + getLevelAsJson() + { + let matrix = []; + + for (let y = 0; y < this.level.terrain.fields.length; y++) { + let row = []; + + for (let x = 0; x < this.level.terrain.fields[y].length; x++) { + row.push(this.level.terrain.fields[y][x].index); + } + + matrix.push(row); + } + + let data = { + tileset: this.level.getTilesetId(), + rows: this.level.getRows(), + columns: this.level.getColumns(), + startX: this.level.getStartX(), + startY: this.level.getStartY(), + targetX: this.level.getTargetX(), + targetY: this.level.getTargetY(), + gravity: this.level.gravity, + matrix: matrix, + }; + + return JSON.stringify(data); + } + + openLevelFromFile() + { + const dialog = new LoadLevelDialog(); + dialog.onLoad = (json) => { + this.tileset = new Tileset(JSON.parse(json).tileset); + this.level = Level.createFromJson(json); + this.loadLevel(); + dialog.close(); + } + dialog.openFileBrowser(); + } + + loadLevel() + { + this.tileset = new Tileset(this.level.terrain.tileset.setId); + + document.body.style.backgroundColor = this.level.getBackgroundColor(); + + if (GraphicSet[this.level.terrain.tileset.setId].backgroundImage !== null) { + document.body.style.backgroundImage = 'url("../' + Setting.GRAPHICS_LOCATION + GraphicSet[this.level.terrain.tileset.setId].backgroundImage + '")'; + } else { + document.body.style.backgroundImage = 'none'; + } + this.map.innerHTML = ''; + this.map.appendChild(this.level.terrain.getElement()); + this.tilesetPicker.reloadTileset(this.tileset); + } + + saveLevelToFile() + { + if (!this.level.hasEntrancePoint()) { + alert('Es muss ein Startpunkt definiert sein!'); + return false; + } + + if (!this.level.hasTargetPoint()) { + alert('Es muss ein Zielpunkt definiert sein!'); + return false; + } + + const filename = prompt('Dateiname', 'terrain.json'); + + if (filename === null) { + return false; + } + + const json = this.getLevelAsJson(level); + const download = document.createElement('a'); + + download.setAttribute('download', filename); + download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json)); + download.click(); + download.remove(); + + return true; + } + addEventListeners() { window.addEventListener( @@ -204,95 +290,11 @@ export default class Tilorswift window.addEventListener( TilorswiftEvent.MENU_SAVE_CLICKED, - ()=> { + () => { if (this.saveLevelToFile()) { window.dispatchEvent(new TilorswiftSavedEvent()); } } ); } - - getLevelAsJson() - { - let matrix = []; - - for (let y = 0; y < this.level.terrain.fields.length; y++) { - let row = []; - - for (let x = 0; x < this.level.terrain.fields[y].length; x++) { - row.push(this.level.terrain.fields[y][x].index); - } - - matrix.push(row); - } - - let data = { - tileset: this.level.getTilesetId(), - rows: this.level.getRows(), - columns: this.level.getColumns(), - startX: this.level.getStartX(), - startY: this.level.getStartY(), - targetX: this.level.getTargetX(), - targetY: this.level.getTargetY(), - gravity: this.level.gravity, - matrix: matrix, - }; - - return JSON.stringify(data); - } - - openLevelFromFile() - { - const dialog = new LoadLevelDialog(); - dialog.onLoad = (json) => { - this.level = Level.createFromJson(json); - this.loadLevel(); - dialog.close(); - } - } - - loadLevel() - { - this.tileset = new Tileset(this.level.terrain.tileset.setId); - - document.body.style.backgroundColor = this.level.getBackgroundColor(); - - if (GraphicSet[this.level.terrain.tileset.setId].backgroundImage !== null) { - document.body.style.backgroundImage = 'url("../' + Setting.GRAPHICS_LOCATION + GraphicSet[this.level.terrain.tileset.setId].backgroundImage + '")'; - } else { - document.body.style.backgroundImage = 'none'; - } - this.map.innerHTML = ''; - this.map.appendChild(this.level.terrain.getElement()); - this.tilesetPicker.reloadTileset(this.tileset); - } - - saveLevelToFile() - { - if (!this.level.hasEntrancePoint()) { - alert('Es muss ein Startpunkt definiert sein!'); - return false; - } - - if (!this.level.hasTargetPoint()) { - alert('Es muss ein Zielpunkt definiert sein!'); - return false; - } - - const filename = prompt('Dateiname', 'terrain.json'); - - if (filename === null) { - return false; - } - - const json = this.getLevelAsJson(level); - const download = document.createElement('a'); - - download.setAttribute('download', filename); - download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json)); - download.click(); - download.remove(); - - return true; - } } diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js index 5a004b6..9cbe487 100644 --- a/tilorswift/js/module.js +++ b/tilorswift/js/module.js @@ -4,12 +4,20 @@ import ImageLoader from "../../js/ImageLoader.js"; import GraphicSet from "../../js/GraphicSet.js"; import Setting from "../../js/Setting.js"; -const level = Level.createFromFile('../levels/moonbase.json'); const imageLoader = new ImageLoader(); -imageLoader.addImage('../' + Setting.TILESET_LOCATION + GraphicSet[level.terrain.tileset.setId].tileset); + +for (const graphicSet of GraphicSet) { + imageLoader.addImage('../' + Setting.TILESET_LOCATION + graphicSet.tileset); +} + imageLoader.onLoad = () => { - const tilorswift = new Tilorswift(level); - tilorswift.init(); - tilorswift.loadLevel(); + Level.createFromFile( + '../levels/moonbase.json', + (level) => { + const tilorswift = new Tilorswift(level); + tilorswift.loadLevel(); + tilorswift.init(); + } + ); } imageLoader.load();