inventory

How to use

parameters

Parameter	Default Value	Type	Description
legacy	boolean	true
deleteOnRespawn	boolean	true
giveKey	string	'space'
payDistance	number	200
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({
  legacy: true,
  deleteOnRespawn: true,
  giveKey: 'space',
  payDistance: 200,
  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 = {
    legacy: true,
    deleteOnRespawn: true,
    giveKey: 'space',
    payDistance: 200,
    numbers: false,
    itemSize: 40,
    speakHeight: 60,
    speakPadding: 4,
    stackMargin: 20,
    margin: 10,
    updateDelay: 0.2,
    displayDelay: 4,
    textSize: 40,
    textOffset: vec2(10, 34), // [Vec2]
    ...p,
  };
  return {
    currentCondition: null,
    inventory: [],
    id: 'inventory',
    add() {
      let inventoryVisible = false;
      let savedTime = time();
      const currentInventory = [];
      const inventoryHeight = param.speakHeight + param.speakPadding * 2;
      const speakBox = add([opacity(1), pos(0, 0), fixed(), anchor('left')]);
      const toggleInventory = (b = true) => {
        if (inventoryVisible != b)
          tween(
            b ? -inventoryHeight : 0,
            b ? 0 : -inventoryHeight,
            param.updateDelay,
            (v) => (speakBox.pos.y = v),
            easings.easeInSin
          );
        inventoryVisible = b;
        if (b) savedTime = time();
      };
      const initInventoryIcon = (name) => {
        return speakBox.add([
          sprite(name, {
            width: param.itemSize,
          }),
          pos(0, param.speakHeight / 2),
          fixed(),
          scale(0),
          anchor('center'),
          { visible: false },
        ]);
      };
      const numbersDisplay = () => {
        let m = param.speakPadding + param.itemSize / 2;
        for (const e of 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
            );
          }
        }
      };
      const iconsDisplay = () => {
        let m = param.speakPadding + param.itemSize / 2;
        for (const e of 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;
          }
        }
      };
      const updateInventoryDisplay = () => {
        if (param.numbers) numbersDisplay();
        else iconsDisplay();
      };
      const collectItem = (c) => {
        if (c.goesToInventory) {
          this.inventory.push(c.type);
          let b = false;
          for (const e of currentInventory) {
            if (e.type == c.type) {
              b = true;
              e.count++;
              if (!param.numbers) {
                while (e.icons.length < e.count) {
                  const obj = initInventoryIcon(c.type);
                  e.icons.push(obj);
                }
              }
            }
          }
          if (!b) {
            if (param.numbers) {
              const obj = initInventoryIcon(c.type);
              const textObj = speakBox.add([
                text('', {
                  size: param.textSize,
                }),
                pos(0, 0),
                fixed(),
              ]);
              currentInventory.push({
                type: c.type,
                count: 1,
                icon: obj,
                textObj: textObj,
              });
            } else {
              const obj = initInventoryIcon(c.type);
              currentInventory.push({
                type: c.type,
                count: 1,
                icons: [obj],
              });
            }
          }
          updateInventoryDisplay();
        }
      };
      const 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 currentInventory) {
              if (el.type == e.type) {
                const n = Math.min(e.count, el.count);
                el.count -= n;
                e.count -= n;
                updateInventoryDisplay();
              }
            }
          }
          this.currentCondition.checkCondition(this.pos);
        }
      };
      this.on('pick', (c) => collectItem(c));
      this.onCollide('condition', (c) => (this.currentCondition = c));
      this.on('show inventory', () => toggleInventory(true));
      this.on('respawn', () => {
        if (param.deleteOnRespawn) {
          for (const e of currentInventory) e.count = 0;
          this.inventory = [];
        }
        updateInventoryDisplay();
        toggleInventory(true);
      });
      if (param.legacy)
        this.on('legacy', (legacy) => {
          for (const e of legacy)
            if (this.legacyId == e.legacyId && e.inventory)
              for (const item of e.inventory)
                collectItem({ goesToInventory: true, type: item });
        });
      onKeyPress(param.giveKey, () => payCondition());
      this.onUpdate(() => {
        if (
          this.currentCondition != null &&
          this.pos.dist(this.currentCondition.pos) < param.payDistance
        )
          toggleInventory(true);
        else if (inventoryVisible && time() - savedTime > param.displayDelay)
          toggleInventory(false);
      });
    },
  };
}