1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-10-31 10:36:53 +00:00

setup some kind of card-tooltip

This commit is contained in:
exane 2015-06-25 21:34:51 +02:00
parent f438df8012
commit 85b7208e5a
4 changed files with 103 additions and 26 deletions

View File

@ -4,6 +4,9 @@ require("./backbone.modal-min");
let Handlebars = require('handlebars/runtime').default; let Handlebars = require('handlebars/runtime').default;
let $ = require("jquery"); let $ = require("jquery");
let cardData = require("../../assets/data/cards");
let abilityData = require("../../assets/data/abilities");
window.$ = $; window.$ = $;
Handlebars.registerPartial("card", require("../templates/cards.handlebars")); Handlebars.registerPartial("card", require("../templates/cards.handlebars"));
@ -159,7 +162,7 @@ let SideView = Backbone.View.extend({
$field.addClass("field-frost"); $field.addClass("field-frost");
} }
calculateCardMargin($field.find(".card"), 424, 70, cards.length); calculateCardMargin($field.find(".card"), 351, 70, cards.length);
}, },
renderRangeField: function(){ renderRangeField: function(){
if(!this.field.ranged) return; if(!this.field.ranged) return;
@ -187,7 +190,7 @@ let SideView = Backbone.View.extend({
$field.addClass("field-fog"); $field.addClass("field-fog");
} }
calculateCardMargin($field.find(".card"), 424, 70, cards.length); calculateCardMargin($field.find(".card"), 351, 70, cards.length);
}, },
renderSiegeField: function(){ renderSiegeField: function(){
if(!this.field.siege) return; if(!this.field.siege) return;
@ -215,7 +218,7 @@ let SideView = Backbone.View.extend({
$field.addClass("field-rain"); $field.addClass("field-rain");
} }
calculateCardMargin($field.find(".card"), 424, 70, cards.length); calculateCardMargin($field.find(".card"), 351, 70, cards.length);
}, },
renderWeatherField: function(){ renderWeatherField: function(){
if(!this.field.weather) return; if(!this.field.weather) return;
@ -253,8 +256,8 @@ let calculateCardMargin = function($selector, totalWidth, cardWidth, n){
let BattleView = Backbone.View.extend({ let BattleView = Backbone.View.extend({
className: "container", className: "container",
template: require("../templates/battle.handlebars"), template: require("../templates/battle.handlebars"), /*
templatePreview: require("../templates/preview.handlebars"), templatePreview: require("../templates/preview.handlebars"),*/
initialize: function(options){ initialize: function(options){
let self = this; let self = this;
let user = this.user = options.user; let user = this.user = options.user;
@ -386,9 +389,12 @@ let BattleView = Backbone.View.extend({
}, },
onMouseover: function(e){ onMouseover: function(e){
let target = $(e.target).closest(".card"); let target = $(e.target).closest(".card");
this.user.set("showPreview", target.find("img").attr("src")); //this.user.set("showPreview", target.find("img").attr("src"));
//this.user.set("showPreview", target.data().key);
this.user.set("showPreview", new Preview({key: target.data().key}));
}, },
onMouseleave: function(e){ onMouseleave: function(e){
this.user.get("showPreview").remove();
this.user.set("showPreview", null); this.user.set("showPreview", null);
}, },
openDiscard: function(e){ openDiscard: function(e){
@ -422,7 +428,7 @@ let BattleView = Backbone.View.extend({
if(this.handCards){ if(this.handCards){
calculateCardMargin(this.$el.find(".field-hand .card"), 633, 70, this.handCards.length); calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
} }
if(this.user.get("isReDrawing")){ if(this.user.get("isReDrawing")){
@ -454,7 +460,17 @@ let BattleView = Backbone.View.extend({
return this; return this;
}, },
renderPreview: function(){ renderPreview: function(){
this.$el.find(".card-preview").html(this.templatePreview({src: this.user.get("showPreview")})) /*let preview = new Preview({key: this.user.get("showPreview")});*/
let preview = this.user.get("showPreview");
if(!preview) {
return;
}
this.$el.find(".card-preview").html(preview.render().el);
/*this.$el.find(".card-preview").html(this.templatePreview({src: this.user.get("showPreview")}))
this.$el.find(".card-preview").css("display", "none");
if(this.user.get("showPreview")) {
this.$el.find(".card-preview").css("display", "block");
}*/
}, },
clickLeader: function(e){ clickLeader: function(e){
let $card = $(e.target).closest(".field-leader"); let $card = $(e.target).closest(".field-leader");
@ -774,4 +790,35 @@ let Lobby = Backbone.View.extend({
} }
}); });
let Preview = Backbone.View.extend({
template: require("../templates/preview.handlebars"),
initialize: function(opt){
this.card = cardData[opt.key];
if(!this.card || !this.card.ability) return;
if(Array.isArray(this.card.ability)){
this.abilities = this.card.ability.slice();
}
else {
this.abilities = [];
this.abilities.push(this.card.ability);
}
this.abilities = this.abilities.map((ability) =>{
return abilityData[ability].description;
})
"lol";
},
render: function(){
let html = this.template({
card: this.card,
abilities: this.abilities
})
this.$el.html(html);
return this;
}
});
module.exports = App; module.exports = App;

View File

@ -16,6 +16,16 @@ $game-height: 800px;
border: 1px solid black; border: 1px solid black;
} }
.large-field-counter {
line-height: 20px;
border: 1px solid black;
border-radius: 30px;
height: 40px;
padding: 10px;
margin-top: 33px;
text-align: center;
}
.field { .field {
//width: 100%; //width: 100%;
height: 100px; height: 100px;
@ -147,9 +157,23 @@ $game-height: 800px;
} }
.card-preview { .card-preview {
position: absolute;/* div {
display: none;*/ position: fixed;
//left:0;
z-index: 110; z-index: 110;
height: 100px !important;
.preview-description {
width: 238px;
min-height: 200px;
background: rgba(16, 16, 16, 0.57);
color: #ffffff;
p {
padding: 10px;
}
}
}
} }
i { i {

View File

@ -7,7 +7,7 @@
<div class="col-xs-12 game-info game-info-player player"> <div class="col-xs-12 game-info game-info-player player">
</div> </div>
</div> </div>
<div class="col-xs-7"> <div class="col-xs-6">
<div class="row"> <div class="row">
<div class="col-xs-12 battleside battleside-foe foe"> <div class="col-xs-12 battleside battleside-foe foe">
<div class="col-xs-2 field-horn field-horn-siege"> <div class="col-xs-2 field-horn field-horn-siege">
@ -59,7 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-2"> <div class="col-xs-3">
<div class="col-xs-12 card-preview"> <div class="col-xs-12 card-preview">
</div> </div>
<div class="col-xs-12 right-side right-side-foe foe"> <div class="col-xs-12 right-side right-side-foe foe">

View File

@ -1 +1,7 @@
<img src="{{src}}"> <img src="../assets/cards/{{card.img}}.png" height="450">
<div class="preview-description">
<p>{{card.name}}</p>
{{#each abilities as |val key|}}
<p>{{val}}</p>
{{/each}}
</div>