version v0.1.1
This commit is contained in:
parent
372b4bfbf2
commit
8c5ac0a6d9
@ -12,7 +12,13 @@
|
||||
<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/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>
|
||||
|
||||
<body>
|
||||
@ -26,10 +32,10 @@
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
NPGClient.PageHandler.setup();
|
||||
NPGClient.ui.setupUI('pong',NPGClient.CAN_W, NPGClient.CAN_H, NPGClient.CAN_COL);
|
||||
NPGClient.evtHandler.init();
|
||||
NPGClient.SocketIO.startConnectLoop();
|
||||
|
||||
if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -8,14 +8,7 @@ NPGClient.AppPage = function(n) {
|
||||
Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ });
|
||||
|
||||
this.name = n || '';
|
||||
// draw loop paramaters
|
||||
this.loopIntervalId = 0;
|
||||
this.loopDelay = 40;
|
||||
// canvas
|
||||
this.canvas_id = "";
|
||||
this.canvas_bcol = "";
|
||||
this.canvas = {};
|
||||
this.ctx = {};
|
||||
this.idx = NPGClient.pageCount;
|
||||
|
||||
// ui elements
|
||||
this.uiElems = [];
|
||||
@ -26,49 +19,19 @@ NPGClient.AppPage.prototype = {
|
||||
|
||||
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) {
|
||||
var self = this;
|
||||
self.uiElems.push(c);
|
||||
},
|
||||
|
||||
//
|
||||
getUIElems: function() {
|
||||
var self = this;
|
||||
return self.uiElems;
|
||||
},
|
||||
|
||||
|
||||
//
|
||||
getUIElemByName: function(name) {
|
||||
var self = this;
|
||||
@ -80,35 +43,11 @@ NPGClient.AppPage.prototype = {
|
||||
},
|
||||
|
||||
//
|
||||
drawUI: function() {
|
||||
printInfo: function() {
|
||||
var self = this;
|
||||
self.clear();
|
||||
self.drawUIBackground();
|
||||
self.drawUIObjects();
|
||||
},
|
||||
console.log('[NPGClient.AppPage] name:' + self.name + ', nUIElems=' + self.pages.length);
|
||||
|
||||
//
|
||||
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
48
client/lib/core/page_handler.js
Normal 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);
|
||||
},
|
||||
|
||||
};
|
||||
|
@ -44,7 +44,7 @@ NPGClient.evtHandler = {
|
||||
|
||||
//
|
||||
onKeyDown : function(evt) {
|
||||
console.log(evt.keyCode);
|
||||
//console.log(evt.keyCode);
|
||||
},
|
||||
|
||||
|
||||
|
@ -5,4 +5,24 @@
|
||||
|
||||
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
40
client/lib/ui/objects/ui_label.js
Normal 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
35
client/lib/ui/objects/ui_line.js
Normal 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
45
client/lib/ui/objects/ui_object.js
Normal 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
37
client/lib/ui/objects/ui_point2d.js
Normal 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
54
client/lib/ui/objects/ui_rect.js
Normal 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
51
client/lib/ui/objects/ui_style.js
Normal 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
101
client/lib/ui/ui.js
Normal 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);
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "npg_app.js",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"description": "Multiplayer online Pong Game using nodejs and socket.io",
|
||||
"directories": {
|
||||
"server": "server",
|
||||
|
@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
var Config = {
|
||||
VERSION : '0.1.0',
|
||||
VERSION : '0.1.1',
|
||||
HTTP: {
|
||||
host: '127.0.0.1',
|
||||
port: 8042
|
||||
|
20
version.md
20
version.md
@ -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:**
|
||||
--------------------------
|
||||
focus: app
|
||||
|
Loading…
Reference in New Issue
Block a user