From feb3f9c8441d9c537133030e372739ddc303d3d1 Mon Sep 17 00:00:00 2001
From: Mal <oliver-bunert@posteo.de>
Date: Wed, 27 Sep 2023 22:05:06 +0200
Subject: [PATCH] Graphic set preview icons can now be specified

---
 js/GraphicSet.js               |  8 ++++++--
 tilorswift/js/Tilorswift.js    |  2 +-
 tilorswift/js/dialog/Dialog.js | 11 +++++++++--
 tilorswift/style.css           |  2 +-
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/js/GraphicSet.js b/js/GraphicSet.js
index a8c29d3..39e3f1b 100644
--- a/js/GraphicSet.js
+++ b/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,
     }
 ];
 
diff --git a/tilorswift/js/Tilorswift.js b/tilorswift/js/Tilorswift.js
index 0c4bad2..7eea964 100644
--- a/tilorswift/js/Tilorswift.js
+++ b/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) {
diff --git a/tilorswift/js/dialog/Dialog.js b/tilorswift/js/dialog/Dialog.js
index 143849f..14810d9 100644
--- a/tilorswift/js/dialog/Dialog.js
+++ b/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));
                     }
                 );
diff --git a/tilorswift/style.css b/tilorswift/style.css
index 7222765..3197ede 100644
--- a/tilorswift/style.css
+++ b/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%;