From 45a0e86e746eff801150aca7bb0975474c7941e7 Mon Sep 17 00:00:00 2001 From: frtk Date: Sun, 14 Feb 2016 04:37:31 +0100 Subject: [PATCH] version v0.1.3 --- client/css/main.css | 4 +- client/index.html | 6 +- client/lib/core/page_handler.js | 21 ++++++- client/lib/keyboard/event_handler.js | 81 ++++++++++++++++++++------ client/lib/npg_client.js | 43 +++++++++++--- client/lib/socket/socketio_handler.js | 10 ++++ client/lib/ui/objects/ui_cursor.js | 43 ++++++++++++++ client/lib/ui/objects/ui_input_text.js | 7 +-- client/lib/ui/objects/ui_label.js | 10 +--- client/lib/ui/objects/ui_menu.js | 10 ++-- client/lib/ui/objects/ui_rect.js | 27 ++++----- client/lib/ui/objects/ui_shape.js | 45 ++++++++++++++ client/lib/ui/objects/ui_style.js | 28 ++++----- client/lib/utils/client_utils.js | 68 +++++++++++++++++++++ client/lib/utils/js_utils.js | 12 ++++ package.json | 2 +- server/npg_server_config.js | 2 +- version.md | 30 ++++++++-- 18 files changed, 366 insertions(+), 83 deletions(-) create mode 100644 client/lib/ui/objects/ui_cursor.js create mode 100644 client/lib/ui/objects/ui_shape.js create mode 100644 client/lib/utils/client_utils.js create mode 100644 client/lib/utils/js_utils.js diff --git a/client/css/main.css b/client/css/main.css index e4cd332..ddcbda9 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -7,7 +7,7 @@ body { } #main { - margin-top: 20px; + margin-top: 10px; background-color: rgba(0, 0, 0, 1); margin-left: auto; margin-right: auto; @@ -15,7 +15,7 @@ body { #pong { border: 1px solid rgba(255, 255, 255, 1); - margin-top: 50px; + margin-top: 5px; } diff --git a/client/index.html b/client/index.html index 0791874..5ae6691 100644 --- a/client/index.html +++ b/client/index.html @@ -10,18 +10,20 @@ - + + - + + diff --git a/client/lib/core/page_handler.js b/client/lib/core/page_handler.js index b54ba28..dfeefc1 100644 --- a/client/lib/core/page_handler.js +++ b/client/lib/core/page_handler.js @@ -22,6 +22,19 @@ NPGClient.PageHandler = { return self.getPageByName(self.currPage).getUIElems(); }, + // + 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]; + } + } + return undefined; +*/ + }, + // getPageByName: function(name) { @@ -37,17 +50,19 @@ NPGClient.PageHandler = { // create login page createLoginPage: function() { // + console.log('[NPGClient] Creating Login Page'); var self = this; var p = new NPGClient.AppPage('login'); // Title label 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)); - - + // test cursor + p.addUIObject(new NPGClient.UICursor('login_cursor', NPGClient.LOGIN.CURSOR)); + // + self.pages.push(p); }, }; diff --git a/client/lib/keyboard/event_handler.js b/client/lib/keyboard/event_handler.js index fd39168..f265f70 100644 --- a/client/lib/keyboard/event_handler.js +++ b/client/lib/keyboard/event_handler.js @@ -5,17 +5,6 @@ NPGClient.evtHandler = { - keysList: { - F1 : 112, - SPACE : 32, - ESC : 27, - ARROW_UP : 38, - ARROW_DOWN : 40, - ENTER : 13, - DELETE : 46, - BACKSPACE : 8, - }, - keyState: {}, // @@ -23,8 +12,8 @@ NPGClient.evtHandler = { var self = this; // self.keyState = {}; - for (k in self.keyList) { - self.keyState[self.keysList[k]] = false; + for (k in NPGClient.KEYS) { + self.keyState[NPGClient[k]] = false; } // document.addEventListener('keydown',function(e) { @@ -38,14 +27,72 @@ NPGClient.evtHandler = { }, // - loginValidKey: function(k) { - return (key >= 48 && key <= 90); + isValidKey: function(k) { + return (k >= 48 && k <= 90); }, // - onKeyDown : function(evt) { - //console.log(evt.keyCode); + onKeyDown: function(evt) { + var self = this; + if (evt.keyCode == NPGClient.KEYS.ESC) { + //self.playerLogout(); // player logout + } else if (evt.keyCode == NPGClient.KEYS.F1) { + //self.sendToMenuPage(); // back to previous page + } else { + switch (NPGClient.PageHandler.currPage) { + case 'login': + self.userLogin(evt); + break; + default: + break; + } + } }, + /* + * + */ + // + 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) { + if (NPGClient.userName.length != 0) { + NPGClient.SocketIO.sendMsg('registration', NPGClient.userName); + } + } else { + //self.serverExit(); + } + 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); + break; + default: + //console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode)); + //--- add character + if (self.isValidKey(evt.keyCode)) { + //self.cursor.stopBlink; + 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; + } + break; + } + }, + } diff --git a/client/lib/npg_client.js b/client/lib/npg_client.js index b9066a1..7484cec 100644 --- a/client/lib/npg_client.js +++ b/client/lib/npg_client.js @@ -15,12 +15,25 @@ NPGClient.CAN_H = 500; NPGClient.CAN_COL = '#000000'; -// counters +/** + * Keyboard events + */ +NPGClient.KEYS = { + F1 : 112, + SPACE : 32, + ESC : 27, + ARROW_UP : 38, + ARROW_DOWN : 40, + ENTER : 13, + DELETE : 46, + BACKSPACE : 8, +}; + + +/** + * APP PAGES + */ NPGClient.pageCount = -1; - - - - // Login Page NPGClient.LOGIN = { SERVSTATUS: { @@ -48,14 +61,30 @@ NPGClient.LOGIN = { }, INPUT: { 'text': 'enter a name: ', - 'x': 400, + 'x': 265, 'y': 300, 'style': { 'font': '25px Lucida Console', 'col': '#FFFFFF', - 'align': 'center' + 'align': 'left' } }, + CURSOR: { + 'w': 19, + 'h': 19, + 'pos': { + 'x': 435, + 'y': 283, + }, + 'style': { + 'fm': true, + 'fc': '#FFFFFF', + 'bm': false, + 'bw': 0, + 'bc': '', + } + }, + }; diff --git a/client/lib/socket/socketio_handler.js b/client/lib/socket/socketio_handler.js index 81da11a..0f018c5 100644 --- a/client/lib/socket/socketio_handler.js +++ b/client/lib/socket/socketio_handler.js @@ -17,11 +17,13 @@ NPGClient.SocketIO = { console.log(); self.startConnectLoop(); }, + // start connection loop startConnectLoop: function() { var self = this; self.conn_IntervalID = setInterval(function() { self.connect(); }, 1500); }, + // stop connection loop stopConnectLoop: function() { var self = this; @@ -29,6 +31,7 @@ NPGClient.SocketIO = { self.conn_IntervalID = 0; self.conn_nAttempts = 0; }, + // connect socket connect: function() { var self = this; @@ -49,6 +52,7 @@ NPGClient.SocketIO = { self.socket.socket.connect(); } }, + // Define Socket Messages defineSocketMsgs: function() { var self = this; @@ -72,6 +76,12 @@ NPGClient.SocketIO = { self.startConnectLoop(); self.isConnected = false; }); + }, + + // send message to server + sendMsg: function(name, data) { + var self = this; + self.socket.emit(name, data); } }; diff --git a/client/lib/ui/objects/ui_cursor.js b/client/lib/ui/objects/ui_cursor.js new file mode 100644 index 0000000..dcfb732 --- /dev/null +++ b/client/lib/ui/objects/ui_cursor.js @@ -0,0 +1,43 @@ +/** + * @file ui_cursor.js + * @author frtk@tetalab + */ + +NPGClient.UICursor = function(n, o) { + + // + this.rect = new NPGClient.UIRect(n, o); + // obj name + this.name = n !== undefined ? n : ''; + // state + this.bState = true; + this.bCount = 0; + this.bCountMax = 5; + +}; + +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++; + } + }, + +}; + diff --git a/client/lib/ui/objects/ui_input_text.js b/client/lib/ui/objects/ui_input_text.js index 91b312a..2d49020 100644 --- a/client/lib/ui/objects/ui_input_text.js +++ b/client/lib/ui/objects/ui_input_text.js @@ -28,16 +28,15 @@ NPGClient.UIInputText.prototype = { constructor: NPGClient.UIInputText, // - updateState: function() { + updateInput: function() { var self = this; - if (NPGClient.SocketIO.isConnected) self.currText = self.text.online; - else self.currText = self.text.offline; + self.input = NPGClient.userName; }, // draw: function(ctx, state) { var self = this; - self.updateState(); + self.updateInput(); 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 ae94949..cdc2af9 100644 --- a/client/lib/ui/objects/ui_label.js +++ b/client/lib/ui/objects/ui_label.js @@ -29,14 +29,8 @@ 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); -*/ + NPGClient.Utils.setTxtStyle(ctx, self.s); + 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 index 9172db0..634ff73 100644 --- a/client/lib/ui/objects/ui_menu.js +++ b/client/lib/ui/objects/ui_menu.js @@ -35,11 +35,11 @@ NPGClient.UIMenu.prototype = { 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); - } + 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 b2e8c32..2562533 100644 --- a/client/lib/ui/objects/ui_rect.js +++ b/client/lib/ui/objects/ui_rect.js @@ -3,20 +3,18 @@ * @author frtk@tetalab */ -NPGClient.UIRect = function(n, p, w, h, s) { +NPGClient.UIRect = function(n, o) { // - //NPGClient.UIObject.call(this, n, s); - + NPGClient.UIShape.call(this); // 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; + 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 = s !== undefined ? s : new NPGclient.UIStyle(); - + this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle(); }; NPGClient.UIRect.prototype = { @@ -24,23 +22,20 @@ 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); + if (!self.style.fm) { + self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc); } else { - drawFill(ctx, self.x, self.y, self.w, self.h, self.fc); + self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc); } }, // drawFill: function(ctx) { var self = this; - self.applyStyle(ctx); + NPGClient.Utils.applyStyle(ctx, self.style); ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h); }, @@ -48,7 +43,7 @@ NPGClient.UIRect.prototype = { drawNoFill: function(ctx, x1, y1, w, h, lw, c) { var self = this; ctx.beginPath(); - self.applyStyle(ctx); + NPGClient.Utils.applyStyle(ctx, self.style); ctx.rect(self.pos.x, self.pos.y, self.w, self.h); ctx.stroke(); }, diff --git a/client/lib/ui/objects/ui_shape.js b/client/lib/ui/objects/ui_shape.js new file mode 100644 index 0000000..fbec9fe --- /dev/null +++ b/client/lib/ui/objects/ui_shape.js @@ -0,0 +1,45 @@ +/** + * @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/ui/objects/ui_style.js b/client/lib/ui/objects/ui_style.js index 0b2cb74..59a3492 100644 --- a/client/lib/ui/objects/ui_style.js +++ b/client/lib/ui/objects/ui_style.js @@ -3,20 +3,21 @@ * @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 = function(o) { +/* + this.fm = o.fm !== undefined ? o.fm : false; + this.fc = o.fc !== undefined ? o.fc : ''; + this.bm = o.bm !== undefined ? o.bm : false; + this.bw = o.bw !== undefined ? o.bw : 0; + this.bc = o.bc !== undefined ? o.bc : ''; +*/ }; NPGClient.UIStyle.prototype = { constructor: NPGClient.UIStyle, - + +/* borderMode: function() { return this.bm; }, @@ -39,13 +40,14 @@ NPGClient.UIStyle.prototype = { applyStyle: function(ctx) { var self = this; // fill style - if (fm == true) ctx.fillStyle = self.fc; + if (self.fm == true) ctx.fillStyle = self.fc; // border mode if (bm == true) { - ctx.lineWidth = bw; - ctx.strokeStyle = bc; + ctx.lineWidth = self.bw; + ctx.strokeStyle = self.bc; } } - + +*/ }; diff --git a/client/lib/utils/client_utils.js b/client/lib/utils/client_utils.js new file mode 100644 index 0000000..e6d7e3c --- /dev/null +++ b/client/lib/utils/client_utils.js @@ -0,0 +1,68 @@ +/** + * @file client_utils.js + * @author frtk@tetalab + */ + +NPGClient.Utils = { + + /** + * UI + */ + // + setTxtStyle : function(ctx, style) { + ctx.font = style.font; + ctx.fillStyle = style.col; + ctx.textAlign = style.align; + }, + + // + applyStyle : function(ctx, style) { + // + if (style.bm) { + ctx.lineWidth = style.bw; + ctx.strokeStyle = style.bc; + } + // + if (style.fm) { + ctx.fillStyle = style.fc; + } + }, + + + /** + * User Name + */ + // + addChar : function(key) { + //console.log(key + ' ' + NPGClient.userName); + if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) { + NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase(); + console.log(NPGClient.userName); + } + }, + + // + removeChar : function(key) { + if (NPGClient.userName.length > 0) { + NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1); + console.log(NPGClient.userName); + } + }, + + // + validChar : function(key) { + return NPGClient.evtHandler.loginValidKey(key); + }, + + // + validName : function(key) { + var len = NPGClient.userName.length; + return (len >= 0 && len <= NPGClient.NAMEMAXSIZE); + }, + + // + resetName : function() { + NPGClient.userName = ''; + }, + +} diff --git a/client/lib/utils/js_utils.js b/client/lib/utils/js_utils.js new file mode 100644 index 0000000..9d174ab --- /dev/null +++ b/client/lib/utils/js_utils.js @@ -0,0 +1,12 @@ +/** + * @file js_utils.js + * @author frtk@tetalab + */ + +function countProperties(obj) { + var count = 0; + for (var prop in obj) { + if (obj.hasOwnProperty(prop)) count++; + } + return count; +} diff --git a/package.json b/package.json index a5aa7a5..5991d99 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "npg_app.js", - "version": "0.1.2", + "version": "0.1.3", "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 974f33b..582a43c 100644 --- a/server/npg_server_config.js +++ b/server/npg_server_config.js @@ -4,7 +4,7 @@ */ var Config = { - VERSION : '0.1.2', + VERSION : '0.1.3', HTTP: { host: '127.0.0.1', port: 8042 diff --git a/version.md b/version.md index e4b9375..d337e78 100644 --- a/version.md +++ b/version.md @@ -1,13 +1,35 @@ + +### **v0.1.3:** +-------------------------- +focus: client ui lib - keyboard handling +-------------------------- +---- /client/utils +- renamed utils.js -> client_utils.js +- added js_utils.js (global methods) +---- keyboard handling on login page +- input name feature (add and remove char) +---- added in /client/ui/objects +- ui_shape.js (base shape object) +- ui_cursor.js +---- removed in /client/ui/objects +- ui_line.js +- ui_object.js +---- changed UIRect object +- inherits from UIShape +---- cursor object +- blinking cursor blinks (need to implement movement with name input) + + ### **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 +- 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