diff --git a/client/index.html b/client/index.html
index 528b37d..10672d3 100644
--- a/client/index.html
+++ b/client/index.html
@@ -17,6 +17,7 @@
+
diff --git a/client/lib/core/page_handler.js b/client/lib/core/page_handler.js
index 580b4d9..ecafe2e 100644
--- a/client/lib/core/page_handler.js
+++ b/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
//
diff --git a/client/lib/keyboard/event_handler.js b/client/lib/keyboard/event_handler.js
index 920823c..54daf6b 100644
--- a/client/lib/keyboard/event_handler.js
+++ b/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;
+ }
+ },
+
}
diff --git a/client/lib/npg_client.js b/client/lib/npg_client.js
index d95026b..3641e2b 100644
--- a/client/lib/npg_client.js
+++ b/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'
+ },
+ },
};
diff --git a/client/lib/ui/objects/ui_cursor.js b/client/lib/ui/objects/ui_cursor.js
index 5ce5112..035c15e 100644
--- a/client/lib/ui/objects/ui_cursor.js
+++ b/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
diff --git a/client/lib/ui/objects/ui_menu.js b/client/lib/ui/objects/ui_menu.js
index 634ff73..454c577 100644
--- a/client/lib/ui/objects/ui_menu.js
+++ b/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;
+ //
+ this.itemPadding = o.padding !== undefined ? o.padding : 0;
+ //
+ this.s = o.style !== undefined ? o.style : '';
// item list
- this.items = [];
+ //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 = {
-
- // Constructor
- constructor: NPGClient.UIMenu,
-
- //
- addItem: function(t) {
- var self = this;
- self.itemsList.push(t);
- },
+//
+NPGClient.UIMenu.prototype = Object.create(NPGClient.UIObject.prototype);
- //
- draw: function(ctx) {
- var self = this;
- var y = self.y
- if (self.items !== undefined && self.items.length > 0) {
- for (var i = 0; i < self.items.length; i++) {
- ctx.font = self.items[i].font;
- ctx.fillStyle = self.items[i].col;
- ctx.fillText(self.text, self.x, self.y);
- }
+//
+NPGClient.UIMenu.prototype.constructor = NPGClient.UIMenu;
+
+//
+NPGClient.UIMenu.prototype.addItem = function(t) {
+ var self = this;
+ self.items.push(t);
+};
+
+//
+NPGClient.UIMenu.prototype.selectPrevItem = function(t) {
+ var self = this;
+ 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.fillText(self.items[i], self.x, y + i*self.itemPadding);
+ }
+ }
+ // 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);
+ }
};
diff --git a/package.json b/package.json
index 047dcb4..6a2516e 100644
--- a/package.json
+++ b/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",
diff --git a/version.md b/version.md
index 4dd54ac..e73159a 100644
--- a/version.md
+++ b/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