Tilorswift: Background color and fix table size.

levels/level.json

@@ -4,6 +4,7 @@
   "scale": 3,
   "rows": 10,
   "columns": 17,
+  "backgroundColor": "#6096ff",
   "matrix": [
     [6    ,6    ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,4    ,4   ],
     [6    ,6    ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,-1   ,4    ,4   ],

tilorswift/js/Terrain.js

@@ -3,20 +3,25 @@ import Tileset from "./Tileset.js";
 
 export default class Terrain
 {
-    constructor(tileset, tilesX, tilesY)
+    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.htmlElement.id = 'level';
 
         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');
@@ -51,7 +56,7 @@ export default class Terrain
         imageTileset.src = terrainData.tileset;
 
         let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale);
-        let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows);
+        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++) {

tilorswift/style.css

@@ -1,7 +1,6 @@
 body {
     padding: 0;
     margin: 0;
-    background-color: #6096ff;
 }
 
 #level {