From 31becc073d8fe459d61a77977f1ba09241768f75 Mon Sep 17 00:00:00 2001 From: dsc Date: Mon, 28 Feb 2011 08:43:22 -0800 Subject: [PATCH] Items picked up now auto-equip; you can also manually auto-equip (instead of dragging) by right-clicking an item. --- data/types/levels.yaml | 2 + src/tanks/game.cjs | 1 - src/tanks/inventory/bag.cjs | 2 +- src/tanks/inventory/inventory.cjs | 32 ++++- src/tanks/thing/item.cjs | 20 ++- src/tanks/ui/containerui.cjs | 268 ++++++++++++++++++++++++++++++++ src/tanks/ui/index.cjs | 14 +- src/tanks/ui/inventory/backpack.cjs | 189 ---------------------- src/tanks/ui/inventory/containerui.cjs | 237 ---------------------------- src/tanks/ui/inventory/equipslot.cjs | 194 ----------------------- src/tanks/ui/inventory/index.cjs | 4 - www/css/lttl.css | 2 +- 12 files changed, 326 insertions(+), 639 deletions(-) create mode 100644 src/tanks/ui/containerui.cjs delete mode 100644 src/tanks/ui/inventory/backpack.cjs delete mode 100644 src/tanks/ui/inventory/containerui.cjs delete mode 100644 src/tanks/ui/inventory/equipslot.cjs delete mode 100644 src/tanks/ui/inventory/index.cjs diff --git a/data/types/levels.yaml b/data/types/levels.yaml index 2021d39..35c38e8 100644 --- a/data/types/levels.yaml +++ b/data/types/levels.yaml @@ -145,6 +145,8 @@ types: items: - type: rockets loc: [75,275] + - type: rockets + loc: [325,475] - type: nitro loc: [325,25] diff --git a/src/tanks/game.cjs b/src/tanks/game.cjs index 72ec8b9..e51b63a 100644 --- a/src/tanks/game.cjs +++ b/src/tanks/game.cjs @@ -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 diff --git a/src/tanks/inventory/bag.cjs b/src/tanks/inventory/bag.cjs index 72dcd0f..f7ff703 100644 --- a/src/tanks/inventory/bag.cjs +++ b/src/tanks/inventory/bag.cjs @@ -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 = diff --git a/src/tanks/inventory/inventory.cjs b/src/tanks/inventory/inventory.cjs index 0a5f134..d8cd401 100644 --- a/src/tanks/inventory/inventory.cjs +++ b/src/tanks/inventory/inventory.cjs @@ -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 /// diff --git a/src/tanks/thing/item.cjs b/src/tanks/thing/item.cjs index 8812b41..b967801 100644 --- a/src/tanks/thing/item.cjs +++ b/src/tanks/thing/item.cjs @@ -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 }, diff --git a/src/tanks/ui/containerui.cjs b/src/tanks/ui/containerui.cjs new file mode 100644 index 0000000..fff4d70 --- /dev/null +++ b/src/tanks/ui/containerui.cjs @@ -0,0 +1,268 @@ +//#ensure "jquery.tipsy" +//#ensure "jquery-ui" +var Y = require('Y').Y +, Layer = require('ezl/layer/layer').Layer +, HtmlLayer = require('ezl/layer/html').HtmlLayer +, + + +ContainerUI = +exports['ContainerUI'] = +HtmlLayer.subclass('ContainerUI', { + __mixins__ : [], + __bind__ : [ 'onItemUpdated', 'onDrop' ], + _layerClasses : 'item-container hud', + + inherit : 'name title showTitle isDraggable max cols'.split(' '), + + name : null, + title : null, + showTitle : false, + isDraggable : true, + + max : 1, + cols : 3, + unit : null, + slots : null, + + + init : function initContainerUI(unit, container, options){ + var keys = (options||{}).inherit || this.inherit; + for (var i=0, L=keys.length, k=keys[i]; i'+(this.title || this.name.toLowerCase())+'' ); + this.slots = new Y(0, this.max).map(this._makeSlot, this); + this.layer.append('
'); + + // container.on('all', function(evt){ console.log(evt.triggerType+' '+evt.data.item, evt); }); + container.on('item.acquire', this.onItemUpdated); + container.on('item.lose', this.onItemUpdated); + container.on('item.move', this.onItemUpdated); + }, + + _makeSlot : function _makeSlot(idx){ + return new ContainerUISlot(this, idx).appendTo(this); + }, + + refresh : function refresh(){ + var len = this.slots.length + , el = this.slots[0].layer + , cols = Math.min(this.cols,len) + , rows = Math.ceil(len / cols) + , w = el.outerWidth() + , m = parseInt(el.css('margin-left').slice(0,-2)) + ; + this.layer.width( w*cols + m*2*cols ); + + 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 + , oldBag = d.oldBag + ; + this.slots.get(d.idx).refresh(); + if (oldBag) + oldBag.ui.slots.get(d.oldIdx).refresh(); + }, + + onDrop : function onDrop(evt, ui){ + var inv = this.unit.inventory + , item = ui.draggable.data('item') + , toIdx = $(evt.target).data('idx') + ; + // console.log('onDrop(item='+item+', bag='+this+', toIdx='+toIdx+')', evt); + if ( inv.checkReqs(item, this.container) ) { + inv.moveItem(item, this.container, toIdx); + + // Clear flag preventing the drag from activing the item + setTimeout(function(){ item.dragging = false; }, 250); + } else { + var slot = ui.draggable.parent().data('container-slot'); + slot.refresh(); + } + }, + + + toString : function(){ + return this.className+'(unit='+this.unit+')'; + } + +}) +, + + +ContainerUISlot = +exports['ContainerUISlot'] = +Layer.subclass('ContainerUISlot', { + _layerClasses : 'item-container slot hud', + hasCanvas : false, + + artWidth : 50, + artHeight : 50, + isDraggable : true, + equipsContents : false, + + idx : -1, + dragging : false, + backpack : null, + item : null, + + + init : function initContainerUISlot(parent, idx){ + 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); + this.inner = + new Layer({ hasCanvas:false }) + .appendTo(this) + .position(8, 8); + }, + + refresh : function refresh(){ + this.layer.data({ + 'container-slot': this, + 'idx': this.idx + }); + var item = this.container.slots[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 + , img = this.img = + jQuery('') + .width(this.artWidth) + .height(this.artHeight) + .appendTo(this.inner.layer) + ; + this.inner.layer + .addClass('item') + .data('item', item) + .attr('title', ''+item.name+''+(item.desc ? '
'+item.desc : '')) + .tipsy({ 'html':true, 'gravity':$.fn.tipsy.autoNS }) + ; + if (this.isDraggable) + this.inner.layer + .draggable({ + start : this.onDragStart, + revert : 'invalid', + zIndex : 10 + }); + + if (icon) + img.attr('src', icon); + + if (item.activateGauge) + this.inner.append(item.activateGauge); + this.inner.layer.bind('contextmenu', this.onAutoEquip); + 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.img = 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+')', 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(){ + return 'ContainerUISlot(idx='+this.idx+', item='+this.item+')'; + } + +}) +; diff --git a/src/tanks/ui/index.cjs b/src/tanks/ui/index.cjs index 5c41507..45b59ba 100644 --- a/src/tanks/ui/index.cjs +++ b/src/tanks/ui/index.cjs @@ -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 index 9068b70..0000000 --- a/src/tanks/ui/inventory/backpack.cjs +++ /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 : '

backpack

', - 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('') - .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', ''+item.name+'
'+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/containerui.cjs b/src/tanks/ui/inventory/containerui.cjs deleted file mode 100644 index c381bdd..0000000 --- a/src/tanks/ui/inventory/containerui.cjs +++ /dev/null @@ -1,237 +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 -, - - -ContainerUI = -exports['ContainerUI'] = -HtmlLayer.subclass('ContainerUI', { - __mixins__ : [], - __bind__ : [ 'onItemUpdated', 'onDrop' ], - _layerClasses : 'item-container hud', - - inherit : 'name title showTitle isDraggable max cols'.split(' '), - - name : null, - title : null, - showTitle : false, - isDraggable : true, - - max : 1, - cols : 3, - unit : null, - slots : null, - - - init : function initContainerUI(unit, container, options){ - var keys = (options||{}).inherit || this.inherit; - for (var i=0, L=keys.length, k=keys[i]; i'+(this.title || this.name.toLowerCase())+'' ); - this.slots = new Y(0, this.max).map(this._makeSlot, this); - this.layer.append('
'); - - // container.on('all', function(evt){ console.log(evt.triggerType+' '+evt.data.item, evt); }); - container.on('item.acquire', this.onItemUpdated); - container.on('item.lose', this.onItemUpdated); - container.on('item.move', this.onItemUpdated); - }, - - _makeSlot : function _makeSlot(idx){ - return new ContainerUISlot(this, idx).appendTo(this); - }, - - refresh : function refresh(){ - var len = this.slots.length - , el = this.slots[0].layer - , cols = Math.min(this.cols,len) - , rows = Math.ceil(len / cols) - , w = el.outerWidth() - , m = parseInt(el.css('margin-left').slice(0,-2)) - ; - this.layer.width( w*cols + m*2*cols ); - - 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 - , oldBag = d.oldBag - ; - this.slots.get(d.idx).refresh(); - if (oldBag) - oldBag.ui.slots.get(d.oldIdx).refresh(); - }, - - onDrop : function onDrop(evt, ui){ - var inv = this.unit.inventory - , item = ui.draggable.data('item') - , toIdx = $(evt.target).data('idx') - ; - // console.log('onDrop(item='+item+', bag='+this+', toIdx='+toIdx+')', evt); - if ( inv.checkReqs(item, this.container) ) { - inv.moveItem(item, this.container, toIdx); - - // Clear flag preventing the drag from activing the item - setTimeout(function(){ item.dragging = false; }, 250); - } else { - var slot = ui.draggable.parent().data('container-slot'); - slot.refresh(); - } - }, - - - toString : function(){ - return this.className+'(unit='+this.unit+')'; - } - -}) -, - - -ContainerUISlot = -exports['ContainerUISlot'] = -Layer.subclass('ContainerUISlot', { - _layerClasses : 'item-container slot hud', - hasCanvas : false, - - artWidth : 50, - artHeight : 50, - isDraggable : true, - - idx : -1, - dragging : false, - backpack : null, - item : null, - - - init : function initContainerUISlot(parent, idx){ - Y.bindAll(this, 'onActivate', 'onDragStart'); - Layer.init.call(this); - - this.parent = parent; - this.isDraggable = parent.isDraggable; - this.container = parent.container; - - 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({ - 'container-slot': this, - 'idx': this.idx - }); - var item = this.container.slots[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 - , img = this.img = - jQuery('') - .width(this.artWidth) - .height(this.artHeight) - .appendTo(this.inner.layer) - ; - this.inner.layer - .addClass('item') - .data('item', item) - .attr('title', ''+item.name+''+(item.desc ? '
'+item.desc : '')) - .tipsy({ 'html':true, 'gravity':$.fn.tipsy.autoNS }) - ; - if (this.isDraggable) - this.inner.layer - .draggable({ - start : this.onDragStart, - revert : 'invalid', - zIndex : 10 - }); - - if (icon) - img.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.img = 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 'ContainerUISlot(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 index 0056eaa..0000000 --- a/src/tanks/ui/inventory/equipslot.cjs +++ /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 - '

'+slotName.toLowerCase()+'

'); // 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('') - .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', ''+item.name+'
'+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 index c7604fa..0000000 --- a/src/tanks/ui/inventory/index.cjs +++ /dev/null @@ -1,4 +0,0 @@ -require('Y').Y -.extend(exports, { - 'Backpack' : require('tanks/ui/inventory/backpack').Backpack -}); \ No newline at end of file diff --git a/www/css/lttl.css b/www/css/lttl.css index 693085f..710c0b4 100644 --- a/www/css/lttl.css +++ b/www/css/lttl.css @@ -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; -- 1.7.0.4