Improve inventory

js/gui/button.mjs

@@ -10,7 +10,7 @@ export default class GuiButton extends GuiElement {
 	}
 
 	click() {
-		if (this.options.draw && !this.options.disabled)
+		if (this.drawn && !this.options.disabled)
 			this.onclick();
 	}
 }

js/gui/element.mjs

@@ -26,6 +26,12 @@ export default class GuiElement extends Rect {
 
 	}
 
+	get drawn() {
+		if (!this.options.drawChildren) return false;
+		if (!this.parent) return true;
+		return this.parent.drawn;
+	}
+
 	append(element) {
 		this.children.add(element);
 		element.parent = this;

js/gui/inventory.mjs

@@ -12,6 +12,7 @@ export default class GuiInventory extends GuiElement {
 		this.tileHeight = 5;
 		this.currentPage = 0;
 		inventory.setOnupdate(this.updateTiles.bind(this));
+		this.guiInfo = null;
 	}
 
 	updateTiles() {
@@ -35,14 +36,15 @@ export default class GuiInventory extends GuiElement {
 		let offset = pageSize * this.currentPage;
 		let tiles = inventory.getTiles().slice(offset);
 		let tile;
+		let cur = inventory.currentItem;
 
 		for (let y = 0; y < this.tileHeight; y++)
 		for (let x = 0; x < this.tileWidth && tiles.length; x++) {
 			let i = y * this.tileWidth + (x % this.tileWidth) + offset;
 			tile = tiles.shift();
 
-			let ex = x * tileSize + spacing / 2 + ox + this.x;
-			let ey = y * tileSize + spacing / 2 + oy + this.y;
+			let ex = x * tileSize + spacing / 2 + ox;
+			let ey = y * tileSize + spacing / 2 + oy;
 			let [ew, eh] = [tileSize - spacing, tileSize - spacing];
 
 			let ident = tile.ident;
@@ -51,7 +53,6 @@ export default class GuiInventory extends GuiElement {
 				this.tileClicked(...ident, button);
 			};
 
-			let cur = inventory.currentItem;
 			let selected = cur !== null && tile.type === cur.type
 				&& tile.id === cur.id;
 
@@ -63,13 +64,18 @@ export default class GuiInventory extends GuiElement {
 
 			this.append(el);
 		}
+
+		this.guiInfo.text = cur === null ? '' : cur.textInfo;
+		this.guiInfo.splitLines();
 	}
 
 	tick() {
 		if (state.inventory && !this.active) this.updateTiles();
 		this.active = state.inventory;
-		this.options.draw = this.options.drawChildren = this.active;
+		this.parent.options.drawChildren = this.active;
 		if (!this.active) return;
+
+		this.children
 	}
 
 	getTile(x, y) {

js/gui/item.mjs

@@ -17,10 +17,12 @@ export default class GuiItemButton extends GuiButton {
 	}
 
 	click() {
-		this.onclick('left');
+		if (this.drawn)
+			this.onclick('left');
 	}
 
 	rightClick() {
-		this.onclick('right');
+		if (this.drawn)
+			this.onclick('right');
 	}
 }

js/gui/modules.mjs

@@ -67,7 +67,7 @@ export function game() {
 	edit.posRelative({w: 1, h: 1});
 
 	let editInfoText = new GuiText('', 0, 0, 0, 0, {
-		size: 10,
+		size: 12,
 		align: 'center'
 	});
 	editShadow.append(editInfoText);
@@ -75,7 +75,7 @@ export function game() {
 	editInfoText.y += 5;
 
 	let editWarnText = new GuiText('', 0, 0, 0, 0, {
-		size: 10,
+		size: 12,
 		align: 'center'
 	});
 	editShadow.append(editWarnText);
@@ -93,18 +93,27 @@ export function game() {
 	invShadow.posRelative({x: 0, w: 0.4, h: 0.6});
 	invShadow.x += 10;
 	invShadow.y += 10;
-	invShadow.h += 60;
 
 	let inventory = new GuiInventory(0, 0, 0, 0);
 	invShadow.append(inventory);
 	inventory.posRelative({w: 1, h: 1});
-	inventory.h -= 60;
+
+	let moduleInfo = new GuiText('test\nline\n', 0, 0, 0, 0, {
+		size: 12,
+		align: 'left',
+		valign: 'top'
+	});
+	invShadow.append(moduleInfo);
+	moduleInfo.posRelative({x: 0, y: 1, w: 1});
+	moduleInfo.splitLines();
+	moduleInfo.y += 5;
+	inventory.guiInfo = moduleInfo;
 
 	edit.guiInventory = inventory;
 
 
 	let notification = new GuiText('', 0, 0, 0, 0, {
-		size: 12,
+		size: 14,
 		align: 'center',
 		valign: 'top'
 	});

js/gui/text.mjs

@@ -1,5 +1,6 @@
 import * as gui from './index.mjs';
 import GuiElement from './element.mjs';
+import {context} from '../graphics/index.mjs';
 
 export default class GuiText extends GuiElement {
 	constructor(text = '', x, y, w, h, {
@@ -14,8 +15,33 @@ export default class GuiText extends GuiElement {
 		this.type = 'text';
 		this.color = color;
 		this.text = text;
-		this.font = size + 'pt Consolas';
+		this.spacing = size * 1.2;
+		this.font = size + 'px Consolas';
 		this.align = align;
 		this.valign = valign;
 	}
+
+	splitLines() {
+		// Not very robust, but good enough for now. Mebe fix later?
+		context.font = this.font;
+		let maxLineLength = (this.w / context.measureText('A').width) | 0;
+		maxLineLength = Math.max(maxLineLength, 1);
+
+		let lines = [];
+		let currentLine = '';
+
+		this.text.split('\n').forEach(l => {
+			currentLine = '';
+			l.split(' ').forEach(word => {
+				if (word.length + currentLine.length > maxLineLength) {
+					lines.push(currentLine.slice(0, -1));
+					currentLine = '';
+				}
+				currentLine += word + ' ';
+			});
+			lines.push(currentLine.slice(0, -1));
+		});
+
+		this.text = lines.join('\n');
+	}
 }