mirrors/not-gwent-online
1
0
Fork 0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00
Code Releases Activity

add notifications (kinda)

Browse Source
This commit is contained in:
exane 2015-06-29 19:57:51 +02:00
parent a89f3414ff
commit 70432e3530
9 changed files with 124 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@ -10,6 +10,12 @@
<script src="Config.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="notifications"></div>
<div class="gwent-battle"></div>
</div>
</div>
<script src="build/app.js"></script>
</body>
</html>

69
client/js/client.js
View File

@ -255,17 +255,15 @@ let calculateCardMargin = function($selector, totalWidth, cardWidth, n){
}
let BattleView = Backbone.View.extend({
className: "container",
template: require("../templates/battle.handlebars"), /*
templatePreview: require("../templates/preview.handlebars"),*/
el: ".gwent-battle",
template: require("../templates/battle.handlebars"),
initialize: function(options){
let self = this;
let user = this.user = options.user;
let app = this.app = options.app;
let yourSide, otherSide;
$(this.el).prependTo('body');
$(this.el).prependTo('gwent-battle');
this.listenTo(user, "change:showPreview", this.renderPreview);
this.listenTo(user, "change:waiting", this.render);
@ -438,7 +436,7 @@ let BattleView = Backbone.View.extend({
let modal = new ReDrawModal({model: this.user});
this.$el.prepend(modal.render().el);
}
if(this.user.get("openDiscard")) {
if(this.user.get("openDiscard")){
let modal = new Modal({model: this.user});
this.$el.prepend(modal.render().el);
}
@ -467,7 +465,7 @@ let BattleView = Backbone.View.extend({
renderPreview: function(){
/*let preview = new Preview({key: this.user.get("showPreview")});*/
let preview = this.user.get("showPreview");
if(!preview) {
if(!preview){
return;
}
this.$el.find(".card-preview").html(preview.render().el);
@ -625,19 +623,20 @@ let ReDrawModal = Modal.extend({
let WinnerModal = Modal.extend({
template: require("../templates/modal.winner.handlebars")
});
let ChooseSideModal = Modal.extend({
template: require("../templates/modal.side.handlebars"),
events: {
"click .btn": "onBtnClick"
},
beforeCancel: function() {
beforeCancel: function(){
return false;
},
onBtnClick: function(e) {
var id = $(e.target).closest(".btn").data().id;
onBtnClick: function(e){
var id = $(e.target).data().id;
this.model.set("chooseSide", false);
if(id === "you") {
if(id === "you"){
//this.model.set("chosenSide", this.model.get("roomSide"));
this.model.chooseSide(this.model.get("roomSide"));
this.remove();
@ -742,7 +741,7 @@ let User = Backbone.Model.extend({
let modal = new WinnerModal({model: new model({winner: winner})});
$("body").prepend(modal.render().el);
})
app.receive("request:chooseWhichSideBegins", function() {
app.receive("request:chooseWhichSideBegins", function(){
self.set("chooseSide", true);
})
@ -752,6 +751,10 @@ let User = Backbone.Model.extend({
app.on("setDeck", this.setDeck, this);
app.receive("notification", function(data) {
new Notification(data).render();
})
app.send("request:name", this.get("name") == "unnamed" ? null : {name: this.get("name")});
},
startMatchmaking: function(){
@ -775,7 +778,7 @@ let User = Backbone.Model.extend({
this.set("deckKey", deckKey);
this.get("app").send("set:deck", {deck: deckKey});
},
chooseSide: function(roomSide) {
chooseSide: function(roomSide){
this.get("app").send("response:chooseWhichSideBegins", {
side: roomSide
})
@ -786,21 +789,25 @@ let Lobby = Backbone.View.extend({
defaults: {
id: ""
},
className: "container",
template: require("../templates/lobby.handlebars"),
initialize: function(options){
this.user = options.user;
this.app = options.app;
this.listenTo(this.app.user, "change", this.render);
$(this.el).prependTo('body');
//$(this.el).prependTo('body');
$(".gwent-battle").html(this.el);
this.render();
},
events: {
"click .startMatchmaking": "startMatchmaking",
/*"click .join-room": "joinRoom",*/
"blur .name-input": "changeName",
"change #deckChoice": "setDeck"
"change #deckChoice": "setDeck",
"click .note": "debugNote"
},
debugNote: function() {
new Notification({message: "yoyo TEST"}).render();
},
render: function(){
this.$el.html(this.template(this.user.attributes));
@ -855,4 +862,34 @@ let Preview = Backbone.View.extend({
}
});
let Notification = Backbone.View.extend({
className: "notification",
template: require("../templates/notification.handlebars"),
initialize: function(opt){
this.opt = opt;
$(".notifications").append(this.el);
},
render: function(){
this.$el.html(this.template(this.opt));
this.show();
return this;
},
show: function(){
this.$el.animate({
"height": "60px"
}, {
duration: 600,
complete: this.hide.bind(this)
}).delay(2500);
},
hide: function(){
this.$el.animate({
"height": "0"
}, {
complete: this.remove.bind(this)
})
}
});
module.exports = App;

21
client/scss/main.scss
View File

@ -18,7 +18,7 @@ $game-height: 800px;
.large-field-counter {
line-height: 20px;
border: 1px solid black;
//border: 1px solid black;
border-radius: 30px;
height: 40px;
padding: 10px;
@ -295,7 +295,26 @@ $game-height: 800px;
-ms-transform-origin: 50% 50%;
}
.container {
position: relative;
}
.notifications {
position: absolute;
top: 0;
z-index: 200;
width: 100%;
}
.notification {
height: 0;
margin-left: 250px;
margin-right: 250px;
.alert {
margin-bottom: 0;
//padding: 0;
}
}
@keyframes waitForOpponent{
0% {

2
client/templates/lobby.handlebars
View File

@ -20,7 +20,9 @@
{{#if inMatchmakerQueue}}<img src="../site/public/assets/img/content-load.gif" width=20 style="margin: 5px;"> {{/if}}
</button>
<!--<button type="button" class="btn btn-primary join-room">Join Room</button>-->
<button type="button" class="btn btn-success note">debug note</button>
</div>
</div>
</div>
</div>

2
client/templates/modal.winner.handlebars
View File

@ -3,7 +3,7 @@
</div>
<div class="bbm-modal__section">
<h1>{{winner}} wins the match!</h1>
<p>If you want to give feedback, or if you want to contribute, please feel free to visit <a href="https://github.com/exane/gwent-online">Github Gwent-Online</a>.</p>
<p>If you want to give feedback, or want to contribute, please feel free to visit <a href="https://github.com/exane/gwent-online" target="_blank">Github Gwent-Online</a>.</p>
<p>For another match reload the page und enqueue again!</p>
<p><b>Thanks for playing the game!</b></p>
</div>

3
client/templates/notification.handlebars Normal file
View File

@ -0,0 +1,3 @@
<div class="col-xs-12">
<div class="alert alert-success">{{message}}</div>
</div>

42
server/Battle.js
View File

@ -121,7 +121,8 @@ var Battle = (function(){
}
r.startNextRound = function(){
var loser = this.checkRubies();
var lastRound = this.checkRubies();
var loser = lastRound.loser;
var winner = loser.foe;
if(this.checkIfIsOver()){
console.log("its over!");
@ -134,10 +135,13 @@ var Battle = (function(){
this.p2.resetNewRound();
console.log("start new round!");
this.sendNotification("Start new round!");
if(winner.deck.getFaction() === Deck.FACTION.NORTHERN_REALM){
if(winner.deck.getFaction() === Deck.FACTION.NORTHERN_REALM && !lastRound.isTie){
winner.draw(1);
console.log(winner.getName() + " draws 1 extra card! (Northern ability)");
this.sendNotification(winner.getName() + " draws 1 extra card! (Northern ability)");
}
this.update();
@ -158,6 +162,7 @@ var Battle = (function(){
r.waitForScoiatael = function(side){
var self = this;
self.sendNotification(side.getName() + " decides whos starts first");
side.send("request:chooseWhichSideBegins", null, true);
side.socket.once("response:chooseWhichSideBegins", function(data){
console.log("which side? ", data.side);
@ -289,11 +294,17 @@ var Battle = (function(){
if(scoreP1 > scoreP2){
this.p2.removeRuby();
return this.p2;
return {
loser: this.p2,
isTie: false
}
}
if(scoreP2 > scoreP1){
this.p1.removeRuby();
return this.p1;
return {
loser: this.p1,
isTie: false
}
}
//tie
@ -302,17 +313,28 @@ var Battle = (function(){
if(this.p1.deck.getFaction() === Deck.FACTION.NILFGAARDIAN_EMPIRE && this.p1.deck.getFaction() !== this.p2.deck.getFaction()){
this.p2.removeRuby();
console.log(this.p1.getName() + " wins the tie! (nilfgaardian ability)");
return this.p2;
self.sendNotification(this.p1.getName() + " wins the tie! (nilfgaardian ability)");
return {
loser: this.p2,
isTie: false
}
}
if(this.p2.deck.getFaction() === Deck.FACTION.NILFGAARDIAN_EMPIRE && this.p1.deck.getFaction() !== this.p2.deck.getFaction()){
this.p1.removeRuby();
console.log(this.p2.getName() + " wins the tie! (nilfgaardian ability)");
return this.p1;
self.sendNotification(this.p2.getName() + " wins the tie! (nilfgaardian ability)");
return {
loser: this.p1,
isTie: false
}
}
this.p1.removeRuby();
this.p2.removeRuby();
return Math.random() > 0.5 ? this.p1 : this.p2;
return {
loser: Math.random() > 0.5 ? this.p1 : this.p2,
isTie: true
}
}
r.userLeft = function(sideName){
@ -326,6 +348,12 @@ var Battle = (function(){
this.channel = null;
}
r.sendNotification = function(msg){
this.send("notification", {
message: msg
})
}
return Battle;
})();

3
server/Battleside.js
View File

@ -176,6 +176,8 @@ Battleside = (function(){
var allCards = close.concat(range.concat(siege));
var rnd = (Math.random() * allCards.length) | 0 ;
if(allCards[rnd].getType === 4) return null;
return allCards[rnd];
}
@ -332,6 +334,7 @@ Battleside = (function(){
if(!field){
field = obj.targetSide.field[card.getType()];
}
field.add(card);
}

2
server/Room.js
View File

@ -59,7 +59,7 @@ var Room = (function(){
r.initBattle = function(){
this._battle = Battle(this._id, this._users[0], this._users[1], io);
this._users[0].send("init:battle", {side: "p1", foeSide: "p2"});
this._users[1].send("init:battle", {side: "p2", foeSide: "p2"});
this._users[1].send("init:battle", {side: "p2", foeSide: "p1"});
}
r.setReady = function(user, b){