Tilorswift levels will be loaded asynchronously now

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();
     }
-}
+}

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());
+        loader.onLoad = (data) => {
-        let terrain = Terrain.createFromJson(levelData);
+            const json = JSON.parse(data);
-        let level =  new Level(terrain);
+            const level =  new Level(Terrain.createFromJson(json));
-        level.setGravity(levelData.gravity);
+            level.setGravity(json.gravity);
 
-        return level;
+            callback(level);
+        }
+        loader.loadContent();
     }
 
     static createFromJson(json)

js/ui/LoadLevelDialog.js

@@ -36,4 +36,9 @@ export class LoadLevelDialog extends Dialog
             }
         );
     }
+
+    openFileBrowser()
+    {
+        this.fileInput.click();
+    }
 }

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;
-    }
 }

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);
+    Level.createFromFile(
-    tilorswift.init();
+        '../levels/moonbase.json',
-    tilorswift.loadLevel();
+        (level) => {
+            const tilorswift = new Tilorswift(level);
+            tilorswift.loadLevel();
+            tilorswift.init();
+        }
+    );
 }
 imageLoader.load();