From: Elias Fleckenstein <eliasfleckenstein@web.de>
Date: Wed, 30 Jun 2021 12:12:35 +0000 (+0200)
Subject: Rework inventory rendering
X-Git-Url: https://git.lizzy.rs/?a=commitdiff_plain;h=0df4a52074fb9e77fbebdb77cc2961ec4449a43a;p=dragonblocks.git

Rework inventory rendering
---

diff --git a/engine/craftfield.js b/engine/craftfield.js
index 38a981b..3f331ac 100644
--- a/engine/craftfield.js
+++ b/engine/craftfield.js
@@ -35,10 +35,10 @@ dragonblocks.Craftfield = class extends dragonblocks.Inventory
 		let self = this;
 		this.resultfield.action = out => {
 			out.add(self.resultfield) && self.reduce();
-		}
+		};
 
 		this.addEventListener("updateStack", _ => {
-			self.update();
+			self.updateResult();
 		});
 	}
 
@@ -47,24 +47,13 @@ dragonblocks.Craftfield = class extends dragonblocks.Inventory
 		return super.calculateWidth() + dragonblocks.settings.inventory.scale * 1.1 * 2;
 	}
 
-	draw(parent, x, y)
-	{
-		if (! super.draw(parent, x, y))
-			return false;
-
-		this.resultfield.draw(this.getDisplay(), dragonblocks.settings.inventory.scale * 0.1 + (this.width + 1) * dragonblocks.settings.inventory.scale * 1.1, dragonblocks.settings.inventory.scale * 0.1 + (this.height / 2 - 0.5) * dragonblocks.settings.inventory.scale * 1.1);
-	}
-
 	reduce()
 	{
-		for (let stack of this.list) {
-			let vstack = new dragonblocks.ItemStack();
-			vstack.addOne(stack);
-		}
-		this.update();
+		for (let stack of this.list)
+			new dragonblocks.ItemStack().addOne(stack);
 	}
 
-	update()
+	updateResult()
 	{
 		this.resultfield.deserialize("");
 
@@ -73,4 +62,11 @@ dragonblocks.Craftfield = class extends dragonblocks.Inventory
 				return this.resultfield.deserialize(recipe.result);
 		}
 	}
+
+	initGraphics()
+	{
+		super.initGraphics();
+
+		this.resultfield.draw(this.display, dragonblocks.settings.inventory.scale * 0.1 + (this.width + 1) * dragonblocks.settings.inventory.scale * 1.1, dragonblocks.settings.inventory.scale * 0.1 + (this.height / 2 - 0.5) * dragonblocks.settings.inventory.scale * 1.1);
+	}
 };
diff --git a/engine/creative_inventory.js b/engine/creative_inventory.js
index e94490d..7b69f5a 100644
--- a/engine/creative_inventory.js
+++ b/engine/creative_inventory.js
@@ -36,6 +36,7 @@ dragonblocks.CreativeInventory = class extends dragonblocks.Inventory
 
 		for (let i = 0; i < this.slots; i++) {
 			let stack = this.list[i];
+
 			stack.addEventListener("update", event => {
 				if (event.stack.refilling)
 					return;
@@ -52,38 +53,45 @@ dragonblocks.CreativeInventory = class extends dragonblocks.Inventory
 		return super.calculateHeight() + dragonblocks.settings.inventory.scale;
 	}
 
-	draw(parent, x, y)
+	update()
+	{
+		if (this.page == -1)
+			this.page++;
+
+		if (this.page == this.pages)
+			this.page--;
+
+		this.pageDisplay.textContent = "Page " + (this.page + 1) + " of " + this.pages;
+
+		for (let slot of this.list)
+			slot.update();
+	}
+
+	initGraphics()
 	{
-		if (! super.draw(parent, x, y))
-			return false;
-
-		let display = this.getDisplay();
-		display.style.height = this.calculateHeight();
-
-		let creativeDisplay = display.appendChild(document.createElement("div"));
-		creativeDisplay.id = "dragonblocks.inventory[" + this.id + "].creative";
-		creativeDisplay.style.height = dragonblocks.settings.inventory.scale + "px";
-		creativeDisplay.style.width = this.calculateWidth() + "px";
-		creativeDisplay.style.left = "0px";
-		creativeDisplay.style.top = super.calculateHeight() + "px";
-		creativeDisplay.style.position = "absolute";
-
-		let pageDisplay = creativeDisplay.appendChild(document.createElement("span"));
-		pageDisplay.id = "dragonblocks.inventory[" + this.id + "].creative.page";
-		pageDisplay.style.color = "#343434";
-		pageDisplay.style.position = "absolute";
-		pageDisplay.style.left = dragonblocks.settings.inventory.scale * 1.1 + "px";
-		pageDisplay.style.width = "100%";
-		pageDisplay.style.fontSize = dragonblocks.settings.inventory.scale / (5 / 3) + "px";
-		pageDisplay.style.height = dragonblocks.settings.inventory.scale / (5 / 3) + "px";
-
-		dblib.centerVertical(pageDisplay);
+		super.initGraphics();
+
+		let pageContainer = this.display.appendChild(document.createElement("div"));
+		pageContainer.style.height = dragonblocks.settings.inventory.scale + "px";
+		pageContainer.style.width = this.calculateWidth() + "px";
+		pageContainer.style.left = "0px";
+		pageContainer.style.top = super.calculateHeight() + "px";
+		pageContainer.style.position = "absolute";
+
+		this.pageDisplay = pageContainer.appendChild(document.createElement("span"));
+		this.pageDisplay.style.color = "#343434";
+		this.pageDisplay.style.position = "absolute";
+		this.pageDisplay.style.left = dragonblocks.settings.inventory.scale * 1.1 + "px";
+		this.pageDisplay.style.width = "100%";
+		this.pageDisplay.style.fontSize = dragonblocks.settings.inventory.scale / (5 / 3) + "px";
+		this.pageDisplay.style.height = dragonblocks.settings.inventory.scale / (5 / 3) + "px";
+
+		dblib.centerVertical(this.pageDisplay);
 
 		let self = this;
 
 		for (let dir of ["left", "right"]) {
-			let arrow = creativeDisplay.appendChild(document.createElement("div"));
-			arrow.id = "dragonblocks.inventory[" + this.id + "].creative.arrow." + dir;
+			let arrow = pageContainer.appendChild(document.createElement("div"));
 			arrow.style.position = "absolute";
 			arrow.style.width = dragonblocks.settings.inventory.scale + "px";
 			arrow.style.height = dragonblocks.settings.inventory.scale + "px";
@@ -95,30 +103,15 @@ dragonblocks.CreativeInventory = class extends dragonblocks.Inventory
 				arrow.style.transform = "rotate(180deg)";
 
 			arrow.addEventListener("click", _ => {
-				if(dir == "right")
+				if (dir == "right")
 					self.page++;
 				else
 					self.page--;
+
 				self.update();
 			});
 
 			dblib.centerVertical(arrow);
 		}
-
-		this.update();
-	}
-
-	update()
-	{
-		if (this.page == -1)
-			this.page++;
-
-		if (this.page == this.pages)
-			this.page--;
-
-		document.getElementById("dragonblocks.inventory[" + this.id + "].creative.page").textContent = "Page " + (this.page + 1) + " of " + this.pages;
-
-		for (let slot of this.list)
-			slot.update();
 	}
 };
diff --git a/engine/inventory.js b/engine/inventory.js
index b714245..d6e5b2e 100644
--- a/engine/inventory.js
+++ b/engine/inventory.js
@@ -26,7 +26,6 @@ dragonblocks.Inventory = class extends EventTarget
 	constructor(slots, columns)
 	{
 		super();
-		this.id = dragonblocks.getToken();
 
 		this.slots = slots;
 		this.columns = columns;
@@ -102,54 +101,21 @@ dragonblocks.Inventory = class extends EventTarget
 
 	draw(parent, x, y)
 	{
-		if (this.display) {
-			let display = this.getDisplay();
-			if (display.parentElement == parent) {
-				display.style.left = x + "px";
-				display.style.top = y + "px";
-				return false;
-			} else {
-				this.remove();
-			}
-		}
-
-		this.display = true;
-
-		let display = parent.appendChild(document.createElement("div"));
-		display.id = "dragonblocks.inventory[" + this.id + "]";
-		display.style.position = "absolute";
-		display.style.left = x + "px";
-		display.style.top = y + "px";
-		display.style.width =  this.calculateWidth() + "px";
-		display.style.height = this.calculateHeight() + "px";
-
-		let scale = dragonblocks.settings.inventory.scale * 1.1;
-		let offset = dragonblocks.settings.inventory.scale * 0.1;
+		if (! this.display)
+			this.initGraphics();
 
-		for (let i in this.list) {
-			let x = i % this.columns;
-			let y = (i - x) / this.columns;
-			this.list[i].draw(display, offset + x * scale, offset + y * scale);
-		}
-
-		return true;
-	}
+		if (this.display.parentElement != parent)
+			this.display = parent.appendChild(this.display);
 
-	remove()
-	{
-		this.getDisplay().remove();
-		this.display = false;
-	}
+		this.display.style.left = x + "px";
+		this.display.style.top = y + "px";
 
-	show()
-	{
-		this.getDisplay().style.visibility = "inherit";
 		this.update();
 	}
 
-	hide()
+	remove()
 	{
-		this.getDisplay().style.visibility = "hidden";
+		this.display.remove();
 	}
 
 	update()
@@ -163,9 +129,21 @@ dragonblocks.Inventory = class extends EventTarget
 		return this.list[i];
 	}
 
-	getDisplay()
+	initGraphics()
 	{
-		return document.getElementById("dragonblocks.inventory[" + this.id + "]");
+		this.display = document.createElement("div");
+		this.display.style.position = "absolute";
+		this.display.style.width =  this.calculateWidth() + "px";
+		this.display.style.height = this.calculateHeight() + "px";
+
+		let scale = dragonblocks.settings.inventory.scale * 1.1;
+		let offset = dragonblocks.settings.inventory.scale * 0.1;
+
+		for (let i in this.list) {
+			let x = i % this.columns;
+			let y = (i - x) / this.columns;
+			this.list[i].draw(this.display, offset + x * scale, offset + y * scale);
+		}
 	}
 };
 
diff --git a/engine/inventory_container.js b/engine/inventory_container.js
index f3d5c2d..525c43b 100644
--- a/engine/inventory_container.js
+++ b/engine/inventory_container.js
@@ -31,54 +31,21 @@ dragonblocks.InventoryContainer = class extends EventTarget
 
 	draw(parent, x, y)
 	{
-		if (this.display) {
-			let display = this.getDisplay();
-			if (display.parentElement == parent) {
-				display.style.left = x + "px";
-				display.style.top = y + "px";
-				return false;
-			} else {
-				this.remove();
-			}
-		}
+		if (! this.display)
+			this.initGraphics();
 
-		let display = parent.appendChild(document.createElement("div"));
-		display.id = "dragonblocks.inventoryContainer[" + this.inventory.id + "]";
-		display.style.width = this.calculateWidth() + "px";
-		display.style.height = this.calculateHeight() + "px";
-		display.style.left = x + "px";
-		display.style.top = y + "px";
+		if (this.display.parentElement != parent)
+			this.display = parent.appendChild(this.display);
 
-		this.inventory.draw(display, dragonblocks.settings.inventory.scale * 1.1 * this.left, dragonblocks.settings.inventory.scale * 1.1 * this.top);
+		this.display.style.left = x + "px";
+		this.display.style.top = y + "px";
 
-		this.display = true;
-		return true;
-	}
-
-	serialize()
-	{
-		return this.inventory.serialize();
-	}
-
-	deserialize(str)
-	{
-		this.inventory.deserialize(str);
+		this.inventory.draw(this.display, dragonblocks.settings.inventory.scale * 1.1 * this.left, dragonblocks.settings.inventory.scale * 1.1 * this.top);
 	}
 
 	remove()
 	{
-		this.getDisplay().remove();
-	}
-
-	show()
-	{
-		this.getDisplay().style.visibility = "inherit";
-		this.update();
-	}
-
-	hide()
-	{
-		this.getDisplay().style.visibility = "hidden";
+		this.display.remove();
 	}
 
 	calculateWidth()
@@ -91,13 +58,10 @@ dragonblocks.InventoryContainer = class extends EventTarget
 		return this.inventory.calculateHeight() + dragonblocks.settings.inventory.scale * 1.1 * (this.top + this.bottom);
 	}
 
-	getDisplay()
-	{
-		return document.getElementById("dragonblocks.inventoryContainer[" + this.inventory.id + "]");
-	}
-
-	update()
+	initGraphics()
 	{
-		this.inventory.update();
+		this.display = document.createElement("div");
+		this.display.style.width = this.calculateWidth() + "px";
+		this.display.style.height = this.calculateHeight() + "px";
 	}
 };
diff --git a/engine/inventory_group.js b/engine/inventory_group.js
index 098f993..909bbe4 100644
--- a/engine/inventory_group.js
+++ b/engine/inventory_group.js
@@ -25,37 +25,33 @@ dragonblocks.InventoryGroup = class
 {
 	constructor()
 	{
-		this.id = dragonblocks.getToken();
-
-		this._elements = [];
+		this.elements = [];
 		this.opened = false;
 
-		let display = dragonblocks.addInventoryMenuDisplay(document.createElement("div"));
-		display.id = "dragonblocks.inventoryGroup[" + this.id + "]";
-		display.style.position = "fixed";
-		display.style.backgroundColor = "#535353";
-		display.style.visibility = "hidden";
+		this.display = dragonblocks.addInventoryMenuDisplay(document.createElement("div"));
+		this.display.style.position = "fixed";
+		this.display.style.backgroundColor = "#535353";
+		this.display.style.visibility = "hidden";
 	}
 
 	close()
 	{
 		this.opened = false;
 
-		document.getElementById("dragonblocks.inventoryGroup[" + this.id + "]").style.visibility = "hidden";
-		dragonblocks.outStack.getDisplay().style.visibility = "hidden";
-
-		if(this.onNextClose)
-			this.onNextClose();
+		this.display.style.visibility = "hidden";
+		dragonblocks.outStack.display.style.visibility = "hidden";
 
-		this.onNextClose = null;
+		this.onNextClose = this.onNextClose && this.onNextClose();
 	}
 
 	open()
 	{
 		this.opened = true;
 
-		document.getElementById("dragonblocks.inventoryGroup[" + this.id + "]").style.visibility = "inherit";
-		dragonblocks.outStack.getDisplay().style.visibility = "visible";
+		this.display.style.visibility = "inherit";
+		dragonblocks.outStack.display.style.visibility = "visible";
+
+		this.update();
 	}
 
 	toggle()
@@ -63,34 +59,31 @@ dragonblocks.InventoryGroup = class
 		this.opened ? this.close() : this.open();
 	}
 
-	set elements(elements)
+	update()
 	{
-		for (let element of this.elements)
-			element.hide();
-
-		this._elements = elements;
-
-		let container = document.getElementById("dragonblocks.inventoryGroup[" + this.id + "]");
-
 		let height = 0;
 		let width = 0;
 
 		for (let element of this.elements) {
-			element.draw(container, 0, height);
+			element.draw(this.display, 0, height);
 			height += element.calculateHeight();
 			width = Math.max(width, element.calculateWidth());
-			element.show();
 		}
 
-		container.style.width = width + "px";
-		container.style.height = height + "px";
+		this.display.style.width = width + "px";
+		this.display.style.height = height + "px";
 
-		dblib.center(container);
-		dblib.centerVertical(container);
+		dblib.center(this.display);
+		dblib.centerVertical(this.display);
 	}
 
-	get elements()
+	setElements(elements)
 	{
-		return this._elements;
+		for (let element of this.elements)
+			element.remove();
+
+		this.elements = elements;
+
+		this.update();
 	}
 };
diff --git a/engine/item_stack.js b/engine/item_stack.js
index 5024bb3..53ad772 100644
--- a/engine/item_stack.js
+++ b/engine/item_stack.js
@@ -29,7 +29,6 @@ dragonblocks.ItemStack = class extends EventTarget
 
 		this.count = 0;
 		this.item = null;
-		this.id = dragonblocks.getToken();
 
 		if (itemstring)
 			this.deserialize(itemstring);
@@ -143,38 +142,29 @@ dragonblocks.ItemStack = class extends EventTarget
 		return this.addItems(itemstack, Math.ceil(itemstack.count / 2));
 	}
 
-	getDisplay()
-	{
-		return document.getElementById("dragonblocks.itemstack[" + this.id + "]");
-	}
-
 	draw(parent, x, y)
 	{
-		let display = parent.appendChild(document.createElement("div"));
-		display.id = "dragonblocks.itemstack[" + this.id + "]";
-		display.stackid = this.id;
-		display.style.borderStyle = "solid";
-		display.style.borderWidth = "1px";
-		display.style.borderColor = "#2D2D2D";
-		display.style.width = dragonblocks.settings.inventory.scale + "px";
-		display.style.height = dragonblocks.settings.inventory.scale + "px";
-		display.style.backgroundColor = "#343434";
-		display.style.position = "absolute";
-		display.style.left = x + "px";
-		display.style.top = y + "px";
-
-		let countDisplay = display.appendChild(document.createElement("span"));
-		countDisplay.id = "dragonblocks.itemstack[" + this.id + "].count";
-		countDisplay.stackid = this.id;
-		countDisplay.style.position = "absolute";
-		countDisplay.style.right = "5px";
-		countDisplay.style.bottom = "5px";
-		countDisplay.style.color = "white";
-		countDisplay.style.cursor = "default";
+		this.display = parent.appendChild(document.createElement("div"));
+		this.display.style.borderStyle = "solid";
+		this.display.style.borderWidth = "1px";
+		this.display.style.borderColor = "#2D2D2D";
+		this.display.style.width = dragonblocks.settings.inventory.scale + "px";
+		this.display.style.height = dragonblocks.settings.inventory.scale + "px";
+		this.display.style.backgroundColor = "#343434";
+		this.display.style.position = "absolute";
+		this.display.style.left = x + "px";
+		this.display.style.top = y + "px";
+
+		this.countDisplay = this.display.appendChild(document.createElement("span"));
+		this.countDisplay.style.position = "absolute";
+		this.countDisplay.style.right = "5px";
+		this.countDisplay.style.bottom = "5px";
+		this.countDisplay.style.color = "white";
+		this.countDisplay.style.cursor = "default";
 
 		let self = this;
 
-		display.addEventListener("mousedown", event => {
+		this.display.addEventListener("mousedown", event => {
 			let out = dragonblocks.outStack;
 
 			if (self.action)
@@ -196,12 +186,12 @@ dragonblocks.ItemStack = class extends EventTarget
 			}
 		});
 
-		display.addEventListener("mouseover", event => {
+		this.display.addEventListener("mouseover", event => {
 			self.focused = true;
 			self.redraw();
 		});
 
-		display.addEventListener("mouseleave", event => {
+		this.display.addEventListener("mouseleave", event => {
 			self.focused = false;
 			self.redraw();
 		});
@@ -215,31 +205,27 @@ dragonblocks.ItemStack = class extends EventTarget
 
 	redraw()
 	{
-		let display = this.getDisplay();
-
-		if (! display)
+		if (! this.display)
 			return;
 
-		let countDisplay = document.getElementById("dragonblocks.itemstack[" + this.id + "].count");
-
 		if (this.item) {
 			let item = this.toItem();
 
-			display.title = item.desc;
-			display.style.background = dragonblocks.getTexture(item.texture);
+			this.display.title = item.desc;
+			this.display.style.background = dragonblocks.getTexture(item.texture);
 
 			if (this.count > 1)
-				countDisplay.innerHTML = this.count;
+				this.countDisplay.innerHTML = this.count;
 			else
-				countDisplay.innerHTML = "";
+				this.countDisplay.innerHTML = "";
 		} else {
-			display.title = "";
-			display.style.background = "none";
+			this.display.title = "";
+			this.display.style.background = "none";
 
-			countDisplay.innerHTML = "";
+			this.countDisplay.innerHTML = "";
 		}
 
-		display.style.backgroundColor = this.focused ? "#7E7E7E" : "#343434";
+		this.display.style.backgroundColor = this.focused ? "#7E7E7E" : "#343434";
 
 		this.trigger("redraw");
 	}
diff --git a/engine/out_stack.js b/engine/out_stack.js
index 3a5380f..00c12a7 100644
--- a/engine/out_stack.js
+++ b/engine/out_stack.js
@@ -22,25 +22,23 @@
  */
 
 dragonblocks.addInventoryMenuDisplay = elem => {
-	return document.body.insertBefore(elem, dragonblocks.outStack.getDisplay());
+	return document.body.insertBefore(elem, dragonblocks.outStack.display);
 };
 
 setTimeout(_ => {
 	let out = dragonblocks.outStack = new dragonblocks.ItemStack();
 
 	out.draw(document.body, 0, 0);
-	out.getDisplay().style.position = "fixed";
+	out.display.style.position = "fixed";
 
 	out.addEventListener("redraw", _ => {
-		let display = out.getDisplay();
-		display.style.backgroundColor = "";
-		display.style.border = "none";
+		out.display.style.backgroundColor = "";
+		out.display.style.border = "none";
 	});
 
 	addEventListener("mousemove", event => {
-		let display = out.getDisplay();
-		display.style.left = event.clientX + 5 + "px";
-		display.style.top = event.clientY + 5 + "px";
+		out.display.style.left = event.clientX + 5 + "px";
+		out.display.style.top = event.clientY + 5 + "px";
 	});
 
 	out.update();
diff --git a/engine/player.js b/engine/player.js
index 02155e2..344c315 100644
--- a/engine/player.js
+++ b/engine/player.js
@@ -345,14 +345,12 @@ dragonblocks.Player = class extends dragonblocks.SpawnedEntity
 
 	setInventoryElements(elems)
 	{
-		this.tmp.inventory.elements = elems;
+		this.tmp.inventory.setElements(elems);
 	}
 
 	resetInventoryElements()
 	{
-		let elems = [this.tmp.mainInventory];
-		elems.unshift(this.gamemode == "creative" ? this.tmp.creativeInventory : this.tmp.survivalInventory);
-		this.setInventoryElements(elems);
+		this.setInventoryElements([this.gamemode == "creative" ? this.tmp.creativeInventory : this.tmp.survivalInventory, this.tmp.mainInventory]);
 	}
 
 	previousItem()
diff --git a/game/furnace/api.js b/game/furnace/api.js
index a2d757b..f04a3f0 100644
--- a/game/furnace/api.js
+++ b/game/furnace/api.js
@@ -1,6 +1,8 @@
 furnace.recipes = [];
-furnace.registerRecipe = function(obj){
-	if(! obj || ! obj.input || ! obj.output || ! obj.time)
+
+furnace.registerRecipe = def => {
+	if (! def || ! def.input || ! def.output || ! def.time)
 		return;
-	furnace.recipes.push(obj);
-}
+
+	furnace.recipes.push(def);
+};
diff --git a/game/furnace/init.js b/game/furnace/init.js
index 090ca77..d396712 100644
--- a/game/furnace/init.js
+++ b/game/furnace/init.js
@@ -1,4 +1,7 @@
 furnace = {};
-$.getScript(dragonblocks.getModpath("furnace") + "/api.js");
-$.getScript(dragonblocks.getModpath("furnace") + "/inventory.js");
-$.getScript(dragonblocks.getModpath("furnace") + "/itemdef.js");
+
+let modpath = dragonblocks.getModpath("furnace");
+
+$.getScript(modpath + "/api.js");
+$.getScript(modpath + "/inventory.js");
+$.getScript(modpath + "/itemdef.js");
diff --git a/game/furnace/inventory.js b/game/furnace/inventory.js
index d28ba3b..409652e 100644
--- a/game/furnace/inventory.js
+++ b/game/furnace/inventory.js
@@ -1,5 +1,7 @@
-furnace.Inventory = class extends dragonblocks.InventoryContainer{
-	constructor(){
+furnace.Inventory = class extends dragonblocks.InventoryContainer
+{
+	constructor()
+	{
 		super({
 			inventory: new dragonblocks.Inventory(4, 2),
 			top: 1,
@@ -7,114 +9,147 @@ furnace.Inventory = class extends dragonblocks.InventoryContainer{
 			left: 4,
 			right: 2,
 		});
+
 		let self = this;
+
 		this.input = new dragonblocks.ItemStack();
 		this.input.addEventListener("update", _ => {
 			self.update();
 		});
+
 		this.fuel = new dragonblocks.ItemStack();
 		this.fuel.addEventListener("update", _ => {
 			self.update();
 		});
-		this.burnProgressDisplay = new dragonblocks.ItemStack();
-		this.burnProgressDisplay.deserialize("furnace:burn_progress_0");
-		this.burnProgressDisplay.action = _ => {};
-		this.burnProgressDisplay.addEventListener("redraw", _ => {
-			dragonblocks.Inventory.getStackDisplay(self.burnProgressDisplay.id).style.backgroundColor = "";
-			dragonblocks.Inventory.getStackDisplay(self.burnProgressDisplay.id).style.border = "none";
+
+		this.burnProgressStack = new dragonblocks.ItemStack();
+		this.burnProgressStack.deserialize("furnace:burn_progress_0");
+		this.burnProgressStack.action = _ => {};
+		this.burnProgressStack.addEventListener("redraw", event => {
+			event.stack.display.style.backgroundColor = "";
+			event.stack.display.style.border = "none";
 		});
-		this.fuelProgressDisplay = new dragonblocks.ItemStack();
-		this.fuelProgressDisplay.deserialize("furnace:fuel_progress_0");
-		this.fuelProgressDisplay.action = _ => {};
-		this.fuelProgressDisplay.addEventListener("redraw", _ => {
-			dragonblocks.Inventory.getStackDisplay(self.fuelProgressDisplay.id).style.backgroundColor = "";
-			dragonblocks.Inventory.getStackDisplay(self.fuelProgressDisplay.id).style.border = "none";
+
+		this.fuelProgressStack = new dragonblocks.ItemStack();
+		this.fuelProgressStack.deserialize("furnace:fuel_progress_0");
+		this.fuelProgressStack.action = _ => {};
+		this.fuelProgressStack.addEventListener("redraw", event => {
+			event.stack.display.style.backgroundColor = "";
+			event.stack.display.style.border = "none";
 		});
+
 		this.clear();
 		this.clearFuel();
+
 		this.update();
 	}
-	draw(parent, x, y){
-		if(! super.draw(parent, x, y))
-			return false;
-		this.input.draw(this.getDisplay(), 2 * dragonblocks.settings.inventory.scale * 1.1, 0.5 * dragonblocks.settings.inventory.scale * 1.1);
-		this.burnProgressDisplay.draw(this.getDisplay(), 3 * dragonblocks.settings.inventory.scale * 1.1, 1.5 * dragonblocks.settings.inventory.scale * 1.1);
-		this.fuelProgressDisplay.draw(this.getDisplay(), 2 * dragonblocks.settings.inventory.scale * 1.1, 1.5 * dragonblocks.settings.inventory.scale * 1.1);
-		this.fuel.draw(this.getDisplay(), 2 * dragonblocks.settings.inventory.scale * 1.1, 2.5 * dragonblocks.settings.inventory.scale * 1.1);
-		return true;
+
+	initGraphics()
+	{
+		super.initGraphics();
+
+		this.input.draw(this.display, 2 * dragonblocks.settings.inventory.scale * 1.1, 0.5 * dragonblocks.settings.inventory.scale * 1.1);
+		this.fuel.draw(this.display, 2 * dragonblocks.settings.inventory.scale * 1.1, 2.5 * dragonblocks.settings.inventory.scale * 1.1);
+		this.burnProgressStack.draw(this.display, 3 * dragonblocks.settings.inventory.scale * 1.1, 1.5 * dragonblocks.settings.inventory.scale * 1.1);
+		this.fuelProgressStack.draw(this.display, 2 * dragonblocks.settings.inventory.scale * 1.1, 1.5 * dragonblocks.settings.inventory.scale * 1.1);
 	}
-	isEmpty(){
+
+	isEmpty()
+	{
 		return this.inventory.isEmpty() && ! this.fuel.item && ! this.input.item;
 	}
-	deserialize(str){
-		let obj = JSON.parse(str);
-		this.inventory.deserialize(obj.inventory);
-		this.input.deserialize(obj.input);
-		this.fuel.deserialize(obj.fuel);
+
+	deserialize(str)
+	{
+		let data = JSON.parse(str);
+
+		this.inventory.deserialize(data.inventory);
+		this.input.deserialize(data.input);
+		this.fuel.deserialize(data.fuel);
 	}
-	serialize(){
+
+	serialize()
+	{
 		return JSON.stringify({
 			inventory: this.inventory.serialize(),
 			input: this.input.serialize(),
-			fuel: this.fuel.serializes()
+			fuel: this.fuel.serialize()
 		});
 	}
-	getRecipe(){
-		for(let recipe of furnace.recipes)
-			if(dragonblocks.itemMatch(recipe.input, this.input.item))
+
+	getRecipe()
+	{
+		for (let recipe of furnace.recipes)
+			if (dragonblocks.itemMatch(recipe.input, this.input.item))
 				return recipe;
 	}
-	getRecipeOutput(){
+
+	getRecipeOutput()
+	{
 		return this.getRecipe() && this.getRecipe().output;
 	}
-	getRecipeTime(){
+
+	getRecipeTime()
+	{
 		return this.getRecipe() && this.getRecipe().time || 1;
 	}
-	clear(){
+
+	clear()
+	{
 		this.burnProgress = 0;
 		clearInterval(this.burnInterval);
 		this.burning = false;
 	}
-	clearFuel(){
+
+	clearFuel()
+	{
 		this.fuelPower = this.fullFuelPower = 0;
 		clearInterval(this.fuelInterval);
 		this.fuelBurning = false;
 	}
-	update(){
-		super.update();
+
+	update()
+	{
 		let self = this;
-		if(! this.getRecipeOutput())
+
+		if (! this.getRecipeOutput()) {
 			this.clear();
-		else if(this.burnProgress > this.getRecipeTime()){
-			this.inventory.add(this.getRecipeOutput())
+		} else if (this.burnProgress > this.getRecipeTime()) {
+			this.inventory.add(this.getRecipeOutput());
 			this.clear();
+
 			this.input.count--;
 			this.input.update();
-		}
-		else if(! this.burning){
+		} else if (! this.burning) {
 			this.burnInterval = setInterval(_ => {
 				self.burnProgress++;
 				self.update();
 			}, 1000);
+
 			this.burning = true;
 		}
-		if(this.fuelBurning && this.fuelPower <= 0)
+
+		if (this.fuelBurning && this.fuelPower <= 0)
 			this.clearFuel();
-		if(! this.fuelBurning && this.burning){
-			if(this.fuel.toItem() && this.fuel.toItem().flammable){
+
+		if (! this.fuelBurning && this.burning) {
+			if (this.fuel.toItem() && this.fuel.toItem().flammable) {
 				this.fuelBurning = true;
 				this.fullFuelPower = this.fuelPower = this.fuel.toItem().hardness;
+
 				this.fuelInterval = setInterval(_ => {
 					self.fuelPower--;
 					self.update();
 				}, 1000);
+
 				this.fuel.count--;
 				this.fuel.update();
-			}
-			else
+			} else {
 				this.clear();
+			}
 		}
-		this.burnProgressDisplay.deserialize("furnace:burn_progress_" + parseInt(this.burnProgress / this.getRecipeTime() * 5));
-		this.fuelProgressDisplay.deserialize("furnace:fuel_progress_" + (parseInt(this.fuelPower / this.fullFuelPower * 5) || 0));
+
+		this.burnProgressStack.deserialize("furnace:burn_progress_" + parseInt(this.burnProgress / this.getRecipeTime() * 5));
+		this.fuelProgressStack.deserialize("furnace:fuel_progress_" + (parseInt(this.fuelPower / this.fullFuelPower * 5) || 0));
 	}
 }
diff --git a/game/furnace/itemdef.js b/game/furnace/itemdef.js
index 4c0135c..837e610 100644
--- a/game/furnace/itemdef.js
+++ b/game/furnace/itemdef.js
@@ -7,14 +7,18 @@ dragonblocks.registerNode({
 	stable: true,
 	onset: (map, x, y) => {
 		let meta = map.getNode(x, y).meta;
+
 		meta.inventory = new furnace.Inventory();
-		if(meta.inventoryString)
-			meta.inventory.ceserialize(meta.inventoryString);
+
+		if (meta.inventoryString)
+			meta.inventory.deserialize(meta.inventoryString);
 	},
 	onclick: (map, x, y) => {
 		let meta = map.getNode(x, y).meta;
+
 		dragonblocks.player.setInventoryElements([meta.inventory, dragonblocks.player.tmp.mainInventory]);
 		dragonblocks.player.openInventory();
+
 		dragonblocks.player.onNextInventoryClose = _ => {
 			dragonblocks.player.resetInventoryElements();
 			meta.inventoryString = meta.inventory.serialize();
@@ -24,7 +28,8 @@ dragonblocks.registerNode({
 		return map.getNode(x, y).meta.inventory.isEmpty();
 	},
 });
-for(let i = 0; i < 6; i++){
+
+for (let i = 0; i < 6; i++) {
 	dragonblocks.registerItem({
 		name: "furnace:burn_progress_" + i,
 		texture: "furnace_burn_progress_" + i + ".png",
@@ -32,6 +37,7 @@ for(let i = 0; i < 6; i++){
 		hidden: true,
 		desc: "",
 	});
+
 	dragonblocks.registerItem({
 		name: "furnace:fuel_progress_" + i,
 		texture: "furnace_fuel_progress_" + i + ".png",