From 986c0479f1aa38b5c1badcfa2951a7b9618fea1f Mon Sep 17 00:00:00 2001 From: asraelite Date: Mon, 5 Mar 2018 16:11:58 +0000 Subject: [PATCH] Add interaction between edit grid and inventory --- js/game/edit.mjs | 26 +++++++++++++++++--------- js/game/events.mjs | 4 ++++ js/game/inventory.mjs | 4 ++++ js/graphics/gui.mjs | 9 +++++++++ js/gui/edit.mjs | 3 +++ js/gui/inventory.mjs | 3 ++- js/gui/item.mjs | 10 ++++++---- js/gui/misc.mjs | 4 ++++ js/gui/modules.mjs | 2 ++ 9 files changed, 51 insertions(+), 14 deletions(-) diff --git a/js/game/edit.mjs b/js/game/edit.mjs index 9a35679..08b2a36 100644 --- a/js/game/edit.mjs +++ b/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); - tiles.set(id, new Tile(x, y, currentModule)); + let pos = positionAdjust(x, y); + 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]; - this.image = assets.modules[module.type][module.id]; + ({type: this.type, id: this.id} = module); + 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; diff --git a/js/game/events.mjs b/js/game/events.mjs index 7d44d94..038bada 100644 --- a/js/game/events.mjs +++ b/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. +} diff --git a/js/game/inventory.mjs b/js/game/inventory.mjs index 8f070bf..54dd286 100644 --- a/js/game/inventory.mjs +++ b/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) { diff --git a/js/graphics/gui.mjs b/js/graphics/gui.mjs index 331f8c0..93c8f11 100644 --- a/js/graphics/gui.mjs +++ b/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) { diff --git a/js/gui/edit.mjs b/js/gui/edit.mjs index cb3bbed..b5ab060 100644 --- a/js/gui/edit.mjs +++ b/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(); } } diff --git a/js/gui/inventory.mjs b/js/gui/inventory.mjs index 489b80a..82fa343 100644 --- a/js/gui/inventory.mjs +++ b/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); diff --git a/js/gui/item.mjs b/js/gui/item.mjs index fa8ea86..3d72031 100644 --- a/js/gui/item.mjs +++ b/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 } = { - padding: 0, - selected: false - }) { + constructor(tile, onclick, x, y, w = 50, h = 50, { + padding = 0, + 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() { diff --git a/js/gui/misc.mjs b/js/gui/misc.mjs index c518d1a..77e5117 100644 --- a/js/gui/misc.mjs +++ b/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]; } diff --git a/js/gui/modules.mjs b/js/gui/modules.mjs index 5f50e6c..387aaf4 100644 --- a/js/gui/modules.mjs +++ b/js/gui/modules.mjs @@ -60,5 +60,7 @@ export function game() { inventory.x += 10; inventory.y += 10; + edit.guiInventory = inventory; + return shadow; }