@@ -0,0 +1,79 @@ | |||
const tplItem = ` | |||
<div class="item"> | |||
<div class="icon"></div> | |||
<div class="quantity"></div> | |||
</div> | |||
`; | |||
define([ | |||
], function ( | |||
) { | |||
return (container, item) => { | |||
let itemEl = null; | |||
if (!item) { | |||
itemEl = $(tplItem).appendTo(container); | |||
return itemEl; | |||
} | |||
itemEl = $(tplItem).appendTo(container); | |||
let size = 64; | |||
let offset = 0; | |||
if (item.type === 'skin') { | |||
offset = 4; | |||
size = 8; | |||
} | |||
const imgX = (-item.sprite[0] * size) + offset; | |||
const imgY = (-item.sprite[1] * size) + offset; | |||
let spritesheet = item.spritesheet || '../../../images/items.png'; | |||
if (!item.spritesheet) { | |||
if (item.material) | |||
spritesheet = '../../../images/materials.png'; | |||
else if (item.quest) | |||
spritesheet = '../../../images/questItems.png'; | |||
else if (item.type === 'consumable') | |||
spritesheet = '../../../images/consumables.png'; | |||
else if (item.type === 'skin') | |||
spritesheet = '../../../images/characters.png'; | |||
} | |||
itemEl | |||
.find('.icon') | |||
.css('background', `url(${spritesheet}) ${imgX}px ${imgY}px`); | |||
if (item.quantity > 1 || item.eq || item.active || item.has('quickSlot')) { | |||
let elQuantity = itemEl.find('.quantity'); | |||
let txtQuantity = item.quantity; | |||
if (!txtQuantity) | |||
txtQuantity = item.has('quickSlot') ? 'QS' : 'EQ'; | |||
elQuantity.html(txtQuantity); | |||
//If the item doesn't have a quantity and we reach this point | |||
//it must mean that it's active, EQd or QSd | |||
if (!item.quantity) | |||
itemEl.addClass('eq'); | |||
} else if (item.isNew) { | |||
itemEl.addClass('new'); | |||
itemEl.find('.quantity').html('NEW'); | |||
} | |||
if (item.slot) { | |||
const equipErrors = window.player.inventory.equipItemErrors(item); | |||
if (equipErrors.length) | |||
itemEl.addClass('no-equip'); | |||
} | |||
if (item.has('quality')) | |||
itemEl.addClass(`quality-${item.quality}`); | |||
return itemEl; | |||
}; | |||
}); |
@@ -5,7 +5,8 @@ define([ | |||
'css!ui/templates/inventory/styles', | |||
'html!ui/templates/inventory/templateItem', | |||
'js/input', | |||
'js/config' | |||
'js/config', | |||
'ui/shared/renderItem' | |||
], function ( | |||
events, | |||
client, | |||
@@ -13,7 +14,8 @@ define([ | |||
styles, | |||
tplItem, | |||
input, | |||
config | |||
config, | |||
renderItem | |||
) { | |||
return { | |||
tpl: template, | |||
@@ -78,8 +80,7 @@ define([ | |||
let item = items.find(f => (f.pos !== null && f.pos === i)); | |||
if (!item) { | |||
itemEl = $(tplItem) | |||
.appendTo(container); | |||
itemEl = renderItem(container, null); | |||
itemEl | |||
.on('mouseup', this.onMouseDown.bind(this, null, null, false)) | |||
@@ -93,21 +94,7 @@ define([ | |||
} else | |||
rendered.push(item); | |||
let imgX = -item.sprite[0] * 64; | |||
let imgY = -item.sprite[1] * 64; | |||
itemEl = $(tplItem) | |||
.appendTo(container); | |||
let spritesheet = item.spritesheet || '../../../images/items.png'; | |||
if (!item.spritesheet) { | |||
if (item.material) | |||
spritesheet = '../../../images/materials.png'; | |||
else if (item.quest) | |||
spritesheet = '../../../images/questItems.png'; | |||
else if (item.type === 'consumable') | |||
spritesheet = '../../../images/consumables.png'; | |||
} | |||
itemEl = renderItem(container, item); | |||
let clickHandler = this.onMouseDown.bind(this, itemEl, item, true); | |||
let moveHandler = this.onHover.bind(this, itemEl, item); | |||
@@ -124,49 +111,24 @@ define([ | |||
.on('mousemove', moveHandler) | |||
.on('mouseleave', this.hideTooltip.bind(this, itemEl, item)) | |||
.find('.icon') | |||
.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px') | |||
.on('contextmenu', this.showContext.bind(this, item)); | |||
if (item.quantity > 1 || item.eq || item.active || item.has('quickSlot')) { | |||
let elQuantity = itemEl.find('.quantity'); | |||
let txtQuantity = item.quantity; | |||
if (!txtQuantity) | |||
txtQuantity = item.has('quickSlot') ? 'QS' : 'EQ'; | |||
elQuantity.html(txtQuantity); | |||
//If the item doesn't have a quantity and we reach this point | |||
//it must mean that it's active, EQd or QSd | |||
if (!item.quantity) | |||
itemEl.addClass('eq'); | |||
} else if (item.isNew) { | |||
itemEl.addClass('new'); | |||
itemEl.find('.quantity').html('NEW'); | |||
} | |||
if (item.slot) { | |||
const equipErrors = window.player.inventory.equipItemErrors(item); | |||
if (equipErrors.length) | |||
itemEl.addClass('no-equip'); | |||
} | |||
if (item.has('quality')) | |||
itemEl.addClass(`quality-${item.quality}`); | |||
} | |||
}, | |||
onToggleQualityIndicators: function (state) { | |||
this.el.removeClass('quality-off quality-bottom quality-border quality-background'); | |||
const className = `quality-${state.toLowerCase()}`; | |||
this.el.addClass(className); | |||
$('.ui-container') | |||
.removeClass('quality-off quality-bottom quality-border quality-background') | |||
.addClass(className); | |||
}, | |||
onToggleUnusableIndicators: function (state) { | |||
this.el.removeClass('unusable-off unusable-border unusable-top unusable-background'); | |||
const className = `unusable-${state.toLowerCase()}`; | |||
this.el.addClass(className); | |||
$('.ui-container') | |||
.removeClass('unusable-off unusable-border unusable-top unusable-background') | |||
.addClass(className); | |||
}, | |||
onClick: function (item) { | |||
@@ -117,134 +117,6 @@ | |||
} | |||
&.quality-border .grid .item:not(.empty), | |||
&.quality-bottom .grid .item:not(.empty) { | |||
&:before { | |||
content: ''; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
box-sizing: border-box; | |||
border-width: 5px; | |||
border-style: solid; | |||
} | |||
&.quality-0:before { | |||
border: none; | |||
} | |||
&.quality-1:before { | |||
border-color: @greenC; | |||
} | |||
&.quality-2:before { | |||
border-color: @blueD; | |||
} | |||
&.quality-3:before { | |||
border-color: @purpleC; | |||
} | |||
&.quality-4:before { | |||
border-color: @orangeD; | |||
} | |||
} | |||
&.quality-bottom .grid .item:not(.empty) { | |||
&:before { | |||
border-width: 0px 0px 5px 0px; | |||
} | |||
} | |||
&.quality-background .grid .item:not(.empty),&.unusable-background .grid .item.no-equip { | |||
&:before { | |||
content: ''; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.icon { | |||
filter: brightness(100%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
&:hover { | |||
filter: brightness(160%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
} | |||
} | |||
&.quality-1:before { | |||
background-color: @greenC; | |||
} | |||
&.quality-2:before { | |||
background-color: @blueD; | |||
} | |||
&.quality-3:before { | |||
background-color: @purpleC; | |||
} | |||
&.quality-4:before { | |||
background-color: @orangeD; | |||
} | |||
&.no-equip:before { | |||
background-color: @redD; | |||
} | |||
} | |||
&.unusable-border .grid .item.no-equip, | |||
&.unusable-top .grid .item.no-equip { | |||
&:after { | |||
content: ''; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
box-sizing: border-box; | |||
border-width: 5px; | |||
border-style: solid; | |||
border-color: @redD; | |||
pointer-events: none; | |||
} | |||
} | |||
&.unusable-top .grid .item.no-equip { | |||
&:after { | |||
border-width: 5px 0px 0px 0px; | |||
} | |||
} | |||
&.quality-border.unusable-border .grid .item.no-equip:not(.quality-0), | |||
&.quality-border.unusable-top .grid .item.no-equip:not(.quality-0) { | |||
&:after { | |||
top: 5px; | |||
left: 5px; | |||
width: calc(100% - 10px); | |||
height: calc(100% - 10px); | |||
} | |||
} | |||
.menu-bar { | |||
background-color: @blackB; | |||
width: 100%; | |||
@@ -360,3 +232,131 @@ | |||
} | |||
} | |||
.ui-container.quality-border .grid .item:not(.empty), | |||
.ui-container.quality-bottom .grid .item:not(.empty) { | |||
&:before { | |||
content: ''; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
box-sizing: border-box; | |||
border-width: 5px; | |||
border-style: solid; | |||
} | |||
&.quality-0:before { | |||
border: none; | |||
} | |||
&.quality-1:before { | |||
border-color: @greenC; | |||
} | |||
&.quality-2:before { | |||
border-color: @blueD; | |||
} | |||
&.quality-3:before { | |||
border-color: @purpleC; | |||
} | |||
&.quality-4:before { | |||
border-color: @orangeD; | |||
} | |||
} | |||
.ui-container.quality-bottom .grid .item:not(.empty) { | |||
&:before { | |||
border-width: 0px 0px 5px 0px; | |||
} | |||
} | |||
.ui-container.quality-background .grid .item:not(.empty),&.unusable-background .grid .item.no-equip { | |||
&:before { | |||
content: ''; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.icon { | |||
filter: brightness(100%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
&:hover { | |||
filter: brightness(160%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
} | |||
} | |||
&.quality-1:before { | |||
background-color: @greenC; | |||
} | |||
&.quality-2:before { | |||
background-color: @blueD; | |||
} | |||
&.quality-3:before { | |||
background-color: @purpleC; | |||
} | |||
&.quality-4:before { | |||
background-color: @orangeD; | |||
} | |||
&.no-equip:before { | |||
background-color: @redD; | |||
} | |||
} | |||
.ui-container.unusable-border .grid .item.no-equip, | |||
.ui-container.unusable-top .grid .item.no-equip { | |||
&:after { | |||
content: ''; | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
width: 100%; | |||
height: 100%; | |||
box-sizing: border-box; | |||
border-width: 5px; | |||
border-style: solid; | |||
border-color: @redD; | |||
pointer-events: none; | |||
} | |||
} | |||
.ui-container.unusable-top .grid .item.no-equip { | |||
&:after { | |||
border-width: 5px 0px 0px 0px; | |||
} | |||
} | |||
.ui-container.quality-border.unusable-border .grid .item.no-equip:not(.quality-0), | |||
.ui-container.quality-border.unusable-top .grid .item.no-equip:not(.quality-0) { | |||
&:after { | |||
top: 5px; | |||
left: 5px; | |||
width: calc(100% - 10px); | |||
height: calc(100% - 10px); | |||
} | |||
} |
@@ -4,14 +4,16 @@ define([ | |||
'html!ui/templates/stash/template', | |||
'css!ui/templates/stash/styles', | |||
'html!ui/templates/inventory/templateItem', | |||
'js/input' | |||
'js/input', | |||
'ui/shared/renderItem' | |||
], function ( | |||
events, | |||
client, | |||
template, | |||
styles, | |||
tplItem, | |||
input | |||
input, | |||
renderItem | |||
) { | |||
return { | |||
tpl: template, | |||
@@ -42,25 +44,11 @@ define([ | |||
for (let i = 0; i < iLen; i++) { | |||
let item = items[i]; | |||
let itemEl = $(tplItem) | |||
.appendTo(container); | |||
let itemEl = renderItem(container, item); | |||
if (!item) | |||
continue; | |||
let imgX = -item.sprite[0] * 64; | |||
let imgY = -item.sprite[1] * 64; | |||
let spritesheet = item.spritesheet || '../../../images/items.png'; | |||
if (!item.spritesheet) { | |||
if (item.material) | |||
spritesheet = '../../../images/materials.png'; | |||
else if (item.quest) | |||
spritesheet = '../../../images/questItems.png'; | |||
else if (item.type === 'consumable') | |||
spritesheet = '../../../images/consumables.png'; | |||
} | |||
let moveHandler = this.onHover.bind(this, itemEl, item); | |||
let downHandler = () => {}; | |||
if (isMobile) { | |||
@@ -74,16 +62,7 @@ define([ | |||
.on('mousemove', moveHandler) | |||
.on('mouseleave', this.hideTooltip.bind(this, itemEl, item)) | |||
.find('.icon') | |||
.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px') | |||
.on('contextmenu', this.showContext.bind(this, item)); | |||
if (item.quantity) | |||
itemEl.find('.quantity').html(item.quantity); | |||
if (item.eq) | |||
itemEl.addClass('eq'); | |||
if (item.isNew) | |||
itemEl.addClass('new'); | |||
} | |||
}, | |||
@@ -3,13 +3,15 @@ define([ | |||
'js/system/client', | |||
'html!ui/templates/trade/template', | |||
'css!ui/templates/trade/styles', | |||
'html!ui/templates/inventory/templateItem' | |||
'html!ui/templates/inventory/templateItem', | |||
'ui/shared/renderItem' | |||
], function ( | |||
events, | |||
client, | |||
template, | |||
styles, | |||
tplItem | |||
tplItem, | |||
renderItem | |||
) { | |||
return { | |||
tpl: template, | |||
@@ -68,35 +70,11 @@ define([ | |||
item = $.extend(true, {}, item); | |||
let size = 64; | |||
let offset = 0; | |||
let itemEl = $(tplItem) | |||
.appendTo(container); | |||
let spritesheet = item.spritesheet || '../../../images/items.png'; | |||
if (!item.spritesheet) { | |||
if (item.material) | |||
spritesheet = '../../../images/materials.png'; | |||
else if (item.quest) | |||
spritesheet = '../../../images/questItems.png'; | |||
else if (item.type === 'consumable') | |||
spritesheet = '../../../images/consumables.png'; | |||
else if (item.type === 'skin') | |||
spritesheet = '../../../images/characters.png'; | |||
} | |||
if (item.type === 'skin') { | |||
offset = 4; | |||
size = 8; | |||
} | |||
let imgX = (-item.sprite[0] * size) + offset; | |||
let imgY = (-item.sprite[1] * size) + offset; | |||
let itemEl = renderItem(container, item); | |||
itemEl | |||
.data('item', item) | |||
.find('.icon') | |||
.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px') | |||
.addClass(item.type); | |||
if (isMobile) | |||
@@ -108,11 +86,6 @@ define([ | |||
.on('mouseleave', uiInventory.hideTooltip.bind(uiInventory, itemEl, item)); | |||
} | |||
if (item.quantity) | |||
itemEl.find('.quantity').html(item.quantity); | |||
else if (item.eq) | |||
itemEl.find('.quantity').html('EQ'); | |||
if (action === 'buy') { | |||
let noAfford = false; | |||
if (item.worth.currency) { | |||
@@ -132,13 +105,6 @@ define([ | |||
item.worthText = item.worth.amount + 'x ' + item.worth.currency; | |||
else | |||
item.worthText = ~~(itemList.markup * item.worth); | |||
if (item.eq) | |||
itemEl.addClass('eq'); | |||
else if (item.isNew) { | |||
itemEl.addClass('new'); | |||
itemEl.find('.quantity').html('NEW'); | |||
} | |||
} | |||
this.center(); | |||