Tileset dialog for Tilorswift and fix for adding rows.

graphic-sets.json

@@ -0,0 +1,16 @@
+[
+  {
+    "name": "Nature",
+    "tileset": "landscape01.jpg",
+    "tiles": 8,
+    "backgroundColor": "#6096ff",
+    "backgroundImage": null
+  },
+  {
+    "name": "Moon",
+    "tileset": "moon.jpg",
+    "tiles": 2,
+    "backgroundColor": "black",
+    "backgroundImage": null
+  }
+]

js/GraphicSet.js

@@ -0,0 +1,20 @@
+let GraphicSet = [
+    {
+        name: 'Nature',
+        tileset: 'landscape01.jpg',
+        tiles: 8,
+        scale: 3,
+        backgroundColor: '#6096ff',
+        backgroundImage: null
+    },
+    {
+        name: 'Moon',
+        tileset: 'moon.jpg',
+        tiles: 2,
+        scale: 3,
+        backgroundColor: 'black',
+        backgroundImage: 'background_earth.jpg'
+    }  
+];
+
+export default GraphicSet;

js/module.js

@@ -7,8 +7,8 @@ import FileLoader from "./FileLoader.js";
 import Camera from "./Camera.js";
 import Gisela from "./Gisela.js";
 import Setting from "./Setting.js";
-import InterfaceEvent from "./events/InterfaceEvent.js";
 import FrameRateMeasurer from "./FrameRateMeasurer.js";
+import GraphicSet from "./GraphicSet.js";
 
 class ImageLoader
 {
@@ -160,7 +160,7 @@ const GRAVITY = 2;
 let fps;
 let frameDuration;
 
-let levelJson = new FileLoader('levels/level01.json');
+let levelJson = new FileLoader('levels/moon.json');
 
 const LEVEL = JSON.parse(levelJson.getContent());
 
@@ -180,7 +180,7 @@ let loader = new ImageLoader();
 
 loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
 loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
-loader.addImage(Setting.TILESET_LOCATION + 'landscape01.jpg');
+loader.addImage(Setting.TILESET_LOCATION + GraphicSet[LEVEL.tileset].tileset);
 loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
 
 new FrameRateMeasurer();
@@ -191,6 +191,15 @@ window.addEventListener(
         let canvas = document.getElementById('canvas');
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
+        canvas.style.backgroundAttachment = 'fixed';
+        canvas.style.backgroundSize = 'cover';
+        canvas.style.backgroundPosition = 'center center';
+
+        if (GraphicSet[LEVEL.tileset].backgroundImage !== null) {
+            canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")';
+        }
+
+        canvas.style.backgroundColor = LEVEL.backgroundColor;
 
         window.addEventListener(
             'resize',
@@ -212,7 +221,7 @@ window.addEventListener(
         gisela = new Gisela();
         architecture.setMovableToTargetPosition(gisela);
 
-        fps = 120; //event.frameRate;
+        fps = 120;
         frameDuration = 1000 / fps;
         window.requestAnimationFrame(MainLoop);
     }

js/retro/RetroArchitecture.js

@@ -3,6 +3,8 @@ import RetroArchitectureTile from "./RetroArchitectureTile.js";
 import GeometryRectCollection from "../geometry/GeometryRectCollection.js";
 import GeometryPoint from "../geometry/GeometryPoint.js";
 import GeometryRect from "../geometry/GeometryRect.js";
+import GraphicSet from "../GraphicSet.js";
+import Setting from "../Setting.js";
 
 export default class RetroArchitecture
 {
@@ -10,6 +12,8 @@ export default class RetroArchitecture
     {
         this.tileset = tilesetSprite;
         this.tiles = tiles;
+        this.backgroundColor = null;
+        this.backgroundImage = null;
         this.rows = rows;
         this.columns = columns;
         this.matrix = [];
@@ -37,6 +41,16 @@ export default class RetroArchitecture
         }
     }
 
+    setBackgroundColor(color)
+    {
+        this.backgroundColor = color;
+    }
+
+    setBackgroundImage(image)
+    {
+        this.backgroundImage = image;
+    }
+
     getCollisionRects(rect)
     {
         let posX = Math.floor(rect.position.x / this.tileWidth) - 2;
@@ -200,33 +214,46 @@ export default class RetroArchitecture
                 let field = this.matrix[y][x];
 
                 if (field !== null && field !== undefined) {
-                    context.drawImage(
+                    this.drawField(context, x, y, camera, field);
-                        this.tileset.canvas,
-                        field.tile * this.tileWidth,
-                        0,
-                        this.tileWidth,
-                        this.tileHeight,
-                        x * this.tileWidth - camera.position.x,
-                        y * this.tileHeight - camera.position.y,
-                        this.tileWidth,
-                        this.tileHeight
-                    );
                 }
             }
         }
     }
 
+    drawField(context, x, y, camera, field)
+    {
+        context.drawImage(
+            this.tileset.canvas,
+            field.tile * this.tileWidth,
+            0,
+            this.tileWidth,
+            this.tileHeight,
+            x * this.tileWidth - camera.position.x,
+            y * this.tileHeight - camera.position.y,
+            this.tileWidth + 1,
+            this.tileHeight + 1
+        );
+    }
+
     static createFromData(data)
     {
-        let tileset = new RetroSprite(data.tileset, data.scale);
+        let graphicSet = GraphicSet[data.tileset];
+        console.log(data);
+        let tileset = new RetroSprite(
+            Setting.TILESET_LOCATION + graphicSet.tileset,
+            graphicSet.scale
+        );
 
         let architecture = new RetroArchitecture(
             tileset,
-            data.tiles,
+            graphicSet.tiles,
             data.columns,
             data.rows
         );
 
+        architecture.setBackgroundColor(graphicSet.backgroundColor);
+        architecture.setBackgroundImage(graphicSet.backgroundImage);
+
         architecture.startX = data.startX;
         architecture.startY = data.startY;
         architecture.targetX = data.targetX;

levels/moon.json

@@ -0,0 +1 @@
+{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}

tilorswift/js/Terrain.js

@@ -1,6 +1,7 @@
 import Field from "./Field.js";
 import Tileset from "./Tileset.js";
 import TilorswiftEvent from "./events/TilorswiftEvent.js";
+import GraphicSet from "../../js/GraphicSet.js";
 
 export default class Terrain
 {
@@ -15,6 +16,7 @@ export default class Terrain
         this.targetTileX = undefined;
         this.targetTileY = undefined;
         this.backgroundColor = backgroundColor;
+        this.backgroundImage = undefined;
         this.htmlElement = document.createElement('table');
         this.brushTileIndex = 0;
 
@@ -24,7 +26,6 @@ export default class Terrain
     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';
 
@@ -65,6 +66,8 @@ export default class Terrain
         for (let q = 0; q < quantity; q++) {
             this._insertRow(index);
             this.tilesY++;
+            this.entranceTileY = this.entranceTileY === undefined ? undefined : this.entranceTileY + 1;
+            this.targetTileY = this.targetTileY === undefined ? undefined : this.targetTileY + 1;
         }
 
         this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px';
@@ -82,11 +85,18 @@ export default class Terrain
             tr.appendChild(td);
         }
 
+        console.log(index);
+
         if (index === undefined || index >= this.tilesY - 1) {
             this.fields.push(row);
             this.htmlElement.appendChild(tr);
+        } else if (index === 0) {
+            this.fields = [row].concat(this.fields);
+            console.log(this.fields[0]);
+            this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
         } else {
-            this.fields = this.fields.slice(0, index).concat(row).concat(this.fields.slice(index));
+            this.fields = this.fields.slice(0, index).concat([row]).concat(this.fields.slice(index));
+            console.log(this.fields[1]);
             this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
         }
     }
@@ -96,6 +106,8 @@ export default class Terrain
         for (let c = 0; c < quantity; c++) {
             this._insertColumn(index);
             this.tilesX++;
+            this.entranceTileX = this.entranceTileX === undefined ? undefined : this.entranceTileX + 1;
+            this.targetTileX = this.targetTileX === undefined ? undefined : this.targetTileX + 1;
         }
 
         this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
@@ -175,11 +187,10 @@ export default class Terrain
 
     static createFromJson(terrainData)
     {
-        let imageTileset = new Image();
+        let graphicSet = GraphicSet[terrainData.tileset];
-        imageTileset.src = terrainData.tileset;
 
-        let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale);
+        let tileset = new Tileset(terrainData.tileset);
-        let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, terrainData.backgroundColor);
+        let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor);
 
         for (let y = 0; y < terrainData.rows; y++) {
             for (let x = 0; x < terrainData.columns; x++) {

tilorswift/js/Tileset.js

@@ -1,10 +1,15 @@
+import GraphicSet from "../../js/GraphicSet.js";
+import Setting from "../../js/Setting.js";
+
 export default class Tileset
 {
-    constructor(image, tiles, scale = 1)
+    constructor(setId)
     {
-        this.image = image;
+        this.setId = setId;
-        this.tiles = tiles;
+        this.image = new Image();
-        this.scale = scale;
+        this.image.src = Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset;
+        this.tiles = GraphicSet[this.setId].tiles;
+        this.scale = GraphicSet[this.setId].scale;
     }
 
     getWidth()

tilorswift/js/Tilorswift.js

@@ -2,8 +2,11 @@ export default class Tilorswift
 {
     static getTerrainAsJson(terrain)
     {
+        console.log('Save da shit.');
         let matrix = [];
 
+        console.log(terrain.fields.length);
+
         for (let y = 0; y < terrain.fields.length; y++) {
             let row = [];
 
@@ -15,16 +18,13 @@ export default class Tilorswift
         }
 
         let data = {
-            tileset: terrain.tileset.image.src,
+            tileset: terrain.tileset.setId,
-            tiles: terrain.tileset.tiles,
-            scale: terrain.tileset.scale,
             rows: terrain.tilesY,
             columns: terrain.tilesX,
             startX: terrain.entranceTileX,
             startY: terrain.entranceTileY,
             targetX: terrain.targetTileX,
             targetY: terrain.targetTileY,
-            backgroundColor: terrain.backgroundColor,
             matrix: matrix,
         };
 

tilorswift/js/dialog/Dialog.js

@@ -1,3 +1,7 @@
+import GraphicSet from "../../../js/GraphicSet.js";
+import Setting from "../../../js/Setting.js";
+import TilorswiftTilesetSelectedEvent from "../events/TilorswiftTilesetSelectedEvent.js";
+
 export default class Dialog
 {
     constructor()
@@ -59,6 +63,66 @@ export default class Dialog
         return htmlElementInput;
     }
 
+    createTilesetSelector()
+    {
+        let htmlElement = document.createElement('div');
+        htmlElement.id = 'tileset-selector';
+
+        let htmlElementLabel = document.createElement('div');
+        htmlElementLabel.classList.add('dialog-label');
+        htmlElementLabel.innerText = 'Terrain';
+
+        let htmlAvatarElement = document.createElement('div');
+        htmlAvatarElement.id = 'tileset-avatar';
+        htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[0].tileset + '")';
+
+        let htmlListElement = document.createElement('div');
+        htmlListElement.id = 'tileset-list';
+
+        htmlElement.appendChild(htmlElementLabel);
+        htmlElement.appendChild(htmlAvatarElement);
+        htmlElement.appendChild(htmlListElement);
+
+        htmlAvatarElement.addEventListener(
+            'click',
+            () => {
+                htmlListElement.style.display = 'block';
+            }
+        );
+
+        GraphicSet.forEach(
+            (graphicSet, index) => {
+                let htmlTilesetElement = document.createElement('div');
+                htmlTilesetElement.classList.add('tileset');
+
+                let htmlThumbnail = document.createElement('div');
+                htmlThumbnail.classList.add('tileset-thumbnail');
+                htmlThumbnail.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + graphicSet.tileset + '")';
+                htmlTilesetElement.appendChild(htmlThumbnail);
+
+                let htmlTitleElement = document.createElement('div');
+                htmlTitleElement.classList.add('tileset-title');
+                htmlTitleElement.innerText = graphicSet.name;
+                htmlTilesetElement.appendChild(htmlTitleElement);
+
+                htmlTilesetElement.addEventListener(
+                    'click',
+                    () => {
+                        htmlListElement.style.display = 'none';
+                        htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")';
+                        window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
+                    }
+                );
+
+                htmlListElement.appendChild(htmlTilesetElement);
+            }
+        );
+
+        this.inputAreaElement.appendChild(htmlElement);
+
+        return htmlElement;
+    }
+
     setMessage(message)
     {
         this.messageElement.innerText = message;

tilorswift/js/dialog/DialogAddRows.js

@@ -18,11 +18,11 @@ export default class DialogAddRows extends Dialog
 
     getPosition()
     {
-        return this.inputPosition.value;
+        return parseInt(this.inputPosition.value);
     }
 
     getRowsCount()
     {
-        return this.inputRows.value;
+        return parseInt(this.inputRows.value);
     }
 }

tilorswift/js/dialog/DialogNewTerrain.js

@@ -1,6 +1,6 @@
 import Dialog from "./Dialog.js";
 import TilorswiftNewTerrainEvent from "../events/TilorswiftNewTerrainEvent.js";
-import Setting from "../../../js/Setting.js";
+import TilorswiftEvent from "../events/TilorswiftEvent.js";
 
 export default class DialogNewTerrain extends Dialog
 {
@@ -9,19 +9,29 @@ export default class DialogNewTerrain extends Dialog
         this.setMessage('Neues Terrain erstellen');
         this.inputRows = this.createInputNumber('Zeilen');
         this.inputColumns = this.createInputNumber('Spalten');
+        this.inputTerrain = this.createTilesetSelector();
         this.buttonCancel = this.createButton('Abbrechen');
         this.buttonCreate = this.createButton('Erstellen');
+        this.terrainIndex = 0;
 
         this.buttonCreate.addEventListener(
             'click',
             () => {
                 window.dispatchEvent(
                     new TilorswiftNewTerrainEvent(
-                        Setting.TILESET_LOCATION + 'landscape01.jpg', /* TODO */
+                        this.terrainIndex,
                         this.inputColumns.value,
                         this.inputRows.value
                     )
-                )
+                );
+            }
+        );
+
+        window.addEventListener(
+            TilorswiftEvent.TILESET_SELECTED,
+            (event) => {
+                this.terrainIndex = event.tilesetIndex;
+                console.log(event.tilesetIndex);
             }
         );
     }

tilorswift/js/events/TilorswiftEvent.js

@@ -13,6 +13,7 @@ const TilorswiftEvent = {
     ADD_COLUMNS_CLICKED: 'addColumnsClicked',
     NEW_TERRAIN: 'newTerrain',
     NEW_TERRAIN_CLICKED: 'newTerrainClicked',
+    TILESET_SELECTED: 'tilesetSelected',
 };
 
 export default TilorswiftEvent;

tilorswift/js/events/TilorswiftNewTerrainEvent.js

@@ -2,12 +2,11 @@ import TilorswiftEvent from "./TilorswiftEvent.js";
 
 export default class TilorswiftNewTerrainEvent extends Event
 {
-    constructor(tileset, tilesX, tilesY)
+    constructor(tilesetIndex, tilesX, tilesY)
     {
         super(TilorswiftEvent.NEW_TERRAIN);
-        this.tileset = tileset;
+        this.tilesetIndex = tilesetIndex;
         this.tilesX = tilesX;
         this.tilesY = tilesY;
-        this.backgroundColor = '#6096ff';
     }
 }

tilorswift/js/events/TilorswiftTilesetSelectedEvent.js

@@ -0,0 +1,9 @@
+import TilorswiftEvent from "./TilorswiftEvent.js";
+
+export default class TilorswiftTilesetSelectedEvent extends Event
+{
+    constructor(tilesetIndex) {
+        super(TilorswiftEvent.TILESET_SELECTED);
+        this.tilesetIndex = tilesetIndex;
+    }
+}

tilorswift/js/menu/TilesetPickerWidget.js

@@ -12,6 +12,8 @@ export default class TilesetPickerWidget extends Widget
         this.brush = brush;
         this.htmlElement = this.createElementPicker();
         this.htmlElementSelector = this.createElementSelector();
+        this.htmlElement.appendChild(this.htmlElementSelector);
+
         this.loadTileset();
 
         window.addEventListener(
@@ -27,12 +29,20 @@ export default class TilesetPickerWidget extends Widget
 
     loadTileset()
     {
-        this.htmlElement.appendChild(this.htmlElementSelector);
-
         for (let t = 0; t < this.tileset.tiles; t++) {
             let button = new ButtonTile(this.tileset, t);
             this.htmlElementSelector.appendChild(button.getElement());
         }
+
+        this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
+        this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
+    }
+
+    reloadTileset(tileset)
+    {
+        this.tileset = tileset;
+        this.htmlElementSelector.innerHTML = '';
+        this.loadTileset();
     }
 
     createElementPicker()
@@ -42,8 +52,6 @@ export default class TilesetPickerWidget extends Widget
         htmlElement.style.width = this.tileset.getTileWidth() + 'px';
         htmlElement.style.height = this.tileset.getTileHeight() + 'px';
         htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
-        htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
-        htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
 
         return htmlElement;
     }
@@ -51,7 +59,7 @@ export default class TilesetPickerWidget extends Widget
     createElementSelector()
     {
         let htmlElementSelector = document.createElement('div');
-        htmlElementSelector.id = 'tileset-selector';
+        htmlElementSelector.id = 'tileset-selector-widget';
         htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles))  * this.tileset.getTileWidth() + 'px';
         htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
 

tilorswift/js/module.js

@@ -21,19 +21,29 @@ import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClick
 import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js";
 import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
 import TargetPointWidget from "./menu/TargetPointWidget.js";
+import GraphicSet from "../../js/GraphicSet.js";
+import Setting from "../../js/Setting.js";
 
 let loader = new FileLoader('../levels/level01.json');
 let terrainData = JSON.parse(loader.getContent());
 let image = new Image();
-image.src = terrainData.tileset;
+image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].tileset;
 
 image.onload = function () {
     let terrain = Terrain.createFromJson(terrainData);
+
+    if (GraphicSet[terrainData.tileset].backgroundImage !== null) {
+        document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[terrainData.tileset].backgroundImage + '")';
+    }
+
+    document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor;
+
+
     let map = document.getElementById('map');
     map.appendChild(terrain.getElement());
 
     let brush = new Brush();
-    let tileset = new Tileset(image, 8, 3);
+    let tileset = new Tileset(terrainData.tileset);
     let widgetBar = new WidgetBar('widget-bar');
 
     let tilesetPicker = new TilesetPickerWidget(tileset, brush);
@@ -148,9 +158,14 @@ image.onload = function () {
     window.addEventListener(
         TilorswiftEvent.NEW_TERRAIN,
         (event) => {
-            terrain = new Terrain(tileset, event.tilesX, event.tilesY, event.backgroundColor);
+            let tileset = new Tileset(event.tilesetIndex);
+            terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
+            if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
+                document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
+            }
             map.innerHTML = '';
             map.appendChild(terrain.getElement());
+            tilesetPicker.reloadTileset(tileset);
         }
     );
 

tilorswift/style.css

@@ -8,6 +8,9 @@ body {
     margin: 0;
     overflow: hidden;
     font-family: sans-serif;
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center center;
 }
 
 #level {
@@ -90,7 +93,6 @@ body {
     right: 0;
     bottom: 0;
     overflow: scroll;
-    background-color: black;
 }
 
 #tileset-picker {
@@ -104,7 +106,7 @@ body {
     cursor: not-allowed;
 }
 
-#tileset-selector {
+#tileset-selector-widget {
     display: none;
     position: absolute;
     top: 0;
@@ -112,11 +114,11 @@ body {
     box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
 }
 
-#tileset-picker:hover > #tileset-selector {
+#tileset-picker:hover > #tileset-selector-widget {
     display: block;
 }
 
-#tileset-picker.widget-disabled:hover > #tileset-selector {
+#tileset-picker.widget-disabled:hover > #tileset-selector-widget {
     display: none;
 }
 
@@ -242,6 +244,54 @@ body {
     cursor: pointer;
 }
 
+#tileset-selector {
+    position: relative;
+}
+
+#tileset-avatar {
+    width: 96px;
+    height: 96px;
+    background-size: auto 100%;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+#tileset-list {
+    position: absolute;
+    top: 20px;
+    left: 116px;
+    display: none;
+    padding: 10px;
+    background-color: #cccccc;
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+}
+
+.tileset {
+    display: table-row;
+    cursor: pointer;
+}
+
+.tileset:hover {
+    background-color: #5555cc;
+}
+
+.tileset-thumbnail {
+    display: table-cell;
+    width: 32px;
+    height: 32px;
+    background-size: auto 100%;
+}
+.tileset:hover > .tileset-thumbnail {
+    opacity: 0.5;
+}
+
+.tileset-title {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 10px;
+}
+
 /*
 tr:hover > td > .selection {
     opacity: 0.5;