Skip to content

Commit 0438f58

Browse files
zeelotzeelot
committed
action message feature
1 parent de5c2c1 commit 0438f58

8 files changed

Lines changed: 183 additions & 6 deletions

File tree

‎lib/app/collection/action/messages.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
define([
2+
'backbone',
3+
'app/model/action/message'
4+
], function (Backbone, ActionMessageModel) {
5+
return Backbone.Collection.extend({
6+
model: ActionMessageModel
7+
});
8+
});

‎lib/app/component/announcer.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
define([
2+
'crafty',
3+
'app/collection/action/messages',
4+
'app/model/action/message',
5+
'app/view/widget/action/messages'
6+
], function (Crafty, ActionMessagesCollection, ActionMessageModel, ActionMessagesView) {
7+
var component = Crafty.c('Announcer', {
8+
ActionMessageModel: ActionMessageModel,
9+
ActionMessagesCollection: null,
10+
ActionMessagesView: null,
11+
ActionMessagesEntity: null, // The Crafty DOM Entity holding messages
12+
init: function () {
13+
// Initialize the collection
14+
this.ActionMessagesCollection = new ActionMessagesCollection();
15+
// Initialize the View
16+
this.ActionMessagesView = new ActionMessagesView({
17+
ActionMessagesCollection: this.ActionMessagesCollection
18+
});
19+
20+
this.ActionMessagesEntity = Crafty.e('2D, DOM')
21+
.attr({
22+
z: 1000 // Place on top
23+
});
24+
25+
this.y += 20;
26+
27+
this.attach(this.ActionMessagesEntity);
28+
29+
$('#'+this.ActionMessagesEntity.getDomId())
30+
.append(this.ActionMessagesView.$el);
31+
},
32+
announceAction: function (text, type) {
33+
type = type || 'positive'; // Simple default
34+
this.ActionMessagesCollection.add({
35+
type: type,
36+
text: text
37+
});
38+
}
39+
});
40+
41+
/**
42+
* The return value isn't all that useful here. Crafty.c keeps track of all
43+
* the components we defined so we never have to use the component variable.
44+
* We simply define this module as a dependency when we need to be sure that
45+
* the component has been added to Crafty.
46+
*/
47+
return {
48+
component: component
49+
};
50+
});

‎lib/app/model/action/message.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
define([
2+
'backbone'
3+
], function (Backbone) {
4+
return Backbone.Model.extend({
5+
defaults: {
6+
'type': null, // method/positive/negative
7+
'text': null
8+
}
9+
});
10+
});

‎lib/app/model/entity/player.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ define([
66
'app/component/playercontrols',
77
'app/component/speaker',
88
'app/component/rigidbody',
9-
'app/component/dynamicz'
9+
'app/component/dynamicz',
10+
'app/component/announcer'
1011
], function (EntityModel, FooSpriteModel) {
1112
return EntityModel.extend({
1213
defaults: {
1314
'health': 100.0,
1415
'level': 1,
1516
'spriteModel': FooSpriteModel,
1617
'sprite': 'Foo',
17-
'components': '2D, Canvas, PlayerControls, Speaker, Rigidbody, DynamicZ',
18+
'components': '2D, Canvas, PlayerControls, Speaker, Rigidbody, DynamicZ, Announcer',
1819
'x': 0,
1920
'y': 0,
2021
'z': 0,

‎lib/app/view/scene/1.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ define([
5252
y: 130
5353
});
5454

55+
setInterval(_.bind(function () {
56+
this.Player.get('entity').announceAction('Hello! Positive!', 'positive');
57+
this.Player.get('entity').announceAction('Hello! Negative!', 'negative');
58+
this.Player.get('entity').announceAction('Hello! Method!', 'method');
59+
}, this), 1000);
60+
5561
//Crafty.viewport.follow(this.Player.get('entity'), -60, 0);
5662
this.sceneEntities = new SceneEntityCollection();
5763
this.addSceneEntities();
@@ -72,10 +78,10 @@ define([
7278
addSceneQuests: function () {
7379

7480
var actions = new SceneActionCollection([
75-
{
76-
method: 'disable',
77-
entity: this.Player
78-
},
81+
//{
82+
// method: 'disable',
83+
// entity: this.Player
84+
//},
7985
{
8086
method: 'disableCast'
8187
},

‎lib/app/view/widget/action/messages.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
define([
2+
'backbone',
3+
'text!template/widget/action/message.mustache'
4+
], function (Backbone, Template) {
5+
return Backbone.View.extend({
6+
messageThrottle: 130, // Milliseconds pause between messages
7+
/**
8+
* Since messages are processed at a slow rate, we need to know when
9+
* the queue is empty.
10+
*/
11+
isProcessing: false,
12+
attributes: {
13+
class: 'widget-action-messages'
14+
},
15+
ActionMessagesCollection: null,
16+
// Mustache for a message
17+
'template.mustache': Template,
18+
// Compiled version
19+
'template': null,
20+
initialize: function (options) {
21+
_.bindAll(this);
22+
this.template = Hogan.compile(this['template.mustache']);
23+
24+
this.ActionMessagesCollection = options.ActionMessagesCollection;
25+
26+
this.ActionMessagesCollection.bind("add", this.messageAdded);
27+
},
28+
messageAdded: function (ActionMessage) {
29+
if (!this.isProcessing) {
30+
this.processMessages(); // Start processing
31+
}
32+
},
33+
processMessages: function () {
34+
this.isProcessing = true;
35+
36+
if (this.ActionMessagesCollection.length > 0) {
37+
var nextMessage = this.ActionMessagesCollection.shift();
38+
this.renderMessage(nextMessage);
39+
setTimeout(this.processMessages, this.messageThrottle);
40+
} else {
41+
this.isProcessing = false;
42+
}
43+
},
44+
renderMessage: function (ActionMessage) {
45+
// Nothing much to it! CSS handles all the crazy stuff!
46+
this.$el.append(this.template.render(ActionMessage.toJSON()));
47+
}
48+
});
49+
});

‎scss/module/_gameComponents.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,56 @@
103103
background: rgba(#000, 0.8);
104104
border: 1px solid #000;
105105
}
106+
}
107+
108+
.widget-action-messages {
109+
position: relative;
110+
111+
.action-message {
112+
position: absolute;
113+
width: 900px;
114+
left: -450px;
115+
text-align: center;
116+
117+
@include opacity(0);
118+
moz-animation-duration: 2s;
119+
-webkit-animation-duration: 2s;
120+
-moz-animation-name: slideOff;
121+
-webkit-animation-name: slideOff;
122+
}
123+
124+
.positive {
125+
text-shadow: 0px 0px 15px #00FF55;
126+
color: #DDFFAA;
127+
}
128+
.negative {
129+
text-shadow: 0px 0px 15px #FF0000;
130+
color: #FFCCCC
131+
}
132+
.method {
133+
text-shadow: 0px 0px 15px #BBBBBB;
134+
color: #FFFFFF
135+
}
136+
}
137+
138+
@-moz-keyframes slideOff {
139+
from {
140+
@include opacity(1);
141+
bottom: 0;
142+
}
143+
to {
144+
@include opacity(0);
145+
bottom: 100px;
146+
}
147+
}
148+
149+
@-webkit-keyframes slideOff {
150+
from {
151+
@include opacity(1);
152+
bottom: 0;
153+
}
154+
to {
155+
@include opacity(0);
156+
bottom: 100px;
157+
}
106158
}

‎template/widget/action/message.mustache‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="action-message {{type}}">{{text}}</div>

0 commit comments

Comments
 (0)