Equipment UI enhancements

src/client/js/components/spellbook.js

@@ -72,13 +72,15 @@ define([
 
 			if (blueprint.getSpells) {
 				blueprint.getSpells.forEach(function(s) {
-					var foundIndex = this.spells.firstIndex(fs => fs.id == s.id);
-					if (foundIndex != -1) {
-						this.spells.splice(foundIndex, 1, s);
+					if (this.spells.find(function(spell) {
+						return (spell.id == s.id);
+					}))
 						return;
-					}
-
-					this.spells.push(s);
+						
+					if (this.spells.length - 1 >= s.id)
+						this.spells.splice(s.id, 0, s);
+					else
+						this.spells.push(s);
 				}, this);
 
 				events.emit('onGetSpells', this.spells);

src/client/ui/templates/characters/characters.js

@@ -176,7 +176,7 @@ define([
 				this.find('.btnPlay').addClass('disabled');
 			}
 
-			//this.find('.btnPlay').click();
+			this.find('.btnPlay').click();
 		},
 
 		setMessage: function(msg) {

src/client/ui/templates/equipment/equipment.js

@@ -34,14 +34,13 @@ define([
 
 			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
 			this.onEvent('onKeyUp', this.onKeyUp.bind(this));
-
-			this.find('.slot').on('click', this.buildSlot.bind(this));
 		},
 
 		toggle: function(show) {
 			this.shown = !this.el.is(':visible');
 
 			if (this.shown) {
+				this.find('.itemList').hide();
 				this.show();
 				this.onGetStats();
 				this.onGetItems();
@@ -59,7 +58,7 @@ define([
 			else if (key == 'shift') {
 				this.shiftDown = true;
 				if (this.hoverItem)
-					this.onHoverItem(this.hoverEl, this.hoverItem, null);
+					this.onHoverItem(this.hoverEl, this.hoverItem, this.hoverCompare);
 			}
 		},
 		onKeyUp: function(key) {
@@ -84,73 +83,98 @@ define([
 
 			this.find('.slot').addClass('empty');
 
-			items
-				.filter(function(item) {
-					return ((item.eq) && (item.slot));
-				}, this)
-				.forEach(function(item) {
-					var imgX = -item.sprite[0] * 64;
-					var imgY = -item.sprite[1] * 64;
+			var skipSpellId = 0;
 
-					var elSlot = this.find('[slot="' + item.slot + '"]');
-					elSlot
-						.removeClass('empty')
-						.find('.icon')
-						.css('background', 'url(../../../images/items.png) ' + imgX + 'px ' + imgY + 'px')
-						.on('mousemove', this.onHoverItem.bind(this, elSlot, item, null))
-						.on('mouseleave', this.onHoverItem.bind(this, null, null))
-						.on('click', this.buildSlot.bind(this, item.slot));
-				}, this);
+			this.find('[slot]')
+				.removeData('item')
+				.addClass('empty')
+				.find('.icon')
+					.off()
+					.css('background', '')
+					.on('click', this.buildSlot.bind(this));
 
 			items
 				.filter(function(item) {
-					return ((item.slot != 'twoHanded') && (item.spellId != null));
+					var spellId = item.spellId;
+					if ((spellId != null) && (item.slot))
+						skipSpellId = spellId;
+
+					return ((item.eq) && ((item.slot) || (item.spellId != null)));
 				}, this)
 				.forEach(function(item) {
 					var imgX = -item.sprite[0] * 64;
 					var imgY = -item.sprite[1] * 64;
 
-					var elSlot = this.find('[slot="rune-' + item.spellId + '"]');
+					var slot = item.slot;
+					if (!slot) {
+						var spellId = item.spellId;
+						if (spellId > skipSpellId)
+							spellId--;
+						slot = 'rune-' + spellId;
+					}
+
+					var elSlot = this.find('[slot="' + slot + '"]');
 					elSlot
+						.data('item', item)
 						.removeClass('empty')
 						.find('.icon')
-						.css('background', 'url(../../../images/items.png) ' + imgX + 'px ' + imgY + 'px')
-						.on('mousemove', this.onHoverItem.bind(this, elSlot, item, null))
-						.on('mouseleave', this.onHoverItem.bind(this, null, null))
-						.on('click', this.buildSlot.bind(this, item.slot));
+							.css('background', 'url(../../../images/items.png) ' + imgX + 'px ' + imgY + 'px')
+							.off()
+							.on('mousemove', this.onHoverItem.bind(this, elSlot, item, null))
+							.on('mouseleave', this.onHoverItem.bind(this, null, null))
+							.on('click', this.buildSlot.bind(this, elSlot));
 				}, this);
 		},
 
-		buildSlot: function(e) {
-			var slot = $(e.currentTarget).attr('slot');
+		buildSlot: function(el) {
+			if (el.currentTarget)
+				el = $(el.currentTarget).parent();
+
+			var slot = el.attr('slot');
+			var isRune = (slot.indexOf('rune') == 0);
 
 			var container = this.find('.itemList')
 				.empty()
 				.show();
 
-			this.hoverCompare = this.items.find(function(item) {
-				return ((item.slot == slot) && (item.eq));
-			});
+			this.hoverCompare = el.data('item');
 
 			var items = this.items
 				.filter(function(item) {
-					return ((item.slot == slot) && (!item.eq));
+					if (isRune)
+						return ((!item.slot) && (item.spell) && (!item.eq));
+					else
+						return ((item.slot == slot) && (!item.eq));
 				}, this);
+			items.splice(0, 0, {
+				name: 'None',
+				slot: this.hoverCompare ? this.hoverCompare.slot : null,
+				id: this.hoverCompare ? this.hoverCompare.id : null,
+				empty: true
+			});
+			if (this.hoverCompare)
+				items.splice(1, 0, this.hoverCompare);
 
 			items
 				.forEach(function(item) {
-					var imgX = -item.sprite[0] * 64;
-					var imgY = -item.sprite[1] * 64;
+					var sprite = item.sprite || [7, 0];
+
+					var spriteSheet = item.empty ? 'uiIcons' : 'items';
+					var imgX = -sprite[0] * 64;
+					var imgY = -sprite[1] * 64;
 
 					var el = $('<div class="slot"><div class="icon"></div></div>')
 						.appendTo(container);
 
 					el
 						.find('.icon')
-						.css('background', 'url(../../../images/items.png) ' + imgX + 'px ' + imgY + 'px')
+						.css('background', 'url(../../../images/' + spriteSheet + '.png) ' + imgX + 'px ' + imgY + 'px')
 						.on('mousemove', this.onHoverItem.bind(this, el, item, null))
 						.on('mouseleave', this.onHoverItem.bind(this, null, null))
 						.on('click', this.equipItem.bind(this, item));
+
+					if (item == this.hoverCompare)
+						el.find('.icon').addClass('eq');
 				}, this);
 
 			if (items.length == 0)
@@ -158,13 +182,43 @@ define([
 		},
 
 		equipItem: function(item) {
+			if (item == this.hoverCompare) {
+				this.find('.itemList').hide();
+				return;
+			}
+
+			var cpn = 'equipment';
+			var method = 'equip';
+			var data = item.id;
+
+			if (item.empty)
+				method = 'unequip';
+
+			if (!item.slot) {
+				cpn = 'inventory';
+				method = 'learnAbility';
+				data = {
+					id: item.id,
+					replaceId: this.hoverCompare ? this.hoverCompare.id : null
+				};
+
+				if (item.empty) {
+					if (!this.hoverCompare) {
+						this.find('.itemList').hide();
+						return;
+					}
+					else
+						data = this.hoverCompare.id;
+				}
+			}
+
 			client.request({
 				cpn: 'player',
 				method: 'performAction',
 				data: {
-					cpn: 'equipment',
-					method: 'equip',
-					data: item.id
+					cpn: cpn,
+					method: method,
+					data: data
 				}
 			});
 

src/client/ui/templates/equipment/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}[class^="ui"] .el{height:35px;text-align:center;padding:0 0 0 0;background-color:transparent}[class^="ui"] .textbox{border:none;outline:none;font-size:16px}[class^="ui"] div.textbox{padding-top:6px}[class^="ui"] .button{cursor:pointer;padding-top:10px}[class^="ui"] .button:hover{background-color:#473456}[class^="ui"] .spacer-h{width:100%}.uiEquipment{display:none;z-index:2;border:5px solid #3c3f4c;text-align:center;width:458px;height:622px}.uiEquipment>.heading{color:#f2f5f5;width:100%;height:36px;background-color:#3c3f4c}.uiEquipment>.heading .heading-text{padding-top:8px;margin:auto}.uiEquipment .bottom{height:calc(100% - 36px);background-color:#373041}.uiEquipment .bottom .tabs{width:100%;height:40px;padding:8px 8px 0 8px}.uiEquipment .bottom .tabs .tab{cursor:pointer;background-color:#3c3f4c;color:#f2f5f5;margin-right:8px;float:left;height:100%;padding-top:8px;padding-left:8px;padding-right:8px;width:calc((100% - 24px) / 4)}.uiEquipment .bottom .tabs .tab:hover{background-color:#505360}.uiEquipment .bottom .tabs .tab.selected{background-color:#505360;color:#48edff}.uiEquipment .bottom .tabs .tab:last-child{margin-right:0}.uiEquipment .bottom .left,.uiEquipment .bottom .stats,.uiEquipment .bottom .right{float:left;height:440px}.uiEquipment .bottom .stats{width:calc(100% - (2 * 96px));padding-top:16px}.uiEquipment .bottom .stats .stat{height:22px;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}.uiEquipment .bottom .stats .stat.blueText>font{color:#3fa7dd}.uiEquipment .bottom .stats .stat.empty{height:22px}.uiEquipment .bottom .stats .stat.gold font{color:#faac45}.uiEquipment .bottom .left,.uiEquipment .bottom .right,.uiEquipment .bottom .itemList,.uiEquipment .bottom .runes{width:96px;padding:8px}.uiEquipment .bottom .left .slot,.uiEquipment .bottom .right .slot,.uiEquipment .bottom .itemList .slot,.uiEquipment .bottom .runes .slot{width:80px;height:80px;background-color:#312136;margin-bottom:8px;cursor:pointer;padding:8px}.uiEquipment .bottom .left .slot:last-child,.uiEquipment .bottom .right .slot:last-child,.uiEquipment .bottom .itemList .slot:last-child,.uiEquipment .bottom .runes .slot:last-child{margin-bottom:0}.uiEquipment .bottom .left .slot .icon,.uiEquipment .bottom .right .slot .icon,.uiEquipment .bottom .itemList .slot .icon,.uiEquipment .bottom .runes .slot .icon{height:100%}.uiEquipment .bottom .left .slot:hover .icon,.uiEquipment .bottom .right .slot:hover .icon,.uiEquipment .bottom .itemList .slot:hover .icon,.uiEquipment .bottom .runes .slot:hover .icon{filter:brightness(160%)}.uiEquipment .bottom .left .slot:hover.empty,.uiEquipment .bottom .right .slot:hover.empty,.uiEquipment .bottom .itemList .slot:hover.empty,.uiEquipment .bottom .runes .slot:hover.empty{background-color:rgba(72,237,255,0.1)}.uiEquipment .bottom .runes{width:100%;height:80px;float:left;padding-left:calc((100% - (80px * 2) - 8px) / 2)}.uiEquipment .bottom .runes .slot{float:left;margin-right:8px}.uiEquipment .bottom .runes .slot:last-child{margin-right:0}.uiEquipment .bottom .itemList{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#373041;padding:0}.uiEquipment .bottom .itemList .slot{float:left;margin:8px 0 0 8px}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}[class^="ui"] .el{height:35px;text-align:center;padding:0 0 0 0;background-color:transparent}[class^="ui"] .textbox{border:none;outline:none;font-size:16px}[class^="ui"] div.textbox{padding-top:6px}[class^="ui"] .button{cursor:pointer;padding-top:10px}[class^="ui"] .button:hover{background-color:#473456}[class^="ui"] .spacer-h{width:100%}.uiEquipment{display:none;z-index:2;border:5px solid #3c3f4c;text-align:center;width:458px;height:534px}.uiEquipment>.heading{color:#f2f5f5;width:100%;height:36px;background-color:#3c3f4c}.uiEquipment>.heading .heading-text{padding-top:8px;margin:auto}.uiEquipment .bottom{height:calc(100% - 36px);background-color:#373041}.uiEquipment .bottom .tabs{width:100%;height:40px;padding:8px 8px 0 8px}.uiEquipment .bottom .tabs .tab{cursor:pointer;background-color:#3c3f4c;color:#f2f5f5;margin-right:8px;float:left;height:100%;padding-top:8px;padding-left:8px;padding-right:8px;width:calc((100% - 24px) / 4)}.uiEquipment .bottom .tabs .tab:hover{background-color:#505360}.uiEquipment .bottom .tabs .tab.selected{background-color:#505360;color:#48edff}.uiEquipment .bottom .tabs .tab:last-child{margin-right:0}.uiEquipment .bottom .left,.uiEquipment .bottom .stats,.uiEquipment .bottom .right{float:left;height:440px}.uiEquipment .bottom .left,.uiEquipment .bottom .right,.uiEquipment .bottom .itemList,.uiEquipment .bottom .runes{width:96px;padding:8px}.uiEquipment .bottom .left .slot,.uiEquipment .bottom .right .slot,.uiEquipment .bottom .itemList .slot,.uiEquipment .bottom .runes .slot{width:80px;height:80px;background-color:#312136;margin-bottom:8px;cursor:pointer;padding:8px}.uiEquipment .bottom .left .slot:last-child,.uiEquipment .bottom .right .slot:last-child,.uiEquipment .bottom .itemList .slot:last-child,.uiEquipment .bottom .runes .slot:last-child{margin-bottom:0}.uiEquipment .bottom .left .slot .icon,.uiEquipment .bottom .right .slot .icon,.uiEquipment .bottom .itemList .slot .icon,.uiEquipment .bottom .runes .slot .icon{height:100%}.uiEquipment .bottom .left .slot:hover .icon,.uiEquipment .bottom .right .slot:hover .icon,.uiEquipment .bottom .itemList .slot:hover .icon,.uiEquipment .bottom .runes .slot:hover .icon{filter:brightness(160%)}.uiEquipment .bottom .left .slot:hover.empty,.uiEquipment .bottom .right .slot:hover.empty,.uiEquipment .bottom .itemList .slot:hover.empty,.uiEquipment .bottom .runes .slot:hover.empty{background-color:rgba(72,237,255,0.1)}.uiEquipment .bottom .middle{float:left;width:calc(100% - (2 * 96px))}.uiEquipment .bottom .middle .stats{width:100%;padding-top:16px;height:calc(440px - 80px)}.uiEquipment .bottom .middle .stats .stat{height:22px;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}.uiEquipment .bottom .middle .stats .stat.blueText>font{color:#3fa7dd}.uiEquipment .bottom .middle .stats .stat.empty{height:22px}.uiEquipment .bottom .middle .stats .stat.gold font{color:#faac45}.uiEquipment .bottom .middle .runes{width:100%;height:80px;padding-left:calc((100% - (80px * 2) - 8px) / 2)}.uiEquipment .bottom .middle .runes .slot{float:left;margin-right:8px}.uiEquipment .bottom .middle .runes .slot:last-child{margin-right:0}.uiEquipment .bottom .itemList{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#373041;padding:0}.uiEquipment .bottom .itemList .slot{float:left;margin:8px 0 0 8px}.uiEquipment .bottom .itemList .slot .icon{position:relative}.uiEquipment .bottom .itemList .slot .icon.eq:before{content:'eq';left:-2px;bottom:-3px;position:absolute;color:#f2f5f5;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}

src/client/ui/templates/equipment/styles.less

@@ -6,7 +6,7 @@
 	border: 5px solid @blackB;
 	text-align: center;
 	width: 458px;
-	height: 622px;
+	height: 534px;
 
 	> .heading {
 		color: @white;
@@ -61,35 +61,6 @@
 			height: 440px;
 		}
 
-		.stats {
-			width: calc(100% - (2 * 96px));
-			padding-top: 16px;
-
-			.stat {
-				height: 22px;
-
-				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);
-
-				&.blueText > font {
-					color: @blue;
-				}
-
-				&.empty {
-					height: 22px;
-				}
-
-				&.gold {
-					font {
-						color: @yellowB;
-					}
-				}
-			}
-		}
-
 		.left, .right, .itemList, .runes {
 			width: 96px;
 			padding: 8px;	
@@ -122,18 +93,52 @@
 			}
 		}
 
-		.runes {
-			width: 100%;
-			height: 80px;
+		.middle {
 			float: left;
-			padding-left: calc((100% - (80px * 2) - 8px) / 2);
+			width: calc(100% - (2 * 96px));
 
-			.slot {
-				float: left;
-				margin-right: 8px;
+			.stats {
+				width: 100%;
+				padding-top: 16px;
+				height: calc(440px - 80px);
 
-				&:last-child {
-					margin-right: 0px;
+				.stat {
+					height: 22px;
+
+					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);
+
+					&.blueText > font {
+						color: @blue;
+					}
+
+					&.empty {
+						height: 22px;
+					}
+
+					&.gold {
+						font {
+							color: @yellowB;
+						}
+					}
+				}
+			}
+
+			.runes {
+				width: 100%;
+				height: 80px;
+				padding-left: calc((100% - (80px * 2) - 8px) / 2);
+
+				.slot {
+					float: left;
+					margin-right: 8px;
+
+					&:last-child {
+						margin-right: 0px;
+					}
 				}
 			}
 		}
@@ -151,6 +156,25 @@
 			.slot {
 				float: left;
 				margin: 8px 0px 0px 8px;
+
+				.icon {
+					position: relative;
+
+					&.eq {
+						&:before {
+							content: 'eq';
+							left: -2px;
+							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);
+						}				
+					}
+				}
 			}
 		}
 	}	

src/client/ui/templates/equipment/template.html

@@ -16,7 +16,13 @@
 			<div class="slot" slot="hands"><div class="icon"></div></div>
 			<div class="slot" slot="finger"><div class="icon"></div></div>
 		</div>
-		<div class="stats">
+		<div class="middle">
+			<div class="stats">
+			</div>
+			<div class="runes">
+				<div class="slot" slot="rune-0"><div class="icon"></div></div>
+				<div class="slot" slot="rune-1"><div class="icon"></div></div>
+			</div>
 		</div>
 		<div class="right">
 			<div class="slot" slot="waist"><div class="icon"></div></div>
@@ -25,10 +31,6 @@
 			<div class="slot" slot="trinket"><div class="icon"></div></div>
 			<div class="slot" slot="twoHanded"><div class="icon"></div></div>
 		</div>
-		<div class="runes">
-			<div class="slot" slot="rune-1"><div class="icon"></div></div>
-			<div class="slot" slot="rune-2"><div class="icon"></div></div>
-		</div>
 		<div class="itemList">
 			
 		</div>

src/client/ui/templates/inventory/styles.less

@@ -81,13 +81,6 @@
 			}
 
 			&.eq {
-				/* border: 4px solid lighten(@blackB, 4%); */
-
-				/* .icon {
-					left: -4px;
-					top: -4px;
-				} */
-
 				.quantity {
 					color: @yellow;
 				}

src/client/ui/templates/login/login.js

@@ -28,15 +28,15 @@ define([
 				.on('keyup', this.onKeyDown.bind(this))
 				.eq(0).focus();
 
-			/*var name = 'aaa';
+			var name = 'aaa';
 			if (window.location.search == '?b')
 				name = 'bbb';
 			else if (window.location.search == '?c')
 				name = 'ccc';
 
-			this.find('input').eq(0).val('');
-			this.find('input').eq(1).val('');
-			this.find('.btnLogin').click();*/
+			this.find('input').eq(0).val('waffle');
+			this.find('input').eq(1).val('1skulpie');
+			this.find('.btnLogin').click();
 
 			renderer.buildTitleScreen();
 		},

src/client/ui/templates/quests/styles.css

@@ -1 +1 @@
-.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}[class^="ui"] .el{height:35px;text-align:center;padding:0 0 0 0;background-color:transparent}[class^="ui"] .textbox{border:none;outline:none;font-size:16px}[class^="ui"] div.textbox{padding-top:6px}[class^="ui"] .button{cursor:pointer;padding-top:10px}[class^="ui"] .button:hover{background-color:#473456}[class^="ui"] .spacer-h{width:100%}.uiQuests{position:absolute;right:16px;top:112px}.uiQuests .heading{color:#ffeb38;padding:8px;background-color:rgba(58,59,74,0.9)}.uiQuests .list .quest{cursor:pointer;padding:8px;background-color:rgba(58,59,74,0.9)}.uiQuests .list .quest:hover{background-color:rgba(92,93,117,0.9)}.uiQuests .list .quest .name{color:#f2f5f5}.uiQuests .list .quest .description{color:#8da7a7}.uiQuests .list .quest .ready-text{display:none}.uiQuests .list .quest.active .name{color:#3fa7dd}.uiQuests .list .quest.ready .name{color:#80f643}.uiQuests .list .quest.ready .description{display:none}.uiQuests .list .quest.ready .ready-text{display:block;color:#f2f5f5}
+.q0{color:#f2f5f5}.q1{color:#3fa7dd}.q2{color:#ffeb38}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346}.color-green{color:#80f643}[class^="ui"] .el{height:35px;text-align:center;padding:0 0 0 0;background-color:transparent}[class^="ui"] .textbox{border:none;outline:none;font-size:16px}[class^="ui"] div.textbox{padding-top:6px}[class^="ui"] .button{cursor:pointer;padding-top:10px}[class^="ui"] .button:hover{background-color:#473456}[class^="ui"] .spacer-h{width:100%}.uiQuests{position:absolute;right:10px;top:100px}.uiQuests .heading{color:#ffeb38;padding:8px;background-color:rgba(58,59,74,0.9)}.uiQuests .list .quest{cursor:pointer;padding:8px;background-color:rgba(58,59,74,0.9)}.uiQuests .list .quest:hover{background-color:rgba(92,93,117,0.9)}.uiQuests .list .quest .name{color:#f2f5f5}.uiQuests .list .quest .description{color:#8da7a7}.uiQuests .list .quest .ready-text{display:none}.uiQuests .list .quest.active .name{color:#3fa7dd}.uiQuests .list .quest.ready .name{color:#80f643}.uiQuests .list .quest.ready .description{display:none}.uiQuests .list .quest.ready .ready-text{display:block;color:#f2f5f5}

src/client/ui/templates/quests/styles.less

@@ -2,8 +2,8 @@
 
 .uiQuests {
 	position: absolute;
-	right: 16px;
-	top: 112px;
+	right: 10px;
+	top: 100px;
 	
 
 	.heading {

src/server/components/equipment.js

@@ -66,13 +66,15 @@ define([
 				}
 			}
 
+			var spellId = null;
 			var currentEqId = this.eq[item.slot];
-			if (currentEqId != null)
-				this.unequip(currentEqId);
-
 			var currentEq = this.obj.inventory.findItem(currentEqId);
 			if (currentEq == item)
 				return;
+			if (currentEqId != null) {
+				spellId = currentEq.spellId;
+				this.unequip(currentEqId);
+			}
 
 			var stats = item.stats;
 			for (var s in stats) {
@@ -89,8 +91,12 @@ define([
 			this.obj.spellbook.calcDps();
 
 			if ((!this.obj.mob) || (item.ability)) {
-				if (item.spell)
-					this.obj.inventory.learnAbility(itemId, true);
+				if (item.spell) {
+					this.obj.inventory.learnAbility({
+						id: itemId,
+						spellId: spellId
+					}, true);
+				}
 				else {
 					var result = item;
 					if (item.effects) {

src/server/components/inventory.js

@@ -94,6 +94,13 @@ define([
 		},
 
 		learnAbility: function(id, forceLearn) {
+			var replaceId = null;
+			var newSpellId = id.spellId;
+			if (id.id != null) {
+				replaceId = id.replaceId;
+				id = id.id;
+			}
+
 			var item = this.findItem(id);
 			if ((!item) || (!item.spell) || ((item.spellId == null) && (item.eq) && (!forceLearn))) {
 				if (item)
@@ -104,7 +111,6 @@ define([
 			var spellbook = this.obj.spellbook;
 
 			if ((item.eq) && (!forceLearn)) {
-				item.eq = false;
 				delete item.eq;
 				spellbook.removeSpellById(item.spellId);
 				delete item.spellId;
@@ -112,6 +118,17 @@ define([
 				return;
 			}
 
+			if (replaceId != null) {
+				var replaceItem = this.findItem(replaceId);
+				if (replaceItem) {
+					delete replaceItem.eq;
+					spellbook.removeSpellById(replaceItem.spellId);
+					newSpellId = replaceItem.spellId;
+					delete replaceItem.spellId;
+					this.obj.syncer.setArray(true, 'inventory', 'getItems', replaceItem);
+				}
+			}
+			
 			if (spellbook.spells.length >= 3) {
 				if (item.slot)
 					item.spellId = -1;
@@ -119,7 +136,7 @@ define([
 				return;
 			}
 
-			item.spellId = spellbook.addSpellFromRune(item.spell);
+			item.spellId = spellbook.addSpellFromRune(item.spell, newSpellId);
 			if (item.spellId != -1)
 				item.eq = true;
 			else
@@ -464,9 +481,9 @@ define([
 					this.obj.equipment.equip(item.id);
 			} else {
 				var didEq = false;
-				if ((item.slot) && (this.obj.equipment)) {
-					didEq = this.obj.equipment.autoEquip(item.id);
-				}
+				//if ((item.slot) && (this.obj.equipment)) {
+				//	didEq = this.obj.equipment.autoEquip(item.id);
+				//}
 				if (!didEq) {
 					if (!item.effects)
 						this.obj.syncer.setArray(true, 'inventory', 'getItems', item);

src/server/components/spellbook.js

@@ -73,7 +73,7 @@ define([
 			return s;
 		},
 
-		addSpell: function(options) {
+		addSpell: function(options, spellId) {
 			if (!options.type) {
 				options = {
 					type: options
@@ -116,16 +116,17 @@ define([
 			if ((this.furthestRange == -1) || (builtSpell.range > this.furthestRange))
 				this.furthestRange = builtSpell.range;
 
-			var id = 0;
-			this.spells.forEach(function(s) {
-				if (s.id >= id)
-					id = s.id + 1;
-			});
-			builtSpell.id = id;
+			var id = [0, 1, 2].find(function(s) {
+				return (!this.spells.some(f => (f.id == s)));
+			}, this);
+			builtSpell.id = (spellId == null) ? id : spellId;
 
-			this.spells.push(builtSpell);
+			if (spellId == null)
+				this.spells.push(builtSpell);
+			else
+				this.spells.splice(spellId, 0, builtSpell);
 
-			builtSpell.calcDps();
+			builtSpell.calcDps(null, true);
 
 			if (this.obj.player) 
 				this.obj.syncer.setArray(true, 'spellbook', 'getSpells', builtSpell.simplify());
@@ -133,15 +134,13 @@ define([
 			return builtSpell.id;
 		},
 
-		addSpellFromRune: function(runeSpell) {
+		addSpellFromRune: function(runeSpell, spellId) {
 			var name = runeSpell.name.toLowerCase();
 			var playerSpell = playerSpells.find(s => s.name.toLowerCase() == name);
 			var playerSpellConfig = playerSpellsConfig[name];
 
-			if (!playerSpell) {
-				console.log(runeSpell);
+			if (!playerSpell)
 				return -1;
-			}
 
 			if (!runeSpell.rolls)
 				runeSpell.rolls = {};
@@ -184,7 +183,7 @@ define([
 			delete builtSpell.rolls;
 			delete builtSpell.random;
 
-			return this.addSpell(builtSpell);
+			return this.addSpell(builtSpell, spellId);
 		},
 
 		calcDps: function() {

src/server/config/spells/spellTemplate.js

@@ -49,7 +49,7 @@ define([
 				this.cd--;
 		},
 
-		calcDps: function(target) {
+		calcDps: function(target, noSync) {
 			if (!this.values)
 				return;
 
@@ -84,7 +84,8 @@ define([
 				else
 					this.values.heal = ~~(dmg * 10) / 10 + '/tick';
 
-				this.obj.syncer.setArray(true, 'spellbook', 'getSpells', this.simplify());
+				if (!noSync)
+					this.obj.syncer.setArray(true, 'spellbook', 'getSpells', this.simplify());
 			}
 		},