From 9677666b486f18fc87830b33a5c661731ce6a619 Mon Sep 17 00:00:00 2001 From: frtk Date: Tue, 16 Feb 2016 00:47:28 +0100 Subject: [PATCH] v0.1.4 --- client/index.html | 2 +- client/lib/core/page_handler.js | 19 ++++- client/lib/keyboard/event_handler.js | 31 ++++----- client/lib/npg_client.js | 16 ++--- client/lib/pages/login_page.js | 13 ---- client/lib/ui/objects/ui_cursor.js | 66 +++++++++++------- client/lib/ui/objects/ui_input_text.js | 4 +- client/lib/ui/objects/ui_line.js | 35 ---------- client/lib/ui/objects/ui_object.js | 96 +++++++++++++++++--------- client/lib/ui/objects/ui_rect.js | 48 ++++--------- client/lib/ui/objects/ui_shape.js | 45 ------------ client/lib/utils/client_utils.js | 83 +++++++++++++++++++--- client/lib/utils/utils.js | 57 --------------- package.json | 2 +- server/npg_server_config.js | 2 +- version.md | 16 +++++ 16 files changed, 252 insertions(+), 283 deletions(-) delete mode 100644 client/lib/pages/login_page.js delete mode 100644 client/lib/ui/objects/ui_line.js delete mode 100644 client/lib/ui/objects/ui_shape.js delete mode 100644 client/lib/utils/utils.js 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:**