frtk/nodePong
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

version v0.1.2

Browse Source
This commit is contained in:
frtk 2016-02-14 00:23:22 +01:00
parent 8c5ac0a6d9
commit 7dd657471d
13 changed files with 297 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/index.html
View File

@ -10,6 +10,7 @@
<script type="text/javascript" src="./jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="./jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="./lib/npg_client.js"></script> <script type="text/javascript" src="./lib/npg_client.js"></script>
<script type="text/javascript" src="./lib/socket/socketio_handler.js"></script> <script type="text/javascript" src="./lib/socket/socketio_handler.js"></script>
<script type="text/javascript" src="./lib/utils/utils.js"></script>
<script type="text/javascript" src="./lib/keyboard/event_handler.js"></script> <script type="text/javascript" src="./lib/keyboard/event_handler.js"></script>
<script type="text/javascript" src="./lib/core/page_base.js"></script> <script type="text/javascript" src="./lib/core/page_base.js"></script>
<script type="text/javascript" src="./lib/core/page_handler.js"></script> <script type="text/javascript" src="./lib/core/page_handler.js"></script>
@ -19,6 +20,8 @@
<script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script> <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
<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_input_text.js"></script>
</head> </head>
<body> <body>

8
client/lib/core/page_handler.js
View File

@ -40,8 +40,14 @@ NPGClient.PageHandler = {
var self = this; var self = this;
var p = new NPGClient.AppPage('login'); var p = new NPGClient.AppPage('login');
// Title label // Title label
p.addUIObject(new NPGClient.UILabel('login', NPGClient.LABELS.TITLE)); p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
self.pages.push(p); self.pages.push(p);
// name input
p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
// Server status
p.addUIObject(new NPGClient.UIStatusText('login_servstat', NPGClient.LOGIN.SERVSTATUS));
}, },
}; };

51
client/lib/npg_client.js
View File

@ -5,24 +5,61 @@
var NPGClient = { 'version': '' }; var NPGClient = { 'version': '' };
NPGClient.NAMEMAXSIZE = 8;
NPGClient.userName = '';
// ui // 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';
// counters // counters
NPGClient.pageCount = -1; NPGClient.pageCount = -1;
// Labels
NPGClient.LABELS = {
// Login Page
NPGClient.LOGIN = {
SERVSTATUS: {
'text': {
'online' : 'server: online',
'offline' : 'server: offline',
},
'x': 400,
'y': 450,
'style': {
'font': '15px Lucida Console',
'col': '#FFFFFF',
'align': 'center'
},
},
TITLE: { TITLE: {
'text': 'nodePong', 'text': 'nodePong',
'x': 280, 'x': 400,
'y': 150, 'y': 150,
'f': '50px Lucida Console', 'style': {
'c': '#FFFFFF' 'font': '50px Lucida Console',
} 'col': '#FFFFFF',
} 'align': 'center'
}
},
INPUT: {
'text': 'enter a name: ',
'x': 400,
'y': 300,
'style': {
'font': '25px Lucida Console',
'col': '#FFFFFF',
'align': 'center'
}
},
};

46
client/lib/ui/objects/ui_input_text.js Normal file
View File

@ -0,0 +1,46 @@
/**
* @file ui_input_text.js
* @author frtk@tetalab
*/
NPGClient.UIInputText = function(n, o) {
// obj name
this.name = n !== undefined ? n : '';
// pos
this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 0;
// text
this.text = o.text !== undefined ? o.text : '';
//
this.input = '';
// text style
this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
};
NPGClient.UIInputText.prototype = {
// Constructor
constructor: NPGClient.UIInputText,
//
updateState: function() {
var self = this;
if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
else self.currText = self.text.offline;
},
//
draw: function(ctx, state) {
var self = this;
self.updateState();
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text + self.input, self.x, self.y);
}
};

11
client/lib/ui/objects/ui_label.js
View File

@ -12,12 +12,11 @@ NPGClient.UILabel = function(n, o) {
// 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 : '';
// font // text style
this.font = o.f !== undefined ? o.f : ''; this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
// color
this.col = o.c !== undefined ? o.c : '';
}; };
@ -31,9 +30,13 @@ NPGClient.UILabel.prototype = {
draw: function(ctx) { draw: function(ctx) {
var self = this; var self = this;
//self.rect.draw(ctx); //self.rect.draw(ctx);
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text, self.x, self.y);
/*
ctx.font = self.font ctx.font = self.font
ctx.fillStyle = self.col; ctx.fillStyle = self.col;
ctx.fillText(self.text, self.x, self.y); ctx.fillText(self.text, self.x, self.y);
*/
} }
}; };

49
client/lib/ui/objects/ui_menu.js Normal file
View File

@ -0,0 +1,49 @@
/**
* @file ui_menu.js
* @author frtk@tetalab
*/
NPGClient.UIMenu = function(n, o) {
// obj name
this.name = n !== undefined ? n : '';
// type (vertical/horizontal)
this.type = o.type !== undefined ? o.type : '';
// pos
this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 0;
// item list
this.items = [];
//
};
NPGClient.UIMenu.prototype = {
// Constructor
constructor: NPGClient.UIMenu,
//
addItem: function(t) {
var self = this;
self.itemsList.push(t);
},
//
draw: function(ctx) {
var self = this;
var y = self.y
if (self.items !== undefined && self.items.length > 0) {
for (var i = 0; i < self.items.length; i++) {
ctx.font = self.items[i].font;
ctx.fillStyle = self.items[i].col;
ctx.fillText(self.text, self.x, self.y);
}
}
},
};

3
client/lib/ui/objects/ui_rect.js
View File

@ -5,6 +5,9 @@
NPGClient.UIRect = function(n, p, w, h, s) { NPGClient.UIRect = function(n, p, w, h, s) {
//
//NPGClient.UIObject.call(this, n, s);
// obj name // obj name
this.name = n !== undefined ? n : ''; this.name = n !== undefined ? n : '';
// geom // geom

46
client/lib/ui/objects/ui_status_text.js Normal file
View File

@ -0,0 +1,46 @@
/**
* @file ui_status_text.js
* @author frtk@tetalab
*/
NPGClient.UIStatusText = function(n, o) {
// obj name
this.name = n !== undefined ? n : '';
// pos
this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 0;
// text
this.text = o.text !== undefined ? o.text : '';
//
this.currText = 0;
// text style
this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
};
NPGClient.UIStatusText.prototype = {
// Constructor
constructor: NPGClient.UIStatusText,
//
updateState: function() {
var self = this;
if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
else self.currText = self.text.offline;
},
//
draw: function(ctx, state) {
var self = this;
self.updateState();
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.currText, self.x, self.y);
}
};

19
client/lib/ui/objects/ui_text_style_.js Normal file
View File

@ -0,0 +1,19 @@
/**
* @file ui_text_style.js
* @author frtk@tetalab
*/
NPGClient.UITextStyle = function(f, c, a) {
this.font = f !== undefined ? f : '';
this.color = c !== undefined ? c : '';
this.align = a !== undefined ? a : '';
};
NPGClient.UITextStyle.prototype = {
constructor: NPGClient.UITextStyle,
};

57
client/lib/utils/utils.js Normal file
View File

@ -0,0 +1,57 @@
/**
* @file utils.js
* @author frtk@tetalab
*/
NPGClient.Utils = {
/**
* UI
*/
//
setTxtStyle : function(ctx, style) {
ctx.font = style.font;
ctx.fillStyle = style.col;
ctx.textAlign = style.align;
},
/**
* User Name
*/
//
addChar : function(key, name) {
if (name.length < NPGClient.NAMEMAXSIZE) {
name = name + String.fromCharCode(key).toLowerCase();
}
},
//
removeChar : function(key) {
if (name.length > 0) {
name = name.substring(0, name.length - 1);
}
},
//
validChar : function(key) {
return NPGClient.evtHandler.loginValidKey(key);
},
//
validName : function(key) {
var len = name.length;
return (len >= 0 && len <= NPGClient.MAXNAMESIZE);
},
//
resetName : function(name) {
name = '';
},
}

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "npg_app.js", "name": "npg_app.js",
"version": "0.1.1", "version": "0.1.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",

2
server/npg_server_config.js
View File

@ -4,7 +4,7 @@
*/ */
var Config = { var Config = {
VERSION : '0.1.1', VERSION : '0.1.2',
HTTP: { HTTP: {
host: '127.0.0.1', host: '127.0.0.1',
port: 8042 port: 8042

14
version.md
View File

@ -1,4 +1,18 @@
### **v0.1.2:**
--------------------------
focus: client ui lib
--------------------------
---- added ui objects in /client/ui/objects
ui_input_text.js
ui_menu.js
ui_status_text.js
ui_text_style_.js
---- Login page
- changed convention for parameters in npg_client.js (by 'page' object)
- title label and server status working
- skeletton for login name input
### **v0.1.1:** ### **v0.1.1:**
-------------------------- --------------------------