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

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_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>
<script type="text/javascript" src="./lib/ui/ui.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_style.js"></script>
<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>

View File

@ -24,15 +24,28 @@ NPGClient.PageHandler = {
// //
getCurrPageUIElemByName: function(name) { getCurrPageUIElemByName: function(name) {
/*
var self = this; var self = this;
if (self.pages.length > 0) { if (self.pages.length > 0) {
for (var i = 0; i < self.pages.length; i++) { 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; return undefined;
*/
}, },

View File

@ -55,11 +55,9 @@ NPGClient.evtHandler = {
*/ */
// //
userLogin : function (evt) { userLogin : function (evt) {
//
var self = this; 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) { switch (evt.keyCode) {
case NPGClient.KEYS.ENTER: case NPGClient.KEYS.ENTER:
if (NPGClient.SocketIO.isConnected) { if (NPGClient.SocketIO.isConnected) {
@ -67,32 +65,27 @@ NPGClient.evtHandler = {
NPGClient.SocketIO.sendMsg('registration', NPGClient.userName); NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
} }
} else { } else {
//self.serverExit(); NPGClient.Utils.resetName();
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').reset();
} }
break; break;
case NPGClient.KEYS.BACKSPACE: case NPGClient.KEYS.BACKSPACE:
//--- remove a character //--- remove a character
evt.preventDefault(); evt.preventDefault();
if (!NPGClient.Utils.nameEmpty()) {
NPGClient.Utils.removeChar(); NPGClient.Utils.removeChar();
newNameWidth = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
}
// newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
// self.cursor.shiftX(newNameWidth - oldNameWidth);
break; break;
default: default:
//console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode));
//--- add character //--- add character
if (self.isValidKey(evt.keyCode)) { if (self.isValidKey(evt.keyCode) && !NPGClient.Utils.maxNameSize()) {
//self.cursor.stopBlink;
NPGClient.Utils.addChar(evt.keyCode); NPGClient.Utils.addChar(evt.keyCode);
//newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1 newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
//if (self.validName()) { NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
// self.cursor.shiftX(newNameWidth - oldNameWidth);
//}
//self.cursor.startBlink;
} }
break; break;
} }
}, }
} }

View File

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

View File

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

View File

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

View File

@ -36,9 +36,11 @@ NPGClient.UIInputText.prototype = {
// //
draw: function(ctx, state) { draw: function(ctx, state) {
var self = this; var self = this;
var t = self.text + self.input;
self.updateInput(); self.updateInput();
//console.log(self.s);
NPGClient.Utils.setTxtStyle(ctx, 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);
} }
}; };

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();
};

View File

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

View File

@ -6,47 +6,27 @@
NPGClient.UIRect = function(n, o) { NPGClient.UIRect = function(n, o) {
// //
NPGClient.UIShape.call(this); NPGClient.UIObject.call(this, o);
// obj name // obj name
this.name = n !== undefined ? n : ''; this.name = n !== undefined ? n : '';
// geom
this.pos = o.pos !== undefined ? o.pos : {};
this.w = o.w !== undefined ? o.w : 0; this.w = o.w !== undefined ? o.w : 0;
this.h = o.h !== undefined ? o.h : 0; this.h = o.h !== undefined ? o.h : 0;
// style // style
this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle(); this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle();
}; };
NPGClient.UIRect.prototype = { // inheritance
NPGClient.UIRect.prototype = Object.create(NPGClient.UIObject.prototype);
// Constructor // Constructor
constructor: NPGClient.UIRect, NPGClient.UIRect.prototype.constructor = NPGClient.UIRect;
// NPGClient.UIRect.prototype.draw = function(ctx) {
draw: function(ctx) {
var self = this; var self = this;
NPGClient.Utils.applyStyle(ctx, self.style);
if (!self.style.fm) { 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 { } 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();
},
}; };

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;
}
};

View File

@ -6,7 +6,64 @@
NPGClient.Utils = { 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) { setTxtStyle : function(ctx, style) {
@ -37,7 +94,7 @@ NPGClient.Utils = {
//console.log(key + ' ' + NPGClient.userName); //console.log(key + ' ' + NPGClient.userName);
if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) { if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase(); 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) { removeChar: function(key) {
if (NPGClient.userName.length > 0) { if (NPGClient.userName.length > 0) {
NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1); 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; 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 = ''; NPGClient.userName = '';
}, },
//
nameEmpty: function() {
return (NPGClient.userName.length == 0);
},
} }

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 = '';
},
}

View File

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

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

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:** ### **v0.1.3:**