v0.2.1

client/index.html

@@ -17,6 +17,7 @@
   <script type="text/javascript" src="./lib/core/page_handler.js"></script>
   <script type="text/javascript" src="./lib/ui/ui.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_object.js"></script>
+  <script type="text/javascript" src="./lib/ui/objects/ui_menu.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_style.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
   <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>

client/lib/core/page_handler.js

@@ -95,7 +95,7 @@ NPGClient.PageHandler = {
     // Server status
     p.addUIObject(new NPGClient.UIStatusText('login_servstat', NPGClient.LOGIN.SERVSTATUS));    
     // test cursor
-    p.addUIObject(new NPGClient.UICursor('login_cursor', NPGClient.LOGIN.CURSOR)); 
+    p.addUIObject(new NPGClient.UICursor(NPGClient.LOGIN.CURSOR)); 
     //
     self.pages.push(p);  
   },
@@ -110,7 +110,7 @@ NPGClient.PageHandler = {
     // Title label     
     p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.STARTMENU.TITLE));
     // Start Menu
-
+    p.addUIObject(new NPGClient.UIMenu(NPGClient.STARTMENU.MENU));
     // Server Players and Games status
 
     //

client/lib/keyboard/event_handler.js

@@ -43,6 +43,9 @@ NPGClient.evtHandler = {
         case NPGClient.LOGIN.NAME:
           self.userLogin(evt);            
           break;
+        case NPGClient.STARTMENU.NAME:
+          self.startMenu(evt);            
+          break;
         default:
           break;
       }
@@ -86,6 +89,44 @@ NPGClient.evtHandler = {
         }
         break;
     }
+  },
+
+
+  /*
+   * 
+   */
+  //
+  startMenu : function(evt) {
+    var self = this;
+    switch (evt.keyCode) {		
+      case NPGClient.KEYS.ARROW_DOWN :
+        NPGClient.PageHandler.getCurrPageUIElemByName(NPGClient.STARTMENU.MENU.name).selectNextItem();
+        break;
+      case NPGClient.KEYS.ARROW_UP :
+        NPGClient.PageHandler.getCurrPageUIElemByName(NPGClient.STARTMENU.MENU.name).selectPrevItem();
+        break;
+      case NPGClient.KEYS.ENTER :
+        //
+/* 
+        switch (self.cursor.menuItemRef.NAME) {
+          case 'CREATE':
+            self.socket.emit('createGame');
+            break;
+          case 'JOIN':
+            self.socket.emit('joinGameMenu');
+            break;
+          case 'WATCH':
+            self.socket.emit('watchGameMenu');
+            break;
+          default:
+            break;
         }
+        break;
+*/
+      default:
+        break;
+    }	
+  },
+
 
 }

client/lib/npg_client.js

@@ -71,6 +71,7 @@ NPGClient.LOGIN = {
     }
   }, 
   CURSOR: {
+    'name': 'login_cursor',
     'w': 19,
     'h': 19,
     'x': 390,
@@ -91,19 +92,6 @@ NPGClient.LOGIN = {
  */
 NPGClient.STARTMENU = {
   NAME: 'start_menu',
-  SERVSTATUS: { 
-    'text': {
-      'online' : 'server: online',
-      'offline' : 'server: offline',
-    },
-    'x': 400,
-    'y': 450,
-    'style': { 
-      'font': '15px Arial',
-      'col': '#FFFFFF',
-      'align': 'center'
-    },
-  },
   TITLE: {
     'text': 'nodePong',
     'x': 400,
@@ -114,6 +102,49 @@ NPGClient.STARTMENU = {
       'align': 'center'
     }
   },
+  MENU: {
+    'name': 'start_menu',
+    'x': 350,
+    'y': 250,
+    'items': [
+	'create game',
+	'join game',
+        'spectate game'
+    ],
+    'padding': 40,
+    'style': { 
+      'font': '25px Monospace',
+      'col': '#FFFFFF',
+      'align': 'left'
+    },
+    'cursor': {
+      'name': 'start_menu_cursor',
+      'w': 19,
+      'h': 19,
+      'x': 320,
+      'y': 233,
+      'style': { 
+        'fm': true,
+        'fc': '#FFFFFF',
+        'bm': false,
+        'bw': 0,
+        'bc': '',
+      }
+    }
+  },
+  SERVSTATUS: { 
+    'text': {
+      'online' : 'server: online',
+      'offline' : 'server: offline',
+    },
+    'x': 380,
+    'y': 250,
+    'style': { 
+      'font': '15px Arial',
+      'col': '#FFFFFF',
+      'align': 'center'
+    },
+  },
 
 };
 

client/lib/ui/objects/ui_cursor.js

@@ -3,13 +3,13 @@
  * @author frtk@tetalab
  */
 
-NPGClient.UICursor = function(n, o) { 
+NPGClient.UICursor = function(o) { 
 
   // inheritance
   NPGClient.UIObject.call(this, o);
 
   // obj name
-  this.name = n !== undefined ? n : '';
+  this.name = o.name !== undefined ? o.name : '';
   this.w = o.w !== undefined ? o.w : 0;
   this.h = o.h !== undefined ? o.h : 0;
   // starting position

client/lib/ui/objects/ui_menu.js

@@ -3,47 +3,103 @@
  * @author frtk@tetalab
  */
 
-NPGClient.UIMenu = function(n, o) { 
+NPGClient.UIMenu = function(o) { 
-
+  // 
+  NPGClient.UIObject.call(this, o);
   // obj name
-  this.name = n !== undefined ? n : '';
+  this.name = o.name !== undefined ? o.name : '';
   // type (vertical/horizontal)
   this.type = o.type !== undefined ? o.type : ''; 
   // pos
   this.x = o.x !== undefined ? o.x : 0; 
   this.y = o.y !== undefined ? o.y : 0; 
-  // item list 
-  this.items = [];
   // 
-  
+  this.itemPadding = o.padding !== undefined ? o.padding : 0;
+  //
+  this.s = o.style !== undefined ? o.style : '';
+  // item list 
+  //console.log(o.items + ' ' + o.items.length);
+  this.items = o.items !== undefined ? o.items : [];
+  //console.log(this.items + ' ' + this.items.length);
+  // selected item
+  this.currItemIdx = 0; 
+  //
+  this.hasCursor = o.cursor !== undefined ? true : false;
+  this.cursor = o.cursor !== undefined ? new NPGClient.UICursor(o.cursor) : {};
 
 };
 
-NPGClient.UIMenu.prototype = {
+//
+NPGClient.UIMenu.prototype = Object.create(NPGClient.UIObject.prototype);
 
-  // Constructor
+//
-  constructor: NPGClient.UIMenu,
+NPGClient.UIMenu.prototype.constructor = NPGClient.UIMenu;
  
-  //
+// 
-  addItem: function(t) {
+NPGClient.UIMenu.prototype.addItem = function(t) {
   var self = this;
-    self.itemsList.push(t);   
+  self.items.push(t);   
-  },
+};
 
-  //
+// 
-  draw: function(ctx) {
+NPGClient.UIMenu.prototype.selectPrevItem = function(t) {
   var self = this;
-    var y = self.y  
+  var n = self.items.length;
+  var cShift = 0;
+  if (n != 0) {
+    if (self.currItemIdx == 0) {
+      self.currItemIdx = n - 1; 
+      cShift = self.currItemIdx*self.itemPadding; 
+    } else {
+      self.currItemIdx--;
+      cShift = -1*self.itemPadding;    
+    }
+    if (self.hasCursor) {
+      self.cursor.translateY(cShift);
+    }
+  }   
+};
+
+
+// 
+NPGClient.UIMenu.prototype.selectNextItem = function(t) {
+  var self = this;
+  var n = self.items.length;
+  var cShift = 0;
+  if (n != 0) {
+    if (self.currItemIdx == n - 1) {
+      self.currItemIdx = 0;
+      cShift = -1*(n - 1)*self.itemPadding; 
+    } else {
+      self.currItemIdx++;
+      cShift = self.itemPadding;    
+    }
+    if (self.hasCursor) {
+      self.cursor.translateY(cShift);
+    }
+  }   
+};
+
+
+//
+NPGClient.UIMenu.prototype.draw = function(ctx) {
+  var self = this;
+  var y = self.y;  
+  var ycurs = 0;
+  NPGClient.Utils.setTxtStyle(ctx, self.s); 
+  // menu
   if (self.items !== undefined && self.items.length > 0) {
     for (var i = 0; i < self.items.length; i++) {
-        ctx.font = self.items[i].font;
+      ctx.fillText(self.items[i], self.x, y + i*self.itemPadding);
-        ctx.fillStyle = self.items[i].col;
-        ctx.fillText(self.text, self.x, self.y);
     }      
   }
-  },
+  // cursor if needed
-
+  //var yc = 0;
-
+  if (self.hasCursor) {
+    //yc = self.cursor.y + self.cursorMov*self.itemPadding;  
+    //self.cursor.translateY(yc);
+    self.cursor.draw(ctx);  
+  }
 
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "npg_app.js",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Multiplayer online Pong Game using nodejs and socket.io",
   "directories": {
     "server": "server",

version.md

@@ -1,6 +1,17 @@
 
+# **v0.2.1:**
+## focus: Start Menu Page
+--------------------------
+### client
+- Added ui_menu.js (UIMenu object)
+- Added cursor handling in UIMenu object
+- Implemented cursor on "start menu" page 
+fixed start menu (join/create/spectate)
+
+
+
 # **v0.2.0:**
-##focus: Start Menu Page
+## focus: Start Menu Page
 --------------------------
 ### client
 - create start menu page skeletton with title