Support handling vault-content events in the vault UI

templates/common/item.html

@@ -1,12 +1,12 @@
-<div class="inventory-item-{{item.material}}">
-  {% if quantity > 0 %}
-  <div class="quantity">{{quantity}}</div>
+<div class="inventory-item-{{item.material}}" data-material="{{item.material}}"
+  data-quantity="{{quantity}}" data-damage="{{item.damage}}">
+  <div class="quantity">
+    {% if quantity > 0 %}{{quantity}}
+  </div>
   {% endif %}
   <div class="name">{{item.name}}</div>
-  {% if item.damage %}
-    <div class="damage">
-      <div class="current"
-        style="width:{{item.damagePct}}%"></div>
-    </div>
-  {% endif %}
+  <div class="damage {% if not item.damage %}empty{%endif%}">
+    <div class="current"
+      style="width:{{item.damagePct}}%"></div>
+  </div>
 </div>

templates/vault/index.html

@@ -1,8 +1,14 @@
 {% extends "base_simple.html" %}
+{%load static %}
+{% get_static_prefix as STATIC_PREFIX %}
 
 {% block title %}Vault{% endblock %}
 {% block sectiontitle %}Your Vault{% endblock %}
 
+{% block extrahead %}
+<script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/vault.js"></script>
+{% endblock %}
+
 {% block content %}
 <table class="inventory">
   <tr>
@@ -11,10 +17,8 @@
       </tr>
       <tr>
     {% endif %}
-    <td>
-      {% if slot.item %}
+    <td data-id="{{slot.id}}" data-position="{{slot.position}}">
       {% include 'common/item.html' with quantity=slot.quantity item=slot.item %}
-      {% endif %}
     </td>
   {% endfor %}
   </tr>