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

version v0.1.3

Browse Source
This commit is contained in:
frtk 2016-02-14 04:37:31 +01:00
parent 7dd657471d
commit 45a0e86e74
18 changed files with 366 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/css/main.css
View File

@ -7,7 +7,7 @@ body {
}
#main {
margin-top: 20px;
margin-top: 10px;
background-color: rgba(0, 0, 0, 1);
margin-left: auto;
margin-right: auto;
@ -15,7 +15,7 @@ body {
#pong {
border: 1px solid rgba(255, 255, 255, 1);
margin-top: 50px;
margin-top: 5px;
}

6
client/index.html
View File

@ -10,18 +10,20 @@
<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/socket/socketio_handler.js"></script>
<script type="text/javascript" src="./lib/utils/utils.js"></script>
<script type="text/javascript" src="./lib/utils/client_utils.js"></script>
<script type="text/javascript" src="./lib/utils/js_utils.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_handler.js"></script>
<script type="text/javascript" src="./lib/ui/ui.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_object.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_shape.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_style.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_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>
<script type="text/javascript" src="./lib/ui/objects/ui_cursor.js"></script>
</head>
<body>

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

@ -22,6 +22,19 @@ NPGClient.PageHandler = {
return self.getPageByName(self.currPage).getUIElems();
},
//
getCurrPageUIElemByName: function(name) {
/*
var self = this;
if (self.pages.length > 0) {
for (var i = 0; i < self.pages.length; i++) {
if (name == self.pages[i].name) return self.pages[i];
}
}
return undefined;
*/
},
//
getPageByName: function(name) {
@ -37,17 +50,19 @@ NPGClient.PageHandler = {
// create login page
createLoginPage: function() {
//
console.log('[NPGClient] Creating Login Page');
var self = this;
var p = new NPGClient.AppPage('login');
// Title label
p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
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));
// test cursor
p.addUIObject(new NPGClient.UICursor('login_cursor', NPGClient.LOGIN.CURSOR));
//
self.pages.push(p);
},
};

81
client/lib/keyboard/event_handler.js
View File

@ -5,17 +5,6 @@
NPGClient.evtHandler = {
keysList: {
F1 : 112,
SPACE : 32,
ESC : 27,
ARROW_UP : 38,
ARROW_DOWN : 40,
ENTER : 13,
DELETE : 46,
BACKSPACE : 8,
},
keyState: {},
//
@ -23,8 +12,8 @@ NPGClient.evtHandler = {
var self = this;
//
self.keyState = {};
for (k in self.keyList) {
self.keyState[self.keysList[k]] = false;
for (k in NPGClient.KEYS) {
self.keyState[NPGClient[k]] = false;
}
//
document.addEventListener('keydown',function(e) {
@ -38,14 +27,72 @@ NPGClient.evtHandler = {
},
//
loginValidKey: function(k) {
return (key >= 48 && key <= 90);
isValidKey: function(k) {
return (k >= 48 && k <= 90);
},
//
onKeyDown : function(evt) {
//console.log(evt.keyCode);
onKeyDown: function(evt) {
var self = this;
if (evt.keyCode == NPGClient.KEYS.ESC) {
//self.playerLogout(); // player logout
} else if (evt.keyCode == NPGClient.KEYS.F1) {
//self.sendToMenuPage(); // back to previous page
} else {
switch (NPGClient.PageHandler.currPage) {
case 'login':
self.userLogin(evt);
break;
default:
break;
}
}
},
/*
*
*/
//
userLogin : function (evt) {
//
var self = this;
var oldNameWidth, newNameWidth;
var size = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width;
oldNameWidth = 2.1*size; // corr factor 2.1
switch (evt.keyCode) {
case NPGClient.KEYS.ENTER:
if (NPGClient.SocketIO.isConnected) {
if (NPGClient.userName.length != 0) {
NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
}
} else {
//self.serverExit();
}
break;
case NPGClient.KEYS.BACKSPACE:
//--- remove a character
evt.preventDefault();
NPGClient.Utils.removeChar();
newNameWidth = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width
// newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
// self.cursor.shiftX(newNameWidth - oldNameWidth);
break;
default:
//console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode));
//--- add character
if (self.isValidKey(evt.keyCode)) {
//self.cursor.stopBlink;
NPGClient.Utils.addChar(evt.keyCode);
//newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
//if (self.validName()) {
// self.cursor.shiftX(newNameWidth - oldNameWidth);
//}
//self.cursor.startBlink;
}
break;
}
},
}

43
client/lib/npg_client.js
View File

@ -15,12 +15,25 @@ NPGClient.CAN_H = 500;
NPGClient.CAN_COL = '#000000';
// counters
/**
* Keyboard events
*/
NPGClient.KEYS = {
F1 : 112,
SPACE : 32,
ESC : 27,
ARROW_UP : 38,
ARROW_DOWN : 40,
ENTER : 13,
DELETE : 46,
BACKSPACE : 8,
};
/**
* APP PAGES
*/
NPGClient.pageCount = -1;
// Login Page
NPGClient.LOGIN = {
SERVSTATUS: {
@ -48,14 +61,30 @@ NPGClient.LOGIN = {
},
INPUT: {
'text': 'enter a name: ',
'x': 400,
'x': 265,
'y': 300,
'style': {
'font': '25px Lucida Console',
'col': '#FFFFFF',
'align': 'center'
'align': 'left'
}
},
CURSOR: {
'w': 19,
'h': 19,
'pos': {
'x': 435,
'y': 283,
},
'style': {
'fm': true,
'fc': '#FFFFFF',
'bm': false,
'bw': 0,
'bc': '',
}
},
};

10
client/lib/socket/socketio_handler.js
View File

@ -17,11 +17,13 @@ NPGClient.SocketIO = {
console.log();
self.startConnectLoop();
},
// start connection loop
startConnectLoop: function() {
var self = this;
self.conn_IntervalID = setInterval(function() { self.connect(); }, 1500);
},
// stop connection loop
stopConnectLoop: function() {
var self = this;
@ -29,6 +31,7 @@ NPGClient.SocketIO = {
self.conn_IntervalID = 0;
self.conn_nAttempts = 0;
},
// connect socket
connect: function() {
var self = this;
@ -49,6 +52,7 @@ NPGClient.SocketIO = {
self.socket.socket.connect();
}
},
// Define Socket Messages
defineSocketMsgs: function() {
var self = this;
@ -72,6 +76,12 @@ NPGClient.SocketIO = {
self.startConnectLoop();
self.isConnected = false;
});
},
// send message to server
sendMsg: function(name, data) {
var self = this;
self.socket.emit(name, data);
}
};

43
client/lib/ui/objects/ui_cursor.js Normal file
View File

@ -0,0 +1,43 @@
/**
* @file ui_cursor.js
* @author frtk@tetalab
*/
NPGClient.UICursor = function(n, o) {
//
this.rect = new NPGClient.UIRect(n, o);
// obj name
this.name = n !== undefined ? n : '';
// state
this.bState = true;
this.bCount = 0;
this.bCountMax = 5;
};
NPGClient.UICursor.prototype = {
// Constructor
constructor: NPGClient.UICursor,
//
draw: function(ctx) {
var self = this;
if (self.bState) {
if (self.bCount == self.bCountMax) {
self.bCount = 0;
self.bState = false;
} else self.rect.draw(ctx);
self.bCount++;
} else {
if (self.bCount == self.bCountMax) {
self.bCount = 0;
self.bState = true;
self.rect.draw(ctx);
} else self.bCount++;
}
},
};

7
client/lib/ui/objects/ui_input_text.js
View File

@ -28,16 +28,15 @@ NPGClient.UIInputText.prototype = {
constructor: NPGClient.UIInputText,
//
updateState: function() {
updateInput: function() {
var self = this;
if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
else self.currText = self.text.offline;
self.input = NPGClient.userName;
},
//
draw: function(ctx, state) {
var self = this;
self.updateState();
self.updateInput();
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text + self.input, self.x, self.y);
}

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

@ -29,14 +29,8 @@ NPGClient.UILabel.prototype = {
//
draw: function(ctx) {
var self = this;
//self.rect.draw(ctx);
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text, self.x, self.y);
/*
ctx.font = self.font
ctx.fillStyle = self.col;
ctx.fillText(self.text, self.x, self.y);
*/
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text, self.x, self.y);
}
};

10
client/lib/ui/objects/ui_menu.js
View File

@ -35,11 +35,11 @@ NPGClient.UIMenu.prototype = {
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);
}
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);
}
}
},

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

@ -3,20 +3,18 @@
* @author frtk@tetalab
*/
NPGClient.UIRect = function(n, p, w, h, s) {
NPGClient.UIRect = function(n, o) {
//
//NPGClient.UIObject.call(this, n, s);
NPGClient.UIShape.call(this);
// obj name
this.name = n !== undefined ? n : '';
// geom
this.pos = p !== undefined ? p : new NPGClient.UIPoint2D();
this.w = w !== undefined ? w : 0;
this.h = h !== undefined ? h : 0;
this.pos = o.pos !== undefined ? o.pos : {};
this.w = o.w !== undefined ? o.w : 0;
this.h = o.h !== undefined ? o.h : 0;
// style
this.style = s !== undefined ? s : new NPGclient.UIStyle();
this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle();
};
NPGClient.UIRect.prototype = {
@ -24,23 +22,20 @@ NPGClient.UIRect.prototype = {
// Constructor
constructor: NPGClient.UIRect,
//
//
draw: function(ctx) {
var self = this;
if (!self.s.fillMode()) {
drawNoFill(ctx, self.x, self.y, self.w, self.h, self.lw, self.lc);
if (!self.style.fm) {
self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc);
} else {
drawFill(ctx, self.x, self.y, self.w, self.h, self.fc);
self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc);
}
},
//
drawFill: function(ctx) {
var self = this;
self.applyStyle(ctx);
NPGClient.Utils.applyStyle(ctx, self.style);
ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
},
@ -48,7 +43,7 @@ NPGClient.UIRect.prototype = {
drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
var self = this;
ctx.beginPath();
self.applyStyle(ctx);
NPGClient.Utils.applyStyle(ctx, self.style);
ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
ctx.stroke();
},

45
client/lib/ui/objects/ui_shape.js Normal file
View File

@ -0,0 +1,45 @@
/**
* @file ui_shape.js
* @author frtk@tetalab
*/
//
NPGClient.UIShape = function() {
this.x = 0; // x position
this.y = 0; // y position
};
/**
*
*/
NPGClient.UIShape.prototype = {
// Constructor
constructor: NPGClient.UIShape,
//
moveTo: function(x, y) {
var self = this;
self.x = x;
self.y = y;
},
//
move: function(x, y) {
var self = this;
self.x += x;
self.y += y;
},
//
shiftX: function(x) {
this.x += x;
},
//
shiftY: function(y) {
this.y += y;
}
};

28
client/lib/ui/objects/ui_style.js
View File

@ -3,20 +3,21 @@
* @author frtk@tetalab
*/
NPGClient.UIStyle = function(fm, fc, bm, bw, bc) {
this.fm = fm !== undefined ? fm : false;
this.fc = fc !== undefined ? fc : '';
this.bm = bm !== undefined ? bm : false;
this.bw = bw !== undefined ? bw : 0;
this.bc = bc !== undefined ? bc : '';
NPGClient.UIStyle = function(o) {
/*
this.fm = o.fm !== undefined ? o.fm : false;
this.fc = o.fc !== undefined ? o.fc : '';
this.bm = o.bm !== undefined ? o.bm : false;
this.bw = o.bw !== undefined ? o.bw : 0;
this.bc = o.bc !== undefined ? o.bc : '';
*/
};
NPGClient.UIStyle.prototype = {
constructor: NPGClient.UIStyle,
/*
borderMode: function() {
return this.bm;
},
@ -39,13 +40,14 @@ NPGClient.UIStyle.prototype = {
applyStyle: function(ctx) {
var self = this;
// fill style
if (fm == true) ctx.fillStyle = self.fc;
if (self.fm == true) ctx.fillStyle = self.fc;
// border mode
if (bm == true) {
ctx.lineWidth = bw;
ctx.strokeStyle = bc;
ctx.lineWidth = self.bw;
ctx.strokeStyle = self.bc;
}
}
*/
};

68
client/lib/utils/client_utils.js Normal file
View File

@ -0,0 +1,68 @@
/**
* @file client_utils.js
* @author frtk@tetalab
*/
NPGClient.Utils = {
/**
* UI
*/
//
setTxtStyle : function(ctx, style) {
ctx.font = style.font;
ctx.fillStyle = style.col;
ctx.textAlign = style.align;
},
//
applyStyle : function(ctx, style) {
//
if (style.bm) {
ctx.lineWidth = style.bw;
ctx.strokeStyle = style.bc;
}
//
if (style.fm) {
ctx.fillStyle = style.fc;
}
},
/**
* User Name
*/
//
addChar : function(key) {
//console.log(key + ' ' + NPGClient.userName);
if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase();
console.log(NPGClient.userName);
}
},
//
removeChar : function(key) {
if (NPGClient.userName.length > 0) {
NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1);
console.log(NPGClient.userName);
}
},
//
validChar : function(key) {
return NPGClient.evtHandler.loginValidKey(key);
},
//
validName : function(key) {
var len = NPGClient.userName.length;
return (len >= 0 && len <= NPGClient.NAMEMAXSIZE);
},
//
resetName : function() {
NPGClient.userName = '';
},
}

12
client/lib/utils/js_utils.js Normal file
View File

@ -0,0 +1,12 @@
/**
* @file js_utils.js
* @author frtk@tetalab
*/
function countProperties(obj) {
var count = 0;
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) count++;
}
return count;
}

2
package.json
View File

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

2
server/npg_server_config.js
View File

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

30
version.md
View File

@ -1,13 +1,35 @@
### **v0.1.3:**
--------------------------
focus: client ui lib - keyboard handling
--------------------------
---- /client/utils
- renamed utils.js -> client_utils.js
- added js_utils.js (global methods)
---- keyboard handling on login page
- input name feature (add and remove char)
---- added in /client/ui/objects
- ui_shape.js (base shape object)
- ui_cursor.js
---- removed in /client/ui/objects
- ui_line.js
- ui_object.js
---- changed UIRect object
- inherits from UIShape
---- cursor object
- blinking cursor blinks (need to implement movement with name input)
### **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
- 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