version v0.1.3
This commit is contained in:
parent
7dd657471d
commit
45a0e86e74
@ -7,7 +7,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
margin-top: 20px;
|
margin-top: 10px;
|
||||||
background-color: rgba(0, 0, 0, 1);
|
background-color: rgba(0, 0, 0, 1);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
@ -15,7 +15,7 @@ body {
|
|||||||
|
|
||||||
#pong {
|
#pong {
|
||||||
border: 1px solid rgba(255, 255, 255, 1);
|
border: 1px solid rgba(255, 255, 255, 1);
|
||||||
margin-top: 50px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -10,18 +10,20 @@
|
|||||||
<script type="text/javascript" src="./jquery/jquery-2.1.3.min.js"></script>
|
<script type="text/javascript" src="./jquery/jquery-2.1.3.min.js"></script>
|
||||||
<script type="text/javascript" src="./lib/npg_client.js"></script>
|
<script type="text/javascript" src="./lib/npg_client.js"></script>
|
||||||
<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/utils/utils.js"></script>
|
<script type="text/javascript" src="./lib/utils/client_utils.js"></script>
|
||||||
|
<script type="text/javascript" src="./lib/utils/js_utils.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/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_shape.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>
|
||||||
<script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
|
<script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
|
||||||
<script type="text/javascript" src="./lib/ui/objects/ui_status_text.js"></script>
|
<script type="text/javascript" src="./lib/ui/objects/ui_status_text.js"></script>
|
||||||
<script type="text/javascript" src="./lib/ui/objects/ui_input_text.js"></script>
|
<script type="text/javascript" src="./lib/ui/objects/ui_input_text.js"></script>
|
||||||
|
<script type="text/javascript" src="./lib/ui/objects/ui_cursor.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -22,6 +22,19 @@ NPGClient.PageHandler = {
|
|||||||
return self.getPageByName(self.currPage).getUIElems();
|
return self.getPageByName(self.currPage).getUIElems();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
getCurrPageUIElemByName: 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;
|
||||||
|
*/
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
getPageByName: function(name) {
|
getPageByName: function(name) {
|
||||||
@ -37,17 +50,19 @@ NPGClient.PageHandler = {
|
|||||||
// create login page
|
// create login page
|
||||||
createLoginPage: function() {
|
createLoginPage: function() {
|
||||||
//
|
//
|
||||||
|
console.log('[NPGClient] Creating Login Page');
|
||||||
var self = this;
|
var self = this;
|
||||||
var p = new NPGClient.AppPage('login');
|
var p = new NPGClient.AppPage('login');
|
||||||
// Title label
|
// Title label
|
||||||
p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
|
p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
|
||||||
self.pages.push(p);
|
|
||||||
// name input
|
// name input
|
||||||
p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
|
p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
|
||||||
// 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
|
||||||
|
p.addUIObject(new NPGClient.UICursor('login_cursor', NPGClient.LOGIN.CURSOR));
|
||||||
|
//
|
||||||
|
self.pages.push(p);
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -5,17 +5,6 @@
|
|||||||
|
|
||||||
NPGClient.evtHandler = {
|
NPGClient.evtHandler = {
|
||||||
|
|
||||||
keysList: {
|
|
||||||
F1 : 112,
|
|
||||||
SPACE : 32,
|
|
||||||
ESC : 27,
|
|
||||||
ARROW_UP : 38,
|
|
||||||
ARROW_DOWN : 40,
|
|
||||||
ENTER : 13,
|
|
||||||
DELETE : 46,
|
|
||||||
BACKSPACE : 8,
|
|
||||||
},
|
|
||||||
|
|
||||||
keyState: {},
|
keyState: {},
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -23,8 +12,8 @@ NPGClient.evtHandler = {
|
|||||||
var self = this;
|
var self = this;
|
||||||
//
|
//
|
||||||
self.keyState = {};
|
self.keyState = {};
|
||||||
for (k in self.keyList) {
|
for (k in NPGClient.KEYS) {
|
||||||
self.keyState[self.keysList[k]] = false;
|
self.keyState[NPGClient[k]] = false;
|
||||||
}
|
}
|
||||||
//
|
//
|
||||||
document.addEventListener('keydown',function(e) {
|
document.addEventListener('keydown',function(e) {
|
||||||
@ -38,14 +27,72 @@ NPGClient.evtHandler = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
loginValidKey: function(k) {
|
isValidKey: function(k) {
|
||||||
return (key >= 48 && key <= 90);
|
return (k >= 48 && k <= 90);
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
onKeyDown: function(evt) {
|
onKeyDown: function(evt) {
|
||||||
//console.log(evt.keyCode);
|
var self = this;
|
||||||
|
if (evt.keyCode == NPGClient.KEYS.ESC) {
|
||||||
|
//self.playerLogout(); // player logout
|
||||||
|
} else if (evt.keyCode == NPGClient.KEYS.F1) {
|
||||||
|
//self.sendToMenuPage(); // back to previous page
|
||||||
|
} else {
|
||||||
|
switch (NPGClient.PageHandler.currPage) {
|
||||||
|
case 'login':
|
||||||
|
self.userLogin(evt);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
userLogin : function (evt) {
|
||||||
|
//
|
||||||
|
var self = this;
|
||||||
|
var oldNameWidth, newNameWidth;
|
||||||
|
var size = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width;
|
||||||
|
oldNameWidth = 2.1*size; // corr factor 2.1
|
||||||
|
switch (evt.keyCode) {
|
||||||
|
case NPGClient.KEYS.ENTER:
|
||||||
|
if (NPGClient.SocketIO.isConnected) {
|
||||||
|
if (NPGClient.userName.length != 0) {
|
||||||
|
NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//self.serverExit();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case NPGClient.KEYS.BACKSPACE:
|
||||||
|
//--- remove a character
|
||||||
|
evt.preventDefault();
|
||||||
|
NPGClient.Utils.removeChar();
|
||||||
|
newNameWidth = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width
|
||||||
|
|
||||||
|
// newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
|
||||||
|
// self.cursor.shiftX(newNameWidth - oldNameWidth);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
//console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode));
|
||||||
|
//--- add character
|
||||||
|
if (self.isValidKey(evt.keyCode)) {
|
||||||
|
//self.cursor.stopBlink;
|
||||||
|
NPGClient.Utils.addChar(evt.keyCode);
|
||||||
|
//newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
|
||||||
|
//if (self.validName()) {
|
||||||
|
// self.cursor.shiftX(newNameWidth - oldNameWidth);
|
||||||
|
//}
|
||||||
|
//self.cursor.startBlink;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -15,12 +15,25 @@ NPGClient.CAN_H = 500;
|
|||||||
NPGClient.CAN_COL = '#000000';
|
NPGClient.CAN_COL = '#000000';
|
||||||
|
|
||||||
|
|
||||||
// counters
|
/**
|
||||||
|
* Keyboard events
|
||||||
|
*/
|
||||||
|
NPGClient.KEYS = {
|
||||||
|
F1 : 112,
|
||||||
|
SPACE : 32,
|
||||||
|
ESC : 27,
|
||||||
|
ARROW_UP : 38,
|
||||||
|
ARROW_DOWN : 40,
|
||||||
|
ENTER : 13,
|
||||||
|
DELETE : 46,
|
||||||
|
BACKSPACE : 8,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* APP PAGES
|
||||||
|
*/
|
||||||
NPGClient.pageCount = -1;
|
NPGClient.pageCount = -1;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Login Page
|
// Login Page
|
||||||
NPGClient.LOGIN = {
|
NPGClient.LOGIN = {
|
||||||
SERVSTATUS: {
|
SERVSTATUS: {
|
||||||
@ -48,14 +61,30 @@ NPGClient.LOGIN = {
|
|||||||
},
|
},
|
||||||
INPUT: {
|
INPUT: {
|
||||||
'text': 'enter a name: ',
|
'text': 'enter a name: ',
|
||||||
'x': 400,
|
'x': 265,
|
||||||
'y': 300,
|
'y': 300,
|
||||||
'style': {
|
'style': {
|
||||||
'font': '25px Lucida Console',
|
'font': '25px Lucida Console',
|
||||||
'col': '#FFFFFF',
|
'col': '#FFFFFF',
|
||||||
'align': 'center'
|
'align': 'left'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
CURSOR: {
|
||||||
|
'w': 19,
|
||||||
|
'h': 19,
|
||||||
|
'pos': {
|
||||||
|
'x': 435,
|
||||||
|
'y': 283,
|
||||||
|
},
|
||||||
|
'style': {
|
||||||
|
'fm': true,
|
||||||
|
'fc': '#FFFFFF',
|
||||||
|
'bm': false,
|
||||||
|
'bw': 0,
|
||||||
|
'bc': '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -17,11 +17,13 @@ NPGClient.SocketIO = {
|
|||||||
console.log();
|
console.log();
|
||||||
self.startConnectLoop();
|
self.startConnectLoop();
|
||||||
},
|
},
|
||||||
|
|
||||||
// start connection loop
|
// start connection loop
|
||||||
startConnectLoop: function() {
|
startConnectLoop: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
self.conn_IntervalID = setInterval(function() { self.connect(); }, 1500);
|
self.conn_IntervalID = setInterval(function() { self.connect(); }, 1500);
|
||||||
},
|
},
|
||||||
|
|
||||||
// stop connection loop
|
// stop connection loop
|
||||||
stopConnectLoop: function() {
|
stopConnectLoop: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
@ -29,6 +31,7 @@ NPGClient.SocketIO = {
|
|||||||
self.conn_IntervalID = 0;
|
self.conn_IntervalID = 0;
|
||||||
self.conn_nAttempts = 0;
|
self.conn_nAttempts = 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
// connect socket
|
// connect socket
|
||||||
connect: function() {
|
connect: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
@ -49,6 +52,7 @@ NPGClient.SocketIO = {
|
|||||||
self.socket.socket.connect();
|
self.socket.socket.connect();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Define Socket Messages
|
// Define Socket Messages
|
||||||
defineSocketMsgs: function() {
|
defineSocketMsgs: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
@ -72,6 +76,12 @@ NPGClient.SocketIO = {
|
|||||||
self.startConnectLoop();
|
self.startConnectLoop();
|
||||||
self.isConnected = false;
|
self.isConnected = false;
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// send message to server
|
||||||
|
sendMsg: function(name, data) {
|
||||||
|
var self = this;
|
||||||
|
self.socket.emit(name, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
43
client/lib/ui/objects/ui_cursor.js
Normal file
43
client/lib/ui/objects/ui_cursor.js
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
/**
|
||||||
|
* @file ui_cursor.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
NPGClient.UICursor = function(n, o) {
|
||||||
|
|
||||||
|
//
|
||||||
|
this.rect = new NPGClient.UIRect(n, o);
|
||||||
|
// obj name
|
||||||
|
this.name = n !== undefined ? n : '';
|
||||||
|
// state
|
||||||
|
this.bState = true;
|
||||||
|
this.bCount = 0;
|
||||||
|
this.bCountMax = 5;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
NPGClient.UICursor.prototype = {
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
constructor: NPGClient.UICursor,
|
||||||
|
|
||||||
|
//
|
||||||
|
draw: function(ctx) {
|
||||||
|
var self = this;
|
||||||
|
if (self.bState) {
|
||||||
|
if (self.bCount == self.bCountMax) {
|
||||||
|
self.bCount = 0;
|
||||||
|
self.bState = false;
|
||||||
|
} else self.rect.draw(ctx);
|
||||||
|
self.bCount++;
|
||||||
|
} else {
|
||||||
|
if (self.bCount == self.bCountMax) {
|
||||||
|
self.bCount = 0;
|
||||||
|
self.bState = true;
|
||||||
|
self.rect.draw(ctx);
|
||||||
|
} else self.bCount++;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -28,16 +28,15 @@ NPGClient.UIInputText.prototype = {
|
|||||||
constructor: NPGClient.UIInputText,
|
constructor: NPGClient.UIInputText,
|
||||||
|
|
||||||
//
|
//
|
||||||
updateState: function() {
|
updateInput: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
|
self.input = NPGClient.userName;
|
||||||
else self.currText = self.text.offline;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
draw: function(ctx, state) {
|
draw: function(ctx, state) {
|
||||||
var self = this;
|
var self = this;
|
||||||
self.updateState();
|
self.updateInput();
|
||||||
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
||||||
ctx.fillText(self.text + self.input, self.x, self.y);
|
ctx.fillText(self.text + self.input, self.x, self.y);
|
||||||
}
|
}
|
||||||
|
@ -29,14 +29,8 @@ NPGClient.UILabel.prototype = {
|
|||||||
//
|
//
|
||||||
draw: function(ctx) {
|
draw: function(ctx) {
|
||||||
var self = this;
|
var self = this;
|
||||||
//self.rect.draw(ctx);
|
|
||||||
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
||||||
ctx.fillText(self.text, self.x, self.y);
|
ctx.fillText(self.text, self.x, self.y);
|
||||||
/*
|
|
||||||
ctx.font = self.font
|
|
||||||
ctx.fillStyle = self.col;
|
|
||||||
ctx.fillText(self.text, self.x, self.y);
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -3,20 +3,18 @@
|
|||||||
* @author frtk@tetalab
|
* @author frtk@tetalab
|
||||||
*/
|
*/
|
||||||
|
|
||||||
NPGClient.UIRect = function(n, p, w, h, s) {
|
NPGClient.UIRect = function(n, o) {
|
||||||
|
|
||||||
//
|
//
|
||||||
//NPGClient.UIObject.call(this, n, s);
|
NPGClient.UIShape.call(this);
|
||||||
|
|
||||||
// obj name
|
// obj name
|
||||||
this.name = n !== undefined ? n : '';
|
this.name = n !== undefined ? n : '';
|
||||||
// geom
|
// geom
|
||||||
this.pos = p !== undefined ? p : new NPGClient.UIPoint2D();
|
this.pos = o.pos !== undefined ? o.pos : {};
|
||||||
this.w = w !== undefined ? w : 0;
|
this.w = o.w !== undefined ? o.w : 0;
|
||||||
this.h = h !== undefined ? h : 0;
|
this.h = o.h !== undefined ? o.h : 0;
|
||||||
// style
|
// style
|
||||||
this.style = s !== undefined ? s : new NPGclient.UIStyle();
|
this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
NPGClient.UIRect.prototype = {
|
NPGClient.UIRect.prototype = {
|
||||||
@ -24,23 +22,20 @@ NPGClient.UIRect.prototype = {
|
|||||||
// Constructor
|
// Constructor
|
||||||
constructor: NPGClient.UIRect,
|
constructor: NPGClient.UIRect,
|
||||||
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
draw: function(ctx) {
|
draw: function(ctx) {
|
||||||
var self = this;
|
var self = this;
|
||||||
if (!self.s.fillMode()) {
|
if (!self.style.fm) {
|
||||||
drawNoFill(ctx, self.x, self.y, self.w, self.h, self.lw, self.lc);
|
self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc);
|
||||||
} else {
|
} else {
|
||||||
drawFill(ctx, self.x, self.y, self.w, self.h, self.fc);
|
self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
drawFill: function(ctx) {
|
drawFill: function(ctx) {
|
||||||
var self = this;
|
var self = this;
|
||||||
self.applyStyle(ctx);
|
NPGClient.Utils.applyStyle(ctx, self.style);
|
||||||
ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
|
ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -48,7 +43,7 @@ NPGClient.UIRect.prototype = {
|
|||||||
drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
|
drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
|
||||||
var self = this;
|
var self = this;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
self.applyStyle(ctx);
|
NPGClient.Utils.applyStyle(ctx, self.style);
|
||||||
ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
|
ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
},
|
},
|
||||||
|
45
client/lib/ui/objects/ui_shape.js
Normal file
45
client/lib/ui/objects/ui_shape.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
/**
|
||||||
|
* @file ui_shape.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
|
||||||
|
NPGClient.UIShape = function() {
|
||||||
|
this.x = 0; // x position
|
||||||
|
this.y = 0; // y position
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
NPGClient.UIShape.prototype = {
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
constructor: NPGClient.UIShape,
|
||||||
|
|
||||||
|
//
|
||||||
|
moveTo: function(x, y) {
|
||||||
|
var self = this;
|
||||||
|
self.x = x;
|
||||||
|
self.y = y;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
move: function(x, y) {
|
||||||
|
var self = this;
|
||||||
|
self.x += x;
|
||||||
|
self.y += y;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
shiftX: function(x) {
|
||||||
|
this.x += x;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
shiftY: function(y) {
|
||||||
|
this.y += y;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
@ -3,20 +3,21 @@
|
|||||||
* @author frtk@tetalab
|
* @author frtk@tetalab
|
||||||
*/
|
*/
|
||||||
|
|
||||||
NPGClient.UIStyle = function(fm, fc, bm, bw, bc) {
|
NPGClient.UIStyle = function(o) {
|
||||||
|
/*
|
||||||
this.fm = fm !== undefined ? fm : false;
|
this.fm = o.fm !== undefined ? o.fm : false;
|
||||||
this.fc = fc !== undefined ? fc : '';
|
this.fc = o.fc !== undefined ? o.fc : '';
|
||||||
this.bm = bm !== undefined ? bm : false;
|
this.bm = o.bm !== undefined ? o.bm : false;
|
||||||
this.bw = bw !== undefined ? bw : 0;
|
this.bw = o.bw !== undefined ? o.bw : 0;
|
||||||
this.bc = bc !== undefined ? bc : '';
|
this.bc = o.bc !== undefined ? o.bc : '';
|
||||||
|
*/
|
||||||
};
|
};
|
||||||
|
|
||||||
NPGClient.UIStyle.prototype = {
|
NPGClient.UIStyle.prototype = {
|
||||||
|
|
||||||
constructor: NPGClient.UIStyle,
|
constructor: NPGClient.UIStyle,
|
||||||
|
|
||||||
|
/*
|
||||||
borderMode: function() {
|
borderMode: function() {
|
||||||
return this.bm;
|
return this.bm;
|
||||||
},
|
},
|
||||||
@ -39,13 +40,14 @@ NPGClient.UIStyle.prototype = {
|
|||||||
applyStyle: function(ctx) {
|
applyStyle: function(ctx) {
|
||||||
var self = this;
|
var self = this;
|
||||||
// fill style
|
// fill style
|
||||||
if (fm == true) ctx.fillStyle = self.fc;
|
if (self.fm == true) ctx.fillStyle = self.fc;
|
||||||
// border mode
|
// border mode
|
||||||
if (bm == true) {
|
if (bm == true) {
|
||||||
ctx.lineWidth = bw;
|
ctx.lineWidth = self.bw;
|
||||||
ctx.strokeStyle = bc;
|
ctx.strokeStyle = self.bc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
};
|
};
|
||||||
|
|
||||||
|
68
client/lib/utils/client_utils.js
Normal file
68
client/lib/utils/client_utils.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
/**
|
||||||
|
* @file client_utils.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
NPGClient.Utils = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UI
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
setTxtStyle : function(ctx, style) {
|
||||||
|
ctx.font = style.font;
|
||||||
|
ctx.fillStyle = style.col;
|
||||||
|
ctx.textAlign = style.align;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
applyStyle : function(ctx, style) {
|
||||||
|
//
|
||||||
|
if (style.bm) {
|
||||||
|
ctx.lineWidth = style.bw;
|
||||||
|
ctx.strokeStyle = style.bc;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
if (style.fm) {
|
||||||
|
ctx.fillStyle = style.fc;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* User Name
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
addChar : function(key) {
|
||||||
|
//console.log(key + ' ' + NPGClient.userName);
|
||||||
|
if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
|
||||||
|
NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase();
|
||||||
|
console.log(NPGClient.userName);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
removeChar : function(key) {
|
||||||
|
if (NPGClient.userName.length > 0) {
|
||||||
|
NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1);
|
||||||
|
console.log(NPGClient.userName);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
validChar : function(key) {
|
||||||
|
return NPGClient.evtHandler.loginValidKey(key);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
validName : function(key) {
|
||||||
|
var len = NPGClient.userName.length;
|
||||||
|
return (len >= 0 && len <= NPGClient.NAMEMAXSIZE);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
resetName : function() {
|
||||||
|
NPGClient.userName = '';
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
12
client/lib/utils/js_utils.js
Normal file
12
client/lib/utils/js_utils.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
/**
|
||||||
|
* @file js_utils.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
function countProperties(obj) {
|
||||||
|
var count = 0;
|
||||||
|
for (var prop in obj) {
|
||||||
|
if (obj.hasOwnProperty(prop)) count++;
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "npg_app.js",
|
"name": "npg_app.js",
|
||||||
"version": "0.1.2",
|
"version": "0.1.3",
|
||||||
"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",
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
var Config = {
|
var Config = {
|
||||||
VERSION : '0.1.2',
|
VERSION : '0.1.3',
|
||||||
HTTP: {
|
HTTP: {
|
||||||
host: '127.0.0.1',
|
host: '127.0.0.1',
|
||||||
port: 8042
|
port: 8042
|
||||||
|
30
version.md
30
version.md
@ -1,13 +1,35 @@
|
|||||||
|
|
||||||
|
|
||||||
|
### **v0.1.3:**
|
||||||
|
--------------------------
|
||||||
|
focus: client ui lib - keyboard handling
|
||||||
|
--------------------------
|
||||||
|
---- /client/utils
|
||||||
|
- renamed utils.js -> client_utils.js
|
||||||
|
- added js_utils.js (global methods)
|
||||||
|
---- keyboard handling on login page
|
||||||
|
- input name feature (add and remove char)
|
||||||
|
---- added in /client/ui/objects
|
||||||
|
- ui_shape.js (base shape object)
|
||||||
|
- ui_cursor.js
|
||||||
|
---- removed in /client/ui/objects
|
||||||
|
- ui_line.js
|
||||||
|
- ui_object.js
|
||||||
|
---- changed UIRect object
|
||||||
|
- inherits from UIShape
|
||||||
|
---- cursor object
|
||||||
|
- blinking cursor blinks (need to implement movement with name input)
|
||||||
|
|
||||||
|
|
||||||
### **v0.1.2:**
|
### **v0.1.2:**
|
||||||
--------------------------
|
--------------------------
|
||||||
focus: client ui lib
|
focus: client ui lib
|
||||||
--------------------------
|
--------------------------
|
||||||
---- added ui objects in /client/ui/objects
|
---- added ui objects in /client/ui/objects
|
||||||
ui_input_text.js
|
- ui_input_text.js
|
||||||
ui_menu.js
|
- ui_menu.js
|
||||||
ui_status_text.js
|
- ui_status_text.js
|
||||||
ui_text_style_.js
|
- ui_text_style_.js
|
||||||
---- Login page
|
---- Login page
|
||||||
- changed convention for parameters in npg_client.js (by 'page' object)
|
- changed convention for parameters in npg_client.js (by 'page' object)
|
||||||
- title label and server status working
|
- title label and server status working
|
||||||
|
Loading…
Reference in New Issue
Block a user