Browse Source

version 0.2.2

frtk 4 years ago
parent
commit
babb856b83

+ 1
- 0
client/index.html View File

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

+ 10
- 0
client/lib/core/page_base.js View File

@@ -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) {

+ 35
- 4
client/lib/core/page_handler.js View File

@@ -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 97
     return undefined;
83 98
   },
84 99
 
100
+  // 
101
+  updateServerInfos: function() {
102
+    var self = this;   
103
+    // server infos
104
+    self.getUIElem('servinfo_users').update(NPGClient.SERVER.nPlayers);   
105
+    self.getUIElem('servinfo_games_running').update(NPGClient.SERVER.nGamesRunning);   
106
+    self.getUIElem('servinfo_games_avail').update(NPGClient.SERVER.nGamesAvail);   
107
+    
108
+  },
109
+
110
+
111
+
85 112
   // create login page
86 113
   createLoginPage: function() {
87 114
     //
@@ -89,7 +116,8 @@ NPGClient.PageHandler = {
89 116
     var self = this;
90 117
     var p = new NPGClient.AppPage(NPGClient.LOGIN.NAME);
91 118
     // Title label     
92
-    p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
119
+    //p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
120
+    p.addUIObject(new NPGClient.UILabel(NPGClient.LOGIN.TITLE));    
93 121
     // name input
94 122
     p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
95 123
     // Server status
@@ -108,11 +136,14 @@ NPGClient.PageHandler = {
108 136
     var self = this;
109 137
     var p = new NPGClient.AppPage(NPGClient.STARTMENU.NAME);
110 138
     // Title label     
111
-    p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.STARTMENU.TITLE));
139
+    //p.addUIObject(new NPGClient.UILabel('startmenu_title', NPGClient.STARTMENU.TITLE));
140
+    p.addUIObject(new NPGClient.UILabel(NPGClient.STARTMENU.TITLE));
112 141
     // Start Menu
113 142
     p.addUIObject(new NPGClient.UIMenu(NPGClient.STARTMENU.MENU));
114
-    // Server Players and Games status
115
-
143
+    // Server Players and Games info
144
+    p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_USERS));
145
+    p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_GAMES_RUNNING));
146
+    p.addUIObject(new NPGClient.UIStatusValue(NPGClient.STARTMENU.SERVINFO_GAMES_AVAIL));
116 147
     //
117 148
     self.pages.push(p);  
118 149
   },

+ 2
- 0
client/lib/keyboard/event_handler.js View File

@@ -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 87
           NPGClient.Utils.addChar(evt.keyCode);
87 88
           newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
88 89
           NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
90
+          NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').resetBlink();  
89 91
         }
90 92
         break;
91 93
     }

+ 50
- 8
client/lib/npg_client.js View File

@@ -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 71
     },
52 72
   },
53 73
   TITLE: {
74
+    'name': 'login_title',
54 75
     'text': 'nodePong',
55 76
     'x': 400,
56 77
     'y': 150,
@@ -93,6 +114,7 @@ NPGClient.LOGIN = {
93 114
 NPGClient.STARTMENU = {
94 115
   NAME: 'start_menu',
95 116
   TITLE: {
117
+    'name': 'start_menu_title',
96 118
     'text': 'nodePong',
97 119
     'x': 400,
98 120
     'y': 150,
@@ -132,19 +154,39 @@ NPGClient.STARTMENU = {
132 154
       }
133 155
     }
134 156
   },
135
-  SERVSTATUS: { 
136
-    'text': {
137
-      'online' : 'server: online',
138
-      'offline' : 'server: offline',
157
+  SERVINFO_USERS: { 
158
+   'name': 'servinfo_users',
159
+   'label': 'Users online:',
160
+    'x': 70,
161
+    'y': 470,
162
+    'style': { 
163
+      'font': '15px Monospace',
164
+      'col': '#FFFFFF',
165
+      'align': 'left'
139 166
     },
140
-    'x': 380,
141
-    'y': 250,
167
+  },
168
+  SERVINFO_GAMES_RUNNING: {
169
+   'name': 'servinfo_games_running', 
170
+   'label': 'Games running:',
171
+    'x': 400,
172
+    'y': 470,
142 173
     'style': { 
143
-      'font': '15px Arial',
174
+      'font': '15px Monospace',
144 175
       'col': '#FFFFFF',
145 176
       'align': 'center'
146 177
     },
147 178
   },
179
+  SERVINFO_GAMES_AVAIL: { 
180
+   'name': 'servinfo_games_avail',
181
+   'label': 'Games available:',
182
+    'x': 730,
183
+    'y': 470,
184
+    'style': { 
185
+      'font': '15px Monospace',
186
+      'col': '#FFFFFF',
187
+      'align': 'right'
188
+    },
189
+  },
148 190
 
149 191
 };
150 192
 

+ 8
- 2
client/lib/socket/socketio_handler.js View File

@@ -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'

+ 10
- 0
client/lib/ui/objects/ui_cursor.js View File

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

+ 21
- 17
client/lib/ui/objects/ui_label.js View File

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

+ 2
- 0
client/lib/ui/objects/ui_menu.js View File

@@ -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 77
     }
77 78
     if (self.hasCursor) {
78 79
       self.cursor.translateY(cShift);
80
+      self.cursor.resetBlink();
79 81
     }
80 82
   }   
81 83
 };

+ 52
- 0
client/lib/ui/objects/ui_status_value.js View File

@@ -0,0 +1,52 @@
1
+/**
2
+ * @file ui_status_value.js
3
+ * @author frtk@tetalab
4
+ */
5
+
6
+NPGClient.UIStatusValue = function(o) { 
7
+  // 
8
+  NPGClient.UIObject.call(this, o);
9
+  // obj name
10
+  this.name = o.name !== undefined ? o.name : '';
11
+  // pos
12
+  this.x = o.x !== undefined ? o.x : 0; 
13
+  this.y = o.y !== undefined ? o.y : 0; 
14
+  //
15
+  this.s = o.style !== undefined ? o.style : '';
16
+  // label
17
+  this.label = o.label !== undefined ? o.label : '';
18
+  // widget var value
19
+  this.value = 0;
20
+
21
+};
22
+
23
+
24
+/**
25
+ * Inheritance
26
+ */
27
+NPGClient.UIStatusValue.prototype = Object.create(NPGClient.UIObject.prototype);
28
+
29
+
30
+/**
31
+ * Functions 
32
+ */
33
+//
34
+NPGClient.UIStatusValue.prototype.constructor = NPGClient.UIStatusValue;
35
+ 
36
+//
37
+NPGClient.UIStatusValue.prototype.update = function(v) {
38
+  var self = this;
39
+  self.value = v;
40
+};
41
+
42
+//
43
+NPGClient.UIStatusValue.prototype.draw = function(ctx) {
44
+  var self = this;
45
+  NPGClient.Utils.setTxtStyle(ctx, self.s); 
46
+  //
47
+  var txt = self.label + ' ' + self.value;
48
+  //
49
+  ctx.fillText(txt, self.x, self.y);
50
+
51
+};
52
+

+ 1
- 1
package.json View File

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

+ 75
- 15
server/npg_server.js View File

@@ -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 136
     if (self.isUser(id)) { 
140 137
       self.log('[Client:' + id + '] User ' + u.name + ' disconnected');
141 138
       self.deleteUser(u.name);
139
+      //
140
+      self.updateAllClientsServerInfos();
142 141
     }
143 142
   },
144 143
 
@@ -207,13 +206,6 @@ var NPGServer = {
207 206
     self.users.push(new User(name, socket));
208 207
     self.log('Server: number of players: n= ' + self.users.length);
209 208
     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 209
   },
218 210
    
219 211
   //
@@ -229,6 +221,76 @@ var NPGServer = {
229 221
     }
230 222
   },
231 223
 
224
+
225
+
226
+  /**
227
+   *
228
+   * Server Infos (players and games)
229
+   *
230
+   */
231
+  //---
232
+  updateAllClientsServerInfos: function(socket) {
233
+    var self = this;
234
+    for (u in self.users) {
235
+      self.users[u].sendMsg('serverInfosUpdate', { infos: self.getServerInfos(), games: self.getGamesList() });
236
+    }
237
+    self.log('Server: updated server infos for all clients');
238
+  },
239
+
240
+  //---
241
+  updateClientServerInfos: function(socket) {
242
+    var self = this;
243
+    socket.emit('serverInfosUpdate', { infos: self.getServerInfos(), games: self.getGamesList() });
244
+    self.log('Server: update client server info');
245
+  },
246
+
247
+ //---
248
+  getServerInfos: function() {
249
+    var self = this;
250
+    return {
251
+      nUsers: self.nPlayers(),
252
+      nGamesRunning: self.nGamesRunning(),
253
+      nGamesAvail: self.nGamesAvail()
254
+    } 
255
+  },
256
+ 
257
+  //---
258
+  getGamesList: function() {
259
+    var self = this;
260
+    var res = [];
261
+    for (g in self.games) {
262
+      res.push(self.games[g].getHostName());
263
+    } 
264
+    return res;
265
+  },
266
+    
267
+  //---
268
+  nPlayers: function() {
269
+    var self = this;
270
+    return self.users.length;
271
+  },
272
+    
273
+  //---
274
+  nGamesRunning: function() {
275
+    var self = this;
276
+    var n = 0;
277
+    for (g in self.games) {
278
+      if (self.games[g].status == 'running') n++;
279
+    }  
280
+    return n;
281
+  },
282
+
283
+  //---
284
+  nGamesAvail: function() {
285
+    var self = this;
286
+    var n = 0;
287
+    for (g in self.games) {
288
+      if (self.games[g].status == 'available') n++;
289
+    }  
290
+    return n;
291
+  },
292
+
293
+
232 294
 };
233 295
 
234 296
 
@@ -240,13 +302,11 @@ var NPGServer = {
240 302
  *
241 303
  */
242 304
 var User = function(name, socket) {
243
-
244 305
   //
245 306
   this.name = (name !== undefined) ? name : '';  
246 307
   this.socket = (socket !== undefined) ? socket : '';  
247 308
   //
248 309
   this.status = '';
249
-
250 310
 };
251 311
 //
252 312
 User.prototype.constructor = User;

+ 22
- 0
version.md View File

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

Loading…
Cancel
Save