1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00
This commit is contained in:
exane 2015-06-13 09:58:55 +02:00
parent 4f98d3d651
commit a2ca580844
12 changed files with 400 additions and 84 deletions

View File

@ -17,7 +17,8 @@
"devDependencies": { "devDependencies": {
"handlebars": "^3.0.3", "handlebars": "^3.0.3",
"jquery": "^2.1.4", "jquery": "^2.1.4",
"promise": "^7.0.1" "promise": "^7.0.1",
"shortid": "^2.2.2"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"

View File

@ -10,7 +10,7 @@
<body> <body>
<div class="container board"> <div class="container board">
<div class="col-xs-3 left-side"> <div class="col-xs-3 left-side">
<div class="col-xs-12 game-info game-info-enemy enemy"> <div class="col-xs-12 game-info game-info-foe foe">
<div class="col-xs-12 info-name"></div> <div class="col-xs-12 info-name"></div>
<div class="col-xs-6 field-single field-leader"></div> <div class="col-xs-6 field-single field-leader"></div>
<div class="col-xs-6"> <div class="col-xs-6">
@ -37,35 +37,11 @@
field field
</div> </div>
<div class="col-xs-12 game-info game-info-player player"> <div class="col-xs-12 game-info game-info-player player">
<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></i>
</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> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="row"> <div class="row">
<div class="col-xs-12 battleside battleside-enemy enemy"> <div class="col-xs-12 battleside battleside-foe foe">
<div class="col-xs-12 field"> <div class="col-xs-12 field">
<div class="col-xs-1 large-field-counter">0</div> <div class="col-xs-1 large-field-counter">0</div>
<div class="col-xs-11 field-siege"></div> <div class="col-xs-11 field-siege"></div>
@ -102,7 +78,7 @@
</div> </div>
<div class="col-xs-3"> <div class="col-xs-3">
<div class="col-xs-12 card-preview"></div> <div class="col-xs-12 card-preview"></div>
<div class="col-xs-12 right-side right-side-enemy enemy"> <div class="col-xs-12 right-side right-side-foe foe">
<div class="col-xs-5 field-discard field-single"> <div class="col-xs-5 field-discard field-single">
discard deck discard deck
</div> </div>
@ -120,6 +96,52 @@
</div> </div>
</div> </div>
</div> </div>
<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}}">
</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 src="../build/app.js"></script> <script src="../build/app.js"></script>
</body> </body>
</html> </html>

View File

@ -1,8 +1,152 @@
var io = require("socket.io-client")("http://localhost:16918"); var io = require("socket.io-client")("http://localhost:16918");
var Backbone = require("backbone"); var Backbone = require("backbone");
var Player = require("./Player"); 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(){
@ -15,7 +159,6 @@ var Gwent = (function(){
*/ */
}; };
var r = Gwent.prototype; var r = Gwent.prototype;
/** /**
@ -24,16 +167,30 @@ var Gwent = (function(){
* r.getProperty = function() {...} * r.getProperty = function() {...}
*/ */
r.view = null; r.view = null;
r.enemy = null; r.foe = null;
r.player = null; r.player = null;
r.playerView = null;
r.foeView = null;
r._view = function() {
} 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
});
r.init = function() {
this.player = Backbone.Model.extend({});
this.enemy = Backbone.Model.extend({});
} }

View File

@ -1,23 +0,0 @@
var Player = (function(){
var Player = function(){
if(!(this instanceof Player)){
return (new Player());
}
/**
* constructor here
*/
};
var r = Player.prototype;
/**
* methods && properties here
* r.property = null;
* r.getProperty = function() {...}
*/
return Player;
})();
module.exports = Player;

View File

@ -4,4 +4,6 @@ var Gwent = require("./Gwent");
(function main(){ (function main(){
var gwent = Gwent(); var gwent = Gwent();
gwent.init();
})(); })();

View File

@ -94,3 +94,4 @@ i {
background: url("../assets/ruby.png"); background: url("../assets/ruby.png");
} }
} }

View File

@ -22,7 +22,9 @@ var Battle = (function(){
r.init = function(p1, p2){ r.init = function(p1, p2){
this.setPlayer(p1, p2); this.setPlayer(p1, p2);
this.initBattleside(); this.initBattleside();
this.render(); this.both(function(p) {
p.send("init:battle");
})
} }
r.setPlayer = function(p1, p2){ r.setPlayer = function(p1, p2){
@ -37,10 +39,8 @@ var Battle = (function(){
}); });
} }
r.render = function() { r.both = function() {
this._player.forEach(function(p) { this._player.forEach(cb);
p.send("update:name", p.getID());
});
} }

View File

@ -30,6 +30,10 @@ var Connections = (function(){
return this._connections; return this._connections;
} }
r.hasUser = function(user) {
return !!this._connections[user.getID()];
}
return Connections; return Connections;
})(); })();

View File

@ -1,15 +1,17 @@
var Promise = require("promise"); var Promise = require("promise");
var Matchmaker = (function(){ var Matchmaker = (function(){
var Matchmaker = function(){ var Matchmaker = function(connections){
if(!(this instanceof Matchmaker)){ if(!(this instanceof Matchmaker)){
return (new Matchmaker()); return (new Matchmaker(connections));
} }
/** /**
* constructor here * constructor here
*/ */
this._connections = connections;
this._queue = []; this._queue = [];
}; };
var r = Matchmaker.prototype; var r = Matchmaker.prototype;
/** /**
@ -19,6 +21,7 @@ var Matchmaker = (function(){
*/ */
r._queue = null; r._queue = null;
r._connections = null;
r.findOpponent = function(user){ r.findOpponent = function(user){
var self = this; var self = this;
@ -32,14 +35,16 @@ var Matchmaker = (function(){
r._checkForOpponent = function(resolve){ r._checkForOpponent = function(resolve){
if(this._queue.length <= 1) return; if(this._queue.length <= 1) return;
console.log(this._queue.length);
if(!this._checkConnections()) return;
this._match(this._queue[0], this._queue[1], resolve); this._match(this._queue[0], this._queue[1], resolve);
} }
r._match = function(p1, p2, resolve){ r._match = function(p1, p2, resolve){
this._queue.splice(0, 2); this._queue.splice(0, 2);
var roomID = p1.id + p2.id; var roomID = p1.id + p2.id;
p1.send("update:opponent", {opponent: p2.getID()}); p1.send("get:opponent", {socketID: p2.getID()});
p2.send("update:opponent", {opponent: p1.getID()}); p2.send("get:opponent", {socketID: p1.getID()});
p1.joinRoom(roomID); p1.joinRoom(roomID);
p2.joinRoom(roomID); p2.joinRoom(roomID);
@ -47,6 +52,20 @@ var Matchmaker = (function(){
resolve(p1, p2, roomID); resolve(p1, p2, roomID);
} }
r._checkConnections = function() {
var res = true;
var self = this;
this._queue.forEach(function(user, index) {
if(!self._connections.hasUser(user)) {
self._queue.splice(index, 1);
res = false;
}
});
return res;
}
return Matchmaker; return Matchmaker;
})(); })();

59
server/Room.js Normal file
View File

@ -0,0 +1,59 @@
var shortid = require("shortid");
var Room = (function(){
var Room = function(){
if(!(this instanceof Room)){
return (new Room());
}
/**
* constructor here
*/
this._id = shortid.generate();
this._room = [];
};
var r = Room.prototype;
/**
* methods && properties here
* r.property = null;
* r.getProperty = function() {...}
*/
r.MAX_USER = 2;
r._room = null;
r._id = null;
r.getID = function() {
return this._id;
}
r.join = function(user) {
if(this._room.lenght >= 2) return;
this._room.push(user);
user.setRoom(this);/*
user.socket.join(this._id);*/
user.joinRoom(this.getID());
if(!this.isOpen()) {
this._room.forEach(function(user) {
user.send("init:battle");
})
}
}
r.isOpen = function() {
return !(this._room.length >= 2);
}
r.send = function(event, data) {
io.to(this._id).emit(event, data);
}
r.getPlayers = function() {
return this._room;
}
return Room;
})();
module.exports = Room;

View File

@ -1,10 +1,14 @@
var app = require('http').createServer(); var app = require('http').createServer();
var io = require("socket.io")(app); global.io = require("socket.io")(app);
var User = require("./User"); var User = require("./User");
var Connections = require("./Connections"); var Connections = require("./Connections");
var Battle = require("./Battle"); var Battle = require("./Battle");
var Npc = require("./Npc"); var Npc = require("./Npc");
var Room = require("./Room");
/*
var Matchmaker = require("./Matchmaker"); var Matchmaker = require("./Matchmaker");
*/
var Socket = (function(){ var Socket = (function(){
var Socket = function(){ var Socket = function(){
@ -14,8 +18,11 @@ var Socket = (function(){
/** /**
* constructor here * constructor here
*/ */
this.matchmaker = Matchmaker();
this.connections = Connections(); this.connections = Connections();
/*
this.matchmaker = Matchmaker(this.connections);
*/
this._roomCollection = [];
app.listen(this.port); app.listen(this.port);
this.io = io; this.io = io;
this._events(); this._events();
@ -29,27 +36,66 @@ var Socket = (function(){
r.io = null; r.io = null;
r.port = 16918; r.port = 16918;
r.connections = null; r.connections = null;
r._roomCollection = null;
/*
r.matchmaker = null; r.matchmaker = null;
*/
r._events = function() { r._events = function(){
var self = this; var self = this;
this.io.on("connection", function(socket) { this.io.on("connection", function(socket){
var user = User(socket); var user = User(socket);
self.connections.add(user); self.connections.add(user);
console.log("new user ", user.getID()); console.log("new user ", user.getName());
this.matchmaker.findOpponent(user) /* self.matchmaker.findOpponent(user)
.then(function(p1, p2, roomID) { .then(function(p1, p2, roomID) {
var battle = Battle(); console.log("yo");
battle.init(p1, p2); var battle = Battle();
battle.init(p1, p2);
})*/
socket.on("request:name", function(data){
if(data && data.name){
user.setName(data.name);
}
socket.emit("response:name", {name: user.getName()});
}) })
socket.on("disconnect", function() { socket.on("request:createRoom", function() {
var room = Room();
self._roomCollection.push(room);
room.join(user);
console.log("room %s created by %s", room.getID(), user.getName());
user.send("response:createRoom", room.getID());
})
socket.on("request:joinRoom", function() {
console.log("joinroom");
var interval = setInterval(function(){
self._roomCollection.forEach(function(room) {
if(room.isOpen()) {
room.join(user);
clearInterval(interval);
console.log("user %s joined room %s", user.getName(), room.getID());
user.send("response:joinRoom", room.getID());
}
});
}, 1000);
})
socket.on("request:roomData", function() {
var room = user.getRoom();
var players = room.getPlayers();
user.send("response:roomData", {players: players});
})
socket.on("disconnect", function(){
self.connections.remove(user); self.connections.remove(user);
user.disconnect();
}) })
}) });
} }
return Socket; return Socket;
})(); })();

View File

@ -14,7 +14,7 @@ var User = (function(){
this.socket = socket; this.socket = socket;
this._id = socket.id; this._id = socket.id;
this.generateName();
}; };
User.prototype = Object.create(Entity.prototype); User.prototype = Object.create(Entity.prototype);
var r = User.prototype; var r = User.prototype;
@ -25,14 +25,16 @@ var User = (function(){
*/ */
r._id = null; r._id = null;
r._name = null;
r._room = null;
r.socket = null; r.socket = null;
r.getID = function(){ r.getID = function(){
return this._id; return this._id;
} }
r.joinRoom = function(room){ r.joinRoom = function(roomid){
this.socket.join(room); this.socket.join(roomid);
} }
r.send = function(event, data, room){ r.send = function(event, data, room){
@ -46,6 +48,32 @@ var User = (function(){
} }
} }
r.generateName = function(){
var name = "Player" + (((Math.random() * 8999) + 1000) | 0);
//if(lobby.hasUser(name)) return generateName();
this._name = name;
return name;
}
r.setName = function(name) {
console.log("user name changed from %s to %s", this._name, name);
this._name = name;
}
r.getName = function() {
return this._name;
}
r.getRoom = function() {
return this._room;
}
r.setRoom = function(room) {
this._room = room;
}
r.disconnect = function() {
}
return User; return User;
})(); })();