mirror of
https://github.com/exane/not-gwent-online
synced 2025-09-25 22:59:10 +00:00
update2
This commit is contained in:
exane
@@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="../build/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container board">
|
||||
<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>
|
||||
@@ -73,6 +73,11 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 field field-hand">
|
||||
{{#each cards}}
|
||||
<div class="card">
|
||||
<img src='../assets/cards/{{_data.img}}.png'>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,7 +100,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="matchmaker-template" type="text/x-handlebars-template">
|
||||
<div class="col-xs-12">
|
||||
<div class="panel panel-default">
|
||||
|
||||
@@ -1,200 +0,0 @@
|
||||
var io = require("socket.io-client")("http://localhost:16918");
|
||||
var Backbone = require("backbone");
|
||||
var Handlebars = require("handlebars");
|
||||
var $ = require("jquery");
|
||||
|
||||
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 App = Backbone.Router.extend({
|
||||
routes: {
|
||||
"*other": "defaultRoute"
|
||||
},
|
||||
initialize: function(){
|
||||
|
||||
},
|
||||
defaultRoute: function(){
|
||||
|
||||
},
|
||||
search: function(){
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var Player = Backbone.Model.extend({
|
||||
defaults: {
|
||||
name: "",
|
||||
lives: 2,
|
||||
MAX_LIVES: 2,
|
||||
hand: 0,
|
||||
score: 0
|
||||
},
|
||||
initialize: function(){
|
||||
var self = this;
|
||||
window.self = self;
|
||||
this.send("request:name", this.get("name") == "unnamed" ? null : {name: this.get("name")});
|
||||
|
||||
this.receive("response:name", function(data){
|
||||
self.set("name", data.name);
|
||||
});
|
||||
|
||||
this.receive("init:battle", function(){
|
||||
console.log("opponent found!");
|
||||
|
||||
})
|
||||
|
||||
|
||||
this.receive("response:createRoom", function(roomID){
|
||||
self.get("room").set("id", roomID);
|
||||
console.log("room created", roomID);
|
||||
});
|
||||
this.receive("response:joinRoom", function(roomID){
|
||||
var room = new Room();
|
||||
room.set("id", roomID);
|
||||
self.set("room", room);
|
||||
})
|
||||
|
||||
},
|
||||
receive: function(event, cb){
|
||||
this.get("socket").on(event, cb);
|
||||
},
|
||||
send: function(event, data, room){
|
||||
data = data || null;
|
||||
room = room || null;
|
||||
var socket = this.get("socket");
|
||||
|
||||
if(!data && !room){
|
||||
socket.emit(event);
|
||||
}
|
||||
else if(data && !room){
|
||||
socket.emit(event, data);
|
||||
}
|
||||
else if(!data && room){
|
||||
socket.to(room).emit(event);
|
||||
}
|
||||
else {
|
||||
socket.to(room).emit(event, data);
|
||||
}
|
||||
},
|
||||
setName: function(name){
|
||||
this.send("request:name", {name: name});
|
||||
}
|
||||
});
|
||||
|
||||
var Battleside = Backbone.Model.extend({
|
||||
|
||||
});
|
||||
|
||||
var Room = Backbone.Model.extend({
|
||||
defaults: {
|
||||
id: ""
|
||||
},
|
||||
initialize: function(){
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
var RoomView = Backbone.View.extend({
|
||||
el: ".container",
|
||||
template: Handlebars.compile($("#matchmaker-template").html()),
|
||||
initialize: function(){
|
||||
this.listenTo(this.model, "change", this.render);
|
||||
this.render();
|
||||
},
|
||||
events: {
|
||||
"click .create-room": "createRoom",
|
||||
"click .join-room": "joinRoom",
|
||||
"blur .name-input": "changeName"
|
||||
},
|
||||
render: function(){
|
||||
this.$el.html(this.template(this.model.attributes));
|
||||
return this;
|
||||
},
|
||||
createRoom: function(){
|
||||
var room = new Room();
|
||||
this.model.set("room", room);
|
||||
this.model.send("request:createRoom");
|
||||
},
|
||||
joinRoom: function(){
|
||||
this.model.send("request:joinRoom");
|
||||
},
|
||||
changeName: function(e){
|
||||
var name = $(e.target).val();
|
||||
this.model.setName(name);
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
var InfoView = Backbone.View.extend({
|
||||
template: Handlebars.compile($("#game-info-template").html()),
|
||||
initialize: function(){
|
||||
this.listenTo(this.model, "change", this.render);
|
||||
this.render();
|
||||
},
|
||||
render: function(){
|
||||
this.$el.html(this.template(this.model.attributes));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var Gwent = (function(){
|
||||
var Gwent = function(){
|
||||
if(!(this instanceof Gwent)){
|
||||
return (new Gwent());
|
||||
}
|
||||
/**
|
||||
* constructor here
|
||||
*/
|
||||
|
||||
|
||||
};
|
||||
var r = Gwent.prototype;
|
||||
/**
|
||||
* methods && properties here
|
||||
* r.property = null;
|
||||
* r.getProperty = function() {...}
|
||||
*/
|
||||
r.view = null;
|
||||
r.foe = null;
|
||||
r.player = null;
|
||||
r.playerView = null;
|
||||
r.foeView = null;
|
||||
|
||||
|
||||
r.init = function(){
|
||||
var app = new App();
|
||||
Backbone.history.start();
|
||||
|
||||
window.player = this.player = new Player({
|
||||
battleside: new Battleside(),
|
||||
socket: io
|
||||
});
|
||||
|
||||
/* this.playerView = new InfoView({
|
||||
el: ".game-info-player",
|
||||
model: this.player
|
||||
});*/
|
||||
|
||||
this.roomView = new RoomView({
|
||||
model: this.player
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
return Gwent;
|
||||
})();
|
||||
|
||||
module.exports = Gwent;
|
||||
40
public/js/client-lobby.js
Normal file
40
public/js/client-lobby.js
Normal file
@@ -0,0 +1,40 @@
|
||||
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"
|
||||
},
|
||||
render: function(){
|
||||
this.$el.html(this.template(this.app.user.attributes));
|
||||
return this;
|
||||
},
|
||||
createRoom: function(){
|
||||
this.app.send("request:createRoom");
|
||||
},
|
||||
joinRoom: function(){
|
||||
this.app.send("request:joinRoom");
|
||||
},
|
||||
changeName: function(e){
|
||||
var name = $(e.target).val();
|
||||
this.app.user.setName(name);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
module.exports = Lobby;
|
||||
212
public/js/client.js
Normal file
212
public/js/client.js
Normal file
@@ -0,0 +1,212 @@
|
||||
var io = require("socket.io-client")/*("http://localhost:16918")*/;
|
||||
var Backbone = require("backbone");
|
||||
var Handlebars = require("handlebars");
|
||||
var $ = require("jquery");
|
||||
//var Lobby = require("./client-lobby");
|
||||
|
||||
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 = {
|
||||
"URL": "http://localhost",
|
||||
"PORT": 16918
|
||||
}
|
||||
|
||||
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 = io(Config.Server.URL + ":" + Config.Server.PORT);
|
||||
},
|
||||
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 BattleView = Backbone.View.extend({
|
||||
className: "container",
|
||||
template: Handlebars.compile($("#battle-template").html()),
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
var user = this.user = options.user;
|
||||
var app = this.app = options.app;
|
||||
$(this.el).prependTo('body');
|
||||
|
||||
this.$hand = this.$el.find(".field-hand");
|
||||
|
||||
this.app.receive("update:hand", function(data){
|
||||
console.log("update:hand", user.get("roomSide"), data._roomSide);
|
||||
if(user.get("roomSide") == data._roomSide){
|
||||
self.handCards = JSON.parse(data.cards);
|
||||
self.render();
|
||||
}
|
||||
});
|
||||
|
||||
var interval = setInterval(function(){
|
||||
if(!user.get("room")) return;
|
||||
this.app.send("request:gameLoaded", {_roomID: user.get("room")});
|
||||
clearInterval(interval);
|
||||
}.bind(this), 100);
|
||||
this.render();
|
||||
},
|
||||
render: function(){
|
||||
var self = this;
|
||||
this.$el.html(this.template({
|
||||
cards: self.handCards
|
||||
}));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
var User = Backbone.Model.extend({
|
||||
defaults: {
|
||||
name: ""
|
||||
},
|
||||
initialize: function(){
|
||||
var self = this;
|
||||
var app = this.get("app");
|
||||
|
||||
|
||||
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);
|
||||
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.on("createRoom", this.createRoom, this);
|
||||
app.on("joinRoom", this.joinRoom, this);
|
||||
app.on("setName", this.setName, 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");
|
||||
},
|
||||
setName: function(name){
|
||||
this.get("app").send("request:name", {name: name});
|
||||
}
|
||||
});
|
||||
|
||||
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"
|
||||
},
|
||||
render: function(){
|
||||
this.$el.html(this.template(this.user.attributes));
|
||||
return this;
|
||||
},
|
||||
createRoom: function(){
|
||||
this.app.trigger("createRoom");
|
||||
},
|
||||
joinRoom: function(){
|
||||
this.app.trigger("joinRoom");
|
||||
},
|
||||
changeName: function(e){
|
||||
var name = $(e.target).val();
|
||||
this.app.trigger("setName", name);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = App;
|
||||
@@ -1,9 +1,7 @@
|
||||
|
||||
var Gwent = require("./Gwent");
|
||||
var App = require("./client");
|
||||
|
||||
(function main(){
|
||||
var gwent = Gwent();
|
||||
|
||||
gwent.init();
|
||||
var app = new App();
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user