@@ -16,6 +16,12 @@ body { | |||||
top: 0px; | top: 0px; | ||||
z-index: 20; | z-index: 20; | ||||
overflow: hidden; | overflow: hidden; | ||||
> .right { | |||||
position: absolute; | |||||
right: 10px; | |||||
top: 100px; | |||||
} | |||||
} | } | ||||
@font-face | @font-face | ||||
@@ -11,6 +11,8 @@ | |||||
</head> | </head> | ||||
<body> | <body> | ||||
<div class="canvasContainer"></div> | <div class="canvasContainer"></div> | ||||
<div class="ui-container"></div> | |||||
<div class="ui-container"> | |||||
<div class="right"></div> | |||||
</div> | |||||
</body> | </body> | ||||
</html> | </html> |
@@ -18,6 +18,7 @@ var components = [ | |||||
'effects', | 'effects', | ||||
'aggro', | 'aggro', | ||||
'quests', | 'quests', | ||||
'events', | |||||
'resourceNode', | 'resourceNode', | ||||
'gatherer', | 'gatherer', | ||||
'stash', | 'stash', | ||||
@@ -0,0 +1,25 @@ | |||||
define([ | |||||
'js/system/events' | |||||
], function( | |||||
events | |||||
) { | |||||
return { | |||||
type: 'events', | |||||
list: [], | |||||
init: function() { | |||||
this.list.forEach(function(q) { | |||||
events.emit('onObtainEvent', q); | |||||
}); | |||||
}, | |||||
extend: function(blueprint) { | |||||
if (blueprint.updateList) { | |||||
blueprint.updateList.forEach(function(q) { | |||||
events.emit('onObtainEvent', q); | |||||
this.list.push(q); | |||||
}, this); | |||||
} | |||||
} | |||||
}; | |||||
}); |
@@ -14,6 +14,7 @@ define([ | |||||
'ui/templates/hud/hud', | 'ui/templates/hud/hud', | ||||
'ui/templates/online/online', | 'ui/templates/online/online', | ||||
'ui/templates/quests/quests', | 'ui/templates/quests/quests', | ||||
'ui/templates/events/events', | |||||
'ui/templates/dialogue/dialogue', | 'ui/templates/dialogue/dialogue', | ||||
'ui/templates/smithing/smithing', | 'ui/templates/smithing/smithing', | ||||
'ui/templates/overlay/overlay', | 'ui/templates/overlay/overlay', | ||||
@@ -39,6 +39,7 @@ define([ | |||||
'tooltipItem', | 'tooltipItem', | ||||
'announcements', | 'announcements', | ||||
'quests', | 'quests', | ||||
'events', | |||||
'progressBar', | 'progressBar', | ||||
'stash', | 'stash', | ||||
'smithing', | 'smithing', | ||||
@@ -0,0 +1,98 @@ | |||||
define([ | |||||
'js/system/client', | |||||
'js/system/events', | |||||
'html!ui/templates/events/template', | |||||
'html!ui/templates/events/templateEvent', | |||||
'css!ui/templates/events/styles' | |||||
], function( | |||||
client, | |||||
events, | |||||
tpl, | |||||
templateEvent, | |||||
styles | |||||
) { | |||||
return { | |||||
tpl: tpl, | |||||
list: [], | |||||
container: '.right', | |||||
postRender: function() { | |||||
this.onEvent('onRezone', this.onRezone.bind(this)); | |||||
this.onEvent('onObtainEvent', this.onObtainEvent.bind(this)); | |||||
this.onEvent('onUpdateEvent', this.onUpdateEvent.bind(this)); | |||||
this.onEvent('onCompleteEvent', this.onCompleteEvent.bind(this)); | |||||
}, | |||||
onRezone: function() { | |||||
this.list = []; | |||||
this.el.find('.list').empty(); | |||||
}, | |||||
onObtainEvent: function(event) { | |||||
var container = this.el.find('.list'); | |||||
var html = templateEvent | |||||
.replace('$NAME$', event.name) | |||||
.replace('$DESCRIPTION$', event.description); | |||||
var el = $(html).appendTo(container); | |||||
if (event.isReady) | |||||
el.addClass('ready'); | |||||
/*if (event.active) | |||||
el.addClass('active'); | |||||
else if (!event.isReady) | |||||
el.addClass('disabled');*/ | |||||
this.list.push({ | |||||
id: event.id, | |||||
el: el, | |||||
event: event | |||||
}); | |||||
var event = container.find('.event'); | |||||
event | |||||
.sort(function(a, b) { | |||||
a = $(a).hasClass('active') ? 1 : 0; | |||||
b = $(b).hasClass('active') ? 1 : 0; | |||||
return b - a; | |||||
}) | |||||
.appendTo(container); | |||||
}, | |||||
onUpdateEvent: function(event) { | |||||
var e = this.list.find(function(l) { | |||||
return (l.id == event.id); | |||||
}); | |||||
e.event.isReady = event.isReady; | |||||
e.el.find('.description').html(event.description); | |||||
e.el.removeClass('ready'); | |||||
if (event.isReady) { | |||||
e.el.removeClass('disabled'); | |||||
e.el.addClass('ready'); | |||||
} | |||||
}, | |||||
onCompleteEvent: function(id) { | |||||
var e = this.list.find(function(l) { | |||||
return (l.id == id); | |||||
}); | |||||
if (!e) | |||||
return; | |||||
e.el.remove(); | |||||
this.list.spliceWhere(function(l) { | |||||
return (l.id == id); | |||||
}); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,49 @@ | |||||
@import "../../../css/ui.less"; | |||||
.uiEvents { | |||||
margin-top: 10px; | |||||
width: 320px; | |||||
.heading { | |||||
color: @yellow; | |||||
padding: 8px; | |||||
background-color: fade(#3a3b4a, 90%); | |||||
} | |||||
.list { | |||||
.event { | |||||
cursor: pointer; | |||||
padding: 8px; | |||||
background-color: fade(#3a3b4a, 90%); | |||||
&:hover { | |||||
background-color: fade(lighten(#3a3b4a, 15%), 90%); | |||||
} | |||||
.name { | |||||
color: @white; | |||||
margin-bottom: 3px; | |||||
} | |||||
.description { | |||||
color: darken(@white, 35%); | |||||
} | |||||
&.active { | |||||
.name { | |||||
color: @blue; | |||||
} | |||||
} | |||||
&.ready { | |||||
.name { | |||||
color: @green; | |||||
} | |||||
.description { | |||||
display: none; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<div class="uiEvents"> | |||||
<div class="heading">Events</div> | |||||
<div class="list"></div> | |||||
</div> |
@@ -0,0 +1,4 @@ | |||||
<div class="event"> | |||||
<div class="name">$NAME$</div> | |||||
<div class="description">$DESCRIPTION$</div> | |||||
</div> |
@@ -15,6 +15,7 @@ define([ | |||||
tpl: tpl, | tpl: tpl, | ||||
quests: [], | quests: [], | ||||
container: '.right', | |||||
postRender: function() { | postRender: function() { | ||||
this.onEvent('onRezone', this.onRezone.bind(this)); | this.onEvent('onRezone', this.onRezone.bind(this)); | ||||
@@ -1,10 +1,7 @@ | |||||
@import "../../../css/ui.less"; | @import "../../../css/ui.less"; | ||||
.uiQuests { | .uiQuests { | ||||
position: absolute; | |||||
right: 10px; | |||||
top: 100px; | |||||
width: 320px; | |||||
.heading { | .heading { | ||||
color: @yellow; | color: @yellow; | ||||
@@ -24,6 +21,7 @@ | |||||
.name { | .name { | ||||
color: @white; | color: @white; | ||||
margin-bottom: 3px; | |||||
} | } | ||||
.description { | .description { | ||||
@@ -15,8 +15,8 @@ define([ | |||||
render: function() { | render: function() { | ||||
var container = '.ui-container'; | var container = '.ui-container'; | ||||
if ((this.options) && (this.options.container)) | |||||
container = this.options.container;; | |||||
if (this.container) | |||||
container += ' > ' + this.container; | |||||
this.el = $(this.tpl) | this.el = $(this.tpl) | ||||
.appendTo(container) | .appendTo(container) | ||||
@@ -0,0 +1,51 @@ | |||||
define([ | |||||
], function( | |||||
) { | |||||
return { | |||||
type: 'events', | |||||
list: [], | |||||
simplify: function(self) { | |||||
if (!self) | |||||
return; | |||||
var result = { | |||||
type: 'events' | |||||
}; | |||||
if (this.list.length > 0) { | |||||
result.list = this.list.map(l => ({ | |||||
name: l.name, | |||||
description: l.description | |||||
})); | |||||
} | |||||
return result; | |||||
}, | |||||
save: function() { | |||||
return null; | |||||
}, | |||||
events: { | |||||
afterMove: function() { | |||||
var events = this.obj.instance.events; | |||||
var closeEvents = events.getCloseEvents(this.obj); | |||||
if (!closeEvents) | |||||
return; | |||||
closeEvents.forEach(function(c) { | |||||
this.list.push(c); | |||||
this.obj.syncer.setArray(true, 'events', 'updateList', { | |||||
name: c.config.name, | |||||
description: c.config.description | |||||
}); | |||||
}, this); | |||||
} | |||||
} | |||||
}; | |||||
}); |
@@ -78,6 +78,7 @@ define([ | |||||
obj.addComponent('equipment', character.components.find(c => c.type == 'equipment')); | obj.addComponent('equipment', character.components.find(c => c.type == 'equipment')); | ||||
obj.addComponent('inventory', character.components.find(c => c.type == 'inventory')); | obj.addComponent('inventory', character.components.find(c => c.type == 'inventory')); | ||||
obj.addComponent('quests', character.components.find(c => c.type == 'quests')); | obj.addComponent('quests', character.components.find(c => c.type == 'quests')); | ||||
obj.addComponent('events', character.components.find(c => c.type == 'events')); | |||||
var prophecies = character.components.find(c => c.type == 'prophecies'); | var prophecies = character.components.find(c => c.type == 'prophecies'); | ||||
if (prophecies) | if (prophecies) | ||||
@@ -61,6 +61,7 @@ define([ | |||||
} | } | ||||
}); | }); | ||||
this.spawnAnimation(mob); | this.spawnAnimation(mob); | ||||
this.event.objects.push(mob); | |||||
} else { | } else { | ||||
var mob = objects.buildObjects([{ | var mob = objects.buildObjects([{ | ||||
x: x, | x: x, | ||||
@@ -80,6 +81,8 @@ define([ | |||||
var id = l.id.split('$').join(i); | var id = l.id.split('$').join(i); | ||||
mob.id = id; | mob.id = id; | ||||
} | } | ||||
this.event.objects.push(mob); | |||||
} | } | ||||
} | } | ||||
}, this); | }, this); | ||||
@@ -1,6 +1,7 @@ | |||||
module.exports = [{ | module.exports = [{ | ||||
name: 'Rodriguez Heist', | name: 'Rodriguez Heist', | ||||
description: `Rodriguez, the Hermit's only chicken companion, has been kidnapped by a band of imps. Who knows what they plan on doing with him.`, | description: `Rodriguez, the Hermit's only chicken companion, has been kidnapped by a band of imps. Who knows what they plan on doing with him.`, | ||||
distance: 10, | |||||
phases: [{ | phases: [{ | ||||
type: 'spawnMob', | type: 'spawnMob', | ||||
@@ -47,6 +47,8 @@ define([ | |||||
var event = { | var event = { | ||||
config: config, | config: config, | ||||
phases: [], | phases: [], | ||||
participators: [], | |||||
objects: [], | |||||
nextPhase: 0 | nextPhase: 0 | ||||
}; | }; | ||||
@@ -54,6 +56,16 @@ define([ | |||||
}, | }, | ||||
updateEvent: function(event) { | updateEvent: function(event) { | ||||
var objects = event.objects; | |||||
var oLen = objects.length; | |||||
for (var i = 0; i < oLen; i++) { | |||||
if (objects[i].destroyed) { | |||||
objects.splice(i, 1); | |||||
i--; | |||||
oLen--; | |||||
} | |||||
} | |||||
var currentPhases = event.phases; | var currentPhases = event.phases; | ||||
var cLen = currentPhases.length; | var cLen = currentPhases.length; | ||||
var stillBusy = false; | var stillBusy = false; | ||||
@@ -80,7 +92,8 @@ define([ | |||||
var phaseFile = 'phase' + p.type[0].toUpperCase() + p.type.substr(1); | var phaseFile = 'phase' + p.type[0].toUpperCase() + p.type.substr(1); | ||||
var typeTemplate = require('config/eventPhases/' + phaseFile); | var typeTemplate = require('config/eventPhases/' + phaseFile); | ||||
var phase = extend(true, { | var phase = extend(true, { | ||||
instance: this.instance | |||||
instance: this.instance, | |||||
event: event | |||||
}, phaseTemplate, typeTemplate, p); | }, phaseTemplate, typeTemplate, p); | ||||
event.phases.push(phase); | event.phases.push(phase); | ||||
@@ -92,6 +105,41 @@ define([ | |||||
if (!p.auto) | if (!p.auto) | ||||
break; | break; | ||||
} | } | ||||
}, | |||||
getCloseEvents: function(obj) { | |||||
var x = obj.x; | |||||
var y = obj.y; | |||||
var configs = this.configs; | |||||
if (!configs) | |||||
return; | |||||
var cLen = configs.length; | |||||
var result = []; | |||||
for (var i = 0; i < cLen; i++) { | |||||
var event = configs[i].event; | |||||
if (!event) | |||||
continue; | |||||
else if (event.participators.some(p => (p == obj))) | |||||
continue; | |||||
var distance = event.config.distance; | |||||
var objects = event.objects; | |||||
var oLen = objects.length; | |||||
for (var j = 0; j < oLen; j++) { | |||||
var o = objects[j]; | |||||
if ((Math.abs(x - o.x) < distance) && (Math.abs(y - o.y) < distance)) { | |||||
event.participators.push(obj); | |||||
result.push(event); | |||||
break; | |||||
} | |||||
} | |||||
} | |||||
return result; | |||||
} | } | ||||
}; | }; | ||||
}); | }); |
@@ -291,6 +291,8 @@ define([ | |||||
if (this.aggro) | if (this.aggro) | ||||
this.aggro.move(); | this.aggro.move(); | ||||
this.fireEvent('afterMove'); | |||||
return true; | return true; | ||||
}, | }, | ||||
@@ -45,6 +45,7 @@ define([ | |||||
zoneId: this.zoneId, | zoneId: this.zoneId, | ||||
spawners: spawners, | spawners: spawners, | ||||
questBuilder: questBuilder, | questBuilder: questBuilder, | ||||
events: events, | |||||
zone: map.zone, | zone: map.zone, | ||||
map: map | map: map | ||||
}; | }; | ||||