v0.1.4

client/index.html

@@ -16,7 +16,7 @@
   <script type="text/javascript" src="./lib/core/page_base.js"></script>
   <script type="text/javascript" src="./lib/core/page_handler.js"></script>
   <script type="text/javascript" src="./lib/ui/ui.js"></script>
-  <script type="text/javascript" src="./lib/ui/objects/ui_shape.js"></script>
+  <script type="text/javascript" src="./lib/ui/objects/ui_object.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_style.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>

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;
-*/
   },
 
 

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();
+        if (!NPGClient.Utils.nameEmpty()) {
-        newNameWidth = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width
+          NPGClient.Utils.removeChar();
-          
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
-         // 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)) {
+        if (self.isValidKey(evt.keyCode) && !NPGClient.Utils.maxNameSize()) {
-          //self.cursor.stopBlink;
           NPGClient.Utils.addChar(evt.keyCode);
-          //newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
+          newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
-          //if (self.validName()) {
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
-          //  self.cursor.shiftX(newNameWidth - oldNameWidth);
-          //}
-          //self.cursor.startBlink;
         }
         break;
     }
-  },
+  }
 
 }

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: ',
+    'text': 'login: ',
-    'x': 265,
+    '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': 390,
-      'x': 435,
+    'y': 283,
-      'y': 283,
-    },
     'style': { 
       'fm': true,
       'fc': '#FFFFFF',

client/lib/pages/login_page.js

@@ -1,13 +0,0 @@
-/**
- * @file login_page.js
- * @author frtk@tetalab
- */
-
-NPGClient.LoginPage = {
-
-    pageIdx: 0,
-    page: new NPGClient.AppPage('login'),
-    
-    
-}; 
-

client/lib/ui/objects/ui_cursor.js

@@ -5,10 +5,18 @@
 
 NPGClient.UICursor = function(n, o) { 
 
-  //
+  // inheritance
-  this.rect = new NPGClient.UIRect(n, o); 
+  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 = {
+// inheritance
-   
+NPGClient.UICursor.prototype = Object.create(NPGClient.UIObject.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++;
-    }  
-  },
 
+// 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++;
+  }
 };
 
+
+
+

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);    
   }
 
 };

client/lib/ui/objects/ui_line.js

@@ -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();
-
-};
-

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._x = (o.x !== undefined) ? o.x : 0;  // x position
-    
+  this._y = (o.y !== undefined) ? o.y : 0;  // y position
-    this.name = name !== undefined ? name : '';
+  this._theta = (o.theta !== undefined) ? o.theta : 0;  // theta wrt horizon
-    this.style = style !== undefined ? style : new NPGClient.UIStyle();
 
 };
 
+
+/**
+ * 
+ */
 NPGClient.UIObject.prototype = {
-    
-    constructor: NPGClient.UIObject,
 
-    setStyle: function(s) {
+  // Constructor
-	this.style = s;
+  constructor: NPGClient.UIObject,
-    },
-    
-    hasBorders: function() {
-	return this.style.getBorderMode();
-    },
 
-    hasFillStyle: function() {
+  //set/get  
-	return this.style.getFillMode();
+  x: function(data) {
-    },
+    var self = this;
-    
+
-    applyStyle: function(ctx) {
+    if (data !== undefined) {
-	
+      self._x = data;
-	var self = this;
+    } else {
-	if (self.style.getBorderMode()) {
+      return self._x;	
-	    ctx.lineWidth = self.style.bw;
-	    ctx.strokeStyle = self.style.bc;
-	}
-	
-	if (self.style.getFillMode()) {
-	    ctx.fillStyle = self.style.fc;
-	}
     }
-    
-};
 
+  },
+
+  //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) {
+  },
+
+
+}; 

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
+NPGClient.UIRect.prototype.draw = function(ctx) {
-  constructor: NPGClient.UIRect,
+  var self = this;
-    
+  NPGClient.Utils.applyStyle(ctx, self.style);
-  //
+  if (!self.style.fm) {
-  draw: function(ctx) {
+    NPGClient.Utils.drawRect(ctx, self.x(), self.y(), self.w, self.h);
-    var self = this;
+  } else {
-    if (!self.style.fm) {
+    NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
-      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();
-  },
-
 };
-

client/lib/ui/objects/ui_shape.js

@@ -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;
-  }
-
-}; 

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);
+  },
 
 }

client/lib/utils/utils.js

@@ -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 = '';
-  },
-
-
-
-
-
-}

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",

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

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:**