gitlord
/
isleward
şunun yansıması https://gitlab.com/Isleward/isleward.git
1
0
Çatalla 0
Kod Konular 0 Sürümler 203 Wiki Aktivite
Kaynağa Gözat

restyled eq, gather button and inv tooltips

tags/v0.3.1
Big Bad Waffle 5 yıl önce
ebeveyn
503c51c12c
işleme
89aa1fd2fc
13 değiştirilmiş dosya ile 332 ekleme ve 246 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +4
    -0
      src/client/js/components/serverActions.js
  2. +5
    -0
      src/client/ui/templates/announcements/announcements.js
  3. +208
    -157
      src/client/ui/templates/equipment/styles.less
  4. +61
    -63
      src/client/ui/templates/equipment/template.html
  5. +8
    -1
      src/client/ui/templates/inventory/inventory.js
  6. +6
    -0
      src/client/ui/templates/messages/messages.js
  7. +27
    -20
      src/client/ui/templates/middleHud/middleHud.js
  8. +8
    -3
      src/client/ui/templates/middleHud/styles.less
  9. +1
    -1
      src/client/ui/templates/middleHud/template.html
  10. +1
    -1
      src/client/ui/templates/tooltipItem/tooltipItem.js
  11. +1
    -0
      src/server/components/door.js
  12. +1
    -0
      src/server/components/wardrobe.js
  13. +1
    -0
      src/server/components/workbench.js

+ 4
- 0
src/client/js/components/serverActions.js Dosyayı Görüntüle

@@ -30,6 +30,8 @@ define([
extend: function (blueprint) {
if (blueprint.addActions) {
blueprint.addActions.forEach(function (a) {
this.actions.spliceWhere(f => f.key === a.key);

let exists = this.actions.some(function (ta) {
return ((ta.targetId === a.targetId) && (ta.cpn === a.cpn) && (ta.method === a.method));
});
@@ -51,6 +53,8 @@ define([

delete blueprint.removeActions;
}

events.emit('onGetServerActions', this.actions);
}
};
});

+ 5
- 0
src/client/ui/templates/announcements/announcements.js Dosyayı Görüntüle

@@ -20,6 +20,11 @@ define([
},

onGetAnnouncement: function (e) {
if (isMobile) {
if (['press g to', 'press u to'].some(f => e.msg.toLowerCase().indexOf(f) > -1))
return;
}

this.clearMessage();

let container = this.find('.list');


+ 208
- 157
src/client/ui/templates/equipment/styles.less Dosyayı Görüntüle

@@ -18,11 +18,15 @@
padding-top: 8px;
margin: auto;
}

}

.bottom {
.content {
width: 100%;
height: calc(100% - 36px);
background-color: @blackC;
display: flex;
flex-direction: column;

.tabs {
width: 100%;
@@ -53,18 +57,87 @@
&:last-child {
margin-right: 0px;
}

}

}

.left, .stats, .right, .bottom {
float: left;
.main {
height: 528px;
display: flex;
flex-direction: column;
flex-wrap: wrap;

.left, .right {
width: 96px;
padding: 8px;
}

.left, .stats, .right, .bottom {
height: 528px;
}

.stats {
height: calc(528px - 80px);
width: calc(100% - (2 * 96px));
padding: 16px 8px 8px 8px;

.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);
-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);

&.blueText > font {
color: @blue;
}

&.empty {
height: 22px;
}

&.gold {
font {
color: @yellowB;
}
}
}
}

.quick {
width: calc(100% - (2 * 96px));
height: 80px;
padding: 0px;
display: flex;
justify-content: center;

.slot {

}
}
}

.left, .right, .itemList, .runes, .tools, .quick {
width: 96px;
padding: 8px;
.runes {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 80px;
padding: 8px;

.slot {
&:last-child {
margin-right: 0px;
}
}
}

.left, .right, .itemList, .runes, .tools, .quick {
.slot {
width: 80px;
height: 80px;
@@ -84,143 +157,99 @@
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-1"] .icon { background-position: -256px -448px; }
&[slot="finger-2"] .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="oneHanded"] .icon { background-position: -384px -384px; }
&[slot="offHand"] .icon { background-position: -192px -384px; }
&[slot="tool"] .icon { background-position: -256px -384px; }
&[slot^="rune"] .icon { background-position: -320px -384px; }
&[slot^="quick-0"] .icon { background-position: -128px -384px; }
}

.icon {
height: 100%;
}

.info {
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);
&[slot="head"] .icon {
background-position: -0px -448px;
}

}
&[slot="neck"] .icon {
background-position: -64px -448px;
}

&:hover {
.icon {
filter: brightness(160%);
-moz-filter: brightness(160%);
&[slot="chest"] .icon {
background-position: -128px -448px;
}

&.empty {
background-color: fade(@blueA, 10%);
&[slot="hands"] .icon {
background-position: -192px -448px;
}
}
}
}

.middle {
float: left;
width: calc(100% - (2 * 96px));
&[slot="finger-1"] .icon {
background-position: -256px -448px;
}

.stats {
width: 100%;
padding-top: 16px;
height: calc(440px - 88px);
&[slot="finger-2"] .icon {
background-position: -256px -448px;
}

.stat {
height: 22px;
&[slot="waist"] .icon {
background-position: -320px -448px;
}

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);
&[slot="legs"] .icon {
background-position: -384px -448px;
}

-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);
&[slot="feet"] .icon {
background-position: -448px -448px;
}

&.blueText > font {
color: @blue;
&[slot="trinket"] .icon {
background-position: -448px -384px;
}

&.empty {
height: 22px;
&[slot="oneHanded"] .icon {
background-position: -384px -384px;
}

&.gold {
font {
color: @yellowB;
}
&[slot="offHand"] .icon {
background-position: -192px -384px;
}
}
}

.tools {
width: 100%;
height: 80px;
&[slot="tool"] .icon {
background-position: -256px -384px;
}

.slot {
float: left;
margin-right: 8px;
&[slot^="rune"] .icon {
background-position: -320px -384px;
}

&:last-child {
margin-right: 0px;
&[slot^="quick-0"] .icon {
background-position: -128px -384px;
}
}
}

.tools {
clear: both;
margin-bottom: 8px;
padding-left: calc(50% - 40px);
}
}

.bottom {
height: 80px;
.icon {
height: 100%;
}

.runes {
width: 100%;
height: 80px;
.info {
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);
}

.slot {
float: left;
margin-right: 12px;
&:hover {
.icon {
filter: brightness(160%);
-moz-filter: brightness(160%);
}

&:last-child {
margin-right: 0px;
&.empty {
background-color: fade(@blueA, 10%);
}
}
}
}

.quick .slot {
margin-top: -168px;
margin-left: 184px;
}

.itemList {
display: none;
position: absolute;
@@ -245,18 +274,15 @@
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);
}
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);
}
}

&.new {
@@ -266,23 +292,20 @@
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);
}
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);
}
}
}
}
}
}
}
}

.mobile .uiEquipment {
@@ -291,33 +314,61 @@
margin-left: 5px;
margin-top: 5px;

.bottom {
.left, .right {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex-direction: column;
flex-wrap: wrap;
position: relative;

.left {
flex-wrap: wrap;
.main {
width: calc(100% - 8px);
height: calc(100% - 130px);
padding: 8px 8px 0px 8px;
justify-content: space-between;
position: relative;

.slot {
margin-right: 8px;
.left, .right, .quick {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 70%;
height: calc(100% / 3);

.slot {
margin-bottom: 0px;
}
}

.stats {
width: 30%;
height: calc(100% + 74px);
overflow-y: auto;
position: absolute;
right: 0px;
}
}

.right {
flex-wrap: wrap-reverse;
.quick {
order: 3;
justify-content: center;
padding: 0px 8px 0px 0px;
}

.slot {
margin-left: 8px;
.left {
padding: 0px 8px 0px 0px;
}
}

.middle {
.stats {
height: calc(100% - 88px);
.right {
order: 2;
padding: 0px 8px 0px 0px;
}
}

.runes {
flex-direction: row;
width: calc((100% - 16px) * 0.7);
position: absolute;
left: 1px;
bottom: 8px;
padding: 0px 8px 0px 8px;
}
}
}

+ 61
- 63
src/client/ui/templates/equipment/template.html Dosyayı Görüntüle

@@ -2,99 +2,97 @@
<div class="heading">
<div class="heading-text">hero</div>
</div>
<div class="bottom">
<div class="content">
<div class="tabs">
<div class="tab selected">basic</div>
<div class="tab">offense</div>
<div class="tab">defense</div>
<div class="tab">misc</div>
</div>
<div class="left">
<div class="slot" slot="head">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="neck">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="chest">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="hands">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="finger-1">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="finger-2">
<div class="icon"></div>
<div class="info"></div>
<div class="main">
<div class="left">
<div class="slot" slot="head">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="neck">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="chest">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="hands">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="finger-1">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="finger-2">
<div class="icon"></div>
<div class="info"></div>
</div>
</div>
</div>
<div class="middle">
<div class="stats">
</div>
</div>
<div class="right">
<div class="slot" slot="waist">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="legs">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="feet">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="trinket">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="oneHanded">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="offHand">
<div class="icon"></div>
<div class="info"></div>
<div class="quick">
<div class="slot" slot="quick-0">
<div class="icon"></div>
<div class="info"></div>
</div>
</div>
</div>
<div class="bottom">
<div class="runes">
<div class="slot" slot="rune-1">
<div class="right">
<div class="slot" slot="waist">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="rune-2">
<div class="slot" slot="legs">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="rune-3">
<div class="slot" slot="feet">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="rune-4">
<div class="slot" slot="trinket">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="tool">
<div class="slot" slot="oneHanded">
<div class="icon"></div>
<div class="info"></div>
</div>
</div>
<div class="quick">
<div class="slot" slot="quick-0">
<div class="slot" slot="offHand">
<div class="icon"></div>
<div class="info"></div>
</div>
</div>
</div>
<div class="runes">
<div class="slot" slot="rune-1">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="rune-2">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="rune-3">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="rune-4">
<div class="icon"></div>
<div class="info"></div>
</div>
<div class="slot" slot="tool">
<div class="icon"></div>
<div class="info"></div>
</div>
</div>
<div class="itemList"></div>
</div>
</div>

+ 8
- 1
src/client/ui/templates/inventory/inventory.js Dosyayı Görüntüle

@@ -100,10 +100,14 @@ define([
spritesheet = '../../../images/consumables.png';
}

let clickHandler = this.onMouseDown.bind(this, itemEl, item, true);
if (isMobile)
clickHandler = this.onHover.bind(this, itemEl, item);

itemEl
.data('item', item)
.on('click', this.onClick.bind(this, item))
.on('mousedown', this.onMouseDown.bind(this, itemEl, item, true))
.on('mousedown', clickHandler)
.on('mouseup', this.onMouseDown.bind(this, null, null, false))
.on('mousemove', this.onHover.bind(this, itemEl, item))
.on('mouseleave', this.hideTooltip.bind(this, itemEl, item))
@@ -351,6 +355,9 @@ define([
if (config.length > 0)
events.emit('onContextMenu', config, e);

if (isMobile)
this.hideTooltip(null, this.hoverItem);

e.preventDefault();
return false;
},


+ 6
- 0
src/client/ui/templates/messages/messages.js Dosyayı Görüntüle

@@ -186,6 +186,12 @@ define([
if (this.find('.filter[filter="' + m.type + '"]').hasClass('active'))
el.show();
}

if (m.type === 'loot') {
events.emit('onGetAnnouncement', {
msg: m.message
});
}
}

this.messages.push({


+ 27
- 20
src/client/ui/templates/middleHud/middleHud.js Dosyayı Görüntüle

@@ -10,16 +10,16 @@ define([
return {
tpl: template,

isOnGatherNode: false,

postRender: function () {
this.onEvent('onGetSelfCasting', this.onGetCasting.bind(this));

if (isMobile) {
this.onEvent('onEnterGatherNode', this.onEnterGatherNode.bind(this));
this.onEvent('onExitGatherNode', this.onExitGatherNode.bind(this));
this.onEvent('onRespawn', this.onExitGatherNode.bind(this));
this.onEvent('onShowProgress', this.onExitGatherNode.bind(this));
this.onEvent('onEnterGatherNode', this.toggleGatherButton.bind(this, true));
this.onEvent('onExitGatherNode', this.toggleGatherButton.bind(this, false));
this.onEvent('onRespawn', this.toggleGatherButton.bind(this, false));
this.onEvent('onShowProgress', this.toggleGatherButton.bind(this, false));

this.onEvent('onGetServerActions', this.onGetServerActions.bind(this));

this.find('.btnGather').on('click', this.gather.bind(this));
}
@@ -38,26 +38,33 @@ define([
}
},

onEnterGatherNode: function (msg) {
this.isOnGatherNode = true;

this.toggleGatherButton(true);
},

onExitGatherNode: function (msg) {
this.isOnGatherNode = false;

this.toggleGatherButton(false);
},

toggleGatherButton: function (show) {
let btn = this.find('.btnGather').hide();
let btn = this.find('.btnGather').hide().html('gather');
if (show)
btn.show();
},

gather: function () {
events.emit('onKeyDown', 'g');
let btn = this.find('.btnGather');
let action = btn.data('action');
if (action) {
//Server actions use keyUp
events.emit('onKeyUp', action.key);
} else
events.emit('onKeyDown', 'g');
},

onGetServerActions: function (actions) {
let btn = this.find('.btnGather').hide().data('action', null);

let firstAction = actions[0];
if (!firstAction)
return;

btn
.data('action', firstAction)
.html(firstAction.name)
.show();
}
};
});

+ 8
- 3
src/client/ui/templates/middleHud/styles.less Dosyayı Görüntüle

@@ -1,19 +1,24 @@
@import "../../../css/colors.less";

.middleHud {
.uiMiddleHud {
position: absolute;
left: calc(50% - 12px);
top: calc(50% + 31px);

.btnGather {
display: none;
background-color: @greenC;
background-color: fade(#3a3b4a, 90%);
padding: 8px 10px 8px 10px;
color: @white;
width: 120px;
margin-top: 8px;
margin-left: calc(12px - 60px);
text-align:center;
text-align: center;
position: absolute;
left: calc(50vw - 86px);
top: calc(50vh - 113px);
width: 64px;
height: 64px;
}

.casting {


+ 1
- 1
src/client/ui/templates/middleHud/template.html Dosyayı Görüntüle

@@ -1,4 +1,4 @@
<div class="middleHud">
<div class="uiMiddleHud">
<div class="btn btnGather">gather</div>
<div class="casting">
<div class="bar"></div>


+ 1
- 1
src/client/ui/templates/tooltipItem/tooltipItem.js Dosyayı Görüntüle

@@ -197,7 +197,7 @@ define([
row = '<div class="' + rowClass + '">' + row + '</div>';

return row;
}, )
})
.sort(function (a, b) {
return (a.replace(' enchanted', '').length - b.replace(' enchanted', '').length);
})


+ 1
- 0
src/server/components/door.js Dosyayı Görüntüle

@@ -84,6 +84,7 @@ module.exports = {
if (canAction) {
obj.syncer.setArray(true, 'serverActions', 'addActions', {
key: 'u',
name: this.closed ? 'open door' : 'close door',
action: {
targetId: this.obj.id,
cpn: 'door',


+ 1
- 0
src/server/components/wardrobe.js Dosyayı Görüntüle

@@ -54,6 +54,7 @@ module.exports = {

obj.syncer.setArray(true, 'serverActions', 'addActions', {
key: 'u',
name: 'open wardrobe',
action: {
targetId: this.obj.id,
cpn: 'wardrobe',


+ 1
- 0
src/server/components/workbench.js Dosyayı Görüntüle

@@ -58,6 +58,7 @@ module.exports = {

obj.syncer.setArray(true, 'serverActions', 'addActions', {
key: 'u',
name: 'access workbench',
action: {
targetId: this.obj.id,
cpn: 'workbench',


Yaz Önizleme
Yükleniyor…
İptal
Kaydet