diff --git a/client/index.html b/client/index.html
index 5a0460d..0791874 100644
--- a/client/index.html
+++ b/client/index.html
@@ -10,6 +10,7 @@
+
@@ -19,6 +20,8 @@
+
+
diff --git a/client/lib/core/page_handler.js b/client/lib/core/page_handler.js
index fc48d1f..b54ba28 100644
--- a/client/lib/core/page_handler.js
+++ b/client/lib/core/page_handler.js
@@ -40,8 +40,14 @@ NPGClient.PageHandler = {
var self = this;
var p = new NPGClient.AppPage('login');
// 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);
+ // name input
+ p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
+ // Server status
+ p.addUIObject(new NPGClient.UIStatusText('login_servstat', NPGClient.LOGIN.SERVSTATUS));
+
+
},
};
diff --git a/client/lib/npg_client.js b/client/lib/npg_client.js
index 838ea15..b9066a1 100644
--- a/client/lib/npg_client.js
+++ b/client/lib/npg_client.js
@@ -5,24 +5,61 @@
var NPGClient = { 'version': '' };
+NPGClient.NAMEMAXSIZE = 8;
+NPGClient.userName = '';
+
+
// ui
NPGClient.CAN_W = 800;
NPGClient.CAN_H = 500;
NPGClient.CAN_COL = '#000000';
+
// counters
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: {
'text': 'nodePong',
- 'x': 280,
+ 'x': 400,
'y': 150,
- 'f': '50px Lucida Console',
- 'c': '#FFFFFF'
- }
-}
+ 'style': {
+ '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'
+ }
+ },
+
+};
+
+
diff --git a/client/lib/ui/objects/ui_input_text.js b/client/lib/ui/objects/ui_input_text.js
new file mode 100644
index 0000000..91b312a
--- /dev/null
+++ b/client/lib/ui/objects/ui_input_text.js
@@ -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);
+ }
+
+};
+
diff --git a/client/lib/ui/objects/ui_label.js b/client/lib/ui/objects/ui_label.js
index 098fb87..ae94949 100644
--- a/client/lib/ui/objects/ui_label.js
+++ b/client/lib/ui/objects/ui_label.js
@@ -12,12 +12,11 @@ NPGClient.UILabel = function(n, o) {
// 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 : '';
- // font
- this.font = o.f !== undefined ? o.f : '';
- // color
- this.col = o.c !== undefined ? o.c : '';
+ // text style
+ this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
};
@@ -31,9 +30,13 @@ 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);
+*/
}
};
diff --git a/client/lib/ui/objects/ui_menu.js b/client/lib/ui/objects/ui_menu.js
new file mode 100644
index 0000000..9172db0
--- /dev/null
+++ b/client/lib/ui/objects/ui_menu.js
@@ -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);
+ }
+ }
+ },
+
+
+
+};
+
diff --git a/client/lib/ui/objects/ui_rect.js b/client/lib/ui/objects/ui_rect.js
index 75921f7..b2e8c32 100644
--- a/client/lib/ui/objects/ui_rect.js
+++ b/client/lib/ui/objects/ui_rect.js
@@ -5,6 +5,9 @@
NPGClient.UIRect = function(n, p, w, h, s) {
+ //
+ //NPGClient.UIObject.call(this, n, s);
+
// obj name
this.name = n !== undefined ? n : '';
// geom
diff --git a/client/lib/ui/objects/ui_status_text.js b/client/lib/ui/objects/ui_status_text.js
new file mode 100644
index 0000000..4d3f2db
--- /dev/null
+++ b/client/lib/ui/objects/ui_status_text.js
@@ -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);
+ }
+
+};
+
diff --git a/client/lib/ui/objects/ui_text_style_.js b/client/lib/ui/objects/ui_text_style_.js
new file mode 100644
index 0000000..c24d4e3
--- /dev/null
+++ b/client/lib/ui/objects/ui_text_style_.js
@@ -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,
+
+};
+
diff --git a/client/lib/utils/utils.js b/client/lib/utils/utils.js
new file mode 100644
index 0000000..482213a
--- /dev/null
+++ b/client/lib/utils/utils.js
@@ -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 = '';
+ },
+
+
+
+
+
+}
diff --git a/package.json b/package.json
index c260e2f..a5aa7a5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "npg_app.js",
- "version": "0.1.1",
+ "version": "0.1.2",
"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 b2ccca7..974f33b 100644
--- a/server/npg_server_config.js
+++ b/server/npg_server_config.js
@@ -4,7 +4,7 @@
*/
var Config = {
- VERSION : '0.1.1',
+ VERSION : '0.1.2',
HTTP: {
host: '127.0.0.1',
port: 8042
diff --git a/version.md b/version.md
index 43f4e1b..e4b9375 100644
--- a/version.md
+++ b/version.md
@@ -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:**
--------------------------