diff --git a/src/client/images/uiIcons.png b/src/client/images/uiIcons.png index bef1cb05..f36e8cee 100644 Binary files a/src/client/images/uiIcons.png and b/src/client/images/uiIcons.png differ diff --git a/src/client/images/uiIcons.pyxel b/src/client/images/uiIcons.pyxel index 1466d6ee..5809c3ee 100644 Binary files a/src/client/images/uiIcons.pyxel and b/src/client/images/uiIcons.pyxel differ diff --git a/src/client/ui/templates/equipment/equipment.js b/src/client/ui/templates/equipment/equipment.js index 7e7714b8..c3437b6f 100644 --- a/src/client/ui/templates/equipment/equipment.js +++ b/src/client/ui/templates/equipment/equipment.js @@ -90,10 +90,11 @@ define([ this.find('[slot]') .removeData('item') - .addClass('empty') + .addClass('empty show-default-icon') .find('.icon') .off() - .css('background', '') + .css('background-image', '') + .css('background-position', '') .on('click', this.buildSlot.bind(this)); items @@ -121,7 +122,7 @@ define([ var elSlot = this.find('[slot="' + slot + '"]'); elSlot .data('item', item) - .removeClass('empty') + .removeClass('empty show-default-icon') .find('.icon') .css('background', 'url("' + spritesheet + '") ' + imgX + 'px ' + imgY + 'px') .off() diff --git a/src/client/ui/templates/equipment/styles.less b/src/client/ui/templates/equipment/styles.less index b3be7ec0..a7bbc404 100644 --- a/src/client/ui/templates/equipment/styles.less +++ b/src/client/ui/templates/equipment/styles.less @@ -77,6 +77,25 @@ margin-bottom: 0px; } + &.show-default-icon { + .icon { + opacity: 0.5; + background-image: url('../../../images/uiIcons.png') !important; + } + + &[slot="head"] .icon { background-position: -0px -448px; } + &[slot="neck"] .icon { background-position: -64px -448px; } + &[slot="chest"] .icon { background-position: -128px -448px; } + &[slot="hands"] .icon { background-position: -192px -448px; } + &[slot="finger"] .icon { background-position: -256px -448px; } + &[slot="waist"] .icon { background-position: -320px -448px; } + &[slot="legs"] .icon { background-position: -384px -448px; } + &[slot="feet"] .icon { background-position: -448px -448px; } + &[slot="trinket"] .icon { background-position: -448px -384px; } + &[slot="twoHanded"] .icon { background-position: -384px -384px; } + &[slot^="rune"] .icon { background-position: -320px -384px; } + } + .icon { height: 100%; }