Add interaction between edit grid and inventory

js/game/edit.mjs

@@ -3,6 +3,7 @@ import * as graphics from '../graphics/index.mjs';
 import * as world from '../world/index.mjs';
 import * as consts from '../consts.mjs';
 import * as events from './events.mjs';
+import * as inventory from './inventory.mjs';
 import {modules} from '../data.mjs';
 import {images as assets} from '../assets.mjs';
 
@@ -11,7 +12,6 @@ export let width = 0;
 export let height = 0;
 export let position = [0, 0];
 export let bounds = [0, 0, 0, 0];
-export let currentModule = null;
 
 export function init() {
 	let ship = world.playerShip;
@@ -36,29 +36,34 @@ export function end() {
 
 }
 
-function trueFromVisible(x, y) {
+function positionAdjust(x, y) {
 	let [px, py] = position;
-	return [x - px, y - py];
+	return [x + px, y + py];
 }
 
 export function clickTile(x, y) {
-	if (currentModule !== null) return;
+	if (inventory.currentItem === null) return;
 	let current = getTile(x, y).source;
 	if (current.type !== null) {
 		events.invalidTilePlacement();
 		return;
+	} else {
+		events.tilePlacement();
 	}
 
-	let id = posId(x, y);
+	let pos = positionAdjust(x, y);
-	tiles.set(id, new Tile(x, y, currentModule));
+	let id = posId(...pos);
+	tiles.set(id, new Tile(...pos, inventory.currentItem));
+	inventory.removeItem(...inventory.currentItem.ident);
 }
 
 export function rightClickTile(x, y) {
 	let current = getTile(x, y).source;
-	if (current === null) return;
+	if (current.type === null) return;
 	let { x: tx, y: ty } = current;
 	let id = posId(tx, ty);
 	tiles.set(id, new Tile(tx, ty, null));
+	inventory.addItem(current.type, current.id);
 }
 
 export function getTile(x, y) {
@@ -84,9 +89,12 @@ class Tile {
 		if (module === null) {
 			this.module = null;
 			this.image = null;
+			this.type = null
+			this.id = null;
 		} else {
-			this.module = modules[module.type][module.id];
+			({type: this.type, id: this.id} = module);
-			this.image = assets.modules[module.type][module.id];
+			this.module = modules[this.type][this.id];
+			this.image = assets.modules[this.type][this.id];
 			if (module.type === 'thruster') this.image = this.image.off;
 		}
 		this.x = x;

js/game/events.mjs

@@ -37,3 +37,7 @@ export function endEditing() {
 export function invalidTilePlacement() {
 	// TODO: Play some audio.
 }
+
+export function tilePlacement() {
+	// TODO: Play some audio.
+}

js/game/inventory.mjs

@@ -28,6 +28,10 @@ export function removeItem(type, id) {
 	if (!items.has(mapId)) return;
 	let tile = items.get(mapId);
 	tile.decrease();
+	if (tile.quantity == 0) {
+		items.delete(mapId);
+		currentItem = null;
+	}
 }
 
 export function selectItem(type, id) {

js/graphics/gui.mjs

@@ -74,6 +74,15 @@ function renderItemButton(element) {
 		let [dw, dh] = [element.w * (1 - p), element.h * (1 - p)];
 		context.drawImage(element.image, ox, oy, dw, dh);
 	}
+
+	if (element.quantity > 1) { // CHANGE TO 1
+		context.textAlign = 'right';
+		context.textBaseline = 'bottom';
+		context.fillStyle = '#fff';
+		context.font = 'bold 10pt Consolas';
+		let [ex, ey] = element.end;
+		context.fillText('x' + element.quantity, ex - 2, ey - 2);
+	}
 }
 
 function renderEdit(element) {

js/gui/edit.mjs

@@ -3,6 +3,7 @@ import GuiElement from './element.mjs';
 import GuiItemButton from './item.mjs';
 import {state} from '../game/index.mjs';
 import * as edit from '../game/edit.mjs';
+import * as inventory from './inventory.mjs';
 
 export default class GuiEdit extends GuiElement {
 	constructor(x, y, w = 100, h = 30) {
@@ -11,6 +12,7 @@ export default class GuiEdit extends GuiElement {
 		this.tileWidth = 0;
 		this.tileHeight = 0;
 		this.active = false;
+		this.guiInventory = null;
 	}
 
 	updateTiles() {
@@ -71,5 +73,6 @@ export default class GuiEdit extends GuiElement {
 		}
 
 		this.updateTiles();
+		this.guiInventory.updateTiles();
 	}
 }

js/gui/inventory.mjs

@@ -56,7 +56,8 @@ export default class GuiInventory extends GuiElement {
 
 			let el = new GuiItemButton(tile, onclick, ex, ey, ew, eh, {
 				padding: 0.1,
-				selected: selected
+				selected: selected,
+				quantity: tile.quantity
 			});
 
 			this.append(el);

js/gui/item.mjs

@@ -2,16 +2,18 @@ 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, { padding, selected } = {
+	constructor(tile, onclick, x, y, w = 50, h = 50, {
-		padding: 0,
+		padding = 0,
-		selected: false
+		selected = false,
-	}) {
+		quantity = 1,
+	} = {}) {
 		super(null, onclick, x, y, w, h);
 		this.module = tile.module;
 		this.image = tile.image;
 		this.type = 'itemButton';
 		this.padding = padding;
 		this.selected = selected;
+		this.quantity = quantity
 	}
 
 	click() {

js/gui/misc.mjs

@@ -39,6 +39,10 @@ export class Rect {
 		return [this.x, this.y, this.w, this.h];
 	}
 
+	get end() {
+		return [this.x + this.w, this.y + this.h];
+	}
+
 	get center() {
 		return [this.x + this.w / 2, this.y + this.h / 2];
 	}

js/gui/modules.mjs

@@ -60,5 +60,7 @@ export function game() {
 	inventory.x += 10;
 	inventory.y += 10;
 
+	edit.guiInventory = inventory;
+
 	return shadow;
 }