Graphic set preview icons can now be specified

js/GraphicSet.js

@@ -8,6 +8,7 @@ let GraphicSet = [
         backgroundImage: null,
         tilePreview: 5,
         primaryTiles: 8,
+        gravity: 2,
     },
     {
         name: 'Moon',
@@ -18,6 +19,7 @@ let GraphicSet = [
         backgroundImage: 'background_earth.jpg',
         tilePreview: 1,
         primaryTiles: 2,
+        gravity: 0.5,
     },
     {
         name: 'Death Star',
@@ -26,8 +28,9 @@ let GraphicSet = [
         scale: 1,
         backgroundColor: '#171721',
         backgroundImage: null,
-        tilePreview: 1,
+        tilePreview: 3,
         primaryTiles: 6,
+        gravity: 2,
     },
     {
         name: 'Nature 2.0',
@@ -36,8 +39,9 @@ let GraphicSet = [
         scale: 3,
         backgroundColor: '#6096ff',
         backgroundImage: null,
-        tilePreview: 5,
+        tilePreview: 46,
         primaryTiles: 3,
+        gravity: 2,
     }
 ];
 

tilorswift/js/Tilorswift.js

@@ -175,7 +175,7 @@ export default class Tilorswift
     {
         this.tileset = new Tileset(tilesetIndex);
         this.level.terrain = new Terrain(this.tileset, tilesX, tilesY, GraphicSet[tilesetIndex].backgroundColor);
-
+        this.level.setGravity(GraphicSet[tilesetIndex].gravity);
         document.body.style.backgroundColor = this.level.getBackgroundColor();
 
         if (GraphicSet[tilesetIndex].backgroundImage !== null) {

tilorswift/js/dialog/Dialog.js

@@ -100,7 +100,12 @@ export default class Dialog
 
                 let htmlThumbnail = document.createElement('div');
                 htmlThumbnail.classList.add('tileset-thumbnail');
-                htmlThumbnail.style.backgroundImage = 'url("../' + Setting.TILESET_LOCATION + graphicSet.tileset + '")';
+
+                const image = new Image();
+                image.src = '../' + Setting.TILESET_LOCATION + graphicSet.tileset;
+
+                htmlThumbnail.style.backgroundImage = 'url(' + image.src + ')';
+                htmlThumbnail.style.backgroundPositionX = -(image.width / graphicSet.tiles) * graphicSet.tilePreview + 'px';
                 htmlTilesetElement.appendChild(htmlThumbnail);
 
                 let htmlTitleElement = document.createElement('div');
@@ -112,7 +117,9 @@ export default class Dialog
                     'click',
                     () => {
                         htmlListElement.style.display = 'none';
-                        htmlAvatarElement.style.backgroundImage = 'url("../' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")';
+                        htmlAvatarElement.style.backgroundImage = 'url(' + image.src + ')';
+                        htmlAvatarElement.style.backgroundPositionX = -96 * graphicSet.tilePreview + 'px';
+
                         window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
                     }
                 );

tilorswift/style.css

@@ -294,7 +294,7 @@ input[type="file"] {
 }
 
 .tileset-thumbnail {
-    display: table-cell;
+    display: block;
     width: 32px;
     height: 32px;
     background-size: auto 100%;