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

v0.1.4

Browse Source
This commit is contained in:
frtk 2016-02-16 00:47:28 +01:00
parent 45a0e86e74
commit 9677666b48
16 changed files with 252 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@ -16,7 +16,7 @@
<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_shape.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_object.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>

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

@ -24,15 +24,28 @@ NPGClient.PageHandler = {
//
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];
if (self.pages[i].name == self.currPage) {
return self.pages[i].getUIElemByName(name);
}
}
}
return undefined;
},
// @need rework
getUIElemFromPage: function(elem, page) {
var self = this;
if (self.pages.length > 0) {
for (var i = 0; i < self.pages.length; i++) {
if (page == self.pages[i].name) {
// return self.pages[i];
}
}
}
return undefined;
*/
},

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

@ -55,11 +55,9 @@ NPGClient.evtHandler = {
*/
//
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) {
@ -67,32 +65,27 @@ NPGClient.evtHandler = {
NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
}
} else {
//self.serverExit();
NPGClient.Utils.resetName();
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').reset();
}
break;
case NPGClient.KEYS.BACKSPACE:
//--- remove a character
evt.preventDefault();
if (!NPGClient.Utils.nameEmpty()) {
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);
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
}
break;
default:
//console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode));
//--- add character
if (self.isValidKey(evt.keyCode)) {
//self.cursor.stopBlink;
if (self.isValidKey(evt.keyCode) && !NPGClient.Utils.maxNameSize()) {
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;
newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
}
break;
}
},
}
}

14
client/lib/npg_client.js
View File

@ -44,7 +44,7 @@ NPGClient.LOGIN = {
'x': 400,
'y': 450,
'style': {
'font': '15px Lucida Console',
'font': '15px Arial',
'col': '#FFFFFF',
'align': 'center'
},
@ -54,17 +54,17 @@ NPGClient.LOGIN = {
'x': 400,
'y': 150,
'style': {
'font': '50px Lucida Console',
'font': '50px Arial',
'col': '#FFFFFF',
'align': 'center'
}
},
INPUT: {
'text': 'enter a name: ',
'x': 265,
'text': 'login: ',
'x': 285,
'y': 300,
'style': {
'font': '25px Lucida Console',
'font': '25px Monospace',
'col': '#FFFFFF',
'align': 'left'
}
@ -72,10 +72,8 @@ NPGClient.LOGIN = {
CURSOR: {
'w': 19,
'h': 19,
'pos': {
'x': 435,
'x': 390,
'y': 283,
},
'style': {
'fm': true,
'fc': '#FFFFFF',

13
client/lib/pages/login_page.js
View File

@ -1,13 +0,0 @@
/**
* @file login_page.js
* @author frtk@tetalab
*/
NPGClient.LoginPage = {
pageIdx: 0,
page: new NPGClient.AppPage('login'),
};

40
client/lib/ui/objects/ui_cursor.js
View File

@ -5,10 +5,18 @@
NPGClient.UICursor = function(n, o) {
//
this.rect = new NPGClient.UIRect(n, o);
// inheritance
NPGClient.UIObject.call(this, o);
// obj name
this.name = n !== undefined ? n : '';
this.w = o.w !== undefined ? o.w : 0;
this.h = o.h !== undefined ? o.h : 0;
// starting position
this.x0 = this.x();
this.y0 = this.y();
// style
this.style = o.style !== undefined ? o.style : {};
// state
this.bState = true;
this.bCount = 0;
@ -16,28 +24,38 @@ NPGClient.UICursor = function(n, o) {
};
NPGClient.UICursor.prototype = {
// inheritance
NPGClient.UICursor.prototype = Object.create(NPGClient.UIObject.prototype);
// Constructor
constructor: NPGClient.UICursor,
// constructor
NPGClient.UICursor.prototype.constructor = NPGClient.UICursor;
//
draw: function(ctx) {
// reset
NPGClient.UICursor.prototype.reset = function() {
var self = this;
self.moveTo(self.x0, self.y0);
}
// draw
NPGClient.UICursor.prototype.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);
} else {
NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
self.bCount++;
}
} else {
if (self.bCount == self.bCountMax) {
self.bCount = 0;
self.bState = true;
self.rect.draw(ctx);
NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
} else self.bCount++;
}
},
};

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

@ -36,9 +36,11 @@ NPGClient.UIInputText.prototype = {
//
draw: function(ctx, state) {
var self = this;
var t = self.text + self.input;
self.updateInput();
//console.log(self.s);
NPGClient.Utils.setTxtStyle(ctx, self.s);
ctx.fillText(self.text + self.input, self.x, self.y);
ctx.fillText(t, self.x, self.y);
}
};

35
client/lib/ui/objects/ui_line.js
View File

@ -1,35 +0,0 @@
/**
* @file ui_line.js
* @author frtk@tetalab
*/
NPGClient.Line = function(name, p1, p2, style) {
NPGClient.UIObject.call(this, name, style);
this.p1 = p1 !== undefined ? p1 : new NPGClient.Point2D();
this.p2 = p2 !== undefined ? p2 : new NPGClient.Point2D();
};
NPGClient.Line.prototype = Object.create(NPGClient.UIObject.prototype);
NPGClient.Line.prototype.constructor = NPGClient.Line;
NPGCLient.Line.prototype.draw = function(ctx) {
var self = this;
self.drawLine(ctx);
};
NPGClient.Line.prototype.drawLine = function(ctx) {
var self = this;
self.applyStyle(ctx);
ctx.beginPath();
ctx.moveTo(self.p1.x, self.p1.y);
ctx.lineTo(self.p2.x, self.p2.y);
ctx.stroke();
};

86
client/lib/ui/objects/ui_object.js
View File

@ -1,45 +1,77 @@
/**
* @file ui_object
* @file ui_object.js
* @author frtk@tetalab
*/
//
NPGClient.UIObject = function(name, style) {
NPGClient.UIObject = function(o) {
//Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ });
this.name = name !== undefined ? name : '';
this.style = style !== undefined ? style : new NPGClient.UIStyle();
this._x = (o.x !== undefined) ? o.x : 0; // x position
this._y = (o.y !== undefined) ? o.y : 0; // y position
this._theta = (o.theta !== undefined) ? o.theta : 0; // theta wrt horizon
};
/**
*
*/
NPGClient.UIObject.prototype = {
// Constructor
constructor: NPGClient.UIObject,
setStyle: function(s) {
this.style = s;
},
hasBorders: function() {
return this.style.getBorderMode();
},
hasFillStyle: function() {
return this.style.getFillMode();
},
applyStyle: function(ctx) {
//set/get
x: function(data) {
var self = this;
if (self.style.getBorderMode()) {
ctx.lineWidth = self.style.bw;
ctx.strokeStyle = self.style.bc;
if (data !== undefined) {
self._x = data;
} else {
return self._x;
}
if (self.style.getFillMode()) {
ctx.fillStyle = self.style.fc;
}
},
//set/get
y: function(data) {
var self = this;
if (data !== undefined) {
self._y = data;
} else {
return self._y;
}
},
//
moveTo: function(x, y) {
var self = this;
self._x = x;
self._y = y;
},
//
translateXY: function(x, y) {
var self = this;
self._x += x;
self._y += y;
},
//
translateX: function(x) {
this._x += x;
},
//
translateY: function(y) {
this._y += y;
},
//
rotate: function(x, y, t) {
},
};

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

@ -6,47 +6,27 @@
NPGClient.UIRect = function(n, o) {
//
NPGClient.UIShape.call(this);
NPGClient.UIObject.call(this, o);
// obj name
this.name = n !== undefined ? n : '';
// geom
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 = o.style !== undefined ? o.style : new NPGClient.UIStyle();
};
NPGClient.UIRect.prototype = {
// inheritance
NPGClient.UIRect.prototype = Object.create(NPGClient.UIObject.prototype);
// Constructor
constructor: NPGClient.UIRect,
NPGClient.UIRect.prototype.constructor = NPGClient.UIRect;
//
draw: function(ctx) {
NPGClient.UIRect.prototype.draw = function(ctx) {
var self = this;
NPGClient.Utils.applyStyle(ctx, self.style);
if (!self.style.fm) {
self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc);
NPGClient.Utils.drawRect(ctx, self.x(), self.y(), self.w, self.h);
} else {
self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc);
NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
}
},
//
drawFill: function(ctx) {
var self = this;
NPGClient.Utils.applyStyle(ctx, self.style);
ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
},
//
drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
var self = this;
ctx.beginPath();
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
View File

@ -1,45 +0,0 @@
/**
* @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;
}
};

77
client/lib/utils/client_utils.js
View File

@ -6,7 +6,64 @@
NPGClient.Utils = {
/**
* UI
* UI draw
*/
//
drawText: function(ctx, x1, y1, t, s, c) {
ctx.font = s;
ctx.fillStyle = c;
ctx.fillText(t, x1, y1);
},
//
drawFillRect: function(ctx, x1, y1, w, h) {
ctx.fillRect(x1, y1, w, h);
},
//
drawRect: function(ctx, x1, y1, w, h) {
ctx.beginPath();
ctx.rect(x1, y1, w, h);
ctx.stroke();
},
//
drawLine: function(ctx, x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
},
//
drawSemiCircle: function(ctx, x, y, r, a1, a2, o, w, c) {
ctx.lineWidth = w;
ctx.strokeStyle = c;
ctx.beginPath();
ctx.arc(x, y, r, a1, a2, o);
ctx.closePath();
ctx.stroke();
},
drawFillCircle: function(ctx, x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
},
//
drawCircle: function(ctx, x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, false);
ctx.closePath();
ctx.stroke();
},
/**
* UI Style
*/
//
setTxtStyle : function(ctx, style) {
@ -37,7 +94,7 @@ NPGClient.Utils = {
//console.log(key + ' ' + NPGClient.userName);
if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase();
console.log(NPGClient.userName);
//console.log(NPGClient.userName);
}
},
@ -45,7 +102,7 @@ NPGClient.Utils = {
removeChar: function(key) {
if (NPGClient.userName.length > 0) {
NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1);
console.log(NPGClient.userName);
//console.log(NPGClient.userName);
}
},
@ -55,9 +112,14 @@ NPGClient.Utils = {
},
//
validName : function(key) {
validName: function() {
var len = NPGClient.userName.length;
return (len >= 0 && len <= NPGClient.NAMEMAXSIZE);
return (len >= 3 && len <= NPGClient.NAMEMAXSIZE);
},
//
maxNameSize: function() {
return NPGClient.userName.length == NPGClient.NAMEMAXSIZE;
},
//
@ -65,4 +127,9 @@ NPGClient.Utils = {
NPGClient.userName = '';
},
//
nameEmpty: function() {
return (NPGClient.userName.length == 0);
},
}

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

@ -1,57 +0,0 @@
/**
* @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",
"version": "0.1.3",
"version": "0.1.4",
"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.3',
VERSION : '0.1.4',
HTTP: {
host: '127.0.0.1',
port: 8042

16
version.md
View File

@ -1,3 +1,19 @@
### **v0.1.4:**
--------------------------
focus: client ui lib
--------------------------
---- changed font (Lucida -> Arial)
- npg_client.js
---- added in /ui/objects/
- ui_object.js (base object)
---- updated objects in
- ui_rect.js (inherits from UIObject)
- ui_cursor.js (inherits from UIObject)
---- /keyboard/evt_handler.js
- userLogin()
---- cursor object
- fixed behaviour on login page - working fine now
- reset position at login attempt when server is down
### **v0.1.3:**