Add inventory

js/gui/inventory.mjs

@@ -0,0 +1,90 @@
+import * as gui from './index.mjs';
+import GuiElement from './element.mjs';
+import GuiItemButton from './item.mjs';
+import {state} from '../game/index.mjs';
+import * as inventory from '../game/inventory.mjs';
+
+export default class GuiInventory extends GuiElement {
+	constructor(x, y, w = 100, h = 30) {
+		super(x, y, w, h);
+		this.type = 'inventory';
+		this.tileWidth = 4;
+		this.tileHeight = 5;
+		this.currentPage = 0;
+	}
+
+	updateTiles() {
+		this.children.clear();
+
+		let tileRatio = this.tileWidth / this.tileHeight;
+		let rectRatio = this.w / this.h;
+		let tileSize;
+		let [ox, oy] = [0, 0];
+
+		if (tileRatio < rectRatio) {
+			tileSize = this.h / this.tileHeight;
+			ox = (this.w - (tileSize * this.tileWidth)) / 2;
+		} else {
+			tileSize = this.w / this.tileWidth;
+			oy = (this.h - (tileSize * this.tileHeight)) / 2;
+		}
+
+		let spacing = 0.15 * tileSize;
+		let pageSize = this.tileWidth * this.tileHeight;
+		let offset = pageSize * this.currentPage;
+		let tiles = inventory.getTiles().slice(offset);
+		let tile;
+
+		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 [ew, eh] = [tileSize - spacing, tileSize - spacing];
+
+			let ident = tile.ident;
+
+			let onclick = (button) => {
+				this.tileClicked(...ident, button);
+			};
+
+			let cur = inventory.currentItem;
+			let selected = cur !== null && tile.type === cur.type
+				&& tile.id === cur.id;
+
+			let el = new GuiItemButton(tile, onclick, ex, ey, ew, eh, {
+				padding: 0.1,
+				selected: selected
+			});
+
+			this.append(el);
+		}
+	}
+
+	tick() {
+		if (state.inventory && !this.active) this.updateTiles();
+		this.active = state.inventory;
+		this.options.draw = this.options.drawChildren = this.active;
+		if (!this.active) return;
+	}
+
+	getTile(x, y) {
+		return this.getTile(x + px, y + py);
+	}
+
+	tileClicked(type, id, button) {
+		if (button == 'left') inventory.selectItem(type, id);
+
+		if (!state.editing) {
+			if (button == 'left') {
+				inventory.addItem(type, id);
+			} else if (button == 'right') {
+				inventory.removeitem(type, id);
+			}
+		}
+
+		this.updateTiles();
+	}
+}

js/gui/item.mjs

@@ -2,11 +2,16 @@ import * as gui from './index.mjs';
 import GuiButton from './button.mjs';
 
 export default class GuiItemButton extends GuiButton {
-	constructor(tile, onclick, x, y, w = 50, h = 50) {
+	constructor(tile, onclick, x, y, w = 50, h = 50, { padding, selected } = {
+		padding: 0,
+		selected: false
+	}) {
 		super(null, onclick, x, y, w, h);
 		this.module = tile.module;
 		this.image = tile.image;
 		this.type = 'itemButton';
+		this.padding = padding;
+		this.selected = selected;
 	}
 
 	click() {

js/gui/modules.mjs

@@ -5,6 +5,7 @@ import GuiFrame from './frame.mjs';
 import GuiImage from './image.mjs';
 import GuiButton from './button.mjs';
 import GuiEdit from './edit.mjs';
+import GuiInventory from './inventory.mjs';
 import * as events from '../game/events.mjs';
 import {state} from '../game/index.mjs';
 
@@ -53,5 +54,11 @@ export function game() {
 	edit.x -= 10;
 	edit.y += 10;
 
+	let inventory = new GuiInventory(0, 0, 0, 0);
+	shadow.append(inventory);
+	inventory.posRelative({x: 0, y: 0, w: 0.4, h: 0.6});
+	inventory.x += 10;
+	inventory.y += 10;
+
 	return shadow;
 }