frtk/nodePong
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v0.2.1

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/index.html
View File

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

4
client/lib/core/page_handler.js
View File

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

43
client/lib/keyboard/event_handler.js
View File

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

57
client/lib/npg_client.js
View File

@ -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'
},
},
};

4
client/lib/ui/objects/ui_cursor.js
View File

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

104
client/lib/ui/objects/ui_menu.js
View File

@ -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 = {
//
NPGClient.UIMenu.prototype = Object.create(NPGClient.UIObject.prototype);
// Constructor
constructor: NPGClient.UIMenu,
//
NPGClient.UIMenu.prototype.constructor = NPGClient.UIMenu;
//
addItem: function(t) {
var self = this;
self.itemsList.push(t);
},
//
NPGClient.UIMenu.prototype.addItem = function(t) {
var self = this;
self.items.push(t);
};
//
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.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);
}
};

2
package.json
View File

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

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