Forums » Help » Inventory slots problem

So far I'm unable to resolve how to invoke the draw() function from my player inventory class and display the panel which would be the ideal solution.

So now I'm doing the drawing using my HUD entity I wrote, but I'm having issues trying to simplify drawing inventory slots from this which is quite verbose:

// hud.js
drawItemSlot: function(string){
    ig.system.context.beginPath();
    
    switch(string){
        case('head'):
            ig.system.context.rect(this.slots.head.x, this.slots.head.y, this.slots.head.w, this.slots.head.h);
            break;
        case('chest'):
            ig.system.context.rect(this.slots.chest.x, this.slots.chest.y, this.slots.chest.w, this.slots.chest.h);
            break;
        case('weapon'):
            ig.system.context.rect(this.slots.weapon.x, this.slots.weapon.y, this.slots.weapon.w, this.slots.weapon.h);
            break;
        case('comms'):
            ig.system.context.rect(this.slots.chest.x, this.slots.chest.y, this.slots.chest.w, this.slots.chest.h);
            break;
    }
    
    ig.system.context.closePath();
    ig.system.context.fill();
},

to the following which is cleaner but throws an object undefined error in the console. The console traces the object props fine though.

// generates an error when passing an object in from a function called 
drawItemSlot: function(slot){
  ig.system.context.beginPath();
  ig.system.context.rect(slot.x, slot.y. slot.w, slot.h);
  ig.system.context.closePath();
  ig.system.context.fill();
},

Any Chance you can show the code you are using to call this function.

Hi Stuart some more of that code to put it in context..

// hud.js function header stuff..

init: function( x, y, settings ) {
  this.parent( x, y, settings );
  this.name = 'hud';
  
  // Equip slots
  this.slotsize = 50;
  this.slots.offset = {x: 10, y: 70};

  this.slots.head = {x: ig.system.width - (this.slotsize * 2 + 20),
                      y: 10,
                      w: this.slotsize,
                      h: this.slotsize};

  this.slots.chest = {x: ig.system.width - (this.slotsize * 2 + 20),
                      y: this.slots.offset.y,
                      w: this.slotsize,
                      h: this.slotsize};

  this.slots.weapon = {x: ig.system.width - (this.slotsize * 3 + 30),
                      y: this.slots.offset.y,
                      w: this.slotsize,
                      h: this.slotsize};

  this.slots.comms = {x: ig.system.width - (this.slotsize + 10),
                      y: this.slots.offset.y,
                      w: this.slotsize,
                      h: this.slotsize};
},

draw: function(){
  this.parent();
  
  var player = ig.game.player;
  if(player){
    this.inventory();
  }
},

// generates an error when passing an object in from inventory()  function
drawItemSlot: function(slot){
  ig.system.context.beginPath();
  ig.system.context.rect(slot.x, slot.y. slot.w, slot.h);
  ig.system.context.closePath();
  ig.system.context.fill();
},

inventory: function(){
  var x = ig.system.width/2,
    y = 0,
    w = ig.system.width/2,
    h = ig.system.height,
    slotFill = 'rgb(60,60,60)',
    equipSlotStroke = 'rgb(0,125,125)',
    slotStroke = 'rgb(0,0,0)';
  
    if(ig.game.inventory.show){
        // Draw panel
        ig.system.context.fillStyle = 'rgba(125,125,125,0.9)';
        ig.system.context.strokeStyle = equipSlotStroke;
        ig.system.context.beginPath();
        ig.system.context.rect(x, y, w, h);
        ig.system.context.closePath();
        ig.system.context.fill();
        ig.system.context.stroke();
        ig.game.font.draw('Inventory', x + 10, y + 10);
        ig.system.context.fillStyle = slotFill;
  
        // Equip slots
        this.drawItemSlot('head');
        this.drawItemSlot('chest');
        this.drawItemSlot('weapon');
        this.drawItemSlot('comms');
  
    }
},

Syntax error in the drw rect: dot instead of comma.

 ig.system.context.rect(slot.x, slot.y, slot.w, slot.h);

Are These not the objects you want to pass in !

        // Equip slots
        this.drawItemSlot(this.slots.head);
        this.drawItemSlot(this.slots.chest);
        this.drawItemSlot(this.slots.weapon);
        this.drawItemSlot(this.slots.comms);

Yes those are the objects I want to pass in. I'll check whether I introduced that error while copying across the edited version of that script.

Good shout thanks for spotting that!

Cool my inventory class can be called from my HUD entity so the inventory class can handles all its logic from there.