inventory

How to use

triggers on self"show inventory""hide inventory"

parameters

Parameter	Default Value	Type	Description
giveKey		string	'space'
payDistance		number	200
deleteOnRespawn		boolean	true
numbers		boolean	false
itemSize		number	40
speakHeight		number	60
speakPadding		number	4
stackMargin		number	20
margin		number	10
updateDelay		number	0.2
displayDelay		number	4
textSize		number	40
textOffset		vec2	vec2(10, 34)

example

inventory({
  giveKey: 'space',
  payDistance: 200,
  deleteOnRespawn: true,
  numbers: false,
  itemSize: 40,
  speakHeight: 60,
  speakPadding: 4,
  stackMargin: 20,
  margin: 10,
  updateDelay: 0.2,
  displayDelay: 4,
  textSize: 40,
  textOffset: vec2(10, 34)
}),

Source

component.js

function inventory(p) {
  const param = {
    giveKey: 'space',
    payDistance: 200,
    deleteOnRespawn: true,
    numbers: false,
    itemSize: 40,
    speakHeight: 60,
    speakPadding: 4,
    stackMargin: 20,
    margin: 10,
    updateDelay: 0.2,
    displayDelay: 4,
    textSize: 40,
    textOffset: vec2(10, 34),
    ...p,
  };
  return {
    currentCondition: null,
    currentInventory: [],
    inventoryVisible: false,
    inventorySavedTime: 0,
    speakBox: null,
    id: 'inventory',
    add() {
      requestAnimationFrame((c) => {
        const h = param.speakHeight + param.speakPadding * 2;
        this.speakBox = add([opacity(1), pos(0, 0), fixed(), anchor('left')]);
        for (const e of this.currentInventory) {
          e.icons = [];
          for (let i = 0; i < e.count; i++)
            e.icons.push(this.initInventoryIcon(e.sprite));
        }
        this.updateInventoryDisplay();
      });
      this.on('pick', (c) => this.collectItem(c));
      this.onCollide('condition', (c) => (this.currentCondition = c));
      this.on('respawn', () => {
        if (param.deleteOnRespawn)
          for (const e of this.currentInventory) e.count = 0;
        this.updateInventoryDisplay();
        this.trigger('show inventory');
      });
      this.on('show inventory', () => {
        const h = param.speakHeight + param.speakPadding * 2;
        if (!this.inventoryVisible)
          tween(
            -h,
            0,
            param.updateDelay,
            (v) => (this.speakBox.pos.y = v),
            easings.easeInSin
          );
        this.inventoryVisible = true;
        this.inventorySavedTime = time();
      });
      this.on('hide inventory', () => {
        const h = param.speakHeight + param.speakPadding * 2;
        tween(
          0,
          -h,
          param.updateDelay,
          (v) => (this.speakBox.pos.y = v),
          easings.easeInSin
        );
        this.inventoryVisible = false;
      });
      onKeyPress(param.giveKey, () => this.payCondition());
    },
    update() {
      if (
        this.currentCondition != null &&
        this.pos.dist(this.currentCondition.pos) < param.payDistance
      )
        this.trigger('show inventory');
      else if (
        this.inventoryVisible &&
        time() - this.inventorySavedTime > param.displayDelay
      )
        this.trigger('hide inventory');
    },
    showInventory(b = true) {
      const h = param.speakHeight + param.speakPadding * 2;

      if (!b)
        tween(
          0,
          -h,
          param.updateDelay,
          (v) => (this.speakBox.pos.y = v),
          easings.easeInSin
        );
      else if (!this.inventoryVisible)
        tween(
          -h,
          0,
          param.updateDelay,
          (v) => (this.speakBox.pos.y = v),
          easings.easeInSin
        );
      this.inventoryVisible = b;
      if (b) this.inventorySavedTime = time();
    },
    payCondition(d) {
      if (
        this.currentCondition != null &&
        this.pos.dist(this.currentCondition.pos) < param.payDistance
      ) {
        for (const e of this.currentCondition.conditions) {
          for (const el of this.currentInventory) {
            if (el.type == e.type) {
              const n = Math.min(e.count, el.count);
              el.count -= n;
              e.count -= n;
              this.updateInventoryDisplay();
              this.currentCondition.updateInventoryDisplay();
            }
          }
        }
        this.currentCondition.checkCondition(this.pos);
      }
    },
    collectItem(c) {
      if (c.goesToInventory) {
        let b = false;
        for (const e of this.currentInventory) {
          if (e.type == c.type) {
            b = true;
            e.count++;
            if (!param.numbers) {
              while (e.icons.length < e.count) {
                const obj = this.initInventoryIcon(c.sprite);
                e.icons.push(obj);
              }
            }
          }
        }
        if (!b) {
          if (param.numbers) {
            const obj = this.initInventoryIcon(c.sprite);
            const textObj = this.speakBox.add([
              text('ok', {
                size: param.textSize,
              }),
              pos(0, 0),
              fixed(),
            ]);
            this.currentInventory.push({
              type: c.type,
              count: 1,
              icon: obj,
              textObj: textObj,
            });
          } else {
            const obj = this.initInventoryIcon(c.sprite);
            this.currentInventory.push({
              type: c.type,
              count: 1,
              icons: [obj],
            });
          }
        }
        this.updateInventoryDisplay();
        this.trigger('show inventory');
      }
    },
    initInventoryIcon(name) {
      return this.speakBox.add([
        sprite(name, {
          width: param.itemSize,
        }),
        pos(0, param.speakHeight / 2),
        fixed(),
        scale(0),
        anchor('center'),
        { visible: false },
      ]);
    },
    updateInventoryDisplay() {
      if (param.numbers) this.numbersDisplay();
      else this.iconsDisplay();
    },
    numbersDisplay() {
      let m = param.speakPadding + param.itemSize / 2;
      for (const e of this.currentInventory) {
        if (e.count > 0) {
          const newPos = m;
          if (!e.icon.visible) {
            e.textObj.hidden = false;
            e.icon.pos.x = newPos;
            e.textObj.pos.x = m + param.textOffset.x;
            tween(
              0,
              1,
              param.updateDelay,
              (v) => e.icon.scaleTo(v),
              easings.easeInSin
            );
          } else {
            tween(
              e.icon.pos.x,
              newPos,
              param.updateDelay,
              (v) => {
                e.icon.pos.x = v;
                e.textObj.pos.x = v + param.textOffset.y;
              },
              easings.easeInSin
            );
          }
          e.icon.visible = true;
          e.textObj.text = e.count;
          e.textObj.pos.y = param.textOffset.y;
          m +=
            param.margin +
            Math.max(
              e.icon.width,
              e.icon.width / 2 + e.textObj.width + paaram.textOffset.x
            );
        } else if (e.icon.visible) {
          e.icon.visible = false;
          e.textObj.hidden = true;
          tween(
            1,
            0,
            param.updateDelay,
            (v) => e.icon.scaleTo(v),
            easings.easeInSin
          );
        }
      }
    },
    iconsDisplay() {
      let m = param.speakPadding + param.itemSize / 2;
      for (const e of this.currentInventory) {
        for (let i = 0; i < e.icons.length; i++) {
          if (i < e.count) {
            const newPos = m;
            if (!e.icons[i].visible) {
              e.icons[i].pos.x = newPos;
              tween(
                0,
                1,
                param.updateDelay,
                (v) => e.icons[i].scaleTo(v),
                easings.easeInSin
              );
            } else
              tween(
                e.icons[i].pos.x,
                newPos,
                param.updateDelay,
                (v) => (e.icons[i].pos.x = v),
                easings.easeInSin
              );
            e.icons[i].visible = true;
            e.icons[i].z = m;
            m += param.stackMargin;
          } else {
            if (e.icons[i].visible)
              tween(
                1,
                0,
                param.updateDelay,
                (v) => e.icons[i].scaleTo(v),
                easings.easeInSin
              );
            e.icons[i].visible = false;
          }
        }
        if (e.count > 0) {
          m -= param.stackMargin;
          m += e.icons[0].width;
          m += param.margin;
        }
      }
    },
  };
}