v0.1.4
This commit is contained in:
parent
45a0e86e74
commit
9677666b48
@ -16,7 +16,7 @@
|
|||||||
<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_shape.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_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>
|
||||||
|
@ -24,15 +24,28 @@ NPGClient.PageHandler = {
|
|||||||
|
|
||||||
//
|
//
|
||||||
getCurrPageUIElemByName: function(name) {
|
getCurrPageUIElemByName: function(name) {
|
||||||
/*
|
|
||||||
var self = this;
|
var self = this;
|
||||||
if (self.pages.length > 0) {
|
if (self.pages.length > 0) {
|
||||||
for (var i = 0; i < self.pages.length; i++) {
|
for (var i = 0; i < self.pages.length; i++) {
|
||||||
if (name == self.pages[i].name) return self.pages[i];
|
if (self.pages[i].name == self.currPage) {
|
||||||
|
return self.pages[i].getUIElemByName(name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
},
|
||||||
|
|
||||||
|
// @need rework
|
||||||
|
getUIElemFromPage: function(elem, page) {
|
||||||
|
var self = this;
|
||||||
|
if (self.pages.length > 0) {
|
||||||
|
for (var i = 0; i < self.pages.length; i++) {
|
||||||
|
if (page == self.pages[i].name) {
|
||||||
|
// return self.pages[i];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return undefined;
|
return undefined;
|
||||||
*/
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
@ -55,11 +55,9 @@ NPGClient.evtHandler = {
|
|||||||
*/
|
*/
|
||||||
//
|
//
|
||||||
userLogin : function (evt) {
|
userLogin : function (evt) {
|
||||||
//
|
|
||||||
var self = this;
|
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) {
|
switch (evt.keyCode) {
|
||||||
case NPGClient.KEYS.ENTER:
|
case NPGClient.KEYS.ENTER:
|
||||||
if (NPGClient.SocketIO.isConnected) {
|
if (NPGClient.SocketIO.isConnected) {
|
||||||
@ -67,32 +65,27 @@ NPGClient.evtHandler = {
|
|||||||
NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
|
NPGClient.SocketIO.sendMsg('registration', NPGClient.userName);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
//self.serverExit();
|
NPGClient.Utils.resetName();
|
||||||
|
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').reset();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case NPGClient.KEYS.BACKSPACE:
|
case NPGClient.KEYS.BACKSPACE:
|
||||||
//--- remove a character
|
//--- remove a character
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
if (!NPGClient.Utils.nameEmpty()) {
|
||||||
NPGClient.Utils.removeChar();
|
NPGClient.Utils.removeChar();
|
||||||
newNameWidth = NPGClient.PageHandler.getPageByName('login').ctx.measureText(NPGClient.userName).width
|
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(-15);
|
||||||
|
}
|
||||||
// newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
|
|
||||||
// self.cursor.shiftX(newNameWidth - oldNameWidth);
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
//console.log(evt.keyCode + ' ' + self.isValidKey(evt.keyCode));
|
|
||||||
//--- add character
|
//--- add character
|
||||||
if (self.isValidKey(evt.keyCode)) {
|
if (self.isValidKey(evt.keyCode) && !NPGClient.Utils.maxNameSize()) {
|
||||||
//self.cursor.stopBlink;
|
|
||||||
NPGClient.Utils.addChar(evt.keyCode);
|
NPGClient.Utils.addChar(evt.keyCode);
|
||||||
//newNameWidth = 2.1*self.ctx.measureText(self.tmpName).width; // corr factor 2.1
|
newNameW = NPGClient.ui.ctx.measureText(NPGClient.userName).width;
|
||||||
//if (self.validName()) {
|
NPGClient.PageHandler.getCurrPageUIElemByName('login_cursor').translateX(15);
|
||||||
// self.cursor.shiftX(newNameWidth - oldNameWidth);
|
|
||||||
//}
|
|
||||||
//self.cursor.startBlink;
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -44,7 +44,7 @@ NPGClient.LOGIN = {
|
|||||||
'x': 400,
|
'x': 400,
|
||||||
'y': 450,
|
'y': 450,
|
||||||
'style': {
|
'style': {
|
||||||
'font': '15px Lucida Console',
|
'font': '15px Arial',
|
||||||
'col': '#FFFFFF',
|
'col': '#FFFFFF',
|
||||||
'align': 'center'
|
'align': 'center'
|
||||||
},
|
},
|
||||||
@ -54,17 +54,17 @@ NPGClient.LOGIN = {
|
|||||||
'x': 400,
|
'x': 400,
|
||||||
'y': 150,
|
'y': 150,
|
||||||
'style': {
|
'style': {
|
||||||
'font': '50px Lucida Console',
|
'font': '50px Arial',
|
||||||
'col': '#FFFFFF',
|
'col': '#FFFFFF',
|
||||||
'align': 'center'
|
'align': 'center'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
INPUT: {
|
INPUT: {
|
||||||
'text': 'enter a name: ',
|
'text': 'login: ',
|
||||||
'x': 265,
|
'x': 285,
|
||||||
'y': 300,
|
'y': 300,
|
||||||
'style': {
|
'style': {
|
||||||
'font': '25px Lucida Console',
|
'font': '25px Monospace',
|
||||||
'col': '#FFFFFF',
|
'col': '#FFFFFF',
|
||||||
'align': 'left'
|
'align': 'left'
|
||||||
}
|
}
|
||||||
@ -72,10 +72,8 @@ NPGClient.LOGIN = {
|
|||||||
CURSOR: {
|
CURSOR: {
|
||||||
'w': 19,
|
'w': 19,
|
||||||
'h': 19,
|
'h': 19,
|
||||||
'pos': {
|
'x': 390,
|
||||||
'x': 435,
|
|
||||||
'y': 283,
|
'y': 283,
|
||||||
},
|
|
||||||
'style': {
|
'style': {
|
||||||
'fm': true,
|
'fm': true,
|
||||||
'fc': '#FFFFFF',
|
'fc': '#FFFFFF',
|
||||||
|
@ -1,13 +0,0 @@
|
|||||||
/**
|
|
||||||
* @file login_page.js
|
|
||||||
* @author frtk@tetalab
|
|
||||||
*/
|
|
||||||
|
|
||||||
NPGClient.LoginPage = {
|
|
||||||
|
|
||||||
pageIdx: 0,
|
|
||||||
page: new NPGClient.AppPage('login'),
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
@ -5,10 +5,18 @@
|
|||||||
|
|
||||||
NPGClient.UICursor = function(n, o) {
|
NPGClient.UICursor = function(n, o) {
|
||||||
|
|
||||||
//
|
// inheritance
|
||||||
this.rect = new NPGClient.UIRect(n, o);
|
NPGClient.UIObject.call(this, o);
|
||||||
|
|
||||||
// obj name
|
// obj name
|
||||||
this.name = n !== undefined ? n : '';
|
this.name = n !== undefined ? n : '';
|
||||||
|
this.w = o.w !== undefined ? o.w : 0;
|
||||||
|
this.h = o.h !== undefined ? o.h : 0;
|
||||||
|
// starting position
|
||||||
|
this.x0 = this.x();
|
||||||
|
this.y0 = this.y();
|
||||||
|
// style
|
||||||
|
this.style = o.style !== undefined ? o.style : {};
|
||||||
// state
|
// state
|
||||||
this.bState = true;
|
this.bState = true;
|
||||||
this.bCount = 0;
|
this.bCount = 0;
|
||||||
@ -16,28 +24,38 @@ NPGClient.UICursor = function(n, o) {
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
NPGClient.UICursor.prototype = {
|
// inheritance
|
||||||
|
NPGClient.UICursor.prototype = Object.create(NPGClient.UIObject.prototype);
|
||||||
|
|
||||||
// Constructor
|
// constructor
|
||||||
constructor: NPGClient.UICursor,
|
NPGClient.UICursor.prototype.constructor = NPGClient.UICursor;
|
||||||
|
|
||||||
//
|
// reset
|
||||||
draw: function(ctx) {
|
NPGClient.UICursor.prototype.reset = function() {
|
||||||
|
var self = this;
|
||||||
|
self.moveTo(self.x0, self.y0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw
|
||||||
|
NPGClient.UICursor.prototype.draw = function(ctx) {
|
||||||
var self = this;
|
var self = this;
|
||||||
if (self.bState) {
|
if (self.bState) {
|
||||||
if (self.bCount == self.bCountMax) {
|
if (self.bCount == self.bCountMax) {
|
||||||
self.bCount = 0;
|
self.bCount = 0;
|
||||||
self.bState = false;
|
self.bState = false;
|
||||||
} else self.rect.draw(ctx);
|
} else {
|
||||||
|
NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
|
||||||
self.bCount++;
|
self.bCount++;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
if (self.bCount == self.bCountMax) {
|
if (self.bCount == self.bCountMax) {
|
||||||
self.bCount = 0;
|
self.bCount = 0;
|
||||||
self.bState = true;
|
self.bState = true;
|
||||||
self.rect.draw(ctx);
|
NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
|
||||||
} else self.bCount++;
|
} else self.bCount++;
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -36,9 +36,11 @@ NPGClient.UIInputText.prototype = {
|
|||||||
//
|
//
|
||||||
draw: function(ctx, state) {
|
draw: function(ctx, state) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
var t = self.text + self.input;
|
||||||
self.updateInput();
|
self.updateInput();
|
||||||
|
//console.log(self.s);
|
||||||
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
||||||
ctx.fillText(self.text + self.input, self.x, self.y);
|
ctx.fillText(t, self.x, self.y);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
* @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();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
@ -1,45 +1,77 @@
|
|||||||
/**
|
/**
|
||||||
* @file ui_object
|
* @file ui_object.js
|
||||||
* @author frtk@tetalab
|
* @author frtk@tetalab
|
||||||
*/
|
*/
|
||||||
|
//
|
||||||
|
|
||||||
NPGClient.UIObject = function(name, style) {
|
NPGClient.UIObject = function(o) {
|
||||||
|
|
||||||
//Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ });
|
this._x = (o.x !== undefined) ? o.x : 0; // x position
|
||||||
|
this._y = (o.y !== undefined) ? o.y : 0; // y position
|
||||||
this.name = name !== undefined ? name : '';
|
this._theta = (o.theta !== undefined) ? o.theta : 0; // theta wrt horizon
|
||||||
this.style = style !== undefined ? style : new NPGClient.UIStyle();
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
NPGClient.UIObject.prototype = {
|
NPGClient.UIObject.prototype = {
|
||||||
|
|
||||||
|
// Constructor
|
||||||
constructor: NPGClient.UIObject,
|
constructor: NPGClient.UIObject,
|
||||||
|
|
||||||
setStyle: function(s) {
|
//set/get
|
||||||
this.style = s;
|
x: function(data) {
|
||||||
},
|
|
||||||
|
|
||||||
hasBorders: function() {
|
|
||||||
return this.style.getBorderMode();
|
|
||||||
},
|
|
||||||
|
|
||||||
hasFillStyle: function() {
|
|
||||||
return this.style.getFillMode();
|
|
||||||
},
|
|
||||||
|
|
||||||
applyStyle: function(ctx) {
|
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
if (self.style.getBorderMode()) {
|
|
||||||
ctx.lineWidth = self.style.bw;
|
if (data !== undefined) {
|
||||||
ctx.strokeStyle = self.style.bc;
|
self._x = data;
|
||||||
|
} else {
|
||||||
|
return self._x;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (self.style.getFillMode()) {
|
},
|
||||||
ctx.fillStyle = self.style.fc;
|
|
||||||
}
|
//set/get
|
||||||
|
y: function(data) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (data !== undefined) {
|
||||||
|
self._y = data;
|
||||||
|
} else {
|
||||||
|
return self._y;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
moveTo: function(x, y) {
|
||||||
|
var self = this;
|
||||||
|
self._x = x;
|
||||||
|
self._y = y;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
translateXY: function(x, y) {
|
||||||
|
var self = this;
|
||||||
|
self._x += x;
|
||||||
|
self._y += y;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
translateX: function(x) {
|
||||||
|
this._x += x;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
translateY: function(y) {
|
||||||
|
this._y += y;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
rotate: function(x, y, t) {
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -6,47 +6,27 @@
|
|||||||
NPGClient.UIRect = function(n, o) {
|
NPGClient.UIRect = function(n, o) {
|
||||||
|
|
||||||
//
|
//
|
||||||
NPGClient.UIShape.call(this);
|
NPGClient.UIObject.call(this, o);
|
||||||
// obj name
|
// obj name
|
||||||
this.name = n !== undefined ? n : '';
|
this.name = n !== undefined ? n : '';
|
||||||
// geom
|
|
||||||
this.pos = o.pos !== undefined ? o.pos : {};
|
|
||||||
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;
|
||||||
// style
|
// style
|
||||||
this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle();
|
this.style = o.style !== undefined ? o.style : new NPGClient.UIStyle();
|
||||||
};
|
};
|
||||||
|
|
||||||
NPGClient.UIRect.prototype = {
|
// inheritance
|
||||||
|
NPGClient.UIRect.prototype = Object.create(NPGClient.UIObject.prototype);
|
||||||
|
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor: NPGClient.UIRect,
|
NPGClient.UIRect.prototype.constructor = NPGClient.UIRect;
|
||||||
|
|
||||||
//
|
NPGClient.UIRect.prototype.draw = function(ctx) {
|
||||||
draw: function(ctx) {
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
NPGClient.Utils.applyStyle(ctx, self.style);
|
||||||
if (!self.style.fm) {
|
if (!self.style.fm) {
|
||||||
self.drawNoFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.lw, self.style.lc);
|
NPGClient.Utils.drawRect(ctx, self.x(), self.y(), self.w, self.h);
|
||||||
} else {
|
} else {
|
||||||
self.drawFill(ctx, self.pos.x, self.pos.y, self.w, self.h, self.style.fc);
|
NPGClient.Utils.drawFillRect(ctx, self.x(), self.y(), self.w, self.h);
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
drawFill: function(ctx) {
|
|
||||||
var self = this;
|
|
||||||
NPGClient.Utils.applyStyle(ctx, self.style);
|
|
||||||
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();
|
|
||||||
NPGClient.Utils.applyStyle(ctx, self.style);
|
|
||||||
ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
|
|
||||||
ctx.stroke();
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,45 +0,0 @@
|
|||||||
/**
|
|
||||||
* @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;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
@ -6,7 +6,64 @@
|
|||||||
NPGClient.Utils = {
|
NPGClient.Utils = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* UI
|
* UI draw
|
||||||
|
*/
|
||||||
|
//
|
||||||
|
drawText: function(ctx, x1, y1, t, s, c) {
|
||||||
|
ctx.font = s;
|
||||||
|
ctx.fillStyle = c;
|
||||||
|
ctx.fillText(t, x1, y1);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
drawFillRect: function(ctx, x1, y1, w, h) {
|
||||||
|
ctx.fillRect(x1, y1, w, h);
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
drawRect: function(ctx, x1, y1, w, h) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(x1, y1, w, h);
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
drawLine: function(ctx, x1, y1, x2, y2) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
drawSemiCircle: function(ctx, x, y, r, a1, a2, o, w, c) {
|
||||||
|
ctx.lineWidth = w;
|
||||||
|
ctx.strokeStyle = c;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, r, a1, a2, o);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
drawFillCircle: function(ctx, x, y, r) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, r, 0, Math.PI*2, false);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.closePath();
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
drawCircle: function(ctx, x, y, r) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, r, 0, Math.PI*2, false);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UI Style
|
||||||
*/
|
*/
|
||||||
//
|
//
|
||||||
setTxtStyle : function(ctx, style) {
|
setTxtStyle : function(ctx, style) {
|
||||||
@ -37,32 +94,42 @@ NPGClient.Utils = {
|
|||||||
//console.log(key + ' ' + NPGClient.userName);
|
//console.log(key + ' ' + NPGClient.userName);
|
||||||
if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
|
if (NPGClient.userName.length < NPGClient.NAMEMAXSIZE) {
|
||||||
NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase();
|
NPGClient.userName = NPGClient.userName + String.fromCharCode(key).toLowerCase();
|
||||||
console.log(NPGClient.userName);
|
//console.log(NPGClient.userName);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
removeChar : function(key) {
|
removeChar: function(key) {
|
||||||
if (NPGClient.userName.length > 0) {
|
if (NPGClient.userName.length > 0) {
|
||||||
NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1);
|
NPGClient.userName = NPGClient.userName.substring(0, NPGClient.userName.length - 1);
|
||||||
console.log(NPGClient.userName);
|
//console.log(NPGClient.userName);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
validChar : function(key) {
|
validChar: function(key) {
|
||||||
return NPGClient.evtHandler.loginValidKey(key);
|
return NPGClient.evtHandler.loginValidKey(key);
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
validName : function(key) {
|
validName: function() {
|
||||||
var len = NPGClient.userName.length;
|
var len = NPGClient.userName.length;
|
||||||
return (len >= 0 && len <= NPGClient.NAMEMAXSIZE);
|
return (len >= 3 && len <= NPGClient.NAMEMAXSIZE);
|
||||||
},
|
},
|
||||||
|
|
||||||
//
|
//
|
||||||
resetName : function() {
|
maxNameSize: function() {
|
||||||
|
return NPGClient.userName.length == NPGClient.NAMEMAXSIZE;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
resetName: function() {
|
||||||
NPGClient.userName = '';
|
NPGClient.userName = '';
|
||||||
},
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
nameEmpty: function() {
|
||||||
|
return (NPGClient.userName.length == 0);
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,57 +0,0 @@
|
|||||||
/**
|
|
||||||
* @file utils.js
|
|
||||||
* @author frtk@tetalab
|
|
||||||
*/
|
|
||||||
|
|
||||||
NPGClient.Utils = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* UI
|
|
||||||
*/
|
|
||||||
//
|
|
||||||
setTxtStyle : function(ctx, style) {
|
|
||||||
ctx.font = style.font;
|
|
||||||
ctx.fillStyle = style.col;
|
|
||||||
ctx.textAlign = style.align;
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* User Name
|
|
||||||
*/
|
|
||||||
//
|
|
||||||
addChar : function(key, name) {
|
|
||||||
if (name.length < NPGClient.NAMEMAXSIZE) {
|
|
||||||
name = name + String.fromCharCode(key).toLowerCase();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
removeChar : function(key) {
|
|
||||||
if (name.length > 0) {
|
|
||||||
name = name.substring(0, name.length - 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
validChar : function(key) {
|
|
||||||
return NPGClient.evtHandler.loginValidKey(key);
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
validName : function(key) {
|
|
||||||
var len = name.length;
|
|
||||||
return (len >= 0 && len <= NPGClient.MAXNAMESIZE);
|
|
||||||
},
|
|
||||||
|
|
||||||
//
|
|
||||||
resetName : function(name) {
|
|
||||||
name = '';
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "npg_app.js",
|
"name": "npg_app.js",
|
||||||
"version": "0.1.3",
|
"version": "0.1.4",
|
||||||
"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.3',
|
VERSION : '0.1.4',
|
||||||
HTTP: {
|
HTTP: {
|
||||||
host: '127.0.0.1',
|
host: '127.0.0.1',
|
||||||
port: 8042
|
port: 8042
|
||||||
|
16
version.md
16
version.md
@ -1,3 +1,19 @@
|
|||||||
|
### **v0.1.4:**
|
||||||
|
--------------------------
|
||||||
|
focus: client ui lib
|
||||||
|
--------------------------
|
||||||
|
---- changed font (Lucida -> Arial)
|
||||||
|
- npg_client.js
|
||||||
|
---- added in /ui/objects/
|
||||||
|
- ui_object.js (base object)
|
||||||
|
---- updated objects in
|
||||||
|
- ui_rect.js (inherits from UIObject)
|
||||||
|
- ui_cursor.js (inherits from UIObject)
|
||||||
|
---- /keyboard/evt_handler.js
|
||||||
|
- userLogin()
|
||||||
|
---- cursor object
|
||||||
|
- fixed behaviour on login page - working fine now
|
||||||
|
- reset position at login attempt when server is down
|
||||||
|
|
||||||
|
|
||||||
### **v0.1.3:**
|
### **v0.1.3:**
|
||||||
|
Loading…
Reference in New Issue
Block a user