Browse code

v0.2.1

frtk authored on 20/02/2016 18:11:56
Showing 8 changed files
... ...
@@ -17,6 +17,7 @@
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 19
   <script type="text/javascript" src="./lib/ui/objects/ui_object.js"></script>
20
+  <script type="text/javascript" src="./lib/ui/objects/ui_menu.js"></script>
20 21
   <script type="text/javascript" src="./lib/ui/objects/ui_style.js"></script>
21 22
   <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
22 23
   <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>
... ...
@@ -95,7 +95,7 @@ NPGClient.PageHandler = {
95 95
     // Server status
96 96
     p.addUIObject(new NPGClient.UIStatusText('login_servstat', NPGClient.LOGIN.SERVSTATUS));    
97 97
     // test cursor
98
-    p.addUIObject(new NPGClient.UICursor('login_cursor', NPGClient.LOGIN.CURSOR)); 
98
+    p.addUIObject(new NPGClient.UICursor(NPGClient.LOGIN.CURSOR)); 
99 99
     //
100 100
     self.pages.push(p);  
101 101
   },
... ...
@@ -110,7 +110,7 @@ NPGClient.PageHandler = {
110 110
     // Title label     
111 111
     p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.STARTMENU.TITLE));
112 112
     // Start Menu
113
-
113
+    p.addUIObject(new NPGClient.UIMenu(NPGClient.STARTMENU.MENU));
114 114
     // Server Players and Games status
115 115
 
116 116
     //
... ...
@@ -43,6 +43,9 @@ NPGClient.evtHandler = {
43 43
         case NPGClient.LOGIN.NAME:
44 44
           self.userLogin(evt);            
45 45
           break;
46
+        case NPGClient.STARTMENU.NAME:
47
+          self.startMenu(evt);            
48
+          break;
46 49
         default:
47 50
           break;
48 51
       }
... ...
@@ -86,6 +89,44 @@ NPGClient.evtHandler = {
86 86
         }
87 87
         break;
88 88
     }
89
-  }
89
+  },
90
+
91
+
92
+  /*
93
+   * 
94
+   */
95
+  //
96
+  startMenu : function(evt) {
97
+    var self = this;
98
+    switch (evt.keyCode) {		
99
+      case NPGClient.KEYS.ARROW_DOWN :
100
+        NPGClient.PageHandler.getCurrPageUIElemByName(NPGClient.STARTMENU.MENU.name).selectNextItem();
101
+        break;
102
+      case NPGClient.KEYS.ARROW_UP :
103
+        NPGClient.PageHandler.getCurrPageUIElemByName(NPGClient.STARTMENU.MENU.name).selectPrevItem();
104
+        break;
105
+      case NPGClient.KEYS.ENTER :
106
+        //
107
+/* 
108
+        switch (self.cursor.menuItemRef.NAME) {
109
+          case 'CREATE':
110
+            self.socket.emit('createGame');
111
+            break;
112
+          case 'JOIN':
113
+            self.socket.emit('joinGameMenu');
114
+            break;
115
+          case 'WATCH':
116
+            self.socket.emit('watchGameMenu');
117
+            break;
118
+          default:
119
+            break;
120
+        }
121
+        break;
122
+*/
123
+      default:
124
+        break;
125
+    }	
126
+  },
127
+
90 128
 
91 129
 }
... ...
@@ -71,6 +71,7 @@ NPGClient.LOGIN = {
71 71
     }
72 72
   }, 
73 73
   CURSOR: {
74
+    'name': 'login_cursor',
74 75
     'w': 19,
75 76
     'h': 19,
76 77
     'x': 390,
... ...
@@ -91,29 +92,59 @@ NPGClient.LOGIN = {
91 91
  */
92 92
 NPGClient.STARTMENU = {
93 93
   NAME: 'start_menu',
94
+  TITLE: {
95
+    'text': 'nodePong',
96
+    'x': 400,
97
+    'y': 150,
98
+    'style': { 
99
+      'font': '50px Arial',
100
+      'col': '#FFFFFF',
101
+      'align': 'center'
102
+    }
103
+  },
104
+  MENU: {
105
+    'name': 'start_menu',
106
+    'x': 350,
107
+    'y': 250,
108
+    'items': [
109
+	'create game',
110
+	'join game',
111
+        'spectate game'
112
+    ],
113
+    'padding': 40,
114
+    'style': { 
115
+      'font': '25px Monospace',
116
+      'col': '#FFFFFF',
117
+      'align': 'left'
118
+    },
119
+    'cursor': {
120
+      'name': 'start_menu_cursor',
121
+      'w': 19,
122
+      'h': 19,
123
+      'x': 320,
124
+      'y': 233,
125
+      'style': { 
126
+        'fm': true,
127
+        'fc': '#FFFFFF',
128
+        'bm': false,
129
+        'bw': 0,
130
+        'bc': '',
131
+      }
132
+    }
133
+  },
94 134
   SERVSTATUS: { 
95 135
     'text': {
96 136
       'online' : 'server: online',
97 137
       'offline' : 'server: offline',
98 138
     },
99
-    'x': 400,
100
-    'y': 450,
139
+    'x': 380,
140
+    'y': 250,
101 141
     'style': { 
102 142
       'font': '15px Arial',
103 143
       'col': '#FFFFFF',
104 144
       'align': 'center'
105 145
     },
106 146
   },
107
-  TITLE: {
108
-    'text': 'nodePong',
109
-    'x': 400,
110
-    'y': 150,
111
-    'style': { 
112
-      'font': '50px Arial',
113
-      'col': '#FFFFFF',
114
-      'align': 'center'
115
-    }
116
-  },
117 147
 
118 148
 };
119 149
 
... ...
@@ -3,13 +3,13 @@
3 3
  * @author frtk@tetalab
4 4
  */
5 5
 
6
-NPGClient.UICursor = function(n, o) { 
6
+NPGClient.UICursor = function(o) { 
7 7
 
8 8
   // inheritance
9 9
   NPGClient.UIObject.call(this, o);
10 10
 
11 11
   // obj name
12
-  this.name = n !== undefined ? n : '';
12
+  this.name = o.name !== undefined ? o.name : '';
13 13
   this.w = o.w !== undefined ? o.w : 0;
14 14
   this.h = o.h !== undefined ? o.h : 0;
15 15
   // starting position
... ...
@@ -3,47 +3,103 @@
3 3
  * @author frtk@tetalab
4 4
  */
5 5
 
6
-NPGClient.UIMenu = function(n, o) { 
7
-
6
+NPGClient.UIMenu = function(o) { 
7
+  // 
8
+  NPGClient.UIObject.call(this, o);
8 9
   // obj name
9
-  this.name = n !== undefined ? n : '';
10
+  this.name = o.name !== undefined ? o.name : '';
10 11
   // type (vertical/horizontal)
11 12
   this.type = o.type !== undefined ? o.type : ''; 
12 13
   // pos
13 14
   this.x = o.x !== undefined ? o.x : 0; 
14 15
   this.y = o.y !== undefined ? o.y : 0; 
16
+  // 
17
+  this.itemPadding = o.padding !== undefined ? o.padding : 0;
18
+  //
19
+  this.s = o.style !== undefined ? o.style : '';
15 20
   // item list 
16
-  this.items = [];
21
+  //console.log(o.items + ' ' + o.items.length);
22
+  this.items = o.items !== undefined ? o.items : [];
23
+  //console.log(this.items + ' ' + this.items.length);
24
+  // selected item
25
+  this.currItemIdx = 0; 
17 26
   //
18
-  
27
+  this.hasCursor = o.cursor !== undefined ? true : false;
28
+  this.cursor = o.cursor !== undefined ? new NPGClient.UICursor(o.cursor) : {};
19 29
 
20 30
 };
21 31
 
22
-NPGClient.UIMenu.prototype = {
23
-   
24
-  // Constructor
25
-  constructor: NPGClient.UIMenu,
26
-    
27
-  //
28
-  addItem: function(t) {
29
-    var self = this;
30
-    self.itemsList.push(t);   
31
-  },
32
+//
33
+NPGClient.UIMenu.prototype = Object.create(NPGClient.UIObject.prototype);
32 34
 
33
-  //
34
-  draw: function(ctx) {
35
-    var self = this;
36
-    var y = self.y  
37
-    if (self.items !== undefined && self.items.length > 0) {
38
-      for (var i = 0; i < self.items.length; i++) {
39
-        ctx.font = self.items[i].font;
40
-        ctx.fillStyle = self.items[i].col;
41
-        ctx.fillText(self.text, self.x, self.y);
42
-      }      
35
+//
36
+NPGClient.UIMenu.prototype.constructor = NPGClient.UIMenu;
37
+ 
38
+// 
39
+NPGClient.UIMenu.prototype.addItem = function(t) {
40
+  var self = this;
41
+  self.items.push(t);   
42
+};
43
+
44
+// 
45
+NPGClient.UIMenu.prototype.selectPrevItem = function(t) {
46
+  var self = this;
47
+  var n = self.items.length;
48
+  var cShift = 0;
49
+  if (n != 0) {
50
+    if (self.currItemIdx == 0) {
51
+      self.currItemIdx = n - 1; 
52
+      cShift = self.currItemIdx*self.itemPadding; 
53
+    } else {
54
+      self.currItemIdx--;
55
+      cShift = -1*self.itemPadding;    
56
+    }
57
+    if (self.hasCursor) {
58
+      self.cursor.translateY(cShift);
43 59
     }
44
-  },
60
+  }   
61
+};
62
+
63
+
64
+// 
65
+NPGClient.UIMenu.prototype.selectNextItem = function(t) {
66
+  var self = this;
67
+  var n = self.items.length;
68
+  var cShift = 0;
69
+  if (n != 0) {
70
+    if (self.currItemIdx == n - 1) {
71
+      self.currItemIdx = 0;
72
+      cShift = -1*(n - 1)*self.itemPadding; 
73
+    } else {
74
+      self.currItemIdx++;
75
+      cShift = self.itemPadding;    
76
+    }
77
+    if (self.hasCursor) {
78
+      self.cursor.translateY(cShift);
79
+    }
80
+  }   
81
+};
45 82
 
46 83
 
84
+//
85
+NPGClient.UIMenu.prototype.draw = function(ctx) {
86
+  var self = this;
87
+  var y = self.y;  
88
+  var ycurs = 0;
89
+  NPGClient.Utils.setTxtStyle(ctx, self.s); 
90
+  // menu
91
+  if (self.items !== undefined && self.items.length > 0) {
92
+    for (var i = 0; i < self.items.length; i++) {
93
+      ctx.fillText(self.items[i], self.x, y + i*self.itemPadding);
94
+    }      
95
+  }
96
+  // cursor if needed
97
+  //var yc = 0;
98
+  if (self.hasCursor) {
99
+    //yc = self.cursor.y + self.cursorMov*self.itemPadding;  
100
+    //self.cursor.translateY(yc);
101
+    self.cursor.draw(ctx);  
102
+  }
47 103
 
48 104
 };
49 105
 
... ...
@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "npg_app.js",
3
-  "version": "0.1.5",
3
+  "version": "0.2.1",
4 4
   "description": "Multiplayer online Pong Game using nodejs and socket.io",
5 5
   "directories": {
6 6
     "server": "server",
... ...
@@ -1,6 +1,17 @@
1 1
 
2
+# **v0.2.1:**
3
+## focus: Start Menu Page
4
+--------------------------
5
+### client
6
+- Added ui_menu.js (UIMenu object)
7
+- Added cursor handling in UIMenu object
8
+- Implemented cursor on "start menu" page 
9
+fixed start menu (join/create/spectate)
10
+
11
+
12
+
2 13
 # **v0.2.0:**
3
-##focus: Start Menu Page
14
+## focus: Start Menu Page
4 15
 --------------------------
5 16
 ### client
6 17
 - create start menu page skeletton with title