version v0.1.2
This commit is contained in:
parent
8c5ac0a6d9
commit
7dd657471d
@ -10,6 +10,7 @@
|
|||||||
<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/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>
|
||||||
@ -19,6 +20,8 @@
|
|||||||
<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_input_text.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -40,8 +40,14 @@ NPGClient.PageHandler = {
|
|||||||
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', NPGClient.LABELS.TITLE));
|
p.addUIObject(new NPGClient.UILabel('login_title', NPGClient.LOGIN.TITLE));
|
||||||
self.pages.push(p);
|
self.pages.push(p);
|
||||||
|
// name input
|
||||||
|
p.addUIObject(new NPGClient.UIInputText('login_input', NPGClient.LOGIN.INPUT));
|
||||||
|
// Server status
|
||||||
|
p.addUIObject(new NPGClient.UIStatusText('login_servstat', NPGClient.LOGIN.SERVSTATUS));
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -5,24 +5,61 @@
|
|||||||
|
|
||||||
var NPGClient = { 'version': '' };
|
var NPGClient = { 'version': '' };
|
||||||
|
|
||||||
|
NPGClient.NAMEMAXSIZE = 8;
|
||||||
|
NPGClient.userName = '';
|
||||||
|
|
||||||
|
|
||||||
// ui
|
// ui
|
||||||
NPGClient.CAN_W = 800;
|
NPGClient.CAN_W = 800;
|
||||||
NPGClient.CAN_H = 500;
|
NPGClient.CAN_H = 500;
|
||||||
NPGClient.CAN_COL = '#000000';
|
NPGClient.CAN_COL = '#000000';
|
||||||
|
|
||||||
|
|
||||||
// counters
|
// counters
|
||||||
NPGClient.pageCount = -1;
|
NPGClient.pageCount = -1;
|
||||||
|
|
||||||
// Labels
|
|
||||||
NPGClient.LABELS = {
|
|
||||||
|
|
||||||
|
// Login Page
|
||||||
|
NPGClient.LOGIN = {
|
||||||
|
SERVSTATUS: {
|
||||||
|
'text': {
|
||||||
|
'online' : 'server: online',
|
||||||
|
'offline' : 'server: offline',
|
||||||
|
},
|
||||||
|
'x': 400,
|
||||||
|
'y': 450,
|
||||||
|
'style': {
|
||||||
|
'font': '15px Lucida Console',
|
||||||
|
'col': '#FFFFFF',
|
||||||
|
'align': 'center'
|
||||||
|
},
|
||||||
|
},
|
||||||
TITLE: {
|
TITLE: {
|
||||||
'text': 'nodePong',
|
'text': 'nodePong',
|
||||||
'x': 280,
|
'x': 400,
|
||||||
'y': 150,
|
'y': 150,
|
||||||
'f': '50px Lucida Console',
|
'style': {
|
||||||
'c': '#FFFFFF'
|
'font': '50px Lucida Console',
|
||||||
|
'col': '#FFFFFF',
|
||||||
|
'align': 'center'
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
INPUT: {
|
||||||
|
'text': 'enter a name: ',
|
||||||
|
'x': 400,
|
||||||
|
'y': 300,
|
||||||
|
'style': {
|
||||||
|
'font': '25px Lucida Console',
|
||||||
|
'col': '#FFFFFF',
|
||||||
|
'align': 'center'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
46
client/lib/ui/objects/ui_input_text.js
Normal file
46
client/lib/ui/objects/ui_input_text.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* @file ui_input_text.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
NPGClient.UIInputText = function(n, o) {
|
||||||
|
|
||||||
|
// obj name
|
||||||
|
this.name = n !== undefined ? n : '';
|
||||||
|
// 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 : '';
|
||||||
|
//
|
||||||
|
this.input = '';
|
||||||
|
|
||||||
|
// text style
|
||||||
|
this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
NPGClient.UIInputText.prototype = {
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
constructor: NPGClient.UIInputText,
|
||||||
|
|
||||||
|
//
|
||||||
|
updateState: function() {
|
||||||
|
var self = this;
|
||||||
|
if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
|
||||||
|
else self.currText = self.text.offline;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
draw: function(ctx, state) {
|
||||||
|
var self = this;
|
||||||
|
self.updateState();
|
||||||
|
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
||||||
|
ctx.fillText(self.text + self.input, self.x, self.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -12,12 +12,11 @@ NPGClient.UILabel = function(n, o) {
|
|||||||
// pos
|
// pos
|
||||||
this.x = o.x !== undefined ? o.x : 0;
|
this.x = o.x !== undefined ? o.x : 0;
|
||||||
this.y = o.y !== undefined ? o.y : 0;
|
this.y = o.y !== undefined ? o.y : 0;
|
||||||
|
|
||||||
// text
|
// text
|
||||||
this.text = o.text !== undefined ? o.text : '';
|
this.text = o.text !== undefined ? o.text : '';
|
||||||
// font
|
// text style
|
||||||
this.font = o.f !== undefined ? o.f : '';
|
this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
|
||||||
// color
|
|
||||||
this.col = o.c !== undefined ? o.c : '';
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -31,9 +30,13 @@ NPGClient.UILabel.prototype = {
|
|||||||
draw: function(ctx) {
|
draw: function(ctx) {
|
||||||
var self = this;
|
var self = this;
|
||||||
//self.rect.draw(ctx);
|
//self.rect.draw(ctx);
|
||||||
|
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
||||||
|
ctx.fillText(self.text, self.x, self.y);
|
||||||
|
/*
|
||||||
ctx.font = self.font
|
ctx.font = self.font
|
||||||
ctx.fillStyle = self.col;
|
ctx.fillStyle = self.col;
|
||||||
ctx.fillText(self.text, self.x, self.y);
|
ctx.fillText(self.text, self.x, self.y);
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
49
client/lib/ui/objects/ui_menu.js
Normal file
49
client/lib/ui/objects/ui_menu.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
/**
|
||||||
|
* @file ui_menu.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
NPGClient.UIMenu = function(n, o) {
|
||||||
|
|
||||||
|
// obj name
|
||||||
|
this.name = n !== undefined ? n : '';
|
||||||
|
// 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;
|
||||||
|
// item list
|
||||||
|
this.items = [];
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
NPGClient.UIMenu.prototype = {
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
constructor: NPGClient.UIMenu,
|
||||||
|
|
||||||
|
//
|
||||||
|
addItem: function(t) {
|
||||||
|
var self = this;
|
||||||
|
self.itemsList.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -5,6 +5,9 @@
|
|||||||
|
|
||||||
NPGClient.UIRect = function(n, p, w, h, s) {
|
NPGClient.UIRect = function(n, p, w, h, s) {
|
||||||
|
|
||||||
|
//
|
||||||
|
//NPGClient.UIObject.call(this, n, s);
|
||||||
|
|
||||||
// obj name
|
// obj name
|
||||||
this.name = n !== undefined ? n : '';
|
this.name = n !== undefined ? n : '';
|
||||||
// geom
|
// geom
|
||||||
|
46
client/lib/ui/objects/ui_status_text.js
Normal file
46
client/lib/ui/objects/ui_status_text.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* @file ui_status_text.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
NPGClient.UIStatusText = function(n, o) {
|
||||||
|
|
||||||
|
// obj name
|
||||||
|
this.name = n !== undefined ? n : '';
|
||||||
|
// 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 : '';
|
||||||
|
//
|
||||||
|
this.currText = 0;
|
||||||
|
|
||||||
|
// text style
|
||||||
|
this.s = o.style !== undefined ? o.style : new NPGClient.UITextStyle();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
NPGClient.UIStatusText.prototype = {
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
constructor: NPGClient.UIStatusText,
|
||||||
|
|
||||||
|
//
|
||||||
|
updateState: function() {
|
||||||
|
var self = this;
|
||||||
|
if (NPGClient.SocketIO.isConnected) self.currText = self.text.online;
|
||||||
|
else self.currText = self.text.offline;
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
draw: function(ctx, state) {
|
||||||
|
var self = this;
|
||||||
|
self.updateState();
|
||||||
|
NPGClient.Utils.setTxtStyle(ctx, self.s);
|
||||||
|
ctx.fillText(self.currText, self.x, self.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
19
client/lib/ui/objects/ui_text_style_.js
Normal file
19
client/lib/ui/objects/ui_text_style_.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* @file ui_text_style.js
|
||||||
|
* @author frtk@tetalab
|
||||||
|
*/
|
||||||
|
|
||||||
|
NPGClient.UITextStyle = function(f, c, a) {
|
||||||
|
|
||||||
|
this.font = f !== undefined ? f : '';
|
||||||
|
this.color = c !== undefined ? c : '';
|
||||||
|
this.align = a !== undefined ? a : '';
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
NPGClient.UITextStyle.prototype = {
|
||||||
|
|
||||||
|
constructor: NPGClient.UITextStyle,
|
||||||
|
|
||||||
|
};
|
||||||
|
|
57
client/lib/utils/utils.js
Normal file
57
client/lib/utils/utils.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
/**
|
||||||
|
* @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.1",
|
"version": "0.1.2",
|
||||||
"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.1',
|
VERSION : '0.1.2',
|
||||||
HTTP: {
|
HTTP: {
|
||||||
host: '127.0.0.1',
|
host: '127.0.0.1',
|
||||||
port: 8042
|
port: 8042
|
||||||
|
14
version.md
14
version.md
@ -1,4 +1,18 @@
|
|||||||
|
|
||||||
|
### **v0.1.2:**
|
||||||
|
--------------------------
|
||||||
|
focus: client ui lib
|
||||||
|
--------------------------
|
||||||
|
---- added ui objects in /client/ui/objects
|
||||||
|
ui_input_text.js
|
||||||
|
ui_menu.js
|
||||||
|
ui_status_text.js
|
||||||
|
ui_text_style_.js
|
||||||
|
---- Login page
|
||||||
|
- changed convention for parameters in npg_client.js (by 'page' object)
|
||||||
|
- title label and server status working
|
||||||
|
- skeletton for login name input
|
||||||
|
|
||||||
|
|
||||||
### **v0.1.1:**
|
### **v0.1.1:**
|
||||||
--------------------------
|
--------------------------
|
||||||
|
Loading…
Reference in New Issue
Block a user