+
diff --git a/src/client/ui/templates/equipment/equipment.js b/src/client/ui/templates/equipment/equipment.js
index 2738dc38..936d23a1 100644
--- a/src/client/ui/templates/equipment/equipment.js
+++ b/src/client/ui/templates/equipment/equipment.js
@@ -155,31 +155,18 @@ define([
});
},
- openAugmentUi: function (item) {
- events.emit('onSetSmithItem', {
- item: item
- });
- },
-
showContext: function (item, e) {
let menuItems = {
unequip: {
text: 'unequip',
callback: this.unequipItem.bind(this, item)
- },
- augment: {
- text: 'craft',
- callback: this.openAugmentUi.bind(this, item)
- }
+ }
};
let config = [];
config.push(menuItems.unequip);
- if (item.slot)
- config.push(menuItems.augment);
-
events.emit('onContextMenu', config, e);
e.preventDefault();
diff --git a/src/client/ui/templates/inventory/inventory.js b/src/client/ui/templates/inventory/inventory.js
index b137ae66..f3948007 100644
--- a/src/client/ui/templates/inventory/inventory.js
+++ b/src/client/ui/templates/inventory/inventory.js
@@ -293,10 +293,6 @@ define([
text: 'equip',
callback: this.performItemAction.bind(this, item, 'equip')
},
- augment: {
- text: 'craft',
- callback: this.openAugmentUi.bind(this, item)
- },
mail: {
text: 'mail',
callback: this.openMailUi.bind(this, item)
@@ -336,11 +332,6 @@ define([
ctxConfig.push(menuItems.equip);
if (!item.eq)
ctxConfig.push(menuItems.divider);
-
- if (!item.eq) {
- ctxConfig.push(menuItems.augment);
- ctxConfig.push(menuItems.divider);
- }
}
if ((!item.eq) && (!item.active)) {
@@ -354,9 +345,6 @@ define([
if ((!item.material) && (!item.noSalvage))
ctxConfig.push(menuItems.salvage);
}
-
- if (!item.noDestroy)
- ctxConfig.push(menuItems.destroy);
}
if (item.quantity > 1 && !item.quest)
@@ -367,6 +355,11 @@ define([
ctxConfig.push(menuItems.link);
+ if (!item.eq && !item.active && !item.noDestroy) {
+ ctxConfig.push(menuItems.divider);
+ ctxConfig.push(menuItems.destroy);
+ }
+
if (isMobile)
this.hideTooltip(null, this.hoverItem);
@@ -568,12 +561,6 @@ define([
});
},
- openAugmentUi: function (item) {
- events.emit('onSetSmithItem', {
- item: item
- });
- },
-
openMailUi: function (item) {
events.emit('onSetMailItem', {
item: item
diff --git a/src/client/ui/templates/smithing/smithing.js b/src/client/ui/templates/smithing/smithing.js
deleted file mode 100644
index 0b399a58..00000000
--- a/src/client/ui/templates/smithing/smithing.js
+++ /dev/null
@@ -1,343 +0,0 @@
-define([
- 'js/system/events',
- 'js/system/client',
- 'html!ui/templates/smithing/template',
- 'css!ui/templates/smithing/styles',
- 'html!/ui/templates/smithing/templateItem',
- 'js/misc/statTranslations'
-], function (
- events,
- client,
- template,
- styles,
- templateItem,
- statTranslations
-) {
- return {
- tpl: template,
-
- centered: true,
-
- modal: true,
- hasClose: true,
-
- eventCloseInv: null,
- eventClickInv: null,
-
- hoverItem: null,
- item: null,
-
- waiting: false,
-
- action: 'augment',
-
- postRender: function () {
- this.onEvent('onShowSmithing', this.toggle.bind(this));
- this.onEvent('onKeyDown', this.onKey.bind(this, true));
- this.onEvent('onKeyUp', this.onKey.bind(this, false));
-
- this.find('.item-picker').on('click', this.openInventory.bind(this));
- this.find('.actionButton').on('click', this.smith.bind(this));
-
- //If we don't listen to these events, they'll be queued
- this.onEvent('onHideInventory', () => {});
- this.onEvent('beforeInventoryClickItem', () => {});
-
- this.onEvent('onGetItems', this.onGetItems.bind(this));
- this.onEvent('onSetSmithItem', this.onHideInventory.bind(this));
-
- this.find('.col-btn').on('click', this.clickAction.bind(this));
- },
-
- clickAction: function (e) {
- let el = $(e.target);
- this.find('.col-btn').removeClass('selected');
-
- let action = el.attr('action');
- let changed = (action !== this.action);
- this.action = action;
-
- el.addClass('selected');
-
- if (this.item && changed)
- this.getMaterials(this.item);
- },
-
- smith: function () {
- this.setDisabled(true);
-
- client.request({
- cpn: 'player',
- method: 'performAction',
- data: {
- cpn: 'inventory',
- method: 'enchantItem',
- data: {
- itemId: this.item.id,
- action: this.action
- }
- },
- callback: this.onSmith.bind(this, this.item)
- });
- },
-
- onSmith: function (item, result) {
- this.setDisabled(false);
-
- let msg = {
- msg: 'Item Enhancement Succeeded',
- type: 'success',
- zIndex: 9999999,
- top: 100
- };
- if (this.action === 'reroll')
- msg.msg = 'Item Reroll Succeeded';
- else if (this.action === 'relevel')
- msg.msg = 'Item Relevel Succeeded';
- else if (this.action === 'reslot')
- msg.msg = 'Item Reslot Succeeded';
-
- result.addStatMsgs.forEach(a => {
- let statName = statTranslations.translate(a.stat);
- msg.msg += `
${(a.value > 0) ? '+' : ''}${a.value} ${statName}`;
- });
-
- events.emit('onGetAnnouncement', msg);
-
- if (result.item)
- this.item = result.item;
-
- this.getMaterials(this.item);
-
- let augment = this.find('[action="augment"]').addClass('disabled');
- if ((result.item.power || 0) < 3)
- augment.removeClass('disabled');
- else if (this.action === 'augment')
- this.find('[action="reroll"]').click();
- },
-
- openInventory: function () {
- this.waiting = true;
-
- this.eventCloseInv = this.onEvent('onHideInventory', this.onHideInventory.bind(this));
- this.eventClickInv = this.onEvent('beforeInventoryClickItem', this.onHideInventory.bind(this));
-
- events.emit('onShowInventory');
- },
-
- onHideInventory: function (msg) {
- if (msg)
- msg.success = false;
-
- this.waiting = false;
-
- if (!msg || !msg.item) {
- this.offEvent(this.eventCloseInv);
- this.offEvent(this.eventClickInv);
-
- return;
- } else if (!msg.item.slot || msg.item.noAugment) {
- let resultMsg = {
- msg: 'Incorrect Item Type',
- type: 'failure',
- zIndex: 9999999,
- top: 180
- };
- events.emit('onGetAnnouncement', resultMsg);
-
- return;
- }
-
- this.find('.selected').removeClass('selected');
- this.find('[action="augment"]').addClass('selected');
- this.action = 'augment';
-
- let augment = this.find('[action="augment"]').addClass('disabled');
- if ((msg.item.power || 0) < 3)
- augment.removeClass('disabled');
-
- let reforge = this.find('[action="reforge"]').addClass('disabled');
- if (msg.item.spell)
- reforge.removeClass('disabled');
-
- let reslot = this.find('[action="reslot"]').addClass('disabled');
- if (!msg.item.effects && msg.item.slot !== 'tool')
- reslot.removeClass('disabled');
-
- let relevel = this.find('[action="relevel"]').addClass('disabled');
- if (msg.item.slot !== 'tool')
- relevel.removeClass('disabled');
-
- this.offEvent(this.eventClickInv);
-
- $('.uiInventory').data('ui').hide();
- this.show();
-
- this.el.show();
- this.shown = true;
-
- msg.success = false;
-
- if (!msg || !msg.item || !msg.item.slot)
- return;
-
- this.item = msg.item;
-
- this.getMaterials(msg.item);
- },
-
- getMaterials: function (item) {
- this.setDisabled(true);
-
- client.request({
- cpn: 'player',
- method: 'performAction',
- data: {
- cpn: 'inventory',
- method: 'getEnchantMaterials',
- data: {
- itemId: item.id,
- action: this.action
- }
- },
- callback: this.onGetMaterials.bind(this, item)
- });
- },
-
- onGetMaterials: function (item, result) {
- this.find('.item').remove();
- this.drawItem(this.find('.item-picker'), item);
-
- this.find('.actionButton').removeClass('disabled').addClass('disabled');
-
- if (result.materials) {
- let material = result.materials[0];
- if (material) {
- let hasMaterials = window.player.inventory.items.find(i => i.name === material.name);
- if (hasMaterials) {
- material.quantityText = hasMaterials.quantity + '/' + material.quantity;
- hasMaterials = hasMaterials.quantity >= material.quantity;
- } else {
- if (!material.quantityText)
- material.quantityText = '';
- material.quantityText += '0/' + material.quantity;
- }
-
- if (hasMaterials)
- this.find('.actionButton').removeClass('disabled');
-
- this.drawItem(this.find('.material'), material, !hasMaterials);
- }
- }
-
- this.setDisabled(false);
- },
-
- onGetItems: function (items) {
- let elMaterial = this.find('.material .item');
- if (!elMaterial.length)
- return;
-
- let itemMaterial = elMaterial.data('item');
- let elQuantity = elMaterial.find('.quantity');
- let invMaterial = items.find(i => i.name === itemMaterial.name) || { quantity: 0 };
-
- let currentText = elQuantity.html().split('/');
- let newText = invMaterial.quantity + '/' + currentText[1];
-
- elQuantity.html(newText);
-
- let elButton = this.find('.actionButton').removeClass('disabled');
- if (invMaterial.quantity < currentText[1]) {
- elButton.addClass('disabled');
- elQuantity.addClass('red');
- } else {
- elButton.removeClass('disabled');
- elQuantity.removeClass('red');
- }
- },
-
- drawItem: function (container, item, redQuantity) {
- container.find('.icon').hide();
-
- let imgX = -item.sprite[0] * 64;
- let imgY = -item.sprite[1] * 64;
-
- let spritesheet = item.spritesheet || '../../../images/items.png';
- 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 el = $(templateItem)
- .appendTo(container);
-
- el
- .data('item', item)
- .on('mousemove', this.onHover.bind(this, el, item))
- .on('mouseleave', this.hideTooltip.bind(this, el, item))
- .find('.icon')
- .css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px');
-
- if (item.quantity) {
- let quantityText = item.quantityText;
- el.find('.quantity').html(quantityText);
- if (redQuantity)
- el.find('.quantity').addClass('red');
- }
- },
-
- onHover: function (el, item, e) {
- if (item)
- this.hoverItem = item;
- else
- item = this.hoverItem;
-
- let ttPos = null;
-
- if (el) {
- ttPos = {
- x: ~~(e.clientX + 32),
- y: ~~(e.clientY)
- };
- }
-
- events.emit('onShowItemTooltip', item, ttPos, true);
- },
-
- hideTooltip: function (el, item, e) {
- events.emit('onHideItemTooltip', this.hoverItem);
- this.hoverItem = null;
- },
-
- beforeHide: function () {
- if (this.waiting)
- return;
-
- this.item = null;
- this.offEvent(this.eventCloseInv);
- this.offEvent(this.eventClickInv);
- },
-
- toggle: function () {
- this.shown = !this.el.is(':visible');
-
- if (this.shown) {
- this.find('.item').remove();
- this.find('.icon').show();
- this.find('.actionButton').removeClass('disabled').addClass('disabled');
- this.show();
- } else
- this.hide();
- },
-
- onKey: function (isDown, key) {
- if (isDown && key === 'm')
- this.toggle();
- else if (key === 'shift' && this.hoverItem)
- this.onHover();
- }
- };
-});
diff --git a/src/client/ui/templates/smithing/styles.less b/src/client/ui/templates/smithing/styles.less
deleted file mode 100644
index 8631019d..00000000
--- a/src/client/ui/templates/smithing/styles.less
+++ /dev/null
@@ -1,186 +0,0 @@
-@import "../../../css/colors.less";
-
-.uiSmithing {
- display: none;
- background-color: @blackB;
- border: 5px solid @blackB;
- text-align: center;
-
- > .heading {
- color: @blueA;
- width: 100%;
- height: 36px;
- background-color: @blackB;
-
- .heading-text {
- padding-top: 8px;
- margin: auto;
- }
-
- }
-
- .bottom {
- height: 170px;
- background-color: @blackC;
- padding: 10px;
- }
-
- .col {
- float: left;
- margin-right: 10px;
-
- &:last-child {
- margin-right: 0px;
- }
-
- .heading {
- width: 80px;
- height: 16px;
- color: @white;
- text-align: center;
- margin-bottom: 10px;
- }
-
- .content {
- width: 80px;
- height: 80px;
- background-color: @blackD;
-
- &.chance {
- padding-top: 32px;
- color: @white;
- text-align: center;
- }
-
- &.item-picker,
- &.actionButton {
- cursor: pointer;
-
- &:hover {
- background-color: @blackC;
- }
-
- }
-
- &.item-picker {
- > .icon {
- margin: 8px;
- display: inline-block;
- width: 64px;
- height: 64px;
- background: url('../../../images/uiIcons.png') -256px -64px;
- }
-
- }
-
- &.actionButton {
- padding: 8px;
-
- .icon {
- width: 64px;
- height: 64px;
- background: url('../../../images/uiIcons.png') -192px -64px;
- }
-
- }
-
- .item {
- width: 100%;
- height: 100%;
- float: left;
- position: relative;
- cursor: pointer;
- box-sizing: border-box;
-
- .quantity {
- left: 6px;
- bottom: 3px;
- position: absolute;
- color: @white;
- filter: drop-shadow(0px -2px 0px @blackD)
- drop-shadow(0px 2px 0px @blackD)
- drop-shadow(2px 0px 0px @blackD)
- drop-shadow(-2px 0px 0px @blackD);
- -moz-filter: drop-shadow(0px -2px 0px @blackD)
- drop-shadow(0px 2px 0px @blackD)
- drop-shadow(2px 0px 0px @blackD)
- drop-shadow(-2px 0px 0px @blackD);
-
- &.red {
- color: @red;
- }
-
- }
-
- .icon {
- width: 64px;
- height: 64px;
- position: absolute;
- left: 8px;
- top: 8px;
- 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);
- -moz-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);
- }
-
- }
-
- }
-
- &:first-child {
- .heading {
- width: 190px;
- }
-
- .content {
- width: 190px;
- background-color: transparent;
-
- .col-btn {
- height: calc((100% - 10px) / 2);
- width: 100%;
- color: #f2f5f5;
- text-align: center;
- padding-top: 10px;
- background-color: @blackB;
- margin-bottom: 10px;
- cursor: pointer;
-
- &.selected {
- color: @orangeA;
- }
-
- &:hover {
- background-color: @blackA;
- }
-
- &.col-half {
- width: calc((100% - 10px) / 2);
- float: left;
-
- &:nth-child(2n + 1) {
- margin-right: 10px;
- }
-
- }
-
- &:not(.col-half) {
- clear: both;
- }
-
- }
-
- }
-
- }
-
- }
-
-}
diff --git a/src/client/ui/templates/smithing/template.html b/src/client/ui/templates/smithing/template.html
deleted file mode 100644
index 1d9de9c7..00000000
--- a/src/client/ui/templates/smithing/template.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
action
-
-
augment
-
scour
-
reroll
-
relevel
-
reslot
-
reforge
-
-
-
-
-
-
-
diff --git a/src/client/ui/templates/smithing/templateItem.html b/src/client/ui/templates/smithing/templateItem.html
deleted file mode 100644
index 9d3179db..00000000
--- a/src/client/ui/templates/smithing/templateItem.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/client/ui/templates/workbench/styles.less b/src/client/ui/templates/workbench/styles.less
index b9eba0fc..832ac868 100644
--- a/src/client/ui/templates/workbench/styles.less
+++ b/src/client/ui/templates/workbench/styles.less
@@ -2,17 +2,20 @@
.uiWorkbench {
display: none;
- width: 720px;
- height: 385px;
- border: 5px solid fade(@blackB, 90%);
- text-align: center;
+ width: 827px;
+ height: 447px;
+ border: 5px solid @blackB;
color: @white;
+ position: relative;
+ z-index: 2;
- > .heading {
- color: @blueA;
+ > .heading,
+ > .itemPicker > .heading {
+ color: @orangeA;
width: 100%;
height: 36px;
- background-color: fade(@blackB, 90%);
+ background-color: @blackB;
+ text-align: center;
.heading-text {
padding-top: 8px;
@@ -21,14 +24,15 @@
}
- .bottom {
- background-color: fade(@blackC, 90%);
+ > .bottom {
+ background-color: @blackC;
height: calc(100% - 36px);
width: 100%;
.heading {
color: @blueB;
margin-bottom: 10px;
+ text-align: center;
}
.left,
@@ -44,14 +48,18 @@
.list {
height: calc(100% - 25px);
overflow-y: auto;
+ display: flex;
+ flex-direction: column;
.item {
width: 100%;
- padding: 5px 0px;
+ padding: 5px 10px;
cursor: pointer;
+ color: @grayB;
&.selected {
background-color: @blackB;
+ color: @white;
}
&:hover {
@@ -66,6 +74,9 @@
.right {
width: calc(100% - 300px);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
> * {
width: 100%;
@@ -73,17 +84,24 @@
.info {
height: calc(100% - 100px - 35px);
+ flex: 1;
.title {
- color: @orangeA;
+ color: @blueB;
padding-bottom: 10px;
+ text-align: center;
+ }
+
+ .description {
+ color: @grayB;
+ text-align: justify;
}
}
.materialList {
- height: 100px;
visibility: hidden;
+ margin-bottom: 20px;
.material {
&.need {
@@ -94,6 +112,24 @@
}
+ .needItems {
+ display: none;
+ margin-bottom: 20px;
+ flex-direction: column;
+
+ .title {
+ color: @blueB;
+ padding-bottom: 10px;
+ text-align: center;
+ }
+
+ .list {
+ display: flex;
+ justify-content: space-around;
+ }
+
+ }
+
.buttons {
height: 40px;
@@ -123,6 +159,24 @@
}
+ > .itemPicker {
+ display: none;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ background-color: @blackC;
+ flex-direction: column;
+
+ .list {
+ display: flex;
+ flex-wrap: wrap;
+ overflow-y: auto;
+ }
+
+ }
+
}
.mobile .uiWorkbench {
diff --git a/src/client/ui/templates/workbench/template.html b/src/client/ui/templates/workbench/template.html
index 7fbca9dd..fb6655fb 100644
--- a/src/client/ui/templates/workbench/template.html
+++ b/src/client/ui/templates/workbench/template.html
@@ -1,6 +1,6 @@