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	false
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: false,
  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: false,
    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() {
      this.on("pick", (c) => this.collectItem(c))
      this.onCollide("condition", (c) => (this.currentCondition = c))
      this.on("respawn", () => {
        this.updateInventoryDisplay()
        this.trigger("show inventory")
        if (param.deleteOnRespawn) for (const e of this.currentInventory) e.count = 0
      })
      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.speakBox) this.inventorySetup()
      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")
      }
    },
    inventorySetup() {
      const h = param.speakHeight + param.speakPadding * 2
      this.speakBox = add([opacity(0.5), pos(0, -h), fixed()])
      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()
    },
    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
        }
      }
    },
  }
}