From 3985bce99d9ad02463b58ee34bc622438fe32bee Mon Sep 17 00:00:00 2001
From: Bill Rossi <bassguitarbill@gmail.com>
Date: Sat, 7 Jun 2025 15:38:35 -0400
Subject: [PATCH] Get spaced tileset images to line up correctly

---
 src/assets.js  |  2 +-
 src/room.js    | 13 +++++++++++--
 src/tileset.js |  7 ++++---
 style.css      |  4 ++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/assets.js b/src/assets.js
index f957ae2..ffdb4c5 100644
--- a/src/assets.js
+++ b/src/assets.js
@@ -54,7 +54,7 @@ export default class Assets {
 
   loadTileset(name, path) {
     return fetch(path).then(rsp => rsp.json()).then(json => {
-      return this.assetMap[name] = new Tileset(this.game, json, name)
+      return this.assetMap[name] = new Tileset(this.game, json, name, path)
     }).then(tileset => this.loadImages(tileset.imagesToLoad))
   }
 
diff --git a/src/room.js b/src/room.js
index ff0eef1..a2b552a 100644
--- a/src/room.js
+++ b/src/room.js
@@ -24,6 +24,8 @@ export default class Room {
       ts.populateImage(assets)
       return ts
     })
+    console.log(this.tilesets)
+    console.log(this)
   }
 
   draw(ctx) {
@@ -70,8 +72,15 @@ export default class Room {
     for (let y = 0; y < layer.height; y++) {
       for (let x = 0; x < layer.width; x++) {
 	const index = x + (y * layer.width)
-	const tileIndex = layer.data[index] - 1
-	const tileset = this.tilesets[0]
+	let tileIndex = layer.data[index] + 1
+	if (tileIndex == 1) continue
+	let tileset = this.json.tilesets
+	    .sort((a, b) => b.firstgid - a.firstgid)
+	    .find(ts => ts.firstgid <= tileIndex)
+	const { firstgid } = tileset
+	tileset = this.tilesets.find(ts => ts.source == tileset.source)
+	tileIndex -= firstgid + 1
+
 	const [sx, sy] = tileset.tileOffset(tileIndex)
 	ctx.drawImage(
 	  tileset.image,
diff --git a/src/tileset.js b/src/tileset.js
index 5b6bfbe..7bb9726 100644
--- a/src/tileset.js
+++ b/src/tileset.js
@@ -1,8 +1,9 @@
 export default class Tileset {
-  constructor(game, json, name) {
+  constructor(game, json, name, source) {
     this.game = game
     this.json = json
     this.name = name
+    this.source = source
     this.tiles = json.tiles || []
   }
 
@@ -30,8 +31,8 @@ export default class Tileset {
 
   tileOffset(index) {
     return [
-      ((index % this.columns) * this.tileWidth),
-      (Math.floor(index / this.columns) * this.tileHeight)
+      ((index % this.columns) * (this.tileWidth + this.json.spacing)),
+      (Math.floor(index / this.columns) * (this.tileHeight + this.json.spacing))
     ]
   }
 
diff --git a/style.css b/style.css
index 4e8eca4..4e27930 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,7 @@
 body {
     background-color: #666;
 }
+
+canvas {
+    image-rendering: pixelated;
+}