items:
- type: rockets
loc: [75,275]
+ - type: rockets
+ loc: [325,475]
- type: nitro
loc: [325,25]
, 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
, 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 =
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];
}
}
- 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 ///
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
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
;
},
/**
- * 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;
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
},
artWidth : 50,
artHeight : 50,
isDraggable : true,
+ equipsContents : false,
idx : -1,
dragging : false,
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);
if (item.activateGauge)
this.inner.append(item.activateGauge);
+ this.inner.layer.bind('contextmenu', this.onAutoEquip);
this.inner.layer.bind('click', this.onActivate);
return this;
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(){
-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
});
+++ /dev/null
-//#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+')';
- }
-
-})
-;
+++ /dev/null
-//#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+')';
- }
-
-})
-;
+++ /dev/null
-require('Y').Y
-.extend(exports, {
- 'Backpack' : require('tanks/ui/inventory/backpack').Backpack
-});
\ No newline at end of file
/*** 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;