diff --git a/client/index.html b/client/index.html
index 092396a..5a0460d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -12,7 +12,13 @@
-
+
+
+
+
+
+
+
@@ -26,10 +32,10 @@
diff --git a/client/lib/core/page_base.js b/client/lib/core/page_base.js
index 705be25..d1953d2 100644
--- a/client/lib/core/page_base.js
+++ b/client/lib/core/page_base.js
@@ -8,14 +8,7 @@ NPGClient.AppPage = function(n) {
Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ });
this.name = n || '';
- // draw loop paramaters
- this.loopIntervalId = 0;
- this.loopDelay = 40;
- // canvas
- this.canvas_id = "";
- this.canvas_bcol = "";
- this.canvas = {};
- this.ctx = {};
+ this.idx = NPGClient.pageCount;
// ui elements
this.uiElems = [];
@@ -26,49 +19,19 @@ NPGClient.AppPage.prototype = {
constructor: NPGClient.AppPage,
- //
- setLoopDelay: function(d) {
- this.loopDelay = d;
- },
-
- //
- startDrawLoop: function() {
- var self = this;
- self.loopIntervalId = setInterval(function() {
- self.run();
- }, self.loopDelay);
- },
-
- //
- stopDrawLoop: function() {
- var self = this;
- clearInterval(self.loopIntervalId);
- self.loopIntervalId = 0;
- },
-
- //
- run: function() {
- var self = this;
- self.drawUI();
- },
-
- //
- configUI: function(id, w, h, c) {
- var self = this;
- self.canvas_id = id;
- self.canvas = document.getElementById(id);
- self.ctx = self.canvas.getContext("2d");
- self.canvas.width = w;
- self.canvas.height = h;
- self.canvas_bcol = c;
- },
-
//
addUIObject: function(c) {
var self = this;
self.uiElems.push(c);
},
+ //
+ getUIElems: function() {
+ var self = this;
+ return self.uiElems;
+ },
+
+
//
getUIElemByName: function(name) {
var self = this;
@@ -79,36 +42,12 @@ NPGClient.AppPage.prototype = {
return undefined;
},
- //
- drawUI: function() {
+ //
+ printInfo: function() {
var self = this;
- self.clear();
- self.drawUIBackground();
- self.drawUIObjects();
- },
+ console.log('[NPGClient.AppPage] name:' + self.name + ', nUIElems=' + self.pages.length);
- //
- drawUIBackground: function() {
- var self = this;
- self.ctx.fillStyle = self.canvas_bcol;
- self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
- },
-
- //
- drawUIObjects: function() {
- var self = this;
- if (self.uiElems.length > 0) {
- for (var i = 0; i < self.uiElems.length; i++)
- self.uiElems[i].draw(self.ctx);
- }
- },
+ }
- //
- clear: function() {
- var self = this;
- self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
- },
-
-
};
diff --git a/client/lib/core/page_handler.js b/client/lib/core/page_handler.js
new file mode 100644
index 0000000..fc48d1f
--- /dev/null
+++ b/client/lib/core/page_handler.js
@@ -0,0 +1,48 @@
+/**
+ * @file page_handler.js
+ * @author frtk@tetalab
+ */
+
+NPGClient.PageHandler = {
+
+ currPage: '',
+ pages: [],
+
+ //
+ setup: function() {
+ var self = this;
+ self.currPage = 'login';
+ // create login page
+ self.createLoginPage();
+ },
+
+ //
+ getCurrPageUIElems: function() {
+ var self = this;
+ return self.getPageByName(self.currPage).getUIElems();
+ },
+
+
+ //
+ getPageByName: 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;
+ },
+
+ // create login page
+ createLoginPage: function() {
+ //
+ var self = this;
+ var p = new NPGClient.AppPage('login');
+ // Title label
+ p.addUIObject(new NPGClient.UILabel('login', NPGClient.LABELS.TITLE));
+ self.pages.push(p);
+ },
+
+};
+
diff --git a/client/lib/keyboard/event_handler.js b/client/lib/keyboard/event_handler.js
index 917d45b..fd39168 100644
--- a/client/lib/keyboard/event_handler.js
+++ b/client/lib/keyboard/event_handler.js
@@ -44,7 +44,7 @@ NPGClient.evtHandler = {
//
onKeyDown : function(evt) {
- console.log(evt.keyCode);
+ //console.log(evt.keyCode);
},
diff --git a/client/lib/npg_client.js b/client/lib/npg_client.js
index 6649891..838ea15 100644
--- a/client/lib/npg_client.js
+++ b/client/lib/npg_client.js
@@ -5,4 +5,24 @@
var NPGClient = { 'version': '' };
+// ui
+NPGClient.CAN_W = 800;
+NPGClient.CAN_H = 500;
+NPGClient.CAN_COL = '#000000';
+
+// counters
+NPGClient.pageCount = -1;
+
+// Labels
+NPGClient.LABELS = {
+ TITLE: {
+ 'text': 'nodePong',
+ 'x': 280,
+ 'y': 150,
+ 'f': '50px Lucida Console',
+ 'c': '#FFFFFF'
+ }
+}
+
+
diff --git a/client/lib/ui/objects/ui_label.js b/client/lib/ui/objects/ui_label.js
new file mode 100644
index 0000000..098fb87
--- /dev/null
+++ b/client/lib/ui/objects/ui_label.js
@@ -0,0 +1,40 @@
+/**
+ * @file ui_label.js
+ * @author frtk@tetalab
+ */
+
+NPGClient.UILabel = function(n, o) {
+
+ // obj name
+ this.name = n !== undefined ? n : '';
+ // bkg rect
+ //this.bkg = r !== undefined ? r : new NPGClient.UIRect();
+ // 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 : '';
+
+};
+
+
+NPGClient.UILabel.prototype = {
+
+ // Constructor
+ constructor: NPGClient.UILabel,
+
+ //
+ draw: function(ctx) {
+ var self = this;
+ //self.rect.draw(ctx);
+ ctx.font = self.font
+ ctx.fillStyle = self.col;
+ ctx.fillText(self.text, self.x, self.y);
+ }
+
+};
+
diff --git a/client/lib/ui/objects/ui_line.js b/client/lib/ui/objects/ui_line.js
new file mode 100644
index 0000000..b4e6fdd
--- /dev/null
+++ b/client/lib/ui/objects/ui_line.js
@@ -0,0 +1,35 @@
+/**
+ * @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
new file mode 100644
index 0000000..1a27017
--- /dev/null
+++ b/client/lib/ui/objects/ui_object.js
@@ -0,0 +1,45 @@
+/**
+ * @file ui_object
+ * @author frtk@tetalab
+ */
+
+NPGClient.UIObject = function(name, style) {
+
+ //Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ });
+
+ this.name = name !== undefined ? name : '';
+ this.style = style !== undefined ? style : new NPGClient.UIStyle();
+
+};
+
+NPGClient.UIObject.prototype = {
+
+ constructor: NPGClient.UIObject,
+
+ setStyle: function(s) {
+ this.style = s;
+ },
+
+ hasBorders: function() {
+ return this.style.getBorderMode();
+ },
+
+ 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;
+ }
+ }
+
+};
+
diff --git a/client/lib/ui/objects/ui_point2d.js b/client/lib/ui/objects/ui_point2d.js
new file mode 100644
index 0000000..63c67e9
--- /dev/null
+++ b/client/lib/ui/objects/ui_point2d.js
@@ -0,0 +1,37 @@
+/**
+ * @file ui_point2d.js
+ * @author frtk@tetalab
+ */
+
+NPGClient.UIPoint2D = function(x, y) {
+
+ // (x,y) position
+ this.x = x !== undefined ? x : 0;
+ this.y = y !== undefined ? y : 0;
+
+};
+
+NPGClient.UIPoint2D.prototype = {
+
+ // Constructor
+ constructor: NPGClient.UIPoint2D,
+
+ //
+ set: function(x, y) {
+ this.x = x;
+ this.y = y;
+ },
+
+ //
+ setX: function(x) {
+ this.x = x;
+ },
+
+ //
+ setY: function(y) {
+ this.y = y;
+ }
+
+
+};
+
diff --git a/client/lib/ui/objects/ui_rect.js b/client/lib/ui/objects/ui_rect.js
new file mode 100644
index 0000000..75921f7
--- /dev/null
+++ b/client/lib/ui/objects/ui_rect.js
@@ -0,0 +1,54 @@
+/**
+ * @file ui_rect.js
+ * @author frtk@tetalab
+ */
+
+NPGClient.UIRect = function(n, p, w, h, s) {
+
+ // 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;
+ // style
+ this.style = s !== undefined ? s : new NPGclient.UIStyle();
+
+};
+
+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);
+ } else {
+ drawFill(ctx, self.x, self.y, self.w, self.h, self.fc);
+ }
+ },
+
+ //
+ drawFill: function(ctx) {
+ var self = this;
+ self.applyStyle(ctx);
+ 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();
+ self.applyStyle(ctx);
+ ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
+ ctx.stroke();
+ },
+
+};
+
diff --git a/client/lib/ui/objects/ui_style.js b/client/lib/ui/objects/ui_style.js
new file mode 100644
index 0000000..0b2cb74
--- /dev/null
+++ b/client/lib/ui/objects/ui_style.js
@@ -0,0 +1,51 @@
+/**
+ * @file ui_style.js
+ * @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.prototype = {
+
+ constructor: NPGClient.UIStyle,
+
+ borderMode: function() {
+ return this.bm;
+ },
+
+ fillMode: function() {
+ return this.fm;
+ },
+
+ setBorders: function(m, w, c) {
+ this.bm = m;
+ this.bw = w;
+ this.bc = c;
+ },
+
+ setFillStyle: function(m, c) {
+ this.fm = m;
+ this.fc = c;
+ },
+
+ applyStyle: function(ctx) {
+ var self = this;
+ // fill style
+ if (fm == true) ctx.fillStyle = self.fc;
+ // border mode
+ if (bm == true) {
+ ctx.lineWidth = bw;
+ ctx.strokeStyle = bc;
+ }
+ }
+
+};
+
diff --git a/client/lib/ui/ui.js b/client/lib/ui/ui.js
new file mode 100644
index 0000000..e509c9c
--- /dev/null
+++ b/client/lib/ui/ui.js
@@ -0,0 +1,101 @@
+/**
+ * @file ui.js
+ * @author frtk@tetalab
+ */
+
+NPGClient.ui = {
+
+ // canvas
+ canvas_id: '',
+ canvas_bcol: '',
+ canvas: {},
+ ctx: {},
+
+ // draw loop paramaters
+ loopIntervalId: 0,
+ loopDelay: 40,
+
+
+ /*
+ * init
+ */
+ //
+ setupUI: function(id, w, h, c) {
+ var self = this;
+ self.canvas_id = id;
+ self.canvas = document.getElementById(id);
+ self.ctx = self.canvas.getContext("2d");
+ self.canvas.width = w;
+ self.canvas.height = h;
+ self.canvas_bcol = c;
+ // start draw loop
+ self.startDrawLoop();
+ },
+
+
+ /*
+ * Draw loop
+ */
+ //
+ setLoopDelay: function(d) {
+ this.loopDelay = d;
+ },
+
+ //
+ startDrawLoop: function() {
+ var self = this;
+ self.loopIntervalId = setInterval(function() {
+ self.run();
+ }, self.loopDelay);
+ },
+
+ //
+ stopDrawLoop: function() {
+ var self = this;
+ clearInterval(self.loopIntervalId);
+ self.loopIntervalId = 0;
+ },
+
+ //
+ run: function() {
+ var self = this;
+ self.drawPage();
+ },
+
+
+ /*
+ * Draw functions
+ */
+ //
+ drawPage: function() {
+ var self = this;
+ self.clear();
+ self.drawUIBackground();
+ self.drawUIObjects();
+ },
+
+ //
+ drawUIBackground: function() {
+ var self = this;
+ self.ctx.fillStyle = self.canvas_bcol;
+ self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
+ },
+
+ //
+ drawUIObjects: function() {
+ var self = this;
+ var elems = NPGClient.PageHandler.getCurrPageUIElems();
+ if (elems !== undefined && elems.length > 0) {
+ for (var i = 0; i < elems.length; i++) elems[i].draw(self.ctx);
+ }
+ },
+
+ //
+ clear: function() {
+ var self = this;
+ self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
+ },
+
+
+};
+
diff --git a/package.json b/package.json
index 652fc71..c260e2f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "npg_app.js",
- "version": "0.1.0",
+ "version": "0.1.1",
"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 f9070ef..b2ccca7 100644
--- a/server/npg_server_config.js
+++ b/server/npg_server_config.js
@@ -4,7 +4,7 @@
*/
var Config = {
- VERSION : '0.1.0',
+ VERSION : '0.1.1',
HTTP: {
host: '127.0.0.1',
port: 8042
diff --git a/version.md b/version.md
index faaaaf8..43f4e1b 100644
--- a/version.md
+++ b/version.md
@@ -1,5 +1,25 @@
+### **v0.1.1:**
+--------------------------
+focus: client ui lib
+--------------------------
+---- added app page handling in client/core
+- page_base.js
+- page_handler.js
+---- added ui handling in /client/ui
+- ui.js
+---- added ui objects in /client/ui/objects
+- ui_label.js
+- ui_line.js
+- ui_object.js
+- ui_point2d.js
+- ui_rect.js
+- ui_style.js
+---- login page
+- created login page with title
+
+
### **v0.1.0:**
--------------------------
focus: app