Browse code

version v0.1.2

frtk authored on 13/02/2016 23:23:22
Showing 13 changed files
... ...
@@ -10,6 +10,7 @@
10 10
   <script type="text/javascript" src="./jquery/jquery-2.1.3.min.js"></script>
11 11
   <script type="text/javascript" src="./lib/npg_client.js"></script>
12 12
   <script type="text/javascript" src="./lib/socket/socketio_handler.js"></script>
13
+  <script type="text/javascript" src="./lib/utils/utils.js"></script>
13 14
   <script type="text/javascript" src="./lib/keyboard/event_handler.js"></script>
14 15
   <script type="text/javascript" src="./lib/core/page_base.js"></script>
15 16
   <script type="text/javascript" src="./lib/core/page_handler.js"></script>
... ...
@@ -19,6 +20,8 @@
19 19
   <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
20 20
   <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>
21 21
   <script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
22
+  <script type="text/javascript" src="./lib/ui/objects/ui_status_text.js"></script>
23
+  <script type="text/javascript" src="./lib/ui/objects/ui_input_text.js"></script>
22 24
 </head>
23 25
 
24 26
 <body>  
... ...
@@ -40,8 +40,14 @@ NPGClient.PageHandler = {
40 40
     var self = this;
41 41
     var p = new NPGClient.AppPage('login');
42 42
     // Title label     
43
-    p.addUIObject(new NPGClient.UILabel('login', NPGClient.LABELS.TITLE));
43
+    p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
44 44
     self.pages.push(p);
45
+    // name input
46
+    p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
47
+    // Server status
48
+    p.addUIObject(new NPGClient.UIStatusText('login_servstat', NPGClient.LOGIN.SERVSTATUS));    
49
+
50
+    
45 51
   },
46 52
 
47 53
 }; 
... ...
@@ -5,24 +5,61 @@
5 5
 
6 6
 var NPGClient = { 'version': '' };
7 7
 
8
+NPGClient.NAMEMAXSIZE = 8;
9
+NPGClient.userName = '';
10
+
11
+
8 12
 // ui
9 13
 NPGClient.CAN_W = 800;
10 14
 NPGClient.CAN_H = 500;
11 15
 NPGClient.CAN_COL = '#000000';
12 16
 
17
+
13 18
 // counters
14 19
 NPGClient.pageCount = -1;
15 20
 
16
-// Labels
17
-NPGClient.LABELS = {
21
+
22
+
23
+
24
+// Login Page
25
+NPGClient.LOGIN = {
26
+  SERVSTATUS: { 
27
+    'text': {
28
+      'online' : 'server: online',
29
+      'offline' : 'server: offline',
30
+    },
31
+    'x': 400,
32
+    'y': 450,
33
+    'style': { 
34
+      'font': '15px Lucida Console',
35
+      'col': '#FFFFFF',
36
+      'align': 'center'
37
+    },
38
+  },
18 39
   TITLE: {
19 40
     'text': 'nodePong',
20
-    'x': 280,
41
+    'x': 400,
21 42
     'y': 150,
22
-    'f': '50px Lucida Console',
23
-    'c': '#FFFFFF'
24
-  }
25
-}
43
+    'style': { 
44
+      'font': '50px Lucida Console',
45
+      'col': '#FFFFFF',
46
+      'align': 'center'
47
+    }
48
+  },
49
+  INPUT: {
50
+    'text': 'enter a name: ',
51
+    'x': 400,
52
+    'y': 300,
53
+    'style': { 
54
+      'font': '25px Lucida Console',
55
+      'col': '#FFFFFF',
56
+      'align': 'center'
57
+    }
58
+  }, 
59
+  
60
+};
61
+
62
+
26 63
 
27 64
 
28 65
 
29 66
new file mode 100644
... ...
@@ -0,0 +1,46 @@
0
+/**
1
+ * @file ui_input_text.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIInputText = function(n, o) { 
6
+
7
+  // obj name
8
+  this.name = n !== undefined ? n : '';
9
+  // pos
10
+  this.x = o.x !== undefined ? o.x : 0; 
11
+  this.y = o.y !== undefined ? o.y : 0; 
12
+    
13
+  // text
14
+  this.text = o.text !== undefined ? o.text : '';
15
+  //
16
+  this.input = '';
17
+  
18
+  // text style
19
+  this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
20
+
21
+};
22
+
23
+
24
+NPGClient.UIInputText.prototype = {
25
+
26
+  // Constructor
27
+  constructor: NPGClient.UIInputText,
28
+  
29
+  //
30
+  updateState: function() {
31
+    var self = this;
32
+    if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
33
+    else self.currText = self.text.offline;
34
+  },
35
+
36
+  //
37
+  draw: function(ctx, state) {
38
+    var self = this;
39
+    self.updateState();  
40
+    NPGClient.Utils.setTxtStyle(ctx, self.s);
41
+    ctx.fillText(self.text + self.input, self.x, self.y);    
42
+  }
43
+
44
+};
45
+
... ...
@@ -12,12 +12,11 @@ NPGClient.UILabel = function(n, o) {
12 12
   // pos
13 13
   this.x = o.x !== undefined ? o.x : 0; 
14 14
   this.y = o.y !== undefined ? o.y : 0; 
15
+ 
15 16
   // text
16 17
   this.text = o.text !== undefined ? o.text : '';
17
-  // font
18
-  this.font = o.f !== undefined ? o.f : '';
19
-  // color
20
-  this.col = o.c !== undefined ? o.c : '';
18
+  // text style
19
+  this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
21 20
 
22 21
 };
23 22
 
... ...
@@ -31,9 +30,13 @@ NPGClient.UILabel.prototype = {
31 31
   draw: function(ctx) {
32 32
     var self = this;
33 33
     //self.rect.draw(ctx); 
34
+      NPGClient.Utils.setTxtStyle(ctx, self.s);
35
+      ctx.fillText(self.text, self.x, self.y);    
36
+/*
34 37
     ctx.font = self.font
35 38
     ctx.fillStyle = self.col;
36 39
     ctx.fillText(self.text, self.x, self.y);  
40
+*/
37 41
   }
38 42
 
39 43
 };
40 44
new file mode 100644
... ...
@@ -0,0 +1,49 @@
0
+/**
1
+ * @file ui_menu.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIMenu = function(n, o) { 
6
+
7
+  // obj name
8
+  this.name = n !== undefined ? n : '';
9
+  // type (vertical/horizontal)
10
+  this.type = o.type !== undefined ? o.type : ''; 
11
+  // pos
12
+  this.x = o.x !== undefined ? o.x : 0; 
13
+  this.y = o.y !== undefined ? o.y : 0; 
14
+  // item list 
15
+  this.items = [];
16
+  //
17
+  
18
+
19
+};
20
+
21
+NPGClient.UIMenu.prototype = {
22
+   
23
+  // Constructor
24
+  constructor: NPGClient.UIMenu,
25
+    
26
+  //
27
+  addItem: function(t) {
28
+    var self = this;
29
+    self.itemsList.push(t);   
30
+  },
31
+
32
+  //
33
+  draw: function(ctx) {
34
+    var self = this;
35
+    var y = self.y  
36
+    if (self.items !== undefined && self.items.length > 0) {
37
+	for (var i = 0; i < self.items.length; i++) {
38
+	    ctx.font = self.items[i].font;
39
+	    ctx.fillStyle = self.items[i].col;
40
+	    ctx.fillText(self.text, self.x, self.y);
41
+	}      
42
+    }
43
+  },
44
+
45
+
46
+
47
+};
48
+
... ...
@@ -5,6 +5,9 @@
5 5
 
6 6
 NPGClient.UIRect = function(n, p, w, h, s) { 
7 7
 
8
+  //
9
+  //NPGClient.UIObject.call(this, n, s);
10
+
8 11
   // obj name
9 12
   this.name = n !== undefined ? n : '';
10 13
   // geom
11 14
new file mode 100644
... ...
@@ -0,0 +1,46 @@
0
+/**
1
+ * @file ui_status_text.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIStatusText = function(n, o) { 
6
+
7
+  // obj name
8
+  this.name = n !== undefined ? n : '';
9
+  // pos
10
+  this.x = o.x !== undefined ? o.x : 0; 
11
+  this.y = o.y !== undefined ? o.y : 0; 
12
+    
13
+  // text
14
+  this.text = o.text !== undefined ? o.text : '';
15
+  //
16
+  this.currText = 0;
17
+  
18
+  // text style
19
+  this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
20
+
21
+};
22
+
23
+
24
+NPGClient.UIStatusText.prototype = {
25
+
26
+  // Constructor
27
+  constructor: NPGClient.UIStatusText,
28
+  
29
+  //
30
+  updateState: function() {
31
+    var self = this;
32
+    if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
33
+    else self.currText = self.text.offline;
34
+  },
35
+
36
+  //
37
+  draw: function(ctx, state) {
38
+    var self = this;
39
+    self.updateState();  
40
+    NPGClient.Utils.setTxtStyle(ctx, self.s);
41
+    ctx.fillText(self.currText, self.x, self.y);    
42
+  }
43
+
44
+};
45
+
0 46
new file mode 100644
... ...
@@ -0,0 +1,19 @@
0
+/**
1
+ * @file ui_text_style.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UITextStyle = function(f, c, a) { 
6
+
7
+  this.font = f !== undefined ? f : '';
8
+  this.color = c !== undefined ? c : '';
9
+  this.align = a !== undefined ? a : '';
10
+
11
+};
12
+
13
+NPGClient.UITextStyle.prototype = {
14
+    
15
+  constructor: NPGClient.UITextStyle,
16
+    
17
+};
18
+
0 19
new file mode 100644
... ...
@@ -0,0 +1,57 @@
0
+/**
1
+ * @file utils.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.Utils = {
6
+
7
+  /**
8
+   * UI
9
+   */
10
+  //  
11
+  setTxtStyle : function(ctx, style) {
12
+    ctx.font = style.font;
13
+    ctx.fillStyle = style.col;       
14
+    ctx.textAlign = style.align;               
15
+  },      
16
+
17
+
18
+
19
+  /**
20
+   * User Name 
21
+   */
22
+  //  
23
+  addChar : function(key, name) {
24
+    if (name.length < NPGClient.NAMEMAXSIZE) {
25
+      name = name + String.fromCharCode(key).toLowerCase();   
26
+    }
27
+  },
28
+
29
+  //
30
+  removeChar : function(key) {
31
+    if (name.length > 0) {
32
+      name = name.substring(0, name.length - 1);      
33
+    }                                                               
34
+  },
35
+  
36
+  //
37
+  validChar : function(key) {
38
+    return NPGClient.evtHandler.loginValidKey(key);
39
+  },
40
+
41
+  //
42
+  validName : function(key) {
43
+    var len = name.length;
44
+      return (len >= 0 && len <= NPGClient.MAXNAMESIZE);
45
+  },              
46
+
47
+  //
48
+  resetName : function(name) {
49
+    name = '';
50
+  },
51
+
52
+
53
+
54
+
55
+
56
+}
... ...
@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "npg_app.js",
3
-  "version": "0.1.1",
3
+  "version": "0.1.2",
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.1',
7
+  VERSION : '0.1.2',
8 8
   HTTP: {
9 9
     host: '127.0.0.1',
10 10
     port: 8042
... ...
@@ -1,4 +1,18 @@
1 1
 
2
+### **v0.1.2:**
3
+-------------------------- 
4
+focus: client ui lib
5
+-------------------------- 
6
+---- added ui objects in /client/ui/objects
7
+ui_input_text.js
8
+ui_menu.js
9
+ui_status_text.js
10
+ui_text_style_.js
11
+---- Login page
12
+- changed convention for parameters in npg_client.js (by 'page' object)
13
+- title label and server status working 
14
+- skeletton for login name input
15
+
2 16
 
3 17
 ### **v0.1.1:**
4 18
 --------------------------