From 3c672dae4051f08e8085e44cc5d4985ec95d6544 Mon Sep 17 00:00:00 2001 From: Big Bad Waffle Date: Thu, 16 Feb 2017 21:58:52 +0200 Subject: [PATCH] Runes now display on EQ screen --- .../ui/templates/equipment/equipment.js | 18 +++++++++++++++ src/client/ui/templates/equipment/styles.css | 2 +- src/client/ui/templates/equipment/styles.less | 22 ++++++++++++++++--- .../ui/templates/equipment/template.html | 4 ++++ src/server/server.js | 2 +- 5 files changed, 43 insertions(+), 5 deletions(-) diff --git a/src/client/ui/templates/equipment/equipment.js b/src/client/ui/templates/equipment/equipment.js index abbcc984..68a5247f 100644 --- a/src/client/ui/templates/equipment/equipment.js +++ b/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) { diff --git a/src/client/ui/templates/equipment/styles.css b/src/client/ui/templates/equipment/styles.css index 3bd52af3..6d5fb9a1 100644 --- a/src/client/ui/templates/equipment/styles.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/src/client/ui/templates/equipment/styles.less b/src/client/ui/templates/equipment/styles.less index 7b49f6ef..e9399e90 100644 --- a/src/client/ui/templates/equipment/styles.less +++ b/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; diff --git a/src/client/ui/templates/equipment/template.html b/src/client/ui/templates/equipment/template.html index ec72acba..efb7ee47 100644 --- a/src/client/ui/templates/equipment/template.html +++ b/src/client/ui/templates/equipment/template.html @@ -25,6 +25,10 @@
+
+
+
+
diff --git a/src/server/server.js b/src/server/server.js index 757da4c6..ed2f7037 100644 --- a/src/server/server.js +++ b/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