diff --git a/client/index.html b/client/index.html
index 5ae6691..528b37d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -16,7 +16,7 @@
-
+
diff --git a/client/lib/core/page_handler.js b/client/lib/core/page_handler.js
index dfeefc1..384b3f9 100644
--- a/client/lib/core/page_handler.js
+++ b/client/lib/core/page_handler.js
@@ -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;
-*/
},
diff --git a/client/lib/keyboard/event_handler.js b/client/lib/keyboard/event_handler.js
index f265f70..331faa5 100644
--- a/client/lib/keyboard/event_handler.js
+++ b/client/lib/keyboard/event_handler.js
@@ -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();
- 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);
+ if (!NPGClient.Utils.nameEmpty()) {
+ NPGClient.Utils.removeChar();
+ 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;
}
- },
+ }
}
diff --git a/client/lib/npg_client.js b/client/lib/npg_client.js
index 7484cec..aea4c24 100644
--- a/client/lib/npg_client.js
+++ b/client/lib/npg_client.js
@@ -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,
- 'y': 283,
- },
+ 'x': 390,
+ 'y': 283,
'style': {
'fm': true,
'fc': '#FFFFFF',
diff --git a/client/lib/pages/login_page.js b/client/lib/pages/login_page.js
deleted file mode 100644
index 61bee11..0000000
--- a/client/lib/pages/login_page.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @file login_page.js
- * @author frtk@tetalab
- */
-
-NPGClient.LoginPage = {
-
- pageIdx: 0,
- page: new NPGClient.AppPage('login'),
-
-
-};
-
diff --git a/client/lib/ui/objects/ui_cursor.js b/client/lib/ui/objects/ui_cursor.js
index dcfb732..5ce5112 100644
--- a/client/lib/ui/objects/ui_cursor.js
+++ b/client/lib/ui/objects/ui_cursor.js
@@ -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 = {
-
- // 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++;
- }
- },
+// inheritance
+NPGClient.UICursor.prototype = Object.create(NPGClient.UIObject.prototype);
+// constructor
+NPGClient.UICursor.prototype.constructor = NPGClient.UICursor;
+
+// 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 {
+ 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;
+ NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
+ } else self.bCount++;
+ }
};
+
+
+
diff --git a/client/lib/ui/objects/ui_input_text.js b/client/lib/ui/objects/ui_input_text.js
index 2d49020..38fe81c 100644
--- a/client/lib/ui/objects/ui_input_text.js
+++ b/client/lib/ui/objects/ui_input_text.js
@@ -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);
}
};
diff --git a/client/lib/ui/objects/ui_line.js b/client/lib/ui/objects/ui_line.js
deleted file mode 100644
index b4e6fdd..0000000
--- a/client/lib/ui/objects/ui_line.js
+++ /dev/null
@@ -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();
-
-};
-
diff --git a/client/lib/ui/objects/ui_object.js b/client/lib/ui/objects/ui_object.js
index 1a27017..10fe199 100644
--- a/client/lib/ui/objects/ui_object.js
+++ b/client/lib/ui/objects/ui_object.js
@@ -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: NPGClient.UIObject,
- setStyle: function(s) {
- this.style = s;
- },
-
- hasBorders: function() {
- return this.style.getBorderMode();
- },
+ // Constructor
+ constructor: NPGClient.UIObject,
- hasFillStyle: function() {
- return this.style.getFillMode();
- },
-
- applyStyle: function(ctx) {
-
- var self = this;
- if (self.style.getBorderMode()) {
- ctx.lineWidth = self.style.bw;
- ctx.strokeStyle = self.style.bc;
- }
-
- if (self.style.getFillMode()) {
- ctx.fillStyle = self.style.fc;
- }
+ //set/get
+ x: function(data) {
+ var self = this;
+
+ if (data !== undefined) {
+ self._x = data;
+ } else {
+ return self._x;
}
-
-};
+ },
+
+ //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) {
+ },
+
+
+};
diff --git a/client/lib/ui/objects/ui_rect.js b/client/lib/ui/objects/ui_rect.js
index 2562533..9411f68 100644
--- a/client/lib/ui/objects/ui_rect.js
+++ b/client/lib/ui/objects/ui_rect.js
@@ -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
+NPGClient.UIRect.prototype.constructor = NPGClient.UIRect;
- // Constructor
- constructor: NPGClient.UIRect,
-
- //
- draw: function(ctx) {
- var self = this;
- if (!self.style.fm) {
- self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc);
- } else {
- self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc);
- }
- },
-
- //
- 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();
- },
-
+NPGClient.UIRect.prototype.draw = function(ctx) {
+ var self = this;
+ NPGClient.Utils.applyStyle(ctx, self.style);
+ if (!self.style.fm) {
+ NPGClient.Utils.drawRect(ctx, self.x(), self.y(), self.w, self.h);
+ } else {
+ NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
+ }
};
-
diff --git a/client/lib/ui/objects/ui_shape.js b/client/lib/ui/objects/ui_shape.js
deleted file mode 100644
index fbec9fe..0000000
--- a/client/lib/ui/objects/ui_shape.js
+++ /dev/null
@@ -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;
- }
-
-};
diff --git a/client/lib/utils/client_utils.js b/client/lib/utils/client_utils.js
index e6d7e3c..a534831 100644
--- a/client/lib/utils/client_utils.js
+++ b/client/lib/utils/client_utils.js
@@ -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,32 +94,42 @@ 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);
}
},
//
- removeChar : function(key) {
+ 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);
}
},
//
- validChar : function(key) {
+ validChar: function(key) {
return NPGClient.evtHandler.loginValidKey(key);
},
//
- 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;
},
//
- resetName : function() {
+ resetName: function() {
NPGClient.userName = '';
},
+
+ //
+ nameEmpty: function() {
+ return (NPGClient.userName.length == 0);
+ },
}
diff --git a/client/lib/utils/utils.js b/client/lib/utils/utils.js
deleted file mode 100644
index 482213a..0000000
--- a/client/lib/utils/utils.js
+++ /dev/null
@@ -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 = '';
- },
-
-
-
-
-
-}
diff --git a/package.json b/package.json
index 5991d99..cb71732 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/server/npg_server_config.js b/server/npg_server_config.js
index 582a43c..67b701b 100644
--- a/server/npg_server_config.js
+++ b/server/npg_server_config.js
@@ -4,7 +4,7 @@
*/
var Config = {
- VERSION : '0.1.3',
+ VERSION : '0.1.4',
HTTP: {
host: '127.0.0.1',
port: 8042
diff --git a/version.md b/version.md
index d337e78..3bcd80f 100644
--- a/version.md
+++ b/version.md
@@ -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:**