mirror of
https://github.com/exane/not-gwent-online
synced 2026-06-26 21:36:12 +03:00
rearrange folders
This commit is contained in:
exane
Vendored
+6584
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,242 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Gwent</title>
|
||||
<meta name="description" content="">
|
||||
<link rel="stylesheet" href="build/bootstrap.css">
|
||||
<link rel="stylesheet" href="build/main.css">
|
||||
<script src="Config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script id="info-template" type="text/x-handlebars-template">
|
||||
<div class="col-xs-12 game-info game-info-foe foe">
|
||||
<div class="col-xs-12 info-name">{{name}}</div>
|
||||
<div class="col-xs-6 field-single field-leader"></div>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Points:</div>
|
||||
<div class="col-xs-6 score">{{score}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Hand:</div>
|
||||
<div class="col-xs-6 hand-card">{{hand}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 gwent-lives">
|
||||
{{#health}}
|
||||
{{/health}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 passing">Passed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="battle-template" type="text/x-handlebars-template">
|
||||
<div class="col-xs-3 left-side">
|
||||
<div class="col-xs-12 game-info game-info-foe foe">
|
||||
<div class="col-xs-12 info-name"></div>
|
||||
<div class="col-xs-6 field-single field-leader"></div>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Points:</div>
|
||||
<div class="col-xs-6 score">0</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Hand:</div>
|
||||
<div class="col-xs-6 hand-card">0</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 gwent-lives">
|
||||
<i class="ruby"></i>
|
||||
<i class="ruby"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 passing">Passed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 field field-weather">
|
||||
field
|
||||
</div>
|
||||
<div class="col-xs-12 game-info game-info-player player">
|
||||
<div class="col-xs-12 info-name">{{name}}</div>
|
||||
<div class="col-xs-6 field-single field-leader"></div>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Points:</div>
|
||||
<div class="col-xs-6 score">{{score}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Hand:</div>
|
||||
<div class="col-xs-6 hand-card">{{hand}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 gwent-lives">
|
||||
<!--<i class="ruby"></i>-->
|
||||
{{#health lives}}{{/health}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 passing">Passed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<button class="button-pass">Pass</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 battleside battleside-foe foe">
|
||||
<div class="col-xs-12 field">
|
||||
<div class="col-xs-1 large-field-counter">0</div>
|
||||
<div class="col-xs-11 field-siege"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 field">
|
||||
<div class="col-xs-1 large-field-counter">0</div>
|
||||
<div class="col-xs-11 field-range"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 field">
|
||||
<div class="col-xs-1 large-field-counter">0</div>
|
||||
<div class="col-xs-11 field-close"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 mid-line"></div>
|
||||
<div class="col-xs-12 battleside battleside-player player">
|
||||
<div class="col-xs-12 field{{#if agile}} active{{/if}}">
|
||||
<div class="col-xs-1 large-field-counter">0</div>
|
||||
<div class="col-xs-11 field-close"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 field{{#if agile}} active{{/if}}">
|
||||
<div class="col-xs-1 large-field-counter">0</div>
|
||||
<div class="col-xs-11 field-range"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 field">
|
||||
<div class="col-xs-1 large-field-counter">0</div>
|
||||
<div class="col-xs-11 field-siege"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 field field-hand">
|
||||
{{#each cards}}
|
||||
<div class="card" data-key="{{_key}}" data-id="{{_id}}">
|
||||
<img src='../assets/cards/{{_data.img}}.png'>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<div class="col-xs-12 card-preview">
|
||||
<!--<img src="{{preview}}">-->
|
||||
</div>
|
||||
<div class="col-xs-12 right-side right-side-foe foe">
|
||||
<div class="col-xs-5 field-discard field-single">
|
||||
discard deck
|
||||
</div>
|
||||
<div class="col-xs-5 field-single field-deck pull-right">
|
||||
main deck
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 right-side right-side-player player">
|
||||
<div class="col-xs-5 field-discard field-single">
|
||||
discard deck
|
||||
</div>
|
||||
<div class="col-xs-5 field-single field-deck pull-right">
|
||||
main deck
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="matchmaker-template" type="text/x-handlebars-template">
|
||||
<div class="col-xs-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Gwent</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<input type="text" class="name-input" value="{{name}}">
|
||||
<select id="deckChoice">
|
||||
<option value="northern_realm">Deck: Northern Realms</option>
|
||||
<option value="scoiatael">Deck: Scoia'tael</option>
|
||||
<option value="monster">Deck: Monster</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button type="button" class="btn btn-primary create-room">Create Room</button>
|
||||
<button type="button" class="btn btn-primary join-room">Join Room</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="game-info-template" type="text/x-handlebars-template">
|
||||
<div class="col-xs-12 info-name">{{name}}</div>
|
||||
<div class="col-xs-6 field-single field-leader"></div>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Points:</div>
|
||||
<div class="col-xs-6 score">{{score}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">Hand:</div>
|
||||
<div class="col-xs-6 hand-card">{{hand}}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 gwent-lives">
|
||||
<!--<i class="ruby"></i>-->
|
||||
{{#health lives}}{{/health}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 passing">Passed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<button class="button-pass">Pass</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/template" id="modal-template">
|
||||
<div class="bbm-modal__topbar">
|
||||
<h3 class="bbm-modal__title">Discard of {{openDiscard.name}}</h3>
|
||||
</div>
|
||||
<div class="bbm-modal__section">
|
||||
{{#each openDiscard.discard}}
|
||||
<div class="card" data-key="{{_key}}" data-id="{{_id}}">
|
||||
<img src="../assets/cards/{{_data.img}}.png">
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="bbm-modal__bottombar">
|
||||
<div class="bbm-button bbm-close">close</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/template" id="modal-medic-template">
|
||||
<div class="bbm-modal__topbar">
|
||||
<h3 class="bbm-modal__title">Choose one card from your discard</h3>
|
||||
</div>
|
||||
<div class="bbm-modal__section">
|
||||
{{#each medicDiscard.cards}}
|
||||
<div class="card" data-key="{{_key}}" data-id="{{_id}}">
|
||||
<img src="../assets/cards/{{_data.img}}.png">
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="bbm-modal__bottombar">
|
||||
<div class="bbm-button bbm-close">close</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/template" id="preview-template">
|
||||
<img src="{{src}}">
|
||||
</script>
|
||||
<script src="build/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+123
@@ -0,0 +1,123 @@
|
||||
(function(){
|
||||
var a = function(a, b){
|
||||
return function(){
|
||||
return a.apply(b, arguments)
|
||||
}
|
||||
}, b = {}.hasOwnProperty, c = function(a, c){
|
||||
function d(){
|
||||
this.constructor = a
|
||||
}
|
||||
|
||||
for(var e in c)b.call(c, e) && (a[e] = c[e]);
|
||||
return d.prototype = c.prototype, a.prototype = new d, a.__super__ = c.prototype, a
|
||||
}, d = [].indexOf || function(a){
|
||||
for(var b = 0, c = this.length; c > b; b++)if(b in this && this[b] === a)return b;
|
||||
return -1
|
||||
};
|
||||
!function(a){
|
||||
return "function" == typeof define && define.amd ? define(["underscore", "backbone", "exports"], a) : "object" == typeof exports ? a(require("underscore"), require("backbone"), exports) : a(_, Backbone, {})
|
||||
}(function(b, e, f){
|
||||
return f = function(f){
|
||||
function g(){
|
||||
this.triggerCancel = a(this.triggerCancel, this), this.triggerSubmit = a(this.triggerSubmit, this), this.triggerView = a(this.triggerView, this), this.clickOutsideElement = a(this.clickOutsideElement, this), this.clickOutside = a(this.clickOutside, this), this.checkKey = a(this.checkKey, this), this.rendererCompleted = a(this.rendererCompleted, this), this.args = Array.prototype.slice.apply(arguments), e.View.prototype.constructor.apply(this, this.args), this.setUIElements()
|
||||
}
|
||||
|
||||
return c(g, f), g.prototype.prefix = "bbm", g.prototype.animate = !0, g.prototype.keyControl = !0, g.prototype.showViewOnRender = !0, g.prototype.render = function(a){
|
||||
var c, d;
|
||||
return c = this.serializeData(), (!a || b.isEmpty(a)) && (a = 0), this.$el.addClass("" + this.prefix + "-wrapper"), this.modalEl = e.$("<div />").addClass("" + this.prefix + "-modal"), this.template && this.modalEl.html(this.buildTemplate(this.template, c)), this.$el.html(this.modalEl), this.viewContainer ? (this.viewContainerEl = this.modalEl.find(this.viewContainer), this.viewContainerEl.addClass("" + this.prefix + "-modal__views")) : this.viewContainerEl = this.modalEl, e.$(":focus").blur(), (null != (d = this.views) ? d.length : void 0) > 0 && this.showViewOnRender && this.openAt(a), "function" == typeof this.onRender && this.onRender(), this.delegateModalEvents(), this.$el.fadeIn && this.animate ? (this.modalEl.css({opacity: 0}), this.$el.fadeIn({
|
||||
duration: 100,
|
||||
complete: this.rendererCompleted
|
||||
})) : this.rendererCompleted(), this
|
||||
}, g.prototype.rendererCompleted = function(){
|
||||
var a;
|
||||
return this.keyControl && (e.$("body").on("keyup.bbm", this.checkKey), this.$el.on("mouseup.bbm", this.clickOutsideElement), this.$el.on("click.bbm", this.clickOutside)), this.modalEl.css({opacity: 1}).addClass("" + this.prefix + "-modal--open"), "function" == typeof this.onShow && this.onShow(), null != (a = this.currentView) && "function" == typeof a.onShow ? a.onShow() : void 0
|
||||
}, g.prototype.setUIElements = function(){
|
||||
var a;
|
||||
if(this.template = this.getOption("template"), this.views = this.getOption("views"), null != (a = this.views) && (a.length = b.size(this.views)), this.viewContainer = this.getOption("viewContainer"), this.animate = this.getOption("animate"), b.isUndefined(this.template) && b.isUndefined(this.views))throw new Error("No template or views defined for Backbone.Modal");
|
||||
if(this.template && this.views && b.isUndefined(this.viewContainer))throw new Error("No viewContainer defined for Backbone.Modal")
|
||||
}, g.prototype.getOption = function(a){
|
||||
return a ? this.options && d.call(this.options, a) >= 0 && null != this.options[a] ? this.options[a] : this[a] : void 0
|
||||
}, g.prototype.serializeData = function(){
|
||||
var a;
|
||||
return a = {}, this.model && (a = b.extend(a, this.model.toJSON())), this.collection && (a = b.extend(a, {items: this.collection.toJSON()})), a
|
||||
}, g.prototype.delegateModalEvents = function(){
|
||||
var a, c, d, e, f, g, h;
|
||||
this.active = !0, a = this.getOption("cancelEl"), f = this.getOption("submitEl"), f && this.$el.on("click", f, this.triggerSubmit), a && this.$el.on("click", a, this.triggerCancel), h = [];
|
||||
for(c in this.views)b.isString(c) && "length" !== c ? (d = c.match(/^(\S+)\s*(.*)$/), g = d[1], e = d[2], h.push(this.$el.on(g, e, this.views[c], this.triggerView))) : h.push(void 0);
|
||||
return h
|
||||
}, g.prototype.undelegateModalEvents = function(){
|
||||
var a, c, d, e, f, g, h;
|
||||
this.active = !1, a = this.getOption("cancelEl"), f = this.getOption("submitEl"), f && this.$el.off("click", f, this.triggerSubmit), a && this.$el.off("click", a, this.triggerCancel), h = [];
|
||||
for(c in this.views)b.isString(c) && "length" !== c ? (d = c.match(/^(\S+)\s*(.*)$/), g = d[1], e = d[2], h.push(this.$el.off(g, e, this.views[c], this.triggerView))) : h.push(void 0);
|
||||
return h
|
||||
}, g.prototype.checkKey = function(a){
|
||||
if(this.active)switch(a.keyCode) {
|
||||
case 27:
|
||||
return this.triggerCancel(a);
|
||||
case 13:
|
||||
return this.triggerSubmit(a)
|
||||
}
|
||||
}, g.prototype.clickOutside = function(){
|
||||
var a;
|
||||
return (null != (a = this.outsideElement) ? a.hasClass("" + this.prefix + "-wrapper") : void 0) && this.active ? this.triggerCancel() : void 0
|
||||
}, g.prototype.clickOutsideElement = function(a){
|
||||
return this.outsideElement = e.$(a.target)
|
||||
}, g.prototype.buildTemplate = function(a, c){
|
||||
var d;
|
||||
return (d = "function" == typeof a ? a : b.template(e.$(a).html()))(c)
|
||||
}, g.prototype.buildView = function(a, c){
|
||||
var d;
|
||||
if(a)return c && b.isFunction(c) && (c = c()), b.isFunction(a) ? (d = new a(c || this.args[0]), d instanceof e.View ? {
|
||||
el: d.render().$el,
|
||||
view: d
|
||||
} : {el: a(c || this.args[0])}) : {view: a, el: a.$el}
|
||||
}, g.prototype.triggerView = function(a){
|
||||
var c, d, e, f, g, h, i;
|
||||
if(null != a && "function" == typeof a.preventDefault && a.preventDefault(), f = a.data, d = this.buildView(f.view, f.viewOptions), this.currentView && (this.previousView = this.currentView, !(null != (i = f.openOptions) ? i.skipSubmit : void 0))){
|
||||
if(("function" == typeof(g = this.previousView).beforeSubmit ? g.beforeSubmit(a) : void 0) === !1)return;
|
||||
"function" == typeof(h = this.previousView).submit && h.submit()
|
||||
}
|
||||
this.currentView = d.view || d.el, c = 0;
|
||||
for(e in this.views)f.view === this.views[e].view && (this.currentIndex = c), c++;
|
||||
return f.onActive && (b.isFunction(f.onActive) ? f.onActive(this) : b.isString(f.onActive) && this[f.onActive].call(this, f)), this.shouldAnimate ? this.animateToView(d.el) : (this.shouldAnimate = !0, this.$(this.viewContainerEl).html(d.el))
|
||||
}, g.prototype.animateToView = function(a){
|
||||
var b, c, d, f, g, h, i;
|
||||
return f = {
|
||||
position: "relative",
|
||||
top: -9999,
|
||||
left: -9999
|
||||
}, g = e.$("<tester/>").css(f), g.html(this.$el.clone().css(f)), 0 !== e.$("tester").length ? e.$("tester").replaceWith(g) : e.$("body").append(g), b = g.find(this.viewContainer ? this.viewContainer : "." + this.prefix + "-modal"), b.removeAttr("style"), d = b.outerHeight(), b.html(a), c = b.outerHeight(), d === c ? (this.$(this.viewContainerEl).html(a), "function" == typeof(h = this.currentView).onShow && h.onShow(), null != (i = this.previousView) && "function" == typeof i.destroy ? i.destroy() : void 0) : this.animate ? (this.$(this.viewContainerEl).css({opacity: 0}), this.$(this.viewContainerEl).animate({height: c}, 100, function(b){
|
||||
return function(){
|
||||
var c, d;
|
||||
return b.$(b.viewContainerEl).css({opacity: 1}).removeAttr("style"), b.$(b.viewContainerEl).html(a), "function" == typeof(c = b.currentView).onShow && c.onShow(), null != (d = b.previousView) && "function" == typeof d.destroy ? d.destroy() : void 0
|
||||
}
|
||||
}(this))) : this.$(this.viewContainerEl).css({height: c}).html(a)
|
||||
}, g.prototype.triggerSubmit = function(a){
|
||||
var b, c;
|
||||
return null != a && a.preventDefault(), e.$(a.target).is("textarea") || this.beforeSubmit && this.beforeSubmit(a) === !1 || this.currentView && this.currentView.beforeSubmit && this.currentView.beforeSubmit(a) === !1 ? void 0 : this.submit || (null != (b = this.currentView) ? b.submit : void 0) || this.getOption("submitEl") ? (null != (c = this.currentView) && "function" == typeof c.submit && c.submit(), "function" == typeof this.submit && this.submit(), this.regionEnabled ? this.trigger("modal:destroy") : this.destroy()) : this.triggerCancel()
|
||||
}, g.prototype.triggerCancel = function(a){
|
||||
return null != a && a.preventDefault(), this.beforeCancel && this.beforeCancel() === !1 ? void 0 : ("function" == typeof this.cancel && this.cancel(), this.regionEnabled ? this.trigger("modal:destroy") : this.destroy())
|
||||
}, g.prototype.destroy = function(){
|
||||
var a;
|
||||
return e.$("body").off("keyup.bbm", this.checkKey), this.$el.off("mouseup.bbm", this.clickOutsideElement), this.$el.off("click.bbm", this.clickOutside), e.$("tester").remove(), "function" == typeof this.onDestroy && this.onDestroy(), this.shouldAnimate = !1, this.modalEl.addClass("" + this.prefix + "-modal--destroy"), a = function(a){
|
||||
return function(){
|
||||
var b;
|
||||
return null != (b = a.currentView) && "function" == typeof b.remove && b.remove(), a.remove()
|
||||
}
|
||||
}(this), this.$el.fadeOut && this.animate ? (this.$el.fadeOut({duration: 200}), b.delay(function(){
|
||||
return a()
|
||||
}, 200)) : a()
|
||||
}, g.prototype.openAt = function(a){
|
||||
var c, d, e, f, g;
|
||||
b.isNumber(a) ? c = a : b.isNumber(a._index) && (c = a._index), e = 0;
|
||||
for(f in this.views)if("length" !== f)if(b.isNumber(c))e === c && (g = this.views[f]), e++;
|
||||
else if(b.isObject(a))for(d in this.views[f])a[d] === this.views[f][d] && (g = this.views[f]);
|
||||
return g && (this.currentIndex = b.indexOf(this.views, g), this.triggerView({data: b.extend(g, {openOptions: a})})), this
|
||||
}, g.prototype.next = function(a){
|
||||
return null == a && (a = {}), this.currentIndex + 1 < this.views.length ? this.openAt(b.extend(a, {_index: this.currentIndex + 1})) : void 0
|
||||
}, g.prototype.previous = function(a){
|
||||
return null == a && (a = {}), this.currentIndex - 1 < this.views.length - 1 ? this.openAt(b.extend(a, {_index: this.currentIndex - 1})) : void 0
|
||||
}, g
|
||||
}(e.View), e.Modal = f, e.Modal
|
||||
})
|
||||
}).call(this);
|
||||
@@ -0,0 +1,46 @@
|
||||
var Backbone = require("backbone");
|
||||
var Handlebars = require("handlebars");
|
||||
var $ = require("jquery");
|
||||
|
||||
var Lobby = Backbone.View.extend({
|
||||
defaults: {
|
||||
id: ""
|
||||
},
|
||||
className: "container",
|
||||
|
||||
template: Handlebars.compile($("#matchmaker-template").html()),
|
||||
initialize: function(){
|
||||
this.app = app;
|
||||
this.listenTo(app.user, "change", this.render);
|
||||
$(this.el).prependTo('body');
|
||||
this.render();
|
||||
},
|
||||
events: {
|
||||
"click .create-room": "createRoom",
|
||||
"click .join-room": "joinRoom",
|
||||
"blur .name-input": "changeName",
|
||||
"change #deckChoice": "setDeck"
|
||||
},
|
||||
render: function(){
|
||||
this.$el.html(this.template(this.app.user.attributes));
|
||||
//this.$el.find("#deckChoice option[value='" + this.app.user.get("setDeck") + "']").attr("selected", "selected")
|
||||
return this;
|
||||
},
|
||||
createRoom: function(){
|
||||
this.app.send("request:createRoom");
|
||||
},
|
||||
joinRoom: function(){
|
||||
this.app.send("request:joinRoom");
|
||||
},
|
||||
setDeck: function(e){
|
||||
var val = $(e.target).val();
|
||||
this.app.user.setDeck(val);
|
||||
},
|
||||
changeName: function(e){
|
||||
var name = $(e.target).val();
|
||||
this.app.user.setName(name);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
module.exports = Lobby;
|
||||
@@ -0,0 +1,585 @@
|
||||
/*("http://localhost:16918")*/
|
||||
var socketCluster = require("socketcluster-client");
|
||||
var Backbone = require("backbone");
|
||||
require("./backbone.modal-min");
|
||||
var Handlebars = require("handlebars");
|
||||
var $ = require("jquery");
|
||||
//var Lobby = require("./client-lobby");
|
||||
|
||||
window.$ = $;
|
||||
|
||||
Handlebars.registerHelper("health", function(lives, options){
|
||||
var out = "";
|
||||
|
||||
for(var i = 0; i < 2; i++) {
|
||||
out += "<i";
|
||||
if(i < lives){
|
||||
out += " class='ruby'";
|
||||
}
|
||||
out += "></i>";
|
||||
}
|
||||
return out;
|
||||
});
|
||||
|
||||
/*
|
||||
var Config = {};
|
||||
|
||||
Config.Server = {
|
||||
"hostname": "localhost",
|
||||
"port": 16918,
|
||||
secure: false
|
||||
}
|
||||
*/
|
||||
|
||||
var App = Backbone.Router.extend({
|
||||
routes: {
|
||||
"lobby": "lobbyRoute",
|
||||
"battle": "battleRoute",
|
||||
"*path": "defaultRoute"
|
||||
},
|
||||
initialize: function(){
|
||||
var self = this;
|
||||
this.connect();
|
||||
this.user = new User({app: this});
|
||||
|
||||
Backbone.history.start();
|
||||
},
|
||||
connect: function(){
|
||||
this.socket = socketCluster.connect(Config.Server);
|
||||
},
|
||||
receive: function(event, cb){
|
||||
this.socket.on(event, cb);
|
||||
}, /*
|
||||
receiveOnce: function(event, cb){
|
||||
this.socket.once(event, cb);
|
||||
},*/
|
||||
send: function(event, data){
|
||||
data = data || null;
|
||||
var socket = this.socket;
|
||||
|
||||
if(!data){
|
||||
socket.emit(event);
|
||||
}
|
||||
if(data){
|
||||
socket.emit(event, data);
|
||||
}
|
||||
},
|
||||
|
||||
lobbyRoute: function(){
|
||||
if(this.currentView){
|
||||
this.currentView.remove();
|
||||
}
|
||||
this.currentView = new Lobby({
|
||||
app: this,
|
||||
user: this.user
|
||||
});
|
||||
},
|
||||
battleRoute: function(){
|
||||
if(this.currentView){
|
||||
this.currentView.remove();
|
||||
}
|
||||
this.currentView = new BattleView({
|
||||
app: this,
|
||||
user: this.user
|
||||
});
|
||||
},
|
||||
defaultRoute: function(path){
|
||||
this.navigate("lobby", {trigger: true});
|
||||
},
|
||||
parseEvent: function(event){
|
||||
var regex = /(\w+):?(\w*)\|?/g;
|
||||
var res = {};
|
||||
var r;
|
||||
while(r = regex.exec(event)) {
|
||||
res[r[1]] = r[2];
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
});
|
||||
|
||||
var SideView = Backbone.View.extend({
|
||||
el: ".container",
|
||||
template: Handlebars.compile('<div class="card{{#if _disabled}} disabled{{/if}}" data-key="{{_key}}" data-id="{{_id}}">' +
|
||||
'<img src="../assets/cards/{{_data.img}}.png">' +
|
||||
'</div>'),
|
||||
templateCards: Handlebars.compile('{{#each this}}' +
|
||||
'<div class="card{{#if _disabled}} disabled{{/if}}" data-key="{{_key}}" data-id="{{_id}}">' +
|
||||
'{{#if _boost}}<span>+{{_boost}}</span>{{/if}}' +
|
||||
'<img src="../assets/cards/{{_data.img}}.png">' +
|
||||
'</div>' +
|
||||
'{{/each}}'),
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
this.side = options.side;
|
||||
this.app = options.app;
|
||||
this.battleView = options.battleView;
|
||||
this.infoData = this.infoData || {};
|
||||
this.leader = this.leader || {};
|
||||
this.field = this.field || {};
|
||||
|
||||
|
||||
},
|
||||
render: function(){
|
||||
this.renderInfo();
|
||||
this.renderCloseField();
|
||||
this.renderRangeField();
|
||||
this.renderSiegeField();
|
||||
this.renderWeatherField();
|
||||
|
||||
return this;
|
||||
},
|
||||
renderInfo: function(){
|
||||
var d = this.infoData;
|
||||
var l = this.leader;
|
||||
this.$info = this.$el.find(".game-info" + this.side);
|
||||
this.$info.find(".info-name").html(d.name);
|
||||
this.$info.find(".score").html(d.score);
|
||||
this.$info.find(".hand-card").html(d.hand);
|
||||
this.$info.find(".gwent-lives").html(this.lives(d.lives));
|
||||
this.$info.find(".field-leader").html(this.template(l))
|
||||
|
||||
if(this.app.user.get("waiting") && this.side === ".player"){
|
||||
this.$info.addClass("removeBackground");
|
||||
}
|
||||
if(!this.app.user.get("waiting") && this.side === ".foe"){
|
||||
this.$info.addClass("removeBackground");
|
||||
}
|
||||
|
||||
this.$info.find(".passing").html(d.passing ? "Passed" : "");
|
||||
|
||||
},
|
||||
renderCloseField: function(){
|
||||
if(!this.field.close) return;
|
||||
this.$fields = this.$el.find(".battleside" + this.side);
|
||||
var $field = this.$fields.find(".field-close").parent();
|
||||
var cards = this.field.close._cards;
|
||||
var score = this.field.close._score;
|
||||
|
||||
var html = this.templateCards(cards);
|
||||
|
||||
$field.find(".field-close").html(html)
|
||||
$field.find(".large-field-counter").html(score)
|
||||
},
|
||||
renderRangeField: function(){
|
||||
if(!this.field.ranged) return;
|
||||
this.$fields = this.$el.find(".battleside" + this.side);
|
||||
var $field = this.$fields.find(".field-range").parent();
|
||||
var cards = this.field.ranged._cards;
|
||||
var score = this.field.ranged._score;
|
||||
|
||||
var html = this.templateCards(cards);
|
||||
|
||||
$field.find(".field-range").html(html)
|
||||
$field.find(".large-field-counter").html(score)
|
||||
},
|
||||
renderSiegeField: function(){
|
||||
if(!this.field.siege) return;
|
||||
this.$fields = this.$el.find(".battleside" + this.side);
|
||||
var $field = this.$fields.find(".field-siege").parent();
|
||||
var cards = this.field.siege._cards;
|
||||
var score = this.field.siege._score;
|
||||
|
||||
var html = this.templateCards(cards);
|
||||
|
||||
$field.find(".field-siege").html(html)
|
||||
$field.find(".large-field-counter").html(score)
|
||||
},
|
||||
renderWeatherField: function(){
|
||||
if(!this.field.weather) return;
|
||||
var $weatherField = this.$el.find(".field-weather");
|
||||
var cards = this.field.weather._cards;
|
||||
$weatherField.html(this.templateCards(cards));
|
||||
|
||||
return this;
|
||||
},
|
||||
lives: function(lives){
|
||||
var out = "";
|
||||
for(var i = 0; i < 2; i++) {
|
||||
out += "<i";
|
||||
if(i < lives){
|
||||
out += " class='ruby'";
|
||||
}
|
||||
out += "></i>";
|
||||
}
|
||||
return out;
|
||||
}
|
||||
});
|
||||
|
||||
var BattleView = Backbone.View.extend({
|
||||
className: "container",
|
||||
template: Handlebars.compile($("#battle-template").html()),
|
||||
templatePreview: Handlebars.compile($("#preview-template").html()),
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
var user = this.user = options.user;
|
||||
var app = this.app = options.app;
|
||||
var yourSide, otherSide;
|
||||
|
||||
$(this.el).prependTo('body');
|
||||
|
||||
this.listenTo(user, "change:showPreview", this.renderPreview);
|
||||
this.listenTo(user, "change:waiting", this.render);
|
||||
this.listenTo(user, "change:passing", this.render);
|
||||
this.listenTo(user, "change:openDiscard", this.render);
|
||||
this.listenTo(user, "change:setAgile", this.render);
|
||||
|
||||
this.$hand = this.$el.find(".field-hand");
|
||||
this.$preview = this.$el.find(".card-preview");
|
||||
|
||||
|
||||
var interval = setInterval(function(){
|
||||
if(!user.get("room")) return;
|
||||
this.setUpBattleEvents(user.get("room"));
|
||||
this.app.send("request:gameLoaded", {_roomID: user.get("room")});
|
||||
clearInterval(interval);
|
||||
}.bind(this), 10);
|
||||
|
||||
this.render();
|
||||
|
||||
yourSide = this.yourSide = new SideView({side: ".player", app: this.app, battleView: this});
|
||||
otherSide = this.otherSide = new SideView({side: ".foe", app: this.app, battleView: this});
|
||||
|
||||
},
|
||||
events: {
|
||||
"mouseover .card": "onMouseover",
|
||||
"mouseleave .card": "onMouseleave",
|
||||
"click .field-hand": "onClick",
|
||||
"click .battleside.player": "onClickFieldCard",
|
||||
"click .button-pass": "onPassing",
|
||||
"click .field-discard": "openDiscard",
|
||||
"click .field-leader": "clickLeader"
|
||||
},
|
||||
onPassing: function(){
|
||||
if(this.user.get("passing")) return;
|
||||
if(this.user.get("waiting")) return;
|
||||
this.user.set("passing", true);
|
||||
this.user.get("app").send("set:passing");
|
||||
},
|
||||
onClick: function(e){
|
||||
if(!!this.user.get("waiting")) return;
|
||||
if(!!this.user.get("passing")) return;
|
||||
|
||||
var self = this;
|
||||
var $card = $(e.target).closest(".card");
|
||||
var id = $card.data("id");
|
||||
var key = $card.data("key");
|
||||
|
||||
if(!!this.user.get("setAgile")){
|
||||
if(id === this.user.get("setAgile")){
|
||||
this.user.set("setAgile", false);
|
||||
this.app.send("cancel:agile");
|
||||
this.render();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if(!!this.user.get("waitForDecoy")){
|
||||
if(id === this.user.get("waitForDecoy")){
|
||||
this.user.set("waitForDecoy", false);
|
||||
this.app.send("cancel:decoy");
|
||||
this.render();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.app.send("play:cardFromHand", {
|
||||
id: id
|
||||
});
|
||||
|
||||
if(key === "decoy"){
|
||||
console.log("its decoy!!!");
|
||||
this.user.set("waitForDecoy", id);
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
onClickFieldCard: function(e){
|
||||
if(this.user.get("waitForDecoy")){
|
||||
var $card = $(e.target).closest(".card");
|
||||
var _id = $card.data("id");
|
||||
this.app.send("decoy:replaceWith", {
|
||||
cardID: _id
|
||||
})
|
||||
this.user.set("waitForDecoy", false);
|
||||
}
|
||||
if(this.user.get("setAgile")) {
|
||||
var $field = $(e.target).closest(".field.active").find(".field-close, .field-range");
|
||||
|
||||
console.log($field);
|
||||
var target = $field.hasClass("field-close") ? 0 : 1;
|
||||
this.app.send("agile:field", {
|
||||
field: target
|
||||
});
|
||||
this.user.set("setAgile", false);
|
||||
}
|
||||
},
|
||||
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);
|
||||
},
|
||||
openDiscard: function(e){
|
||||
var $discard = $(e.target).closest(".field-discard");
|
||||
console.log("opened discard");
|
||||
var side;
|
||||
if($discard.parent().hasClass("player")){
|
||||
side = this.yourSide;
|
||||
}
|
||||
else {
|
||||
side = this.otherSide;
|
||||
}
|
||||
this.user.set("openDiscard", {
|
||||
discard: side.infoData.discard,
|
||||
name: side.infoData.name
|
||||
});
|
||||
},
|
||||
render: function(){
|
||||
var self = this;
|
||||
this.$el.html(this.template({
|
||||
cards: self.handCards,
|
||||
agile: self.user.get("setAgile")
|
||||
}));
|
||||
if(!(this.otherSide && this.yourSide)) return;
|
||||
this.otherSide.render();
|
||||
this.yourSide.render();
|
||||
|
||||
|
||||
if(this.user.get("openDiscard")){
|
||||
var modal = new Modal({model: this.user});
|
||||
this.$el.prepend(modal.render().el);
|
||||
}
|
||||
if(this.user.get("medicDiscard")){
|
||||
var modal = new MedicModal({model: this.user});
|
||||
this.$el.prepend(modal.render().el);
|
||||
}
|
||||
if(this.user.get("setAgile")){
|
||||
var id = this.user.get("setAgile");
|
||||
this.$el.find("[data-id='" + id + "']").addClass("activeCard");
|
||||
}
|
||||
if(this.user.get("waitForDecoy")){
|
||||
var id = this.user.get("waitForDecoy");
|
||||
this.$el.find("[data-id='" + id + "']").addClass("activeCard");
|
||||
}
|
||||
return this;
|
||||
},
|
||||
renderPreview: function(){
|
||||
this.$el.find(".card-preview").html(this.templatePreview({src: this.user.get("showPreview")}))
|
||||
},
|
||||
clickLeader: function(e){
|
||||
var $card = $(e.target).closest(".field-leader");
|
||||
console.log("click leader");
|
||||
if(!$card.parent().hasClass("player")) return;
|
||||
if($card.hasClass("disabled")) return;
|
||||
|
||||
|
||||
this.app.send("activate:leader")
|
||||
},
|
||||
setUpBattleEvents: function(channelName){
|
||||
this.battleChannel = this.app.socket.subscribe(channelName);
|
||||
var self = this;
|
||||
var user = this.user;
|
||||
|
||||
this.battleChannel.watch(function(d){
|
||||
var event = d.event, data = d.data;
|
||||
|
||||
if(event === "update:hand"){
|
||||
if(user.get("roomSide") == data._roomSide){
|
||||
self.handCards = JSON.parse(data.cards);
|
||||
self.user.set("handCards", self.handCards);
|
||||
self.render();
|
||||
}
|
||||
}
|
||||
else if(event === "update:info"){
|
||||
var _side = data._roomSide;
|
||||
var infoData = data.info;
|
||||
var leader = data.leader;
|
||||
|
||||
var side = self.yourSide;
|
||||
if(user.get("roomSide") != _side){
|
||||
side = self.otherSide;
|
||||
}
|
||||
side.infoData = infoData;
|
||||
side.leader = leader;
|
||||
|
||||
side.infoData.discard = JSON.parse(side.infoData.discard);
|
||||
|
||||
side.render();
|
||||
}
|
||||
else if(event === "update:fields"){
|
||||
var _side = data._roomSide;
|
||||
|
||||
var side = self.yourSide;
|
||||
if(user.get("roomSide") != _side){
|
||||
side = self.otherSide;
|
||||
}
|
||||
side.field.close = data.close;
|
||||
side.field.ranged = data.ranged;
|
||||
side.field.siege = data.siege;
|
||||
side.field.weather = data.weather;
|
||||
side.render();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
var Modal = Backbone.Modal.extend({
|
||||
template: Handlebars.compile($("#modal-template").html()),
|
||||
cancelEl: ".bbm-close",
|
||||
cancel: function(){
|
||||
this.model.set("openDiscard", false);
|
||||
}
|
||||
});
|
||||
|
||||
var MedicModal = Modal.extend({
|
||||
template: Handlebars.compile($("#modal-medic-template").html()),
|
||||
events: {
|
||||
"click .card": "onCardClick"
|
||||
},
|
||||
onCardClick: function(e){
|
||||
console.log($(e.target).closest(".card"));
|
||||
var id = $(e.target).closest(".card").data().id;
|
||||
this.model.get("app").send("medic:chooseCardFromDiscard", {
|
||||
cardID: id
|
||||
})
|
||||
this.model.set("medicDiscard", false);
|
||||
},
|
||||
cancel: function(){
|
||||
this.model.get("app").send("medic:chooseCardFromDiscard")
|
||||
this.model.set("medicDiscard", false);
|
||||
}
|
||||
});
|
||||
|
||||
var User = Backbone.Model.extend({
|
||||
defaults: {
|
||||
name: "",
|
||||
deckKey: "northern_realm"
|
||||
},
|
||||
initialize: function(){
|
||||
var self = this;
|
||||
var app = this.get("app");
|
||||
|
||||
this.listenTo(this.attributes, "change:room", this.subscribeRoom);
|
||||
|
||||
app.receive("response:name", function(data){
|
||||
self.set("name", data.name);
|
||||
});
|
||||
|
||||
app.receive("init:battle", function(data){
|
||||
console.log("opponent found!");
|
||||
self.set("roomSide", data.side);
|
||||
/*
|
||||
self.set("channel:battle", app.socket.subscribe(self.get("room")));*/
|
||||
app.navigate("battle", {trigger: true});
|
||||
})
|
||||
|
||||
app.receive("response:createRoom", function(roomID){
|
||||
self.set("room", roomID);
|
||||
console.log("room created", roomID);
|
||||
});
|
||||
|
||||
app.receive("response:joinRoom", function(roomID){
|
||||
self.set("room", roomID);
|
||||
console.log("room id", self.get("room"));
|
||||
})
|
||||
|
||||
app.receive("set:waiting", function(data){
|
||||
var waiting = data.waiting;
|
||||
self.set("waiting", waiting);
|
||||
})
|
||||
|
||||
app.receive("set:passing", function(data){
|
||||
var passing = data.passing;
|
||||
self.set("passing", passing);
|
||||
})
|
||||
|
||||
app.receive("foe:left", function(){
|
||||
console.log("your foe left the room");
|
||||
$(".container").prepend('<div class="alert alert-danger">Your foe left the battle!</div>')
|
||||
})
|
||||
|
||||
app.receive("played:medic", function(data){
|
||||
var cards = JSON.parse(data.cards);
|
||||
console.log("played medic");
|
||||
self.set("medicDiscard", {
|
||||
cards: cards
|
||||
});
|
||||
})
|
||||
|
||||
app.receive("played:agile", function(data){
|
||||
console.log("played agile");
|
||||
self.set("setAgile", data.cardID);
|
||||
})
|
||||
|
||||
app.on("createRoom", this.createRoom, this);
|
||||
app.on("joinRoom", this.joinRoom, this);
|
||||
app.on("setName", this.setName, this);
|
||||
app.on("setDeck", this.setDeck, this);
|
||||
|
||||
|
||||
app.send("request:name", this.get("name") == "unnamed" ? null : {name: this.get("name")});
|
||||
},
|
||||
createRoom: function(){
|
||||
this.get("app").send("request:createRoom");
|
||||
},
|
||||
joinRoom: function(){
|
||||
this.get("app").send("request:joinRoom");
|
||||
},
|
||||
subscribeRoom: function(){
|
||||
var room = this.get("room");
|
||||
var app = this.get("app");
|
||||
app.socket.subscribe(room);
|
||||
},
|
||||
setName: function(name){
|
||||
this.get("app").send("request:name", {name: name});
|
||||
},
|
||||
setDeck: function(deckKey){
|
||||
console.log("deck: ", deckKey);
|
||||
this.set("deckKey", deckKey);
|
||||
this.get("app").send("set:deck", {deck: deckKey});
|
||||
}
|
||||
});
|
||||
|
||||
var Lobby = Backbone.View.extend({
|
||||
defaults: {
|
||||
id: ""
|
||||
},
|
||||
className: "container",
|
||||
|
||||
template: Handlebars.compile($("#matchmaker-template").html()),
|
||||
initialize: function(options){
|
||||
this.user = options.user;
|
||||
this.app = options.app;
|
||||
this.listenTo(this.app.user, "change", this.render);
|
||||
$(this.el).prependTo('body');
|
||||
this.render();
|
||||
},
|
||||
events: {
|
||||
"click .create-room": "createRoom",
|
||||
"click .join-room": "joinRoom",
|
||||
"blur .name-input": "changeName",
|
||||
"change #deckChoice": "setDeck"
|
||||
},
|
||||
render: function(){
|
||||
this.$el.html(this.template(this.user.attributes));
|
||||
/*this.$el.find("#deckChoice option[value='" + this.app.user.get("setDeck") + "']").attr("selected", "selected")*/
|
||||
return this;
|
||||
},
|
||||
createRoom: function(){
|
||||
this.app.trigger("createRoom");
|
||||
},
|
||||
joinRoom: function(){
|
||||
this.app.trigger("joinRoom");
|
||||
},
|
||||
setDeck: function(e){
|
||||
var val = $(e.target).val();
|
||||
this.app.trigger("setDeck", val);
|
||||
this.$el.find("#deckChoice option[value='" + val + "']").attr("selected", "selected")
|
||||
},
|
||||
changeName: function(e){
|
||||
var name = $(e.target).val();
|
||||
this.app.trigger("setName", name);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = App;
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
var App = require("./client");
|
||||
|
||||
(function main(){
|
||||
var app = new App();
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,25 @@
|
||||
/* Modal positioning */
|
||||
.bbm-wrapper
|
||||
box-sizing: border-box
|
||||
position: fixed
|
||||
left: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
z-index: 100
|
||||
padding: 50px 10px
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
overflow: auto
|
||||
|
||||
.bbm-modal
|
||||
border-radius: 3px
|
||||
margin: auto
|
||||
width: auto
|
||||
max-width: 550px
|
||||
|
||||
.bbm-views
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
@@ -0,0 +1,130 @@
|
||||
.bbm-wrapper
|
||||
background: rgba(0,0,0,.75)
|
||||
-webkit-transition: background-color .3s
|
||||
|
||||
.bbm-modal
|
||||
background: white
|
||||
box-shadow: 0 0px 6px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.9)
|
||||
|
||||
|
||||
/* BLOCKS */
|
||||
.bbm-modal__topbar,
|
||||
.bbm-modal__bottombar
|
||||
padding: 0 30px
|
||||
|
||||
.bbm-modal__topbar
|
||||
border-bottom: 1px solid rgba(0,0,0,.1)
|
||||
margin:
|
||||
bottom: 30px
|
||||
|
||||
>ul
|
||||
list-style: none
|
||||
text-align: center
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.bbm-modal__tab
|
||||
display: inline-block
|
||||
padding: 15px 10px
|
||||
|
||||
a
|
||||
font:
|
||||
size: 16px
|
||||
weight: bold
|
||||
color: #999
|
||||
|
||||
&:hover,
|
||||
&.active
|
||||
color: #222
|
||||
|
||||
.bbm-modal__title
|
||||
padding: 20px 0 19px
|
||||
margin: 0
|
||||
font:
|
||||
weight: normal
|
||||
size: 22px
|
||||
line-height: 1em
|
||||
color: #312D3A
|
||||
|
||||
.bbm-modal__section
|
||||
padding: 0 30px
|
||||
margin-top: 0px
|
||||
font:
|
||||
size: 16px
|
||||
line-height: 26px
|
||||
color: #575656
|
||||
|
||||
p
|
||||
font:
|
||||
size: 16px
|
||||
line-height: 26px
|
||||
color: #575656
|
||||
|
||||
&:last-child
|
||||
padding: 0
|
||||
margin-bottom: 0
|
||||
|
||||
a
|
||||
color: #FF643C
|
||||
|
||||
h3
|
||||
margin: 0
|
||||
font-size: 20px
|
||||
line-height: 1em
|
||||
|
||||
.bbm-modal__bottombar
|
||||
border-top: 1px solid rgba(0,0,0,.1)
|
||||
padding: 18px
|
||||
text-align: right
|
||||
margin-top: 30px
|
||||
|
||||
|
||||
/* MODULES */
|
||||
.bbm-group
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
|
||||
.bbm-button
|
||||
display: inline-block
|
||||
color: rgba(49,45,58,.8)
|
||||
text-decoration: none
|
||||
font:
|
||||
size: 14px
|
||||
weight: 500
|
||||
position: relative
|
||||
line-height: 1em
|
||||
padding: 10px 14px
|
||||
border-radius: 3px
|
||||
background: #FCFCFC
|
||||
cursor: default
|
||||
|
||||
background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
|
||||
-moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
-webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
|
||||
&.inactive
|
||||
opacity: .5
|
||||
pointer-events: none
|
||||
|
||||
&:active
|
||||
background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
|
||||
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
/* Open modal */
|
||||
@@ -0,0 +1,45 @@
|
||||
// Custom styling here
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
font-style: normal
|
||||
|
||||
// Add icons to tabs
|
||||
.bbm-modal__tab
|
||||
padding: 0
|
||||
|
||||
a
|
||||
display: block
|
||||
padding:
|
||||
top: 55px
|
||||
bottom: 10px
|
||||
left: 20px
|
||||
right: 20px
|
||||
position: relative
|
||||
font:
|
||||
size: 13px
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
content: ""
|
||||
background: url(img/tab-icons.png)
|
||||
left: 50%
|
||||
top: 10px
|
||||
margin:
|
||||
left: -20px
|
||||
width: 40px
|
||||
height: 40px
|
||||
opacity: .5
|
||||
|
||||
&.active
|
||||
opacity: 1
|
||||
|
||||
&:before
|
||||
opacity: 1
|
||||
|
||||
|
||||
&:last-child
|
||||
margin-left: -5px
|
||||
a
|
||||
&:before
|
||||
background-position: -40px
|
||||
@@ -0,0 +1,131 @@
|
||||
//@import "style";
|
||||
@import "backbone.modal";
|
||||
@import "backbone.modal.theme";
|
||||
|
||||
$height: 600px;
|
||||
$game-height: 800px;
|
||||
|
||||
.board {
|
||||
height: $game-height;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.battleside {
|
||||
width: 100%;
|
||||
height: $height/2;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
|
||||
&.active {
|
||||
box-shadow: 0px 0px 15px #ffbb0b;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.field:hover, .field-single:hover {
|
||||
box-shadow: 0px 0px 10px #000;
|
||||
}
|
||||
|
||||
.field-hand {
|
||||
margin-top: 20px;
|
||||
.card {
|
||||
margin-left: -20px;
|
||||
&:hover {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform: scale(1.25,1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.passing {/*
|
||||
display: none;*/
|
||||
}
|
||||
|
||||
.field-single {
|
||||
border: 1px solid black;
|
||||
height: 150px;
|
||||
width: 85px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
//height: $game-height;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
height: $game-height/2 - 100px;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
background: rgba(252, 219, 125, 0.51);
|
||||
}
|
||||
|
||||
.removeBackground {
|
||||
background: 0;
|
||||
}
|
||||
|
||||
.mid-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 1px solid black;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
border: 1px solid black;
|
||||
height: $game-height/2;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid black;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 120px;
|
||||
}
|
||||
span {
|
||||
color: #00b000;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
text-shadow: 1px 1px #101010;
|
||||
margin-top: 55px;
|
||||
margin-left: 30px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.activeCard {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
transform: scale(1.5,1.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
position: absolute;/*
|
||||
display: none;*/
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: url("../../assets/ruby-grey.png");
|
||||
&.ruby {
|
||||
background: url("../../assets/ruby.png");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user