1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-12-23 21:03:14 +00:00

add hover events for cards

This commit is contained in:
exane 2015-06-13 22:04:44 +02:00
parent e7559df6f7
commit 363770686d
4 changed files with 26 additions and 14 deletions

View File

@ -74,7 +74,7 @@
<div class="row">
<div class="col-xs-12 field field-hand">
{{#each cards}}
<div class="card">
<div class="card" data-key="{{_key}}">
<img src='../assets/cards/{{_data.img}}.png'>
</div>
{{/each}}
@ -82,7 +82,11 @@
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 card-preview"></div>
{{#if preview}}
<div class="col-xs-12 card-preview">
<img src="{{preview}}">
</div>
{{/if}}
<div class="col-xs-12 right-side right-side-foe foe">
<div class="col-xs-5 field-discard field-single">
discard deck

View File

@ -100,7 +100,10 @@ var BattleView = Backbone.View.extend({
var app = this.app = options.app;
$(this.el).prependTo('body');
this.listenTo(user, "change:showPreview", this.render);
this.$hand = this.$el.find(".field-hand");
this.$preview = this.$el.find(".card-preview");
this.app.receive("update:hand", function(data){
console.log("update:hand", user.get("roomSide"), data._roomSide);
@ -117,14 +120,27 @@ var BattleView = Backbone.View.extend({
}.bind(this), 100);
this.render();
},
events: {
"mouseover .card": "onMouseover",
"mouseleave .card": "onMouseleave"
},
onMouseover: function(e){
var target = $(e.target).closest(".card");
this.user.set("showPreview", target.find("img").attr("src"));
},
onMouseleave: function(e) {
this.user.set("showPreview", null);
},
render: function(){
var self = this;
this.$el.html(this.template({
cards: self.handCards
cards: self.handCards,
preview: self.user.get("showPreview")
}));
return this;
}
});
})
;
var User = Backbone.Model.extend({
defaults: {

View File

@ -79,8 +79,8 @@ $game-height: 800px;
}
.card-preview {
position: absolute;
display: none;
position: absolute;/*
display: none;*/
z-index: 10;
}

View File

@ -66,14 +66,6 @@ var Socket = (function(){
socket.on("request:joinRoom", function(){
console.log("joinroom");
var interval = setInterval(function(){
/*self.roomCollection.forEach(function(room) {
if(room.isOpen()) {
room.join(user);
clearInterval(interval);
console.log("user %s joined room %s", user.getName(), room.getID());
user.send("response:joinRoom", room.getID());
}
});*/
for(var key in self.roomCollection) {
var room = self.roomCollection[key];
if(!room.isOpen()) continue;