Tilorswift json loader implemented.

tilorswift/js/Field.js

@@ -0,0 +1,33 @@
+export default class Field
+{
+    className = 'field';
+
+    constructor(tileset, index = 0)
+    {
+        this.tileset = tileset;
+        this.index = index;
+        this.htmlElement = document.createElement('td');
+        this.init();
+    }
+
+    init()
+    {
+        this.htmlElement.classList.add(this.className);
+        this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px';
+        this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px';
+        this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileHeight() + 'px';
+        this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
+        this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
+    }
+
+    setIndex(index)
+    {
+        this.index = index;
+        this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px';
+    }
+
+    getElement()
+    {
+        return this.htmlElement;
+    }
+}

tilorswift/js/Terrain.js

@@ -0,0 +1,64 @@
+import Field from "./Field.js";
+import Tileset from "./Tileset.js";
+
+export default class Terrain
+{
+    constructor(tileset, tilesX, tilesY)
+    {
+        this.tileset = tileset;
+        this.fields = [];
+        this.tilesX = tilesX;
+        this.tilesY = tilesY;
+        this.htmlElement = document.createElement('table');
+        this.htmlElement.id = 'level';
+
+        this.init();
+    }
+
+    init()
+    {
+        for (let r = 0; r < this.tilesY; r++) {
+            let row = [];
+            let tr = document.createElement('tr');
+
+            for (let col = 0; col < this.tilesX; col++) {
+                let field = new Field(this.tileset);
+                let td = field.getElement();
+                row.push(field);
+                tr.appendChild(td);
+            }
+
+            this.fields.push(row);
+            this.htmlElement.appendChild(tr);
+        }
+
+    }
+
+    getElement()
+    {
+        return this.htmlElement;
+    }
+
+    setFieldIndex(x, y, index)
+    {
+        this.fields[y][x].setIndex(index);
+    }
+
+    static createFromJson(json)
+    {
+        let terrainData = JSON.parse(json);
+        let imageTileset = new Image();
+        imageTileset.src = terrainData.tileset;
+
+        let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale);
+        let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows);
+
+        for (let y = 0; y < terrainData.matrix.length; y++) {
+            for (let x = 0; x < terrainData.matrix[y].length; x++) {
+                terrain.setFieldIndex(x, y, terrainData.matrix[y][x]);
+            }
+        }
+
+        return terrain;
+    }
+}

tilorswift/js/Tileset.js

@@ -0,0 +1,29 @@
+export default class Tileset
+{
+    constructor(image, tiles, scale = 1)
+    {
+        this.image = image;
+        this.tiles = tiles;
+        this.scale = scale;
+    }
+
+    getWidth()
+    {
+        return this.image.width * this.scale;
+    }
+
+    getHeight()
+    {
+        return this.image.height * this.scale;
+    }
+
+    getTileWidth()
+    {
+        return this.image.width / this.tiles * this.scale;
+    }
+
+    getTileHeight()
+    {
+        return this.image.height * this.scale;
+    }
+}

tilorswift/js/module.js

@@ -0,0 +1,13 @@
+import Terrain from "./Terrain.js";
+import FileLoader from "../../js/FileLoader.js";
+
+let image = new Image();
+image.src = '../graphics/tileset-landscape01.jpg';
+image.onload = function () {
+    console.log('Loaded');
+
+    let loader = new FileLoader('../levels/level.json');
+    let terrain = Terrain.createFromJson(loader.getContent());
+
+    document.body.appendChild(terrain.getElement());
+};