Runes now display on EQ screen

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

@@ -101,6 +101,24 @@ define([
 						.on('mouseleave', this.onHoverItem.bind(this, null, null))
 						.on('click', this.buildSlot.bind(this, item.slot));
 				}, this);
+
+			items
+				.filter(function(item) {
+					return ((item.slot != 'twoHanded') && (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 + '"]');
+					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);
 		},
 
 		buildSlot: function(e) {

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: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:calc(100% - 40px)}.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{width:96px;padding:8px}.uiEquipment .bottom .left .slot,.uiEquipment .bottom .right .slot,.uiEquipment .bottom .itemList .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{margin-bottom:0}.uiEquipment .bottom .left .slot .icon,.uiEquipment .bottom .right .slot .icon,.uiEquipment .bottom .itemList .slot .icon{height:100%}.uiEquipment .bottom .left .slot:hover .icon,.uiEquipment .bottom .right .slot:hover .icon,.uiEquipment .bottom .itemList .slot:hover .icon{filter:brightness(160%)}.uiEquipment .bottom .left .slot:hover.empty,.uiEquipment .bottom .right .slot:hover.empty,.uiEquipment .bottom .itemList .slot:hover.empty{background-color:rgba(72,237,255,0.1)}.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: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}

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

@@ -6,7 +6,7 @@
 	border: 5px solid @blackB;
 	text-align: center;
 	width: 458px;
-	height: 534px;
+	height: 622px;
 
 	> .heading {
 		color: @white;
@@ -58,7 +58,7 @@
 
 		.left, .stats, .right {
 			float: left;
-			height: calc(100% - 40px);
+			height: 440px;
 		}
 
 		.stats {
@@ -90,7 +90,7 @@
 			}
 		}
 
-		.left, .right, .itemList {
+		.left, .right, .itemList, .runes {
 			width: 96px;
 			padding: 8px;	
 
@@ -122,6 +122,22 @@
 			}
 		}
 
+		.runes {
+			width: 100%;
+			height: 80px;
+			float: left;
+			padding-left: calc((100% - (80px * 2) - 8px) / 2);
+
+			.slot {
+				float: left;
+				margin-right: 8px;
+
+				&:last-child {
+					margin-right: 0px;
+				}
+			}
+		}
+
 		.itemList {
 			display: none;
 			position: absolute;

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

@@ -25,6 +25,10 @@
 			<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/server/server.js

@@ -16,7 +16,7 @@ define([
 			});
 
 			var lessMiddleware = require('less-middleware');
-			app.use(lessMiddleware('./', {
+			app.use(lessMiddleware('../', {
 				force: true,
 				render: {
 					strictMath: true