mr-crocs-adventures/tilorswift/js/Terrain.js

import Field from "./Field.js";
import Tileset from "./Tileset.js";

export default class Terrain
{
    constructor(tileset, tilesX, tilesY, backgroundColor = 'black')
    {
        this.tileset = tileset;
        this.fields = [];
        this.tilesX = tilesX;
        this.tilesY = tilesY;
        this.backgroundColor = backgroundColor;
        this.htmlElement = document.createElement('table');

        this.init();
    }

    init()
    {
        this.htmlElement.id = 'level';
        this.htmlElement.style.backgroundColor = this.backgroundColor;
        this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
        this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px';

        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, terrainData.backgroundColor);

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