mirror of
https://github.com/exane/not-gwent-online
synced 2024-12-23 21:03:14 +00:00
add notifications (kinda)
This commit is contained in:
parent
a89f3414ff
commit
70432e3530
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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% {
|
||||
|
@ -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>
|
||||
|
@ -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
3
client/templates/notification.handlebars
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="col-xs-12">
|
||||
<div class="alert alert-success">{{message}}</div>
|
||||
</div>
|
@ -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;
|
||||
})();
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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){
|
||||
|
Loading…
Reference in New Issue
Block a user