Permalink
Browse files

Skills refactored

  • Loading branch information...
1 parent c14ed4e commit 621d27758c53cd565446a0b569bd05a0b0f581bc @hugeen committed Nov 18, 2012
Showing with 76 additions and 57 deletions.
  1. +15 −2 app/models/skill.js
  2. +14 −4 assets/css/defend_the_den.css
  3. +18 −5 game/components/skill.js
  4. +4 −33 game/scenes/level.js
  5. +23 −11 game/skills.js
  6. +2 −2 templates/game_ui/skill.html
View
@@ -6,8 +6,21 @@ define([
var Skill = Backbone.Model.extend({
defaults: {
- player: false,
- cast: function() {}
+ cooldown: 1,
+ action: function() {}
+ },
+ init: function() {
+
+ var entity = Crafty.e("Skill");
+
+ entity.skill({
+ cooldown: this.get("cooldown"),
+ key: this.keybind(),
+ name: this.get("name")
+ });
+
+ entity.bind("SkillTriggered", this.get("action"));
+
},
keybind: function() {
return keyboard.keybinds.AZERTY[this.get("name")];
@@ -233,18 +233,24 @@ body {
background-repeat: no-repeat;
}
-.skill:hover {
+.skill:hover, .skill_hover {
-webkit-box-shadow: inset 0 0 8px 2px #2d2119;
-moz-box-shadow: inset 0 0 8px 2px #2d2119;
box-shadow: inset 0 0 8px 2px #2d2119;
}
-.skill:active {
+.skill:active, .skill_active {
-webkit-box-shadow: inset 0 0 9px 3px black;
-moz-box-shadow: inset 0 0 9px 3px black;
box-shadow: inset 0 0 9px 3px black;
}
+.skill_on_cooldown {
+ -webkit-box-shadow: inset 0 0 9px 3px red;
+ -moz-box-shadow: inset 0 0 9px 3px red;
+ box-shadow: inset 0 0 9px 3px red;
+}
+
.skill_key {
font-size: 0.9em;
display: block;
@@ -258,10 +264,14 @@ body {
margin-left: 17px;
}
-.skill:hover .skill_key {
+.skill:hover .skill_key, .skill_hover .skill_key {
background-color: #2d2119;
}
-.skill:active .skill_key {
+.skill:active .skill_key, .skill_active .skill_key {
background-color: black;
+}
+
+.skill_on_cooldown .skill_key {
+ background-color: red;
}
View
@@ -1,27 +1,27 @@
define([
'underscore',
+ 'jquery',
'crafty'
-], function(_, Crafty) {
+], function(_, $, Crafty) {
Crafty.c("Skill", {
init: function() {
this.addComponent("Keyboard, Cooldown");
- var options = {
- key: "A",
- cooldown: 1
- };
+ var options = {};
this.skill = function(custom) {
_.extend(options, custom);
this.cooldown(options.cooldown);
};
this.bind("CooldownEnded", function() {
+ $('#skill_'+options.name).removeClass("skill_on_cooldown");
this.trigger("SkillReady");
});
this.bind("CooldownOn", function() {
+ $('#skill_'+options.name).addClass("skill_on_cooldown");
this.trigger("SkillLocked");
});
@@ -32,6 +32,19 @@ define([
this.bind("SkillCastingAttempt", function() {
this.startCooldown();
});
+
+ this.bind('KeyDown', function(e) {
+ if(e.key == Crafty.keys[options.key]) {
+ $('#skill_'+options.name).addClass("skill_active");
+ this.trigger("SkillCastingAttempt");
+ }
+ });
+
+ this.bind('KeyUp', function(e) {
+ if(e.key == Crafty.keys[options.key]) {
+ $('#skill_'+options.name).removeClass("skill_active");
+ }
+ });
}
});
View
@@ -21,46 +21,17 @@ define([
var player = PlayerEntity.create();
skills.each(function(skill) {
- var keybind = skill.keybind();
- Mousetrap.bind(keybind, function() {
- skill.get("cast")({
- x: player.x,
- y: player.y
- }, {
- x: mouse.position.relative.x,
- y: mouse.position.relative.y
- });
- });
-
- var compiledTemplate = _.template(_skill, {
- key: keybind,
- backgroundPosition: skill.get("backgroundPosition")
- });
-
+ skill.init();
+ var compiledTemplate = _.template(_skill, { skill: skill });
$("#skills").append(compiledTemplate);
-
});
-
-
//var monster = MonsterEntity.create("Octocat", 1);
//var monster = MonsterEntity.create("Octocat", 3);
Crafty.e("Wires");
-
- var attackSkill = Crafty.e("Skill");
- attackSkill.skill({ cooldown: 0.5 });
- attackSkill.bind("SkillTriggered", function() {
- Crafty.e("Attack").attack({
- x: player.x,
- y: player.y
- }, {
- x: mouse.position.relative.x,
- y: mouse.position.relative.y
- });
- });
-
+
$("body").on("click", "#wrapper", function() {
- attackSkill.trigger("SkillCastingAttempt");
+
});
},
View
@@ -1,39 +1,51 @@
-define(function() {
+define([
+ "crafty",
+ "game/entities/player",
+ "game/mouse"
+],function(Crafty, PlayerEntity, mouse) {
+
+ function mousePosition() {
+ return mouse.position.relative;
+ };
return [{
name: "Shield",
- player: true,
+ cooldown: 3,
backgroundPosition: "0 0"
}, {
name: "Attack",
- player: true,
- cast: function(from, to) {
- Crafty.e("Attack").attack(from, to);
+ cooldown: 0.7,
+ action: function() {
+ var player = PlayerEntity.get();
+ Crafty.e("Attack").attack({
+ x: player.x,
+ y: player.y
+ }, mousePosition());
},
backgroundPosition: "-53px 0"
}, {
+ cooldown: 5,
name: "Blow",
- player: true,
backgroundPosition: "-106px 0"
}, {
name: "Stone",
- player: true,
+ cooldown: 5,
backgroundPosition: "-159px 0"
}, {
name: "Root",
- player: true,
+ cooldown: 10,
backgroundPosition: "-212px 0"
}, {
name: "Frost",
- player: true,
+ cooldown: 7,
backgroundPosition: "-265px 0"
}, {
name: "Hast",
- player: true,
+ cooldown: 30,
backgroundPosition: "-318px 0"
}, {
name: "Life",
- player: true,
+ cooldown: 30,
backgroundPosition: "-371px 0"
}];
@@ -1,3 +1,3 @@
-<div class="skill" style="background-position: <%= backgroundPosition %>;">
- <div class="skill_key"><%= key %></div>
+<div class="skill" id="skill_<%= skill.get("name") %>" style="background-position: <%= skill.get("backgroundPosition") %>;">
+ <div class="skill_key"><%= skill.keybind() %></div>
</div>

0 comments on commit 621d277

Please sign in to comment.