From 500435798f4e219c19180a0b85d21627d7d7ff34 Mon Sep 17 00:00:00 2001
From: Nikita Iryupin <iryupnik@cvut.cz>
Date: Fri, 23 Apr 2021 15:46:52 +0200
Subject: [PATCH] Deleting black pixels on tiles

---
 src/Graphics/Tileset/tileset.js | 16 +++++++++++++++-
 src/game.js                     |  2 +-
 src/gameField.js                |  7 +++----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/Graphics/Tileset/tileset.js b/src/Graphics/Tileset/tileset.js
index d1a7e77..dbbf4d5 100644
--- a/src/Graphics/Tileset/tileset.js
+++ b/src/Graphics/Tileset/tileset.js
@@ -31,7 +31,21 @@ export class Tileset {
 
         var context = canvas.getContext('2d');
         context.drawImage(this.image, x, y, width, height, 0, 0, width, height);
-        return canvas;
+
+        // Remove black bg
+        var imageData = context.getImageData(0, 0, width, height);
+        var data = imageData.data;
+        for (var i = 0; i < data.length; i += 4) {
+            if (data[i] + data[i + 1] + data[i + 2] < 10) {
+                data[i + 3] = 0;
+            }
+        }
+        context.putImageData(imageData, 0, 0);
+
+        // Export as image
+        let img = new Image;
+        img.src = canvas.toDataURL("image/png");
+        return img;
     }
 
     getImageOf(id) {
diff --git a/src/game.js b/src/game.js
index 9bbc845..e8072ad 100644
--- a/src/game.js
+++ b/src/game.js
@@ -23,7 +23,7 @@ export class Game {
             requestAnimationFrame(() => holding(ev));
         });
         addEventListener("keyup", (ev) => {
-           if (prevEv && prevEv.key == ev.key) prevEv = undefined;
+            if (prevEv && prevEv.key == ev.key) prevEv = undefined;
         });
         requestAnimationFrame(() => this.gameField.drawField());
     }
diff --git a/src/gameField.js b/src/gameField.js
index aa4352c..0274bd1 100644
--- a/src/gameField.js
+++ b/src/gameField.js
@@ -56,12 +56,11 @@ export class GameField {
             for (let y = 0; y <= this.GAME_HEIGHT; y += 1) {
                 let id = map[x + y * this.GAME_WIDTH];
 
+                this.ctx.fillStyle = "black";
+                this.ctx.fillRect(x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
+
                 if (id != 0) {
                     this.ctx.drawImage(this.tileset.getImageOf(id), x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
-
-                } else {
-                    this.ctx.fillStyle = "black";
-                    this.ctx.fillRect(x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
                 }
             }
         }