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> <script src="Config.js"></script>
</head> </head>
<body> <body>
<div class="container">
<div class="row">
<div class="notifications"></div>
<div class="gwent-battle"></div>
</div>
</div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>
</html> </html>

69
client/js/client.js
View File

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

21
client/scss/main.scss
View File

@ -18,7 +18,7 @@ $game-height: 800px;
.large-field-counter { .large-field-counter {
line-height: 20px; line-height: 20px;
border: 1px solid black; //border: 1px solid black;
border-radius: 30px; border-radius: 30px;
height: 40px; height: 40px;
padding: 10px; padding: 10px;
@ -295,7 +295,26 @@ $game-height: 800px;
-ms-transform-origin: 50% 50%; -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{ @keyframes waitForOpponent{
0% { 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}} {{#if inMatchmakerQueue}}<img src="../site/public/assets/img/content-load.gif" width=20 style="margin: 5px;"> {{/if}}
</button> </button>
<!--<button type="button" class="btn btn-primary join-room">Join Room</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>
</div> </div>
</div> </div>

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

@ -3,7 +3,7 @@
</div> </div>
<div class="bbm-modal__section"> <div class="bbm-modal__section">
<h1>{{winner}} wins the match!</h1> <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>For another match reload the page und enqueue again!</p>
<p><b>Thanks for playing the game!</b></p> <p><b>Thanks for playing the game!</b></p>
</div> </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(){ r.startNextRound = function(){
var loser = this.checkRubies(); var lastRound = this.checkRubies();
var loser = lastRound.loser;
var winner = loser.foe; var winner = loser.foe;
if(this.checkIfIsOver()){ if(this.checkIfIsOver()){
console.log("its over!"); console.log("its over!");
@ -134,10 +135,13 @@ var Battle = (function(){
this.p2.resetNewRound(); this.p2.resetNewRound();
console.log("start new round!"); 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); winner.draw(1);
console.log(winner.getName() + " draws 1 extra card! (Northern ability)"); console.log(winner.getName() + " draws 1 extra card! (Northern ability)");
this.sendNotification(winner.getName() + " draws 1 extra card! (Northern ability)");
} }
this.update(); this.update();
@ -158,6 +162,7 @@ var Battle = (function(){
r.waitForScoiatael = function(side){ r.waitForScoiatael = function(side){
var self = this; var self = this;
self.sendNotification(side.getName() + " decides whos starts first");
side.send("request:chooseWhichSideBegins", null, true); side.send("request:chooseWhichSideBegins", null, true);
side.socket.once("response:chooseWhichSideBegins", function(data){ side.socket.once("response:chooseWhichSideBegins", function(data){
console.log("which side? ", data.side); console.log("which side? ", data.side);
@ -289,11 +294,17 @@ var Battle = (function(){
if(scoreP1 > scoreP2){ if(scoreP1 > scoreP2){
this.p2.removeRuby(); this.p2.removeRuby();
return this.p2; return {
loser: this.p2,
isTie: false
}
} }
if(scoreP2 > scoreP1){ if(scoreP2 > scoreP1){
this.p1.removeRuby(); this.p1.removeRuby();
return this.p1; return {
loser: this.p1,
isTie: false
}
} }
//tie //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()){ if(this.p1.deck.getFaction() === Deck.FACTION.NILFGAARDIAN_EMPIRE && this.p1.deck.getFaction() !== this.p2.deck.getFaction()){
this.p2.removeRuby(); this.p2.removeRuby();
console.log(this.p1.getName() + " wins the tie! (nilfgaardian ability)"); 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()){ if(this.p2.deck.getFaction() === Deck.FACTION.NILFGAARDIAN_EMPIRE && this.p1.deck.getFaction() !== this.p2.deck.getFaction()){
this.p1.removeRuby(); this.p1.removeRuby();
console.log(this.p2.getName() + " wins the tie! (nilfgaardian ability)"); 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.p1.removeRuby();
this.p2.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){ r.userLeft = function(sideName){
@ -326,6 +348,12 @@ var Battle = (function(){
this.channel = null; this.channel = null;
} }
r.sendNotification = function(msg){
this.send("notification", {
message: msg
})
}
return Battle; return Battle;
})(); })();

3
server/Battleside.js
View File

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

2
server/Room.js
View File

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