This commit is contained in:
frtk 2016-02-20 19:11:56 +01:00
parent 9431bb259a
commit 2636cf3db7
8 changed files with 186 additions and 46 deletions

View File

@ -17,6 +17,7 @@
<script type="text/javascript" src="./lib/core/page_handler.js"></script> <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/ui.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_object.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_style.js"></script>
<script type="text/javascript" src="./lib/ui/objects/ui_point2d.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> <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>

View File

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

View File

@ -43,6 +43,9 @@ NPGClient.evtHandler = {
case NPGClient.LOGIN.NAME: case NPGClient.LOGIN.NAME:
self.userLogin(evt); self.userLogin(evt);
break; break;
case NPGClient.STARTMENU.NAME:
self.startMenu(evt);
break;
default: default:
break; break;
} }
@ -86,6 +89,44 @@ NPGClient.evtHandler = {
} }
break; 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;
}
},
} }

View File

@ -71,6 +71,7 @@ NPGClient.LOGIN = {
} }
}, },
CURSOR: { CURSOR: {
'name': 'login_cursor',
'w': 19, 'w': 19,
'h': 19, 'h': 19,
'x': 390, 'x': 390,
@ -91,19 +92,6 @@ NPGClient.LOGIN = {
*/ */
NPGClient.STARTMENU = { NPGClient.STARTMENU = {
NAME: 'start_menu', NAME: 'start_menu',
SERVSTATUS: {
'text': {
'online' : 'server: online',
'offline' : 'server: offline',
},
'x': 400,
'y': 450,
'style': {
'font': '15px Arial',
'col': '#FFFFFF',
'align': 'center'
},
},
TITLE: { TITLE: {
'text': 'nodePong', 'text': 'nodePong',
'x': 400, 'x': 400,
@ -114,6 +102,49 @@ NPGClient.STARTMENU = {
'align': 'center' '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'
},
},
}; };

View File

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

View File

@ -3,47 +3,103 @@
* @author frtk@tetalab * @author frtk@tetalab
*/ */
NPGClient.UIMenu = function(n, o) { NPGClient.UIMenu = function(o) {
//
NPGClient.UIObject.call(this, o);
// obj name // obj name
this.name = n !== undefined ? n : ''; this.name = o.name !== undefined ? o.name : '';
// type (vertical/horizontal) // type (vertical/horizontal)
this.type = o.type !== undefined ? o.type : ''; this.type = o.type !== undefined ? o.type : '';
// pos // pos
this.x = o.x !== undefined ? o.x : 0; this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 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 // 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 = { //
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; var self = this;
self.itemsList.push(t); self.items.push(t);
}, };
// //
draw: function(ctx) { NPGClient.UIMenu.prototype.selectPrevItem = function(t) {
var self = this; var self = this;
var y = self.y var n = self.items.length;
if (self.items !== undefined && self.items.length > 0) { var cShift = 0;
for (var i = 0; i < self.items.length; i++) { if (n != 0) {
ctx.font = self.items[i].font; if (self.currItemIdx == 0) {
ctx.fillStyle = self.items[i].col; self.currItemIdx = n - 1;
ctx.fillText(self.text, self.x, self.y); 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);
}
}; };

View File

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

View File

@ -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:** # **v0.2.0:**
##focus: Start Menu Page ## focus: Start Menu Page
-------------------------- --------------------------
### client ### client
- create start menu page skeletton with title - create start menu page skeletton with title