Browse code

version 0.2.2

frtk authored on 25/02/2016 22:35:06
Showing 13 changed files
... ...
@@ -23,6 +23,7 @@
23 23
   <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>
24 24
   <script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
25 25
   <script type="text/javascript" src="./lib/ui/objects/ui_status_text.js"></script>
26
+  <script type="text/javascript" src="./lib/ui/objects/ui_status_value.js"></script>
26 27
   <script type="text/javascript" src="./lib/ui/objects/ui_input_text.js"></script>
27 28
   <script type="text/javascript" src="./lib/ui/objects/ui_cursor.js"></script>
28 29
 </head>
... ...
@@ -31,6 +31,16 @@ NPGClient.AppPage.prototype = {
31 31
     return self.uiElems;     
32 32
   },
33 33
 
34
+  //
35
+  hasUIElem: function(name) {
36
+    var self = this;
37
+    if (self.uiElems.length > 0) {
38
+      for (var i = 0; i < self.uiElems.length; i++)
39
+ 	if (self.uiElems[i].name == name) return true;
40
+    }
41
+    return false;
42
+  },
43
+
34 44
 
35 45
   //
36 46
   getUIElemByName: function(name) {
... ...
@@ -57,6 +57,21 @@ NPGClient.PageHandler = {
57 57
     return undefined;
58 58
   },
59 59
 
60
+  //
61
+  getUIElem: function(name) {
62
+    var self = this;
63
+    var elem = [];
64
+    if (self.pages.length > 0) {
65
+      for (var i = 0; i < self.pages.length; i++) {
66
+        elem = self.pages[i].getUIElems();
67
+        for (e in elem) {
68
+          if (elem[e].name == name) return elem[e]; 
69
+        }
70
+      }
71
+    }
72
+    return undefined;
73
+  },
74
+
60 75
   // @need rework
61 76
   getUIElemFromPage: function(elem, page) {
62 77
     var self = this;
... ...
@@ -82,6 +97,18 @@ NPGClient.PageHandler = {
82 82
     return undefined;
83 83
   },
84 84
 
85
+  // 
86
+  updateServerInfos: function() {
87
+    var self = this;   
88
+    // server infos
89
+    self.getUIElem('servinfo_users').update(NPGClient.SERVER.nPlayers);   
90
+    self.getUIElem('servinfo_games_running').update(NPGClient.SERVER.nGamesRunning);   
91
+    self.getUIElem('servinfo_games_avail').update(NPGClient.SERVER.nGamesAvail);   
92
+    
93
+  },
94
+
95
+
96
+
85 97
   // create login page
86 98
   createLoginPage: function() {
87 99
     //
... ...
@@ -89,7 +116,8 @@ NPGClient.PageHandler = {
89 89
     var self = this;
90 90
     var p = new NPGClient.AppPage(NPGClient.LOGIN.NAME);
91 91
     // Title label     
92
-    p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
92
+    //p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
93
+    p.addUIObject(new NPGClient.UILabel(NPGClient.LOGIN.TITLE));    
93 94
     // name input
94 95
     p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
95 96
     // Server status
... ...
@@ -108,11 +136,14 @@ NPGClient.PageHandler = {
108 108
     var self = this;
109 109
     var p = new NPGClient.AppPage(NPGClient.STARTMENU.NAME);
110 110
     // Title label     
111
-    p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.STARTMENU.TITLE));
111
+    //p.addUIObject(new NPGClient.UILabel('startmenu_title', NPGClient.STARTMENU.TITLE));
112
+    p.addUIObject(new NPGClient.UILabel(NPGClient.STARTMENU.TITLE));
112 113
     // Start Menu
113 114
     p.addUIObject(new NPGClient.UIMenu(NPGClient.STARTMENU.MENU));
114
-    // Server Players and Games status
115
-
115
+    // Server Players and Games info
116
+    p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_USERS));
117
+    p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_GAMES_RUNNING));
118
+    p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_GAMES_AVAIL));
116 119
     //
117 120
     self.pages.push(p);  
118 121
   },
... ...
@@ -78,6 +78,7 @@ NPGClient.evtHandler = {
78 78
         if (!NPGClient.Utils.nameEmpty()) {
79 79
           NPGClient.Utils.removeChar();
80 80
           NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
81
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').resetBlink();
81 82
         }
82 83
         break;
83 84
       default:
... ...
@@ -86,6 +87,7 @@ NPGClient.evtHandler = {
86 86
           NPGClient.Utils.addChar(evt.keyCode);
87 87
           newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
88 88
           NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
89
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').resetBlink();  
89 90
         }
90 91
         break;
91 92
     }
... ...
@@ -5,11 +5,31 @@
5 5
 
6 6
 var NPGClient = { 'version': '' };
7 7
 
8
+
9
+// LOGIN NAME
8 10
 NPGClient.NAMEMAXSIZE = 8;
9 11
 NPGClient.userName = '';
10 12
 
11 13
 
12
-// ui
14
+// SERVER INFOS
15
+NPGClient.SERVER = {
16
+  isUp: false,
17
+  nPlayers : 0,
18
+  nGamesRunning : 0,
19
+  nGamesAvail : 0,
20
+  gamesList : [],
21
+  updateInfos: function(data) {
22
+    var self = this;
23
+    self.nPlayers = data.infos.nUsers;
24
+    self.nGamesRunning = data.infos.nGamesRunning;
25
+    self.nGamesAvail = data.infos.nGamesAvail;
26
+    self.gamesList = [];
27
+    for (g in data.games) self.gamesList(data.games[g]);
28
+  }, 
29
+};
30
+
31
+
32
+// UI
13 33
 NPGClient.CAN_W = 800;
14 34
 NPGClient.CAN_H = 500;
15 35
 NPGClient.CAN_COL = '#000000';
... ...
@@ -51,6 +71,7 @@ NPGClient.LOGIN = {
51 51
     },
52 52
   },
53 53
   TITLE: {
54
+    'name': 'login_title',
54 55
     'text': 'nodePong',
55 56
     'x': 400,
56 57
     'y': 150,
... ...
@@ -93,6 +114,7 @@ NPGClient.LOGIN = {
93 93
 NPGClient.STARTMENU = {
94 94
   NAME: 'start_menu',
95 95
   TITLE: {
96
+    'name': 'start_menu_title',
96 97
     'text': 'nodePong',
97 98
     'x': 400,
98 99
     'y': 150,
... ...
@@ -132,19 +154,39 @@ NPGClient.STARTMENU = {
132 132
       }
133 133
     }
134 134
   },
135
-  SERVSTATUS: { 
136
-    'text': {
137
-      'online' : 'server: online',
138
-      'offline' : 'server: offline',
135
+  SERVINFO_USERS: { 
136
+   'name': 'servinfo_users',
137
+   'label': 'Users online:',
138
+    'x': 70,
139
+    'y': 470,
140
+    'style': { 
141
+      'font': '15px Monospace',
142
+      'col': '#FFFFFF',
143
+      'align': 'left'
139 144
     },
140
-    'x': 380,
141
-    'y': 250,
145
+  },
146
+  SERVINFO_GAMES_RUNNING: {
147
+   'name': 'servinfo_games_running', 
148
+   'label': 'Games running:',
149
+    'x': 400,
150
+    'y': 470,
142 151
     'style': { 
143
-      'font': '15px Arial',
152
+      'font': '15px Monospace',
144 153
       'col': '#FFFFFF',
145 154
       'align': 'center'
146 155
     },
147 156
   },
157
+  SERVINFO_GAMES_AVAIL: { 
158
+   'name': 'servinfo_games_avail',
159
+   'label': 'Games available:',
160
+    'x': 730,
161
+    'y': 470,
162
+    'style': { 
163
+      'font': '15px Monospace',
164
+      'col': '#FFFFFF',
165
+      'align': 'right'
166
+    },
167
+  },
148 168
 
149 169
 };
150 170
 
... ...
@@ -81,11 +81,17 @@ NPGClient.SocketIO = {
81 81
       self.isConnected = false;
82 82
     });      
83 83
 
84
+    // 'serverInfosUpdate'
85
+    self.socket.on('serverInfosUpdate', function(data) {
86
+      NPGClient.Utils.log(' > Server infos update. ' + data);
87
+      NPGClient.SERVER.updateInfos(data);
88
+      NPGClient.PageHandler.updateServerInfos();
89
+    });     
90
+
84 91
     // 'regDone'
85 92
     self.socket.on('regDone', function() {
86 93
       NPGClient.Utils.log(' > Server: User registration done');
87
-      //NPGClient.PageHandler.moveToPage(NPGClient.STARTMENU.NAME);
88
-	NPGClient.PageHandler.setCurrPage(NPGClient.STARTMENU.NAME);
94
+      NPGClient.PageHandler.setCurrPage(NPGClient.STARTMENU.NAME);
89 95
     });     
90 96
 
91 97
     // 'regNameTaken'
... ...
@@ -34,8 +34,18 @@ NPGClient.UICursor.prototype.constructor = NPGClient.UICursor;
34 34
 NPGClient.UICursor.prototype.reset = function() {
35 35
   var self = this;
36 36
   self.moveTo(self.x0, self.y0);
37
+  self.bState = true;
38
+  self.bCount = 0;
37 39
 }
38 40
 
41
+// resetBlink
42
+NPGClient.UICursor.prototype.resetBlink = function() {
43
+    var self = this;
44
+    self.bState = true;
45
+    self.bCount = 0;
46
+}
47
+
48
+
39 49
 // draw
40 50
 NPGClient.UICursor.prototype.draw = function(ctx) {
41 51
   var self = this;
... ...
@@ -3,35 +3,39 @@
3 3
  * @author frtk@tetalab
4 4
  */
5 5
 
6
-NPGClient.UILabel = function(n, o) { 
7
-
6
+NPGClient.UILabel = function(o) { 
7
+  // 
8
+  NPGClient.UIObject.call(this, o);
8 9
   // obj name
9
-  this.name = n !== undefined ? n : '';
10
-  // bkg rect
11
-  //this.bkg = r !== undefined ? r : new NPGClient.UIRect();
10
+  this.name = o.name !== undefined ? o.name : '';
12 11
   // pos
13 12
   this.x = o.x !== undefined ? o.x : 0; 
14 13
   this.y = o.y !== undefined ? o.y : 0; 
15
- 
16 14
   // text
17 15
   this.text = o.text !== undefined ? o.text : '';
18 16
   // text style
19
-  this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
17
+  this.s = o.style !== undefined ? o.style : '';
20 18
 
21 19
 };
22 20
 
23 21
 
24
-NPGClient.UILabel.prototype = {
22
+/**
23
+ * Inheritance
24
+ */
25
+NPGClient.UILabel.prototype = Object.create(NPGClient.UIObject.prototype);
26
+
25 27
 
26
-  // Constructor
27
-  constructor: NPGClient.UILabel,
28
-  
29
-  //
30
-  draw: function(ctx) {
31
-    var self = this;
32
-    NPGClient.Utils.setTxtStyle(ctx, self.s);
33
-    ctx.fillText(self.text, self.x, self.y);    
34
-  }
28
+/**
29
+ * Functions 
30
+ */
31
+//
32
+NPGClient.UILabel.prototype.constructor = NPGClient.UILabel;
33
+
34
+//
35
+NPGClient.UILabel.prototype.draw = function(ctx) {
36
+  var self = this;
37
+  NPGClient.Utils.setTxtStyle(ctx, self.s);
38
+  ctx.fillText(self.text, self.x, self.y);    
35 39
 
36 40
 };
37 41
 
... ...
@@ -56,6 +56,7 @@ NPGClient.UIMenu.prototype.selectPrevItem = function(t) {
56 56
     }
57 57
     if (self.hasCursor) {
58 58
       self.cursor.translateY(cShift);
59
+      self.cursor.resetBlink();
59 60
     }
60 61
   }   
61 62
 };
... ...
@@ -76,6 +77,7 @@ NPGClient.UIMenu.prototype.selectNextItem = function(t) {
76 76
     }
77 77
     if (self.hasCursor) {
78 78
       self.cursor.translateY(cShift);
79
+      self.cursor.resetBlink();
79 80
     }
80 81
   }   
81 82
 };
82 83
new file mode 100644
... ...
@@ -0,0 +1,52 @@
0
+/**
1
+ * @file ui_status_value.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIStatusValue = function(o) { 
6
+  // 
7
+  NPGClient.UIObject.call(this, o);
8
+  // obj name
9
+  this.name = o.name !== undefined ? o.name : '';
10
+  // pos
11
+  this.x = o.x !== undefined ? o.x : 0; 
12
+  this.y = o.y !== undefined ? o.y : 0; 
13
+  //
14
+  this.s = o.style !== undefined ? o.style : '';
15
+  // label
16
+  this.label = o.label !== undefined ? o.label : '';
17
+  // widget var value
18
+  this.value = 0;
19
+
20
+};
21
+
22
+
23
+/**
24
+ * Inheritance
25
+ */
26
+NPGClient.UIStatusValue.prototype = Object.create(NPGClient.UIObject.prototype);
27
+
28
+
29
+/**
30
+ * Functions 
31
+ */
32
+//
33
+NPGClient.UIStatusValue.prototype.constructor = NPGClient.UIStatusValue;
34
+ 
35
+//
36
+NPGClient.UIStatusValue.prototype.update = function(v) {
37
+  var self = this;
38
+  self.value = v;
39
+};
40
+
41
+//
42
+NPGClient.UIStatusValue.prototype.draw = function(ctx) {
43
+  var self = this;
44
+  NPGClient.Utils.setTxtStyle(ctx, self.s); 
45
+  //
46
+  var txt = self.label + ' ' + self.value;
47
+  //
48
+  ctx.fillText(txt, self.x, self.y);
49
+
50
+};
51
+
... ...
@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "npg_app.js",
3
-  "version": "0.2.1",
3
+  "version": "0.2.2",
4 4
   "description": "Multiplayer online Pong Game using nodejs and socket.io",
5 5
   "directories": {
6 6
     "server": "server",
... ...
@@ -123,13 +123,10 @@ var NPGServer = {
123 123
       self.log('Server: User name already taken - reseting client UI');     
124 124
     } else {
125 125
       self.createUser(data, socket);
126
+      self.updateAllClientsServerInfos();
127
+      //
128
+      self.sendMsgToSocket(socket, 'regDone');    
126 129
     }
127
-/*
128
-    self.updateClientsServerInfo();                      // update all clients info     
129
-    io.sockets.sockets[socketId].emit('playerCreated');  // send socket msg             
130
-    },
131
-*/
132
-
133 130
   },
134 131
 
135 132
   //
... ...
@@ -139,6 +136,8 @@ var NPGServer = {
139 139
     if (self.isUser(id)) { 
140 140
       self.log('[Client:' + id + '] User ' + u.name + ' disconnected');
141 141
       self.deleteUser(u.name);
142
+      //
143
+      self.updateAllClientsServerInfos();
142 144
     }
143 145
   },
144 146
 
... ...
@@ -207,13 +206,6 @@ var NPGServer = {
207 207
     self.users.push(new User(name, socket));
208 208
     self.log('Server: number of players: n= ' + self.users.length);
209 209
     self.log('Server: player registered, send user ' + name + ' to menu page.');
210
-    // send user auth 
211
-    self.sendMsgToSocket(socket, 'regDone');    
212
-  },
213
-
214
-  removeDuplicateUser: function(name) {
215
-    var self = this;
216
-    self.log('Server: player already registered, removing duplicate.');
217 210
   },
218 211
    
219 212
   //
... ...
@@ -229,6 +221,76 @@ var NPGServer = {
229 229
     }
230 230
   },
231 231
 
232
+
233
+
234
+  /**
235
+   *
236
+   * Server Infos (players and games)
237
+   *
238
+   */
239
+  //---
240
+  updateAllClientsServerInfos: function(socket) {
241
+    var self = this;
242
+    for (u in self.users) {
243
+      self.users[u].sendMsg('serverInfosUpdate', { infos: self.getServerInfos(), games: self.getGamesList() });
244
+    }
245
+    self.log('Server: updated server infos for all clients');
246
+  },
247
+
248
+  //---
249
+  updateClientServerInfos: function(socket) {
250
+    var self = this;
251
+    socket.emit('serverInfosUpdate', { infos: self.getServerInfos(), games: self.getGamesList() });
252
+    self.log('Server: update client server info');
253
+  },
254
+
255
+ //---
256
+  getServerInfos: function() {
257
+    var self = this;
258
+    return {
259
+      nUsers: self.nPlayers(),
260
+      nGamesRunning: self.nGamesRunning(),
261
+      nGamesAvail: self.nGamesAvail()
262
+    } 
263
+  },
264
+ 
265
+  //---
266
+  getGamesList: function() {
267
+    var self = this;
268
+    var res = [];
269
+    for (g in self.games) {
270
+      res.push(self.games[g].getHostName());
271
+    } 
272
+    return res;
273
+  },
274
+    
275
+  //---
276
+  nPlayers: function() {
277
+    var self = this;
278
+    return self.users.length;
279
+  },
280
+    
281
+  //---
282
+  nGamesRunning: function() {
283
+    var self = this;
284
+    var n = 0;
285
+    for (g in self.games) {
286
+      if (self.games[g].status == 'running') n++;
287
+    }  
288
+    return n;
289
+  },
290
+
291
+  //---
292
+  nGamesAvail: function() {
293
+    var self = this;
294
+    var n = 0;
295
+    for (g in self.games) {
296
+      if (self.games[g].status == 'available') n++;
297
+    }  
298
+    return n;
299
+  },
300
+
301
+
232 302
 };
233 303
 
234 304
 
... ...
@@ -240,13 +302,11 @@ var NPGServer = {
240 240
  *
241 241
  */
242 242
 var User = function(name, socket) {
243
-
244 243
   //
245 244
   this.name = (name !== undefined) ? name : '';  
246 245
   this.socket = (socket !== undefined) ? socket : '';  
247 246
   //
248 247
   this.status = '';
249
-
250 248
 };
251 249
 //
252 250
 User.prototype.constructor = User;
... ...
@@ -1,4 +1,26 @@
1 1
 
2
+
3
+# **v0.2.2:**
4
+## focus: Start Menu Page
5
+--------------------------
6
+### client objects update
7
+- UICursor: added resetBlink() function to reset blink on menu item change (to avoid "shadow" cursor)
8
+- UIMenu: added cursor resetBlink() in select next/previous item function
9
+- UILabel: added UIObject inheritance and changed param initialization
10
+
11
+### client objects creation
12
+- UIStatusValue: ui element to display server infos (number of users, games running and games available) 
13
+
14
+### client start menu page
15
+- added 3 UIStatusValue elements
16
+- all 3 elements are updated within the page_handler
17
+
18
+### server 
19
+- added server infos update for all clients when a user register or disconnect
20
+
21
+
22
+
23
+
2 24
 # **v0.2.1:**
3 25
 ## focus: Start Menu Page
4 26
 --------------------------