Support handling vault-content events in the vault UI

static/css/items.css

@@ -38,6 +38,10 @@ div[class|="inventory-item"] .quantity {
   padding: 3px;
 }
 
+div[class|="inventory-item"] .damage.empty{
+  display: none;
+}
+
 div[class|="inventory-item"] .damage {
   position: absolute;
   bottom: 0;

static/js/vault.js

@@ -0,0 +1,81 @@
+var InventoryWidget = function(tableElement) {
+  this.e = $(tableElement);
+  this.slots = new Array();
+
+  this.e.find("td[data-position]").each((function (idx, td) {
+    var slot = new ItemSlot(td);
+    this.slots[slot.getPosition()] = slot;
+  }).bind(this));
+  Caminus.eventPoll.onEvent('vault-contents', this._vaultEvent.bind(this));
+}
+
+InventoryWidget.prototype._vaultEvent = function(evt, payload) {
+  $(payload.items).each((function(idx, item) {
+    var slot = this.slotByPosition(item.position);
+    console.log(slot);
+    slot.updateFromJSON(item);
+  }).bind(this));
+};
+
+InventoryWidget.prototype.slotByPosition = function(pos) {
+  console.log(this);
+  return this.slots[pos];
+}
+
+var ItemSlot = function(tdElement) {
+  this.e = $(tdElement);
+  this.item = $(this.e.find('div[class|="inventory-item"]')[0]);
+}
+
+ItemSlot.prototype.getPosition = function() {
+  return this.e.data('position');
+}
+
+ItemSlot.prototype.updateFromJSON = function(data) {
+  console.log(data.item);
+  this.setMaterial(data.item);
+  this.setDurability(data.durablility);
+  this.setDamage(data.damage);
+  this.setQuantity(data.quantity);
+  this.setName(data.name);
+}
+
+ItemSlot.prototype.setName = function(s) {
+  this.item.data('name', s);
+  this.item.find('.name').html(s);
+}
+
+ItemSlot.prototype.setMaterial = function(id) {
+  console.log(this.item);
+  this.item.data('material', id);
+  this.item.attr('class',"inventory-item-"+id);
+}
+
+ItemSlot.prototype.setQuantity = function(qty) {
+  this.item.data('quantity', qty);
+  this.item.find('.quantity').html(qty);
+}
+
+ItemSlot.prototype.setDamage = function(dmg) {
+  this.item.data('damage', dmg);
+  this.item.find('.damage', "50%");
+  if (dmg == 0)
+    this.item.find('.damage').addClass("empty");
+  else
+    this.item.find('.damage').removeClass("empty");
+}
+
+ItemSlot.prototype.getDamage = function() {
+  return this.item.data('damage');
+}
+
+ItemSlot.prototype.setDurability = function(d) {
+  this.item.data('durability', d);
+  this.setDamage(this.getDamage());
+}
+
+$(document).ready(function() {
+  $('table.inventory').each(function (idx, inventory) {
+    new InventoryWidget(inventory);
+  });
+});