Browse code

v0.1.4

frtk authored on 15/02/2016 23:47:28
Showing 16 changed files
... ...
@@ -16,7 +16,7 @@
16 16
   <script type="text/javascript" src="./lib/core/page_base.js"></script>
17 17
   <script type="text/javascript" src="./lib/core/page_handler.js"></script>
18 18
   <script type="text/javascript" src="./lib/ui/ui.js"></script>
19
-  <script type="text/javascript" src="./lib/ui/objects/ui_shape.js"></script>
19
+  <script type="text/javascript" src="./lib/ui/objects/ui_object.js"></script>
20 20
   <script type="text/javascript" src="./lib/ui/objects/ui_style.js"></script>
21 21
   <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
22 22
   <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>
... ...
@@ -24,15 +24,28 @@ NPGClient.PageHandler = {
24 24
 
25 25
   //
26 26
   getCurrPageUIElemByName: function(name) {
27
- /*
28 27
     var self = this;
29 28
     if (self.pages.length > 0) {
30 29
       for (var i = 0; i < self.pages.length; i++) {
31
-        if (name == self.pages[i].name) return self.pages[i];
30
+        if (self.pages[i].name == self.currPage) {
31
+          return self.pages[i].getUIElemByName(name);
32
+        }
33
+      }
34
+    }
35
+    return undefined;
36
+  },
37
+
38
+  // @need rework
39
+  getUIElemFromPage: function(elem, page) {
40
+    var self = this;
41
+    if (self.pages.length > 0) {
42
+      for (var i = 0; i < self.pages.length; i++) {
43
+          if (page == self.pages[i].name) {
44
+	      //	      return self.pages[i];
45
+	  }
32 46
       }
33 47
     }
34 48
     return undefined;
35
-*/
36 49
   },
37 50
 
38 51
 
... ...
@@ -55,11 +55,9 @@ NPGClient.evtHandler = {
55 55
    */
56 56
   //
57 57
   userLogin : function (evt) {
58
-    //
58
+    
59 59
     var self = this;
60
-    var oldNameWidth, newNameWidth;
61
-    var size = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width;
62
-    oldNameWidth = 2.1*size; // corr factor 2.1
60
+    //
63 61
     switch (evt.keyCode) {
64 62
       case NPGClient.KEYS.ENTER:
65 63
         if (NPGClient.SocketIO.isConnected) {                         
... ...
@@ -67,32 +65,27 @@ NPGClient.evtHandler = {
67 67
             NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
68 68
           }
69 69
         } else {
70
-          //self.serverExit();
70
+          NPGClient.Utils.resetName();  
71
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').reset();
71 72
         }                               
72 73
         break;
73 74
       case NPGClient.KEYS.BACKSPACE:
74 75
         //--- remove a character        
75 76
         evt.preventDefault();
76
-        NPGClient.Utils.removeChar();
77
-        newNameWidth = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width
78
-          
79
-         // newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
80
-//          self.cursor.shiftX(newNameWidth - oldNameWidth);
77
+        if (!NPGClient.Utils.nameEmpty()) {
78
+          NPGClient.Utils.removeChar();
79
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
80
+        }
81 81
         break;
82 82
       default:
83
-        //console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode));
84 83
         //--- add character
85
-        if (self.isValidKey(evt.keyCode)) {
86
-          //self.cursor.stopBlink;
84
+        if (self.isValidKey(evt.keyCode) && !NPGClient.Utils.maxNameSize()) {
87 85
           NPGClient.Utils.addChar(evt.keyCode);
88
-          //newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
89
-          //if (self.validName()) {
90
-          //  self.cursor.shiftX(newNameWidth - oldNameWidth);
91
-          //}
92
-          //self.cursor.startBlink;
86
+          newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
87
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
93 88
         }
94 89
         break;
95 90
     }
96
-  },
91
+  }
97 92
 
98 93
 }
... ...
@@ -44,7 +44,7 @@ NPGClient.LOGIN = {
44 44
     'x': 400,
45 45
     'y': 450,
46 46
     'style': { 
47
-      'font': '15px Lucida Console',
47
+      'font': '15px Arial',
48 48
       'col': '#FFFFFF',
49 49
       'align': 'center'
50 50
     },
... ...
@@ -54,17 +54,17 @@ NPGClient.LOGIN = {
54 54
     'x': 400,
55 55
     'y': 150,
56 56
     'style': { 
57
-      'font': '50px Lucida Console',
57
+      'font': '50px Arial',
58 58
       'col': '#FFFFFF',
59 59
       'align': 'center'
60 60
     }
61 61
   },
62 62
   INPUT: {
63
-    'text': 'enter a name: ',
64
-    'x': 265,
63
+    'text': 'login: ',
64
+    'x': 285,
65 65
     'y': 300,
66 66
     'style': { 
67
-      'font': '25px Lucida Console',
67
+      'font': '25px Monospace',
68 68
       'col': '#FFFFFF',
69 69
       'align': 'left'
70 70
     }
... ...
@@ -72,10 +72,8 @@ NPGClient.LOGIN = {
72 72
   CURSOR: {
73 73
     'w': 19,
74 74
     'h': 19,
75
-    'pos': {
76
-      'x': 435,
77
-      'y': 283,
78
-    },
75
+    'x': 390,
76
+    'y': 283,
79 77
     'style': { 
80 78
       'fm': true,
81 79
       'fc': '#FFFFFF',
82 80
deleted file mode 100644
... ...
@@ -1,13 +0,0 @@
1
-/**
2
- * @file login_page.js
3
- * @author frtk@tetalab
4
- */
5
-
6
-NPGClient.LoginPage = {
7
-
8
-    pageIdx: 0,
9
-    page: new NPGClient.AppPage('login'),
10
-    
11
-    
12
-}; 
13
-
... ...
@@ -5,10 +5,18 @@
5 5
 
6 6
 NPGClient.UICursor = function(n, o) { 
7 7
 
8
-  //
9
-  this.rect = new NPGClient.UIRect(n, o); 
8
+  // inheritance
9
+  NPGClient.UIObject.call(this, o);
10
+
10 11
   // obj name
11 12
   this.name = n !== undefined ? n : '';
13
+  this.w = o.w !== undefined ? o.w : 0;
14
+  this.h = o.h !== undefined ? o.h : 0;
15
+  // starting position
16
+  this.x0 = this.x();
17
+  this.y0 = this.y();
18
+  // style
19
+  this.style = o.style !== undefined ? o.style : {};
12 20
   // state
13 21
   this.bState = true;
14 22
   this.bCount = 0;
... ...
@@ -16,28 +24,38 @@ NPGClient.UICursor = function(n, o) {
16 16
 
17 17
 };
18 18
 
19
-NPGClient.UICursor.prototype = {
20
-   
21
-  // Constructor
22
-  constructor: NPGClient.UICursor,
23
-    
24
-  //
25
-  draw: function(ctx) {
26
-    var self = this;
27
-    if (self.bState) {
28
-      if (self.bCount == self.bCountMax) {
29
-        self.bCount = 0;
30
-        self.bState = false;
31
-      } else self.rect.draw(ctx);
32
-      self.bCount++;
33
-    } else {
34
-      if (self.bCount == self.bCountMax) {
35
-        self.bCount = 0;
36
-        self.bState = true;
37
-        self.rect.draw(ctx);
38
-      } else self.bCount++;
39
-    }  
40
-  },
19
+// inheritance
20
+NPGClient.UICursor.prototype = Object.create(NPGClient.UIObject.prototype);
21
+
22
+// constructor
23
+NPGClient.UICursor.prototype.constructor = NPGClient.UICursor;
24
+
25
+// reset
26
+NPGClient.UICursor.prototype.reset = function() {
27
+  var self = this;
28
+  self.moveTo(self.x0, self.y0);
29
+}
41 30
 
31
+// draw
32
+NPGClient.UICursor.prototype.draw = function(ctx) {
33
+  var self = this;
34
+  if (self.bState) {
35
+    if (self.bCount == self.bCountMax) {
36
+      self.bCount = 0;
37
+      self.bState = false;
38
+    } else {
39
+      NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
40
+      self.bCount++;
41
+    }
42
+  } else {
43
+    if (self.bCount == self.bCountMax) {
44
+      self.bCount = 0;
45
+      self.bState = true;
46
+      NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
47
+    } else self.bCount++;
48
+  }
42 49
 };
43 50
 
51
+
52
+
53
+
... ...
@@ -36,9 +36,11 @@ NPGClient.UIInputText.prototype = {
36 36
   //
37 37
   draw: function(ctx, state) {
38 38
     var self = this;
39
+    var t = self.text + self.input;
39 40
     self.updateInput();  
41
+    //console.log(self.s);
40 42
     NPGClient.Utils.setTxtStyle(ctx, self.s);
41
-    ctx.fillText(self.text + self.input, self.x, self.y);    
43
+    ctx.fillText(t, self.x, self.y);    
42 44
   }
43 45
 
44 46
 };
45 47
deleted file mode 100644
... ...
@@ -1,35 +0,0 @@
1
-/**
2
- * @file ui_line.js
3
- * @author frtk@tetalab
4
- */
5
-
6
-NPGClient.Line = function(name, p1, p2, style) { 
7
-
8
-    NPGClient.UIObject.call(this, name, style);
9
-    
10
-    this.p1 = p1 !== undefined ? p1 : new NPGClient.Point2D();
11
-    this.p2 = p2 !== undefined ? p2 : new NPGClient.Point2D();
12
-
13
-};
14
-
15
-NPGClient.Line.prototype = Object.create(NPGClient.UIObject.prototype);
16
-
17
-NPGClient.Line.prototype.constructor = NPGClient.Line;
18
-
19
-NPGCLient.Line.prototype.draw = function(ctx) {
20
-    var self = this;
21
-    self.drawLine(ctx);
22
-};
23
-
24
-NPGClient.Line.prototype.drawLine = function(ctx) {
25
-	
26
-    var self = this;
27
-    self.applyStyle(ctx);
28
-
29
-    ctx.beginPath();
30
-    ctx.moveTo(self.p1.x, self.p1.y);
31
-    ctx.lineTo(self.p2.x, self.p2.y);
32
-    ctx.stroke();
33
-
34
-};
35
-
... ...
@@ -1,45 +1,77 @@
1 1
 /**
2
- * @file ui_object
2
+ * @file ui_object.js
3 3
  * @author frtk@tetalab
4 4
  */
5
+//
5 6
 
6
-NPGClient.UIObject = function(name, style) { 
7
+NPGClient.UIObject = function(o) { 
7 8
 
8
-    //Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ });
9
-    
10
-    this.name = name !== undefined ? name : '';
11
-    this.style = style !== undefined ? style : new NPGClient.UIStyle();
9
+  this._x = (o.x !== undefined) ? o.x : 0;  // x position
10
+  this._y = (o.y !== undefined) ? o.y : 0;  // y position
11
+  this._theta = (o.theta !== undefined) ? o.theta : 0;  // theta wrt horizon
12 12
 
13 13
 };
14 14
 
15
+
16
+/**
17
+ * 
18
+ */
15 19
 NPGClient.UIObject.prototype = {
16
-    
17
-    constructor: NPGClient.UIObject,
18
-
19
-    setStyle: function(s) {
20
-	this.style = s;
21
-    },
22
-    
23
-    hasBorders: function() {
24
-	return this.style.getBorderMode();
25
-    },
26
-
27
-    hasFillStyle: function() {
28
-	return this.style.getFillMode();
29
-    },
30
-    
31
-    applyStyle: function(ctx) {
32
-	
33
-	var self = this;
34
-	if (self.style.getBorderMode()) {
35
-	    ctx.lineWidth = self.style.bw;
36
-	    ctx.strokeStyle = self.style.bc;
37
-	}
38
-	
39
-	if (self.style.getFillMode()) {
40
-	    ctx.fillStyle = self.style.fc;
41
-	}
20
+
21
+  // Constructor
22
+  constructor: NPGClient.UIObject,
23
+
24
+  //set/get  
25
+  x: function(data) {
26
+    var self = this;
27
+
28
+    if (data !== undefined) {
29
+      self._x = data;
30
+    } else {
31
+      return self._x;	
42 32
     }
43
-    
44
-};
45 33
 
34
+  },
35
+
36
+  //set/get  
37
+  y: function(data) {
38
+    var self = this;
39
+
40
+    if (data !== undefined) {
41
+      self._y = data;
42
+    } else {
43
+      return self._y;	
44
+    }
45
+
46
+  },
47
+
48
+  //
49
+  moveTo: function(x, y) {
50
+    var self = this;
51
+    self._x = x;
52
+    self._y = y;
53
+  },
54
+
55
+  //
56
+  translateXY: function(x, y) {
57
+    var self = this;
58
+    self._x += x;
59
+    self._y += y;
60
+  },
61
+
62
+  //
63
+  translateX: function(x) {    
64
+    this._x += x;
65
+  }, 
66
+   
67
+  //
68
+  translateY: function(y) {
69
+    this._y += y;
70
+  },
71
+
72
+  //
73
+  rotate: function(x, y, t) {
74
+  },
75
+
76
+
77
+}; 
... ...
@@ -6,47 +6,27 @@
6 6
 NPGClient.UIRect = function(n, o) { 
7 7
 
8 8
   //
9
-  NPGClient.UIShape.call(this);
9
+  NPGClient.UIObject.call(this, o);
10 10
   // obj name
11 11
   this.name = n !== undefined ? n : '';
12
-  // geom
13
-  this.pos = o.pos !== undefined ? o.pos : {};  
14 12
   this.w = o.w !== undefined ? o.w : 0;
15 13
   this.h = o.h !== undefined ? o.h : 0;
16 14
   // style
17 15
   this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle(); 
18 16
 };
19 17
 
20
-NPGClient.UIRect.prototype = {
21
-   
22
-  // Constructor
23
-  constructor: NPGClient.UIRect,
24
-    
25
-  //
26
-  draw: function(ctx) {
27
-    var self = this;
28
-    if (!self.style.fm) {
29
-      self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc);
30
-    } else {
31
-      self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc);
32
-    }
33
-  },
34
-
35
-  //
36
-  drawFill: function(ctx) {
37
-    var self = this;  
38
-    NPGClient.Utils.applyStyle(ctx, self.style);
39
-    ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
40
-  },
41
-
42
-  //
43
-  drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
44
-    var self = this;      
45
-    ctx.beginPath();
46
-    NPGClient.Utils.applyStyle(ctx, self.style);
47
-    ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
48
-    ctx.stroke();
49
-  },
18
+// inheritance
19
+NPGClient.UIRect.prototype = Object.create(NPGClient.UIObject.prototype);
50 20
 
21
+// Constructor
22
+NPGClient.UIRect.prototype.constructor = NPGClient.UIRect;
23
+   
24
+NPGClient.UIRect.prototype.draw = function(ctx) {
25
+  var self = this;
26
+  NPGClient.Utils.applyStyle(ctx, self.style);
27
+  if (!self.style.fm) {
28
+    NPGClient.Utils.drawRect(ctx, self.x(), self.y(), self.w, self.h);
29
+  } else {
30
+    NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
31
+  }
51 32
 };
52
-
53 33
deleted file mode 100644
... ...
@@ -1,45 +0,0 @@
1
-/**
2
- * @file ui_shape.js
3
- * @author frtk@tetalab
4
- */
5
-//
6
-
7
-NPGClient.UIShape = function() { 
8
-  this.x = 0;  // x position
9
-  this.y = 0;  // y position
10
-};
11
-
12
-
13
-/**
14
- * 
15
- */
16
-NPGClient.UIShape.prototype = {
17
-
18
-  // Constructor
19
-  constructor: NPGClient.UIShape,
20
-
21
-  //
22
-  moveTo: function(x, y) {
23
-    var self = this;
24
-    self.x = x;
25
-    self.y = y;
26
-  },
27
-
28
-  //
29
-  move: function(x, y) {
30
-    var self = this;
31
-    self.x += x;
32
-    self.y += y;
33
-  },
34
-
35
-  //
36
-  shiftX: function(x) {    
37
-    this.x += x;
38
-  }, 
39
-   
40
-  //
41
-  shiftY: function(y) {
42
-    this.y += y;
43
-  }
44
-
45
-}; 
... ...
@@ -6,7 +6,64 @@
6 6
 NPGClient.Utils = {
7 7
 
8 8
   /**
9
-   * UI
9
+   * UI draw
10
+   */
11
+  //
12
+  drawText: function(ctx, x1, y1, t, s, c) {
13
+    ctx.font = s;
14
+    ctx.fillStyle = c;      
15
+    ctx.fillText(t, x1, y1);
16
+  },
17
+
18
+  //
19
+  drawFillRect: function(ctx, x1, y1, w, h) {
20
+    ctx.fillRect(x1, y1, w, h);
21
+  },
22
+
23
+  //
24
+  drawRect: function(ctx, x1, y1, w, h) {
25
+    ctx.beginPath();
26
+    ctx.rect(x1, y1, w, h);
27
+    ctx.stroke();
28
+  },
29
+
30
+  //
31
+  drawLine: function(ctx, x1, y1, x2, y2) {
32
+    ctx.beginPath();
33
+    ctx.moveTo(x1, y1);
34
+    ctx.lineTo(x2, y2);
35
+    ctx.stroke();
36
+  },
37
+
38
+  //
39
+  drawSemiCircle: function(ctx, x, y, r, a1, a2, o, w, c) {
40
+    ctx.lineWidth = w;
41
+    ctx.strokeStyle = c;
42
+    ctx.beginPath();
43
+    ctx.arc(x, y, r, a1, a2, o);
44
+    ctx.closePath();
45
+    ctx.stroke();
46
+  },
47
+
48
+  drawFillCircle: function(ctx, x, y, r) {
49
+    ctx.beginPath();
50
+    ctx.arc(x, y, r, 0, Math.PI*2, false);
51
+    ctx.fill();
52
+    ctx.stroke();
53
+    ctx.closePath();
54
+  },   
55
+
56
+  //
57
+  drawCircle: function(ctx, x, y, r) {
58
+    ctx.beginPath();
59
+    ctx.arc(x, y, r, 0, Math.PI*2, false);
60
+    ctx.closePath();
61
+    ctx.stroke();
62
+  },
63
+
64
+
65
+  /**
66
+   * UI Style
10 67
    */
11 68
   //  
12 69
   setTxtStyle : function(ctx, style) {
... ...
@@ -37,32 +94,42 @@ NPGClient.Utils = {
37 37
     //console.log(key + ' ' + NPGClient.userName);
38 38
     if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
39 39
       NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase();   
40
-      console.log(NPGClient.userName);
40
+      //console.log(NPGClient.userName);
41 41
     }
42 42
   },
43 43
 
44 44
   //
45
-  removeChar : function(key) {
45
+  removeChar: function(key) {
46 46
     if (NPGClient.userName.length > 0) {
47 47
       NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1);      
48
-      console.log(NPGClient.userName);
48
+      //console.log(NPGClient.userName);
49 49
     }                                                               
50 50
   },
51 51
   
52 52
   //
53
-  validChar : function(key) {
53
+  validChar: function(key) {
54 54
     return NPGClient.evtHandler.loginValidKey(key);
55 55
   },
56 56
 
57 57
   //
58
-  validName : function(key) {
58
+  validName: function() {
59 59
     var len = NPGClient.userName.length;
60
-    return (len >= 0 && len <= NPGClient.NAMEMAXSIZE);
60
+    return (len >= 3 && len <= NPGClient.NAMEMAXSIZE);
61
+  },
62
+
63
+  //
64
+  maxNameSize: function() {
65
+    return NPGClient.userName.length == NPGClient.NAMEMAXSIZE;
61 66
   },              
62 67
 
63 68
   //
64
-  resetName : function() {
69
+  resetName: function() {
65 70
     NPGClient.userName = '';
66 71
   },
72
+  
73
+  //
74
+  nameEmpty: function() {
75
+    return (NPGClient.userName.length == 0);
76
+  },
67 77
 
68 78
 }
69 79
deleted file mode 100644
... ...
@@ -1,57 +0,0 @@
1
-/**
2
- * @file utils.js
3
- * @author frtk@tetalab
4
- */
5
-
6
-NPGClient.Utils = {
7
-
8
-  /**
9
-   * UI
10
-   */
11
-  //  
12
-  setTxtStyle : function(ctx, style) {
13
-    ctx.font = style.font;
14
-    ctx.fillStyle = style.col;       
15
-    ctx.textAlign = style.align;               
16
-  },      
17
-
18
-
19
-
20
-  /**
21
-   * User Name 
22
-   */
23
-  //  
24
-  addChar : function(key, name) {
25
-    if (name.length < NPGClient.NAMEMAXSIZE) {
26
-      name = name + String.fromCharCode(key).toLowerCase();   
27
-    }
28
-  },
29
-
30
-  //
31
-  removeChar : function(key) {
32
-    if (name.length > 0) {
33
-      name = name.substring(0, name.length - 1);      
34
-    }                                                               
35
-  },
36
-  
37
-  //
38
-  validChar : function(key) {
39
-    return NPGClient.evtHandler.loginValidKey(key);
40
-  },
41
-
42
-  //
43
-  validName : function(key) {
44
-    var len = name.length;
45
-      return (len >= 0 && len <= NPGClient.MAXNAMESIZE);
46
-  },              
47
-
48
-  //
49
-  resetName : function(name) {
50
-    name = '';
51
-  },
52
-
53
-
54
-
55
-
56
-
57
-}
... ...
@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "npg_app.js",
3
-  "version": "0.1.3",
3
+  "version": "0.1.4",
4 4
   "description": "Multiplayer online Pong Game using nodejs and socket.io",
5 5
   "directories": {
6 6
     "server": "server",
... ...
@@ -4,7 +4,7 @@
4 4
  */
5 5
 
6 6
 var Config = {
7
-  VERSION : '0.1.3',
7
+  VERSION : '0.1.4',
8 8
   HTTP: {
9 9
     host: '127.0.0.1',
10 10
     port: 8042
... ...
@@ -1,3 +1,19 @@
1
+### **v0.1.4:**
2
+-------------------------- 
3
+focus: client ui lib 
4
+-------------------------- 
5
+---- changed font (Lucida -> Arial)
6
+- npg_client.js
7
+---- added in /ui/objects/
8
+- ui_object.js (base object)
9
+---- updated objects in
10
+- ui_rect.js  (inherits from UIObject)
11
+- ui_cursor.js (inherits from UIObject)
12
+---- /keyboard/evt_handler.js 
13
+- userLogin()
14
+---- cursor object
15
+- fixed behaviour on login page - working fine now
16
+- reset position at login attempt when server is down 
1 17
 
2 18
 
3 19
 ### **v0.1.3:**