Browse Source

first ui work for events

tags/v0.1.5^2
Big Bad Waffle 7 years ago
parent
commit
cf6919239f
20 changed files with 305 additions and 8 deletions
  1. +6
    -0
      src/client/css/main.less
  2. +3
    -1
      src/client/index.html
  3. +1
    -0
      src/client/js/components/components.js
  4. +25
    -0
      src/client/js/components/events.js
  5. +1
    -0
      src/client/js/main.js
  6. +1
    -0
      src/client/ui/factory.js
  7. +98
    -0
      src/client/ui/templates/events/events.js
  8. +49
    -0
      src/client/ui/templates/events/styles.less
  9. +4
    -0
      src/client/ui/templates/events/template.html
  10. +4
    -0
      src/client/ui/templates/events/templateEvent.html
  11. +1
    -0
      src/client/ui/templates/quests/quests.js
  12. +2
    -4
      src/client/ui/templates/quests/styles.less
  13. +2
    -2
      src/client/ui/uiBase.js
  14. +51
    -0
      src/server/components/events.js
  15. +1
    -0
      src/server/components/player.js
  16. +3
    -0
      src/server/config/eventPhases/phaseSpawnMob.js
  17. +1
    -0
      src/server/config/maps/tutorial/events.js
  18. +49
    -1
      src/server/events/events.js
  19. +2
    -0
      src/server/objects/objBase.js
  20. +1
    -0
      src/server/world/instancer.js

+ 6
- 0
src/client/css/main.less View File

@@ -16,6 +16,12 @@ body {
top: 0px;
z-index: 20;
overflow: hidden;

> .right {
position: absolute;
right: 10px;
top: 100px;
}
}

@font-face


+ 3
- 1
src/client/index.html View File

@@ -11,6 +11,8 @@
</head>
<body>
<div class="canvasContainer"></div>
<div class="ui-container"></div>
<div class="ui-container">
<div class="right"></div>
</div>
</body>
</html>

+ 1
- 0
src/client/js/components/components.js View File

@@ -18,6 +18,7 @@ var components = [
'effects',
'aggro',
'quests',
'events',
'resourceNode',
'gatherer',
'stash',


+ 25
- 0
src/client/js/components/events.js View File

@@ -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);
}
}
};
});

+ 1
- 0
src/client/js/main.js View File

@@ -14,6 +14,7 @@ define([
'ui/templates/hud/hud',
'ui/templates/online/online',
'ui/templates/quests/quests',
'ui/templates/events/events',
'ui/templates/dialogue/dialogue',
'ui/templates/smithing/smithing',
'ui/templates/overlay/overlay',


+ 1
- 0
src/client/ui/factory.js View File

@@ -39,6 +39,7 @@ define([
'tooltipItem',
'announcements',
'quests',
'events',
'progressBar',
'stash',
'smithing',


+ 98
- 0
src/client/ui/templates/events/events.js View File

@@ -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);
});
}
}
});

+ 49
- 0
src/client/ui/templates/events/styles.less View File

@@ -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;
}
}
}
}
}

+ 4
- 0
src/client/ui/templates/events/template.html View File

@@ -0,0 +1,4 @@
<div class="uiEvents">
<div class="heading">Events</div>
<div class="list"></div>
</div>

+ 4
- 0
src/client/ui/templates/events/templateEvent.html View File

@@ -0,0 +1,4 @@
<div class="event">
<div class="name">$NAME$</div>
<div class="description">$DESCRIPTION$</div>
</div>

+ 1
- 0
src/client/ui/templates/quests/quests.js View File

@@ -15,6 +15,7 @@ define([
tpl: tpl,

quests: [],
container: '.right',

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


+ 2
- 4
src/client/ui/templates/quests/styles.less View File

@@ -1,10 +1,7 @@
@import "../../../css/ui.less";

.uiQuests {
position: absolute;
right: 10px;
top: 100px;
width: 320px;

.heading {
color: @yellow;
@@ -24,6 +21,7 @@

.name {
color: @white;
margin-bottom: 3px;
}

.description {


+ 2
- 2
src/client/ui/uiBase.js View File

@@ -15,8 +15,8 @@ define([

render: function() {
var container = '.ui-container';
if ((this.options) && (this.options.container))
container = this.options.container;;
if (this.container)
container += ' > ' + this.container;

this.el = $(this.tpl)
.appendTo(container)


+ 51
- 0
src/server/components/events.js View File

@@ -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);
}
}
};
});

+ 1
- 0
src/server/components/player.js View File

@@ -78,6 +78,7 @@ define([
obj.addComponent('equipment', character.components.find(c => c.type == 'equipment'));
obj.addComponent('inventory', character.components.find(c => c.type == 'inventory'));
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');
if (prophecies)


+ 3
- 0
src/server/config/eventPhases/phaseSpawnMob.js View File

@@ -61,6 +61,7 @@ define([
}
});
this.spawnAnimation(mob);
this.event.objects.push(mob);
} else {
var mob = objects.buildObjects([{
x: x,
@@ -80,6 +81,8 @@ define([
var id = l.id.split('$').join(i);
mob.id = id;
}

this.event.objects.push(mob);
}
}
}, this);


+ 1
- 0
src/server/config/maps/tutorial/events.js View File

@@ -1,6 +1,7 @@
module.exports = [{
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.`,
distance: 10,

phases: [{
type: 'spawnMob',


+ 49
- 1
src/server/events/events.js View File

@@ -47,6 +47,8 @@ define([
var event = {
config: config,
phases: [],
participators: [],
objects: [],
nextPhase: 0
};

@@ -54,6 +56,16 @@ define([
},

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 cLen = currentPhases.length;
var stillBusy = false;
@@ -80,7 +92,8 @@ define([
var phaseFile = 'phase' + p.type[0].toUpperCase() + p.type.substr(1);
var typeTemplate = require('config/eventPhases/' + phaseFile);
var phase = extend(true, {
instance: this.instance
instance: this.instance,
event: event
}, phaseTemplate, typeTemplate, p);
event.phases.push(phase);
@@ -92,6 +105,41 @@ define([
if (!p.auto)
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;
}
};
});

+ 2
- 0
src/server/objects/objBase.js View File

@@ -291,6 +291,8 @@ define([
if (this.aggro)
this.aggro.move();

this.fireEvent('afterMove');

return true;
},



+ 1
- 0
src/server/world/instancer.js View File

@@ -45,6 +45,7 @@ define([
zoneId: this.zoneId,
spawners: spawners,
questBuilder: questBuilder,
events: events,
zone: map.zone,
map: map
};


Loading…
Cancel
Save