Player UI

gistfile1.js

// Add a cubbyhole to represent the head equipment slot associated with the
// player
var headCub = game.createCubbyhole();

// adding the new cubbyhole to the player assigns the contents of the cubbyhole
// to the player for ownership purposes
player.addCubbyhole(headCub);

// Add an event handler that fires when an item is dropped into this cubbyhole
headCub.addEvent("drop", function(item) {

   // We test to make sure that any item dropped here must have a head slot
   // property
   if (item.slot != "head") {
      
      // returning false disallows the drop event.
      return false;
   }
   
   // if the item fits in this slot, have the player equip the item.  Note that
   // we are returning the value from the equip event, so if the equip event
   // handler prevents the equip action, we also prevent the item from being
   // dropped in this cubbyhole
   return player.equip(this);
});

// Similarly, add a cubbyhole for the chest
var chestCub = game.createCubbyhole();
player.addCubbyhole(chestCub);
headCub.addEvent("drop", function(item) {
   if (item.slot != "chest") {
      return false;
   }
   return player.equip(this);
});

// and legs
var legCub = game.createCubbyhole();
player.addCubbyhole(legCub);
headCub.addEvent("drop", function(item) {
   if (item.slot != "leg") {
      return false;
   }
   return player.equip(this);
});

// and feet
var feetCub = game.createCubbyhole();
player.addCubbyhole(feetCub);
headCub.addEvent("drop", function(item) {
   if (item.slot != "feet") {
      return false;
   }
   return player.equip(this);
});

// We need a global variable to store the currently equipped item
var equipped = 1;

// Now we create cubbyholes for the quickslots 1 through 0
var equipCubs = [];
for (var int i = 0; i <= 9; i++) {
   
   // execute the following in a closure to caputre the value of i
   function(i) {
      // create a new cubbyhole, and associate it with the player
      var cub = game.createCubbyhole();
      player.addCubbyhole(cub);
      
      // Add a new keybinding to the game engine.  When this keybinding is
      // invoked the item in the associated cubbyhole will be equipped.  The
      // default keys to bind to this actions are the number keys  through 0
      var bind = game.createBinding("Equip Item " + i, i);
      bind.addEvent("invoke", function() {
         player.equip(cub);
         equipped = i;
      });
      
      equipCubs[i] = cub;
   }(i);   
}

// when the mousewheel is scrolled up, switch to the previous item
game.addEvent("mousescrollup", function() {
   eqippped = --equipped % 10;
   player.equip(equipCubs[equipped])
});

// when the mousewheel is scrolled down, switch to the next item
game.addEvent("mousescrolldown", function() {
   eqippped = ++equipped % 10;
   player.equip(equipCubs[equipped])
});


// Let's add the 4 craft cubbyholes
var craftCubs = [];
for (var int i = 0; i < 4; i++) {
   var cub = game.createCubbyhole();
   player.addCubbyhole(cub);
   craftCubs[i] = cub;
}


// And finally we make the inventory cubbyholes
var invCubs = [];
for (var int i = 0; i < 40; i++) {
   var cub = game.createCubbyhole();
   player.addCubbyhole(cub);
   invCubs[i] = cub;
}


// Now we need to build the UI.  We start by creating all of the individual
// panels, that will be assembled into the full interface

// create a UI panel to hold the 4 armor cubbyholes
var armorPanel = new LayoutGrid(4, 1);
armorPanel.append(headCub);
armorPanel.append(chestCub);
armorPanel.append(legCub);
armorPanel.append(feetCub);

// create a UI panel to hold the 4 crafting input cubbyholes
var craftInputPanel = new LayoutGrid(2, 2);
for (var int i = 0; i < 4; i++) {
   craftInputPanel.append(craftCubs[i]);
}

// create a UI panel to hold the crafting output cubbyhole
var craftOutputPanel = new LayoutGrid(1, 1);
craftOutputPanel.append(Crafting.createOutputCubby(craftCubs, 2));

// create a UI panel to hold the player inventory
var invPanel = new LayoutGrid(4, 10);
for (var int i = 0; i < 40; i++) {
   invPanel.append(invCubs[i]);
}

// create a UI panel to hold the player equipment quick slots
var equipPanel = new LayoutGrid(1, 10);
for (var int i = 0; i < 10; i++) {
   equipPanel.append(equipCubs[i]);
}

// arrange the invididual items at the top of the UI into a single panel
var topPanel = new LayoutGrid(1,5);
topPanel.append(armorPanel);
topPanel.append(player.getModelPanel());
topPanel.append(craftInputPanel);
topPanel.append("arrow.png");
topPanel.append(craftOutputPanel);

// and finally arrange everything into the final layout
var charPanel = new LayoutGrid(3,1);
charPanel.append(topPanel);
charPanel.append(invPanel);
charPanel.append(equipPanel);

// create a key binding for the inventory screen, and we're done!
var bind = game.createBinding("Show character", "e");
bind.addEvent("invoke", function() {
   charPanel.show();
});