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

version v0.1.1

Browse Source
This commit is contained in:
frtk 2016-02-13 21:06:40 +01:00
parent 372b4bfbf2
commit 8c5ac0a6d9
15 changed files with 475 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/index.html
View File

@ -12,7 +12,13 @@
<script type="text/javascript" src="./lib/socket/socketio_handler.js"></script> <script type="text/javascript" src="./lib/socket/socketio_handler.js"></script>
<script type="text/javascript" src="./lib/keyboard/event_handler.js"></script> <script type="text/javascript" src="./lib/keyboard/event_handler.js"></script>
<script type="text/javascript" src="./lib/core/page_base.js"></script> <script type="text/javascript" src="./lib/core/page_base.js"></script>
<script type="text/javascript" src="./lib/pages/login_page.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/objects/ui_object.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>
<script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
</head> </head>
<body> <body>
@ -26,10 +32,10 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
NPGClient.PageHandler.setup();
NPGClient.ui.setupUI('pong',NPGClient.CAN_W, NPGClient.CAN_H, NPGClient.CAN_COL);
NPGClient.evtHandler.init(); NPGClient.evtHandler.init();
NPGClient.SocketIO.startConnectLoop(); NPGClient.SocketIO.startConnectLoop();
if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo');
}); });
</script> </script>

81
client/lib/core/page_base.js
View File

@ -8,14 +8,7 @@ NPGClient.AppPage = function(n) {
Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ }); Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ });
this.name = n || ''; this.name = n || '';
// draw loop paramaters this.idx = NPGClient.pageCount;
this.loopIntervalId = 0;
this.loopDelay = 40;
// canvas
this.canvas_id = "";
this.canvas_bcol = "";
this.canvas = {};
this.ctx = {};
// ui elements // ui elements
this.uiElems = []; this.uiElems = [];
@ -26,49 +19,19 @@ NPGClient.AppPage.prototype = {
constructor: NPGClient.AppPage, constructor: NPGClient.AppPage,
//
setLoopDelay: function(d) {
this.loopDelay = d;
},
//
startDrawLoop: function() {
var self = this;
self.loopIntervalId = setInterval(function() {
self.run();
}, self.loopDelay);
},
//
stopDrawLoop: function() {
var self = this;
clearInterval(self.loopIntervalId);
self.loopIntervalId = 0;
},
//
run: function() {
var self = this;
self.drawUI();
},
//
configUI: function(id, w, h, c) {
var self = this;
self.canvas_id = id;
self.canvas = document.getElementById(id);
self.ctx = self.canvas.getContext("2d");
self.canvas.width = w;
self.canvas.height = h;
self.canvas_bcol = c;
},
// //
addUIObject: function(c) { addUIObject: function(c) {
var self = this; var self = this;
self.uiElems.push(c); self.uiElems.push(c);
}, },
//
getUIElems: function() {
var self = this;
return self.uiElems;
},
// //
getUIElemByName: function(name) { getUIElemByName: function(name) {
var self = this; var self = this;
@ -80,35 +43,11 @@ NPGClient.AppPage.prototype = {
}, },
// //
drawUI: function() { printInfo: function() {
var self = this; var self = this;
self.clear(); console.log('[NPGClient.AppPage] name:' + self.name + ', nUIElems=' + self.pages.length);
self.drawUIBackground();
self.drawUIObjects();
},
//
drawUIBackground: function() {
var self = this;
self.ctx.fillStyle = self.canvas_bcol;
self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
},
//
drawUIObjects: function() {
var self = this;
if (self.uiElems.length > 0) {
for (var i = 0; i < self.uiElems.length; i++)
self.uiElems[i].draw(self.ctx);
} }
},
//
clear: function() {
var self = this;
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
},
}; };

48
client/lib/core/page_handler.js Normal file
View File

@ -0,0 +1,48 @@
/**
* @file page_handler.js
* @author frtk@tetalab
*/
NPGClient.PageHandler = {
currPage: '',
pages: [],
//
setup: function() {
var self = this;
self.currPage = 'login';
// create login page
self.createLoginPage();
},
//
getCurrPageUIElems: function() {
var self = this;
return self.getPageByName(self.currPage).getUIElems();
},
//
getPageByName: function(name) {
var self = this;
if (self.pages.length > 0) {
for (var i = 0; i < self.pages.length; i++) {
if (name == self.pages[i].name) return self.pages[i];
}
}
return undefined;
},
// create login page
createLoginPage: function() {
//
var self = this;
var p = new NPGClient.AppPage('login');
// Title label
p.addUIObject(new NPGClient.UILabel('login', NPGClient.LABELS.TITLE));
self.pages.push(p);
},
};

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

@ -44,7 +44,7 @@ NPGClient.evtHandler = {
// //
onKeyDown : function(evt) { onKeyDown : function(evt) {
console.log(evt.keyCode); //console.log(evt.keyCode);
}, },

20
client/lib/npg_client.js
View File

@ -5,4 +5,24 @@
var NPGClient = { 'version': '' }; var NPGClient = { 'version': '' };
// ui
NPGClient.CAN_W = 800;
NPGClient.CAN_H = 500;
NPGClient.CAN_COL = '#000000';
// counters
NPGClient.pageCount = -1;
// Labels
NPGClient.LABELS = {
TITLE: {
'text': 'nodePong',
'x': 280,
'y': 150,
'f': '50px Lucida Console',
'c': '#FFFFFF'
}
}

40
client/lib/ui/objects/ui_label.js Normal file
View File

@ -0,0 +1,40 @@
/**
* @file ui_label.js
* @author frtk@tetalab
*/
NPGClient.UILabel = function(n, o) {
// obj name
this.name = n !== undefined ? n : '';
// bkg rect
//this.bkg = r !== undefined ? r : new NPGClient.UIRect();
// pos
this.x = o.x !== undefined ? o.x : 0;
this.y = o.y !== undefined ? o.y : 0;
// text
this.text = o.text !== undefined ? o.text : '';
// font
this.font = o.f !== undefined ? o.f : '';
// color
this.col = o.c !== undefined ? o.c : '';
};
NPGClient.UILabel.prototype = {
// Constructor
constructor: NPGClient.UILabel,
//
draw: function(ctx) {
var self = this;
//self.rect.draw(ctx);
ctx.font = self.font
ctx.fillStyle = self.col;
ctx.fillText(self.text, self.x, self.y);
}
};

35
client/lib/ui/objects/ui_line.js Normal file
View File

@ -0,0 +1,35 @@
/**
* @file ui_line.js
* @author frtk@tetalab
*/
NPGClient.Line = function(name, p1, p2, style) {
NPGClient.UIObject.call(this, name, style);
this.p1 = p1 !== undefined ? p1 : new NPGClient.Point2D();
this.p2 = p2 !== undefined ? p2 : new NPGClient.Point2D();
};
NPGClient.Line.prototype = Object.create(NPGClient.UIObject.prototype);
NPGClient.Line.prototype.constructor = NPGClient.Line;
NPGCLient.Line.prototype.draw = function(ctx) {
var self = this;
self.drawLine(ctx);
};
NPGClient.Line.prototype.drawLine = function(ctx) {
var self = this;
self.applyStyle(ctx);
ctx.beginPath();
ctx.moveTo(self.p1.x, self.p1.y);
ctx.lineTo(self.p2.x, self.p2.y);
ctx.stroke();
};

45
client/lib/ui/objects/ui_object.js Normal file
View File

@ -0,0 +1,45 @@
/**
* @file ui_object
* @author frtk@tetalab
*/
NPGClient.UIObject = function(name, style) {
//Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ });
this.name = name !== undefined ? name : '';
this.style = style !== undefined ? style : new NPGClient.UIStyle();
};
NPGClient.UIObject.prototype = {
constructor: NPGClient.UIObject,
setStyle: function(s) {
this.style = s;
},
hasBorders: function() {
return this.style.getBorderMode();
},
hasFillStyle: function() {
return this.style.getFillMode();
},
applyStyle: function(ctx) {
var self = this;
if (self.style.getBorderMode()) {
ctx.lineWidth = self.style.bw;
ctx.strokeStyle = self.style.bc;
}
if (self.style.getFillMode()) {
ctx.fillStyle = self.style.fc;
}
}
};

37
client/lib/ui/objects/ui_point2d.js Normal file
View File

@ -0,0 +1,37 @@
/**
* @file ui_point2d.js
* @author frtk@tetalab
*/
NPGClient.UIPoint2D = function(x, y) {
// (x,y) position
this.x = x !== undefined ? x : 0;
this.y = y !== undefined ? y : 0;
};
NPGClient.UIPoint2D.prototype = {
// Constructor
constructor: NPGClient.UIPoint2D,
//
set: function(x, y) {
this.x = x;
this.y = y;
},
//
setX: function(x) {
this.x = x;
},
//
setY: function(y) {
this.y = y;
}
};

54
client/lib/ui/objects/ui_rect.js Normal file
View File

@ -0,0 +1,54 @@
/**
* @file ui_rect.js
* @author frtk@tetalab
*/
NPGClient.UIRect = function(n, p, w, h, s) {
// obj name
this.name = n !== undefined ? n : '';
// geom
this.pos = p !== undefined ? p : new NPGClient.UIPoint2D();
this.w = w !== undefined ? w : 0;
this.h = h !== undefined ? h : 0;
// style
this.style = s !== undefined ? s : new NPGclient.UIStyle();
};
NPGClient.UIRect.prototype = {
// Constructor
constructor: NPGClient.UIRect,
//
//
draw: function(ctx) {
var self = this;
if (!self.s.fillMode()) {
drawNoFill(ctx, self.x, self.y, self.w, self.h, self.lw, self.lc);
} else {
drawFill(ctx, self.x, self.y, self.w, self.h, self.fc);
}
},
//
drawFill: function(ctx) {
var self = this;
self.applyStyle(ctx);
ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
},
//
drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
var self = this;
ctx.beginPath();
self.applyStyle(ctx);
ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
ctx.stroke();
},
};

51
client/lib/ui/objects/ui_style.js Normal file
View File

@ -0,0 +1,51 @@
/**
* @file ui_style.js
* @author frtk@tetalab
*/
NPGClient.UIStyle = function(fm, fc, bm, bw, bc) {
this.fm = fm !== undefined ? fm : false;
this.fc = fc !== undefined ? fc : '';
this.bm = bm !== undefined ? bm : false;
this.bw = bw !== undefined ? bw : 0;
this.bc = bc !== undefined ? bc : '';
};
NPGClient.UIStyle.prototype = {
constructor: NPGClient.UIStyle,
borderMode: function() {
return this.bm;
},
fillMode: function() {
return this.fm;
},
setBorders: function(m, w, c) {
this.bm = m;
this.bw = w;
this.bc = c;
},
setFillStyle: function(m, c) {
this.fm = m;
this.fc = c;
},
applyStyle: function(ctx) {
var self = this;
// fill style
if (fm == true) ctx.fillStyle = self.fc;
// border mode
if (bm == true) {
ctx.lineWidth = bw;
ctx.strokeStyle = bc;
}
}
};

101
client/lib/ui/ui.js Normal file
View File

@ -0,0 +1,101 @@
/**
* @file ui.js
* @author frtk@tetalab
*/
NPGClient.ui = {
// canvas
canvas_id: '',
canvas_bcol: '',
canvas: {},
ctx: {},
// draw loop paramaters
loopIntervalId: 0,
loopDelay: 40,
/*
* init
*/
//
setupUI: function(id, w, h, c) {
var self = this;
self.canvas_id = id;
self.canvas = document.getElementById(id);
self.ctx = self.canvas.getContext("2d");
self.canvas.width = w;
self.canvas.height = h;
self.canvas_bcol = c;
// start draw loop
self.startDrawLoop();
},
/*
* Draw loop
*/
//
setLoopDelay: function(d) {
this.loopDelay = d;
},
//
startDrawLoop: function() {
var self = this;
self.loopIntervalId = setInterval(function() {
self.run();
}, self.loopDelay);
},
//
stopDrawLoop: function() {
var self = this;
clearInterval(self.loopIntervalId);
self.loopIntervalId = 0;
},
//
run: function() {
var self = this;
self.drawPage();
},
/*
* Draw functions
*/
//
drawPage: function() {
var self = this;
self.clear();
self.drawUIBackground();
self.drawUIObjects();
},
//
drawUIBackground: function() {
var self = this;
self.ctx.fillStyle = self.canvas_bcol;
self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
},
//
drawUIObjects: function() {
var self = this;
var elems = NPGClient.PageHandler.getCurrPageUIElems();
if (elems !== undefined && elems.length > 0) {
for (var i = 0; i < elems.length; i++) elems[i].draw(self.ctx);
}
},
//
clear: function() {
var self = this;
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
},
};

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "npg_app.js", "name": "npg_app.js",
"version": "0.1.0", "version": "0.1.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",

2
server/npg_server_config.js
View File

@ -4,7 +4,7 @@
*/ */
var Config = { var Config = {
VERSION : '0.1.0', VERSION : '0.1.1',
HTTP: { HTTP: {
host: '127.0.0.1', host: '127.0.0.1',
port: 8042 port: 8042

20
version.md
View File

@ -1,5 +1,25 @@
### **v0.1.1:**
--------------------------
focus: client ui lib
--------------------------
---- added app page handling in client/core
- page_base.js
- page_handler.js
---- added ui handling in /client/ui
- ui.js
---- added ui objects in /client/ui/objects
- ui_label.js
- ui_line.js
- ui_object.js
- ui_point2d.js
- ui_rect.js
- ui_style.js
---- login page
- created login page with title
### **v0.1.0:** ### **v0.1.0:**
-------------------------- --------------------------
focus: app focus: app