Items picked up now auto-equip; you can also manually auto-equip (instead of dragging...
authordsc <david.schoonover@gmail.com>
Mon, 28 Feb 2011 16:43:22 +0000 (08:43 -0800)
committerdsc <david.schoonover@gmail.com>
Mon, 28 Feb 2011 16:43:22 +0000 (08:43 -0800)
data/types/levels.yaml
src/tanks/game.cjs
src/tanks/inventory/bag.cjs
src/tanks/inventory/inventory.cjs
src/tanks/thing/item.cjs
src/tanks/ui/containerui.cjs [moved from src/tanks/ui/inventory/containerui.cjs with 87% similarity]
src/tanks/ui/index.cjs
src/tanks/ui/inventory/backpack.cjs [deleted file]
src/tanks/ui/inventory/equipslot.cjs [deleted file]
src/tanks/ui/inventory/index.cjs [deleted file]
www/css/lttl.css

index 2021d39..35c38e8 100644 (file)
@@ -145,6 +145,8 @@ types:
         items:
           - type: rockets
             loc: [75,275]
+          - type: rockets
+            loc: [325,475]
           - type: nitro
             loc: [325,25]
     
index 72ec8b9..e51b63a 100644 (file)
@@ -18,7 +18,6 @@ var Y         = require('Y').Y
 ,   Grid      = require('tanks/ui/grid').Grid
 ,   PathMapUI = require('tanks/ui/pathmapui').PathMapUI
 ,   Viewport  = require('tanks/ui/viewport').Viewport
-,   Backpack  = require('tanks/ui/inventory/backpack').Backpack
 
 ,   Thing  = thing.Thing
 ,   Tank   = thing.Tank
index 72dcd0f..f7ff703 100644 (file)
@@ -4,7 +4,7 @@ var Y   = require('Y').Y
 
 ,   Item      = require('tanks/thing/item').Item
 ,   Container = require('tanks/inventory/container').Container
-,   ContainerUI = require('tanks/ui/inventory/containerui').ContainerUI
+,   ContainerUI = require('tanks/ui/containerui').ContainerUI
 ,
 
 Bag =
index 0a5f134..d8cd401 100644 (file)
@@ -213,7 +213,8 @@ evt.subclass('Inventory', {
         if ( checkSpecificBag ) {
             idx = bag._getEmptySlot(item);
         } else {
-            idx = this.defaultBag._getEmptySlot(item);
+            bag = this.defaultBag;
+            idx = bag._getEmptySlot(item);
             if (idx === -1)
                 for (var id in this.bags) {
                     bag = this.bags[id];
@@ -224,10 +225,37 @@ evt.subclass('Inventory', {
                 }
         }
         
-        return (idx === -1) ? null : new ContainerMeta(bag, idx);
+        return (idx === -1) ? null : new ContainerMeta(idx, bag);
+    },
+    
+    /**
+     * Searches for an available (equipslot,idx) that will accept supplied Item.
+     * @param {Item} item
+     * @return {ContainerMeta} The (bag,idx) information about the empty slot, or null if no matching slot was found.
+     */
+    findEmptyEquipSlot : function findEmptyEquipSlot(item){
+        var idx = -1;
+        for (var name in this.equipSlots) {
+            var bag = this.equipSlots[name];
+            if ( bag.canAddItem(item) ) {
+                idx = bag._getEmptySlot();
+                break;
+            }
+        }
+        return (idx === -1) ? null : new ContainerMeta(idx, bag);
     },
     
+    equipItem : function equipItem(item){
+        var meta = this.findEmptyEquipSlot(item);
+        if (meta) this.moveItem(item, meta.bag, meta.idx);
+        return this;
+    },
     
+    unequipItem : function unequipItem(item){
+        var meta = this.findEmptySlot(item);
+        if (meta) this.moveItem(item, meta.bag, meta.idx);
+        return this;
+    },
     
     /// Bag Management ///
     
index 8812b41..b967801 100644 (file)
@@ -1,5 +1,6 @@
 var Y         = require('Y').Y
 ,   op        = require('Y/op')
+,   Event     = require('Y/modules/y.event').Event
 
 ,   Rect          = require('ezl/shape').Rect
 ,   HtmlLayer     = require('ezl/layer/html').HtmlLayer
@@ -80,7 +81,7 @@ Thing.subclass('Item', {
     activate : function activate(){
         // console.log(this+' activated!');
         
-        if ( this.owner && this.cooldowns.activate.activate() ) {
+        if ( this.owner && this.cooldowns.activate && this.cooldowns.activate.activate() ) {
             var buffs = this.currentBuffs
             ,   active = this.currentActive
             ;
@@ -101,13 +102,19 @@ Thing.subclass('Item', {
     },
     
     /**
-     * Equips this item to owner or given unit. Does not manipulate inventory, or remove from map.
+     * Equips this item to owner or given unit. Does not manipulate inventory, but does remove from map if newly acquired.
      * @param {Tank} [unit=this.owner] Unit to equip. If omitted, uses this.owner; if unowned, does nothing.
      * @return {this}
      */
     equip : function equip(unit){
-        if (unit && unit.isUnit)
+        if (unit instanceof Event && unit.data) {
+            var evt = unit;
+            unit = evt.data.unit;
+        }
+        if (unit && unit.isUnit) {
             this.owner = unit;
+            this.removeFromMap();
+        }
         
         if (!this.owner)
             return this;
@@ -149,8 +156,11 @@ Thing.subclass('Item', {
     onCollide : function onCollide(evt){
         var unit = evt.data.unit
         ,   inv  = unit.inventory
-        if ( inv && inv.canAddItem(this) )
-            inv.addItem(this); // fires 'item.acquire' if successful
+        if ( inv && inv.canAddItem(this) ) {
+            inv.equipItem(this);
+            if ( !this.isEquipped )
+                inv.addItem(this); // fires 'item.acquire' if successful
+        }
         // TODO: else ignore for this traversal
     },
     
similarity index 87%
rename from src/tanks/ui/inventory/containerui.cjs
rename to src/tanks/ui/containerui.cjs
index c381bdd..fff4d70 100644 (file)
@@ -123,6 +123,7 @@ Layer.subclass('ContainerUISlot', {
     artWidth   : 50,
     artHeight  : 50,
     isDraggable : true,
+    equipsContents : false,
     
     idx      : -1,
     dragging : false,
@@ -131,12 +132,14 @@ Layer.subclass('ContainerUISlot', {
     
     
     init : function initContainerUISlot(parent, idx){
-        Y.bindAll(this, 'onActivate', 'onDragStart');
+        Y.bindAll(this, 'onActivate', 'onDragStart', 'onAutoEquip');
         Layer.init.call(this);
         
         this.parent = parent;
+        this.unit = parent.unit;
         this.isDraggable = parent.isDraggable;
         this.container = parent.container;
+        this.equipsContents = this.container.equipsContents;
         
         this.idx = idx;
         this.layer.addClass('slot'+idx);
@@ -191,6 +194,7 @@ Layer.subclass('ContainerUISlot', {
         
         if (item.activateGauge)
             this.inner.append(item.activateGauge);
+        this.inner.layer.bind('contextmenu', this.onAutoEquip);
         this.inner.layer.bind('click', this.onActivate);
         
         return this;
@@ -225,8 +229,35 @@ Layer.subclass('ContainerUISlot', {
     
     onActivate : function onActivate(evt){
         var item = this.item;
-        // console.log(this+'.onActivate(item='+item+', dragging='+item.dragging+')');
-        if (item && !item.dragging) item.activate();
+        
+        // console.log(this+'.onActivate(item='+item+', dragging='+(item || {}).dragging+')', evt);
+        if (!item || item.dragging) return;
+        
+        // right-click
+        if (evt.which !== 1) {
+            return this.onAutoEquip(evt);
+        
+        // left-click
+        } else
+            item.activate();
+    },
+    
+    onAutoEquip : function onAutoEquip(evt){
+        var item = this.item
+        ,   inv  = this.unit.inventory
+        ;
+        // console.log('onAutoEquip(evt=%s)', (evt||{}).type, evt);
+        if (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+        
+        if (this.equipsContents)
+            inv.unequipItem(item);
+        else
+            inv.equipItem(item);
+        
+        return false;
     },
     
     toString : function(){
index 5c41507..45b59ba 100644 (file)
@@ -1,10 +1,14 @@
-var Y = require('Y').Y;
+var Y = require('Y').Y
+,   containerui = require('tanks/ui/containerui')
+;
+
 Y.core.extend(exports, {
     'config'    : require('tanks/ui/configui'),
     'main'      : require('tanks/ui/main'),
-    'inventory' : require('tanks/ui/inventory'),
     
-    'Grid'      : require('tanks/ui/grid').Grid,
-    'Viewport'  : require('tanks/ui/viewport').Viewport,
-    'PathMapUI' : require('tanks/ui/pathmapui').PathMapUI
+    'Grid'            : require('tanks/ui/grid').Grid,
+    'Viewport'        : require('tanks/ui/viewport').Viewport,
+    'PathMapUI'       : require('tanks/ui/pathmapui').PathMapUI,
+    'ContainerUI'     : containerui.ContainerUI,
+    'ContainerUISlot' : containerui.ContainerUISlot
 });
diff --git a/src/tanks/ui/inventory/backpack.cjs b/src/tanks/ui/inventory/backpack.cjs
deleted file mode 100644 (file)
index 9068b70..0000000
+++ /dev/null
@@ -1,189 +0,0 @@
-//#ensure "jquery.tipsy"
-//#ensure "jquery-ui"
-var Y = require('Y').Y
-,   Layer = require('ezl/layer/layer').Layer
-,
-
-
-Backpack =
-exports['Backpack'] =
-Layer.subclass('Backpack', {
-    _layerClasses : 'backpack item-container hud',
-    _layerAttrs : { 'id':'backpack' },
-    _layerHtml  : '<div><h3>backpack</h3></div>',
-    hasCanvas : false,
-    
-    
-    init : function initBackpack(unit){
-        Y.bindAll(this, 'onItemUpdated', 'onDrop');
-        Layer.init.call(this);
-        
-        this.unit = unit;
-        var inv = this.inventory = unit.inventory
-        ,   bp  = inv.backpack
-        ;
-        this.slots = new Y(0, inv.max).map(function(idx){
-            var item = bp[idx];
-            return new BackpackSlot(this, idx).appendTo(this);
-        }, this);
-        
-        unit.on('item.acquire', this.onItemUpdated);
-        unit.on('item.lose',    this.onItemUpdated);
-        unit.on('item.move',    this.onItemUpdated);
-    },
-    
-    refresh : function refresh(){
-        this.slots.invoke('refresh');
-        this.layer.find('.slot')
-            .droppable({
-                accept     : '.item',
-                hoverClass : 'drophover',
-                drop       : this.onDrop
-            });
-        
-        return this;
-    },
-    
-    getSlot : function getSlot(idx){
-        return this.slots[idx];
-    },
-    
-    onItemUpdated : function onItemUpdated(evt){
-        var d = evt.data;
-        this.slots[d.idx].refresh();
-        if ('oldIdx' in d) this.slots[d.oldIdx].refresh();
-    },
-    
-    onDrop : function onDrop(evt, ui){
-        var item = ui.draggable.data('item')
-        ,   toIdx = $(evt.target).data('idx')
-        ;
-        // console.log(this+'.onDrop(item='+item+', toIdx='+toIdx+')', evt);
-        this.unit.moveItem(item, toIdx);
-        
-        // Clear flag preventing the drag from activing the item
-        setTimeout(function(){ item.dragging = false; }, 250);
-    },
-    
-    
-    toString : function(){
-        return this.className+'(unit='+this.unit+')';
-    }
-    
-})
-,
-
-
-BackpackSlot =
-exports['BackpackSlot'] =
-Layer.subclass('BackpackSlot', {
-    _layerClasses : 'backpack hud slot',
-    hasCanvas  : false,
-    
-    artWidth   : 50,
-    artHeight  : 50,
-    
-    idx      : -1,
-    dragging : false,
-    backpack : null,
-    item     : null,
-    
-    
-    init : function initBackpackSlot(backpack, idx){
-        Y.bindAll(this, 'onActivate', 'onDragStart');
-        Layer.init.call(this);
-        this.backpack = backpack;
-        this.inventory = backpack.inventory;
-        this.idx = idx;
-        this.layer.addClass('slot'+idx);
-        this.inner =
-            new Layer({ hasCanvas:false })
-                .appendTo(this)
-                .position(8, 8);
-    },
-    
-    refresh : function refresh(){
-        this.layer.data({
-            'backpack-slot': this,
-            'idx': this.idx
-        });
-        var item = this.inventory.backpack[this.idx];
-        if (item)
-            this.setItem(item);
-        else
-            this.removeItem();
-    },
-    
-    setItem : function setItem(item){
-        if (!item) return this;
-        
-        this.removeItem();
-        this.item = item;
-        this.layer.addClass('occupied');
-        
-        var icon = item.art && item.art.inv_icon
-        ,   src = this.itemEl =
-            jQuery('<img />')
-                .width(this.artWidth)
-                .height(this.artHeight)
-                .appendTo(this.inner.layer)
-        ;
-        this.inner.layer
-            .addClass('item')
-            .data('item', item)
-            .draggable({
-                start  : this.onDragStart,
-                revert : 'invalid',
-                zIndex : 10
-            })
-            .attr('title', '<b>'+item.name+'</b><br/>'+item.desc)
-            .tipsy({ 'html':true, 'gravity':$.fn.tipsy.autoNS })
-        ;
-        
-        if (icon) src.attr('src', icon);
-        
-        this.inner.append(item.activateGauge);
-        this.inner.layer.bind('click', this.onActivate);
-        
-        return this;
-    },
-    
-    removeItem : function removeItem(){
-        if (this.item) {
-            this.layer
-                .removeClass('occupied');
-            
-            // Dismiss tooltip if present
-            this.inner.layer
-                .trigger('mouseleave');
-            
-            this.inner.remove();
-            this.inner =
-                new Layer({ hasCanvas:false })
-                    .appendTo(this)
-                    .position(8, 8);
-        }
-        
-        this.item = null;
-        this.itemEl = null;
-        return this;
-    },
-    
-    onDragStart : function onDragStart(evt, ui){
-        var item = this.item;
-        // console.log(this+'.dragStart(item='+item+', dragging='+(item || {}).dragging+')', evt, ui);
-        if (item) item.dragging = true;
-    },
-    
-    onActivate : function onActivate(evt){
-        var item = this.item;
-        // console.log(this+'.onActivate(item='+item+', dragging='+item.dragging+')');
-        if (item && !item.dragging) item.activate();
-    },
-    
-    toString : function(){
-        return this.className+'(idx='+this.idx+', item='+this.item+')';
-    }
-    
-})
-;
diff --git a/src/tanks/ui/inventory/equipslot.cjs b/src/tanks/ui/inventory/equipslot.cjs
deleted file mode 100644 (file)
index 0056eaa..0000000
+++ /dev/null
@@ -1,194 +0,0 @@
-//#ensure "jquery.tipsy"
-//#ensure "jquery-ui"
-var Y = require('Y').Y
-,   Layer = require('ezl/layer/layer').Layer
-,   HtmlLayer = require('ezl/layer/html').HtmlLayer
-,
-
-
-EquipSlot =
-exports['EquipSlot'] =
-HtmlLayer.subclass('EquipSlot', {
-    _layerClasses : 'equip item-container hud',
-    
-    
-    init : function initEquipSlot(slotName, reqs, unit){
-        Y.bindAll(this, 'onItemUpdated', 'onDrop');
-        
-        this.slotName = slotName;
-        this.reqs = reqs;
-        this.unit = unit;
-        
-        HtmlLayer.init.call(this, null,
-            { 'id':slotName+'_slot' }, // layer attributes
-            '<div><h3>'+slotName.toLowerCase()+'</h3></div>'); // layer html
-        
-        var inv = this.inventory = unit.inventory
-        ,   bp  = inv.backpack
-        ;
-        this.slots = new Y(0, inv.max).map(function(idx){
-            var item = bp[idx];
-            return new BackpackSlot(this, idx).appendTo(this);
-        }, this);
-        
-        unit.on('item.acquire', this.onItemUpdated);
-        unit.on('item.lose',    this.onItemUpdated);
-        unit.on('item.move',    this.onItemUpdated);
-    },
-    
-    refresh : function refresh(){
-        this.slots.invoke('refresh');
-        this.layer.find('.slot')
-            .droppable({
-                accept     : '.item',
-                hoverClass : 'drophover',
-                drop       : this.onDrop
-            });
-        
-        return this;
-    },
-    
-    getSlot : function getSlot(idx){
-        return this.slots[idx];
-    },
-    
-    onItemUpdated : function onItemUpdated(evt){
-        var d = evt.data;
-        this.slots[d.idx].refresh();
-        if ('oldIdx' in d) this.slots[d.oldIdx].refresh();
-    },
-    
-    onDrop : function onDrop(evt, ui){
-        var item = ui.draggable.data('item')
-        ,   toIdx = $(evt.target).data('idx')
-        ;
-        // console.log(this+'.onDrop(item='+item+', toIdx='+toIdx+')', evt);
-        this.unit.moveItem(item, toIdx);
-        
-        // Clear flag preventing the drag from activing the item
-        setTimeout(function(){ item.dragging = false; }, 250);
-    },
-    
-    
-    toString : function(){
-        return this.className+'(unit='+this.unit+')';
-    }
-    
-})
-,
-
-
-BackpackSlot =
-exports['BackpackSlot'] =
-HtmlLayer.subclass('BackpackSlot', {
-    _layerClasses : 'backpack hud slot',
-    hasCanvas  : false,
-    
-    artWidth   : 50,
-    artHeight  : 50,
-    
-    idx      : -1,
-    dragging : false,
-    backpack : null,
-    item     : null,
-    
-    
-    init : function initBackpackSlot(backpack, idx){
-        Y.bindAll(this, 'onActivate', 'onDragStart');
-        Layer.init.call(this);
-        this.backpack = backpack;
-        this.inventory = backpack.inventory;
-        this.idx = idx;
-        this.layer.addClass('slot'+idx);
-        this.inner =
-            new Layer({ hasCanvas:false })
-                .appendTo(this)
-                .position(8, 8);
-    },
-    
-    refresh : function refresh(){
-        this.layer.data({
-            'backpack-slot': this,
-            'idx': this.idx
-        });
-        var item = this.inventory.backpack[this.idx];
-        if (item)
-            this.setItem(item);
-        else
-            this.removeItem();
-    },
-    
-    setItem : function setItem(item){
-        if (!item) return this;
-        
-        this.removeItem();
-        this.item = item;
-        this.layer.addClass('occupied');
-        
-        var icon = item.art && item.art.inv_icon
-        ,   src = this.itemEl =
-            jQuery('<img />')
-                .width(this.artWidth)
-                .height(this.artHeight)
-                .appendTo(this.inner.layer)
-        ;
-        this.inner.layer
-            .addClass('item')
-            .data('item', item)
-            .draggable({
-                start  : this.onDragStart,
-                revert : 'invalid',
-                zIndex : 10
-            })
-            .attr('title', '<b>'+item.name+'</b><br/>'+item.desc)
-            .tipsy({ 'html':true, 'gravity':$.fn.tipsy.autoNS })
-        ;
-        
-        if (icon) src.attr('src', icon);
-        
-        if (item.activateGauge)
-            this.inner.append(item.activateGauge);
-        this.inner.layer.bind('click', this.onActivate);
-        
-        return this;
-    },
-    
-    removeItem : function removeItem(){
-        if (this.item) {
-            this.layer
-                .removeClass('occupied');
-            
-            // Dismiss tooltip if present
-            this.inner.layer
-                .trigger('mouseleave');
-            
-            this.inner.remove();
-            this.inner =
-                new Layer({ hasCanvas:false })
-                    .appendTo(this)
-                    .position(8, 8);
-        }
-        
-        this.item = null;
-        this.itemEl = null;
-        return this;
-    },
-    
-    onDragStart : function onDragStart(evt, ui){
-        var item = this.item;
-        // console.log(this+'.dragStart(item='+item+', dragging='+(item || {}).dragging+')', evt, ui);
-        if (item) item.dragging = true;
-    },
-    
-    onActivate : function onActivate(evt){
-        var item = this.item;
-        // console.log(this+'.onActivate(item='+item+', dragging='+item.dragging+')');
-        if (item && !item.dragging) item.activate();
-    },
-    
-    toString : function(){
-        return this.className+'(idx='+this.idx+', item='+this.item+')';
-    }
-    
-})
-;
diff --git a/src/tanks/ui/inventory/index.cjs b/src/tanks/ui/inventory/index.cjs
deleted file mode 100644 (file)
index c7604fa..0000000
+++ /dev/null
@@ -1,4 +0,0 @@
-require('Y').Y
-.extend(exports, {
-    'Backpack' : require('tanks/ui/inventory/backpack').Backpack
-});
\ No newline at end of file
index 693085f..710c0b4 100644 (file)
@@ -48,7 +48,7 @@ td { text-align:center; vertical-align:middle; }
 
 /*** Game and Viewport ***/
 
-#game { position:relative; width:100%; height:100%; margin:0; padding:0; }
+#game { width:100%; height:100%; }
 #viewport { width:100%; height:100%; /* max-width:1024px; max-height:690px; */ /* <- Set by Viewport class */
         position:relative; margin:10px auto; overflow:hidden; cursor:crosshair;
         background-color:#3F3F3F; border:15px solid #222;