version 0.2.2

This commit is contained in:
frtk 2016-02-25 23:35:06 +01:00
parent 2636cf3db7
commit babb856b83
13 changed files with 290 additions and 48 deletions

View File

@ -23,6 +23,7 @@
<script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script> <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script> <script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_status_text.js"></script> <script type="text/javascript" src="./lib/ui/objects/ui_status_text.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_status_value.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_input_text.js"></script> <script type="text/javascript" src="./lib/ui/objects/ui_input_text.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_cursor.js"></script> <script type="text/javascript" src="./lib/ui/objects/ui_cursor.js"></script>
</head> </head>

View File

@ -31,6 +31,16 @@ NPGClient.AppPage.prototype = {
return self.uiElems; return self.uiElems;
}, },
//
hasUIElem: function(name) {
var self = this;
if (self.uiElems.length > 0) {
for (var i = 0; i < self.uiElems.length; i++)
if (self.uiElems[i].name == name) return true;
}
return false;
},
// //
getUIElemByName: function(name) { getUIElemByName: function(name) {

View File

@ -57,6 +57,21 @@ NPGClient.PageHandler = {
return undefined; return undefined;
}, },
//
getUIElem: function(name) {
var self = this;
var elem = [];
if (self.pages.length > 0) {
for (var i = 0; i < self.pages.length; i++) {
elem = self.pages[i].getUIElems();
for (e in elem) {
if (elem[e].name == name) return elem[e];
}
}
}
return undefined;
},
// @need rework // @need rework
getUIElemFromPage: function(elem, page) { getUIElemFromPage: function(elem, page) {
var self = this; var self = this;
@ -82,6 +97,18 @@ NPGClient.PageHandler = {
return undefined; return undefined;
}, },
//
updateServerInfos: function() {
var self = this;
// server infos
self.getUIElem('servinfo_users').update(NPGClient.SERVER.nPlayers);
self.getUIElem('servinfo_games_running').update(NPGClient.SERVER.nGamesRunning);
self.getUIElem('servinfo_games_avail').update(NPGClient.SERVER.nGamesAvail);
},
// create login page // create login page
createLoginPage: function() { createLoginPage: function() {
// //
@ -89,7 +116,8 @@ NPGClient.PageHandler = {
var self = this; var self = this;
var p = new NPGClient.AppPage(NPGClient.LOGIN.NAME); var p = new NPGClient.AppPage(NPGClient.LOGIN.NAME);
// Title label // Title label
p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE)); //p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
p.addUIObject(new NPGClient.UILabel(NPGClient.LOGIN.TITLE));
// name input // name input
p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT)); p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
// Server status // Server status
@ -108,11 +136,14 @@ NPGClient.PageHandler = {
var self = this; var self = this;
var p = new NPGClient.AppPage(NPGClient.STARTMENU.NAME); var p = new NPGClient.AppPage(NPGClient.STARTMENU.NAME);
// Title label // Title label
p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.STARTMENU.TITLE)); //p.addUIObject(new NPGClient.UILabel('startmenu_title', NPGClient.STARTMENU.TITLE));
p.addUIObject(new NPGClient.UILabel(NPGClient.STARTMENU.TITLE));
// Start Menu // Start Menu
p.addUIObject(new NPGClient.UIMenu(NPGClient.STARTMENU.MENU)); p.addUIObject(new NPGClient.UIMenu(NPGClient.STARTMENU.MENU));
// Server Players and Games status // Server Players and Games info
p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_USERS));
p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_GAMES_RUNNING));
p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_GAMES_AVAIL));
// //
self.pages.push(p); self.pages.push(p);
}, },

View File

@ -78,6 +78,7 @@ NPGClient.evtHandler = {
if (!NPGClient.Utils.nameEmpty()) { if (!NPGClient.Utils.nameEmpty()) {
NPGClient.Utils.removeChar(); NPGClient.Utils.removeChar();
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15); NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').resetBlink();
} }
break; break;
default: default:
@ -86,6 +87,7 @@ NPGClient.evtHandler = {
NPGClient.Utils.addChar(evt.keyCode); NPGClient.Utils.addChar(evt.keyCode);
newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width; newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15); NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').resetBlink();
} }
break; break;
} }

View File

@ -5,11 +5,31 @@
var NPGClient = { 'version': '' }; var NPGClient = { 'version': '' };
// LOGIN NAME
NPGClient.NAMEMAXSIZE = 8; NPGClient.NAMEMAXSIZE = 8;
NPGClient.userName = ''; NPGClient.userName = '';
// ui // SERVER INFOS
NPGClient.SERVER = {
isUp: false,
nPlayers : 0,
nGamesRunning : 0,
nGamesAvail : 0,
gamesList : [],
updateInfos: function(data) {
var self = this;
self.nPlayers = data.infos.nUsers;
self.nGamesRunning = data.infos.nGamesRunning;
self.nGamesAvail = data.infos.nGamesAvail;
self.gamesList = [];
for (g in data.games) self.gamesList(data.games[g]);
},
};
// UI
NPGClient.CAN_W = 800; NPGClient.CAN_W = 800;
NPGClient.CAN_H = 500; NPGClient.CAN_H = 500;
NPGClient.CAN_COL = '#000000'; NPGClient.CAN_COL = '#000000';
@ -51,6 +71,7 @@ NPGClient.LOGIN = {
}, },
}, },
TITLE: { TITLE: {
'name': 'login_title',
'text': 'nodePong', 'text': 'nodePong',
'x': 400, 'x': 400,
'y': 150, 'y': 150,
@ -93,6 +114,7 @@ NPGClient.LOGIN = {
NPGClient.STARTMENU = { NPGClient.STARTMENU = {
NAME: 'start_menu', NAME: 'start_menu',
TITLE: { TITLE: {
'name': 'start_menu_title',
'text': 'nodePong', 'text': 'nodePong',
'x': 400, 'x': 400,
'y': 150, 'y': 150,
@ -132,19 +154,39 @@ NPGClient.STARTMENU = {
} }
} }
}, },
SERVSTATUS: { SERVINFO_USERS: {
'text': { 'name': 'servinfo_users',
'online' : 'server: online', 'label': 'Users online:',
'offline' : 'server: offline', 'x': 70,
}, 'y': 470,
'x': 380,
'y': 250,
'style': { 'style': {
'font': '15px Arial', 'font': '15px Monospace',
'col': '#FFFFFF',
'align': 'left'
},
},
SERVINFO_GAMES_RUNNING: {
'name': 'servinfo_games_running',
'label': 'Games running:',
'x': 400,
'y': 470,
'style': {
'font': '15px Monospace',
'col': '#FFFFFF', 'col': '#FFFFFF',
'align': 'center' 'align': 'center'
}, },
}, },
SERVINFO_GAMES_AVAIL: {
'name': 'servinfo_games_avail',
'label': 'Games available:',
'x': 730,
'y': 470,
'style': {
'font': '15px Monospace',
'col': '#FFFFFF',
'align': 'right'
},
},
}; };

View File

@ -81,11 +81,17 @@ NPGClient.SocketIO = {
self.isConnected = false; self.isConnected = false;
}); });
// 'serverInfosUpdate'
self.socket.on('serverInfosUpdate', function(data) {
NPGClient.Utils.log(' > Server infos update. ' + data);
NPGClient.SERVER.updateInfos(data);
NPGClient.PageHandler.updateServerInfos();
});
// 'regDone' // 'regDone'
self.socket.on('regDone', function() { self.socket.on('regDone', function() {
NPGClient.Utils.log(' > Server: User registration done'); NPGClient.Utils.log(' > Server: User registration done');
//NPGClient.PageHandler.moveToPage(NPGClient.STARTMENU.NAME); NPGClient.PageHandler.setCurrPage(NPGClient.STARTMENU.NAME);
NPGClient.PageHandler.setCurrPage(NPGClient.STARTMENU.NAME);
}); });
// 'regNameTaken' // 'regNameTaken'

View File

@ -34,8 +34,18 @@ NPGClient.UICursor.prototype.constructor = NPGClient.UICursor;
NPGClient.UICursor.prototype.reset = function() { NPGClient.UICursor.prototype.reset = function() {
var self = this; var self = this;
self.moveTo(self.x0, self.y0); self.moveTo(self.x0, self.y0);
self.bState = true;
self.bCount = 0;
} }
// resetBlink
NPGClient.UICursor.prototype.resetBlink = function() {
var self = this;
self.bState = true;
self.bCount = 0;
}
// draw // draw
NPGClient.UICursor.prototype.draw = function(ctx) { NPGClient.UICursor.prototype.draw = function(ctx) {
var self = this; var self = this;

View File

@ -3,35 +3,39 @@
* @author frtk@tetalab * @author frtk@tetalab
*/ */
NPGClient.UILabel = function(n, o) { NPGClient.UILabel = function(o) {
//
NPGClient.UIObject.call(this, o);
// obj name // obj name
this.name = n !== undefined ? n : ''; this.name = o.name !== undefined ? o.name : '';
// bkg rect
//this.bkg = r !== undefined ? r : new NPGClient.UIRect();
// pos // pos
this.x = o.x !== undefined ? o.x : 0; this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 0; this.y = o.y !== undefined ? o.y : 0;
// text // text
this.text = o.text !== undefined ? o.text : ''; this.text = o.text !== undefined ? o.text : '';
// text style // text style
this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle(); this.s = o.style !== undefined ? o.style : '';
}; };
NPGClient.UILabel.prototype = { /**
* Inheritance
*/
NPGClient.UILabel.prototype = Object.create(NPGClient.UIObject.prototype);
// Constructor
constructor: NPGClient.UILabel,
// /**
draw: function(ctx) { * Functions
var self = this; */
NPGClient.Utils.setTxtStyle(ctx, self.s); //
ctx.fillText(self.text, self.x, self.y); NPGClient.UILabel.prototype.constructor = NPGClient.UILabel;
}
//
NPGClient.UILabel.prototype.draw = function(ctx) {
var self = this;
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text, self.x, self.y);
}; };

View File

@ -56,6 +56,7 @@ NPGClient.UIMenu.prototype.selectPrevItem = function(t) {
} }
if (self.hasCursor) { if (self.hasCursor) {
self.cursor.translateY(cShift); self.cursor.translateY(cShift);
self.cursor.resetBlink();
} }
} }
}; };
@ -76,6 +77,7 @@ NPGClient.UIMenu.prototype.selectNextItem = function(t) {
} }
if (self.hasCursor) { if (self.hasCursor) {
self.cursor.translateY(cShift); self.cursor.translateY(cShift);
self.cursor.resetBlink();
} }
} }
}; };

View File

@ -0,0 +1,52 @@
/**
* @file ui_status_value.js
* @author frtk@tetalab
*/
NPGClient.UIStatusValue = function(o) {
//
NPGClient.UIObject.call(this, o);
// obj name
this.name = o.name !== undefined ? o.name : '';
// pos
this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 0;
//
this.s = o.style !== undefined ? o.style : '';
// label
this.label = o.label !== undefined ? o.label : '';
// widget var value
this.value = 0;
};
/**
* Inheritance
*/
NPGClient.UIStatusValue.prototype = Object.create(NPGClient.UIObject.prototype);
/**
* Functions
*/
//
NPGClient.UIStatusValue.prototype.constructor = NPGClient.UIStatusValue;
//
NPGClient.UIStatusValue.prototype.update = function(v) {
var self = this;
self.value = v;
};
//
NPGClient.UIStatusValue.prototype.draw = function(ctx) {
var self = this;
NPGClient.Utils.setTxtStyle(ctx, self.s);
//
var txt = self.label + ' ' + self.value;
//
ctx.fillText(txt, self.x, self.y);
};

View File

@ -1,6 +1,6 @@
{ {
"name": "npg_app.js", "name": "npg_app.js",
"version": "0.2.1", "version": "0.2.2",
"description": "Multiplayer online Pong Game using nodejs and socket.io", "description": "Multiplayer online Pong Game using nodejs and socket.io",
"directories": { "directories": {
"server": "server", "server": "server",

View File

@ -123,13 +123,10 @@ var NPGServer = {
self.log('Server: User name already taken - reseting client UI'); self.log('Server: User name already taken - reseting client UI');
} else { } else {
self.createUser(data, socket); self.createUser(data, socket);
self.updateAllClientsServerInfos();
//
self.sendMsgToSocket(socket, 'regDone');
} }
/*
self.updateClientsServerInfo(); // update all clients info
io.sockets.sockets[socketId].emit('playerCreated'); // send socket msg
},
*/
}, },
// //
@ -139,6 +136,8 @@ var NPGServer = {
if (self.isUser(id)) { if (self.isUser(id)) {
self.log('[Client:' + id + '] User ' + u.name + ' disconnected'); self.log('[Client:' + id + '] User ' + u.name + ' disconnected');
self.deleteUser(u.name); self.deleteUser(u.name);
//
self.updateAllClientsServerInfos();
} }
}, },
@ -207,13 +206,6 @@ var NPGServer = {
self.users.push(new User(name, socket)); self.users.push(new User(name, socket));
self.log('Server: number of players: n= ' + self.users.length); self.log('Server: number of players: n= ' + self.users.length);
self.log('Server: player registered, send user ' + name + ' to menu page.'); self.log('Server: player registered, send user ' + name + ' to menu page.');
// send user auth
self.sendMsgToSocket(socket, 'regDone');
},
removeDuplicateUser: function(name) {
var self = this;
self.log('Server: player already registered, removing duplicate.');
}, },
// //
@ -229,6 +221,76 @@ var NPGServer = {
} }
}, },
/**
*
* Server Infos (players and games)
*
*/
//---
updateAllClientsServerInfos: function(socket) {
var self = this;
for (u in self.users) {
self.users[u].sendMsg('serverInfosUpdate', { infos: self.getServerInfos(), games: self.getGamesList() });
}
self.log('Server: updated server infos for all clients');
},
//---
updateClientServerInfos: function(socket) {
var self = this;
socket.emit('serverInfosUpdate', { infos: self.getServerInfos(), games: self.getGamesList() });
self.log('Server: update client server info');
},
//---
getServerInfos: function() {
var self = this;
return {
nUsers: self.nPlayers(),
nGamesRunning: self.nGamesRunning(),
nGamesAvail: self.nGamesAvail()
}
},
//---
getGamesList: function() {
var self = this;
var res = [];
for (g in self.games) {
res.push(self.games[g].getHostName());
}
return res;
},
//---
nPlayers: function() {
var self = this;
return self.users.length;
},
//---
nGamesRunning: function() {
var self = this;
var n = 0;
for (g in self.games) {
if (self.games[g].status == 'running') n++;
}
return n;
},
//---
nGamesAvail: function() {
var self = this;
var n = 0;
for (g in self.games) {
if (self.games[g].status == 'available') n++;
}
return n;
},
}; };
@ -240,13 +302,11 @@ var NPGServer = {
* *
*/ */
var User = function(name, socket) { var User = function(name, socket) {
// //
this.name = (name !== undefined) ? name : ''; this.name = (name !== undefined) ? name : '';
this.socket = (socket !== undefined) ? socket : ''; this.socket = (socket !== undefined) ? socket : '';
// //
this.status = ''; this.status = '';
}; };
// //
User.prototype.constructor = User; User.prototype.constructor = User;

View File

@ -1,4 +1,26 @@
# **v0.2.2:**
## focus: Start Menu Page
--------------------------
### client objects update
- UICursor: added resetBlink() function to reset blink on menu item change (to avoid "shadow" cursor)
- UIMenu: added cursor resetBlink() in select next/previous item function
- UILabel: added UIObject inheritance and changed param initialization
### client objects creation
- UIStatusValue: ui element to display server infos (number of users, games running and games available)
### client start menu page
- added 3 UIStatusValue elements
- all 3 elements are updated within the page_handler
### server
- added server infos update for all clients when a user register or disconnect
# **v0.2.1:** # **v0.2.1:**
## focus: Start Menu Page ## focus: Start Menu Page
-------------------------- --------------------------