This commit is contained in:
frtk 2016-02-13 00:42:38 +01:00
parent 4c20da7d65
commit 5b7fc52d7e
11 changed files with 335 additions and 72 deletions

View File

@ -8,8 +8,11 @@
<link rel="stylesheet" type="text/css" media="all" href="./css/main.css"> <link rel="stylesheet" type="text/css" media="all" href="./css/main.css">
<script type="text/javascript" src="http://127.0.0.1:8042/socket.io/socket.io.js"></script> <script type="text/javascript" src="http://127.0.0.1:8042/socket.io/socket.io.js"></script>
<script type="text/javascript" src="./src/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="./src/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="./js/NPGClient.js"></script> <script type="text/javascript" src="./js/npg_client.js"></script>
<script type="text/javascript" src="./js/socket/SocketIO.js"></script> <script type="text/javascript" src="./js/socket/socketio_handler.js"></script>
<script type="text/javascript" src="./js/keyboard/event_handler.js"></script>
<script type="text/javascript" src="./js/core/page_base.js"></script>
<script type="text/javascript" src="./js/pages/login_page.js"></script>
</head> </head>
<body> <body>
@ -21,37 +24,11 @@
</html> </html>
<!--
<script type="text/javascript">
//console.log(io);
var socket = {};
if (typeof io !== 'object') {
console.log('Client: io object is unknown');
}
if ((typeof self.socket.socket === 'undefined')) {
console.log('[#SocketClient] attempting server connection...');
socket = io.connect(); // socket connection
console.log('[#SocketClient] attempting server connection...');
//socket.socket.connect();
}
socket.emit('data', 'yo');
</script>
-->
<!--
<script type="text/javascript">
console.log(io);
// NPGClient.io = io;
// NPGClient.SocketClient.setIO(io);
NPGClient.SocketClient.connect();
NPGClient.SocketClient.socket.emit('data','yo');
</script>
-->
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
NPGClient.SocketIO.startConnectLoop();; NPGClient.evtHandler.init();
NPGClient.SocketIO.startConnectLoop();
if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo'); if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo');
}); });
</script> </script>

View File

@ -0,0 +1,13 @@
/**
* @file NPGClientConfig.js
*/
var NPGClient.Config = {
}

View File

@ -0,0 +1,114 @@
/**
* @file AppPage.js
* @author frtk@tetalab
*/
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 = {};
// ui elements
this.uiElems = [];
};
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);
},
//
getUIElemByName: function(name) {
var self = this;
if (self.uiElems.length > 0) {
for (var i = 0; i < self.uiElems.length; i++)
if (self.uiElems[i].name == name) return self.uiElems[i];
}
return undefined;
},
//
drawUI: 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;
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);
},
};

View File

@ -0,0 +1,51 @@
/**
* @file event_handling.js
* @autour frtk@tetalab
*/
NPGClient.evtHandler = {
keysList: {
F1 : 112,
SPACE : 32,
ESC : 27,
ARROW_UP : 38,
ARROW_DOWN : 40,
ENTER : 13,
DELETE : 46,
BACKSPACE : 8,
},
keyState: {},
//
init: function() {
var self = this;
//
self.keyState = {};
for (k in self.keyList) {
self.keyState[self.keysList[k]] = false;
}
//
document.addEventListener('keydown',function(e) {
self.keyState[e.keyCode || e.which] = true;
self.onKeyDown(e);
}, true);
//
document.addEventListener('keyup',function(e){
self.keyState[e.keyCode || e.which] = false;
}, true);
},
//
loginValidKey: function(k) {
return (key >= 48 && key <= 90);
},
//
onKeyDown : function(evt) {
console.log(evt.keyCode);
},
}

8
client/js/npg_client.js Normal file
View File

@ -0,0 +1,8 @@
/**
* @file NPGClient.js
* @author frtk
*/
var NPGClient = { 'version': '' };

View File

@ -0,0 +1,13 @@
/**
* @file login_page.js
* @author frtk@tetalab
*/
NPGClient.LoginPage = {
pageIdx: 0,
page: new NPGClient.AppPage('login'),
};

View File

@ -0,0 +1,77 @@
/**
* @file SocketIO.js
* @author frtk
*/
NPGClient.SocketIO = {
// Connection to server
conn_nAttempts: 0,
conn_IntervalID: 0,
socket: {},
isConnected: false,
// start connection loop
initConnectLoop: function() {
var self = this;
console.log();
self.startConnectLoop();
},
// start connection loop
startConnectLoop: function() {
var self = this;
self.conn_IntervalID = setInterval(function() { self.connect(); }, 1500);
},
// stop connection loop
stopConnectLoop: function() {
var self = this;
clearInterval(self.conn_IntervalID);
self.conn_IntervalID = 0;
self.conn_nAttempts = 0;
},
// connect socket
connect: function() {
var self = this;
// check for connection
if (self.isConnected) {
return false;
}
//
if (typeof io !== 'object') {
//console.log('[NPGClient.SocketIO] io object is unknown');
}
if ((typeof self.socket.socket === 'undefined')) {
console.log('[NPGClient.SocketIO] attempting server connection...');
self.socket = io.connect();
self.defineSocketMsgs();
} else if (!self.socket.socket.connected && !self.socket.socket.connecting) {
console.log('[NPGClient.SocketIO] attempting server connection...');
self.socket.socket.connect();
}
},
// Define Socket Messages
defineSocketMsgs: function() {
var self = this;
if (typeof self.socket === 'undefined') {
return false;
}
console.log('[NPGClient.SocketIO] deploying socket object features.');
// 'connecting'
self.socket.on('connecting', function () {
console.log('[NPGClient.SocketIO] connecting ...');
});
// 'connect'
self.socket.on('connect', function() {
console.log('[NPGClient.SocketIO] connected to server');
self.stopConnectLoop();
self.isConnected = true;
});
// 'disconnect'
self.socket.on('disconnect', function() {
console.log('[NPGClient.SocketIO] > Server: socket disconnected.');
self.startConnectLoop();
self.isConnected = false;
});
}
};

View File

@ -13,39 +13,33 @@ var express = require('express');
var http = require('http'); var http = require('http');
//--- server app libs & params //--- server app libs & params
//var servP = require('./server/server_config.js'); //var servP = require('./server/server_config.js');
var nPong = require('./server/server_core.js'); var npg = require('./server/server_core.js');
//--- nodePong config //--- nodePong config
var config = require('./server/server_config.js'); var cfg = require('./server/server_config.js');
// //
nPong.Server.setVersion(config.VERSION); npg.NPGServer.init(cfg.Config);
nPong.Server.log("$ ##### nodePong - v" + nPong.Server.version);
/* /*
* starting HTTP and socket.io services * starting HTTP and socket.io services
*/ */
//--- HTTP server //--- HTTP server
nPong.Server.log("$ # starting http service on port " + config.HTTP.port); npg.NPGServer.log("$ # starting http service on port " + npg.NPGServer.port);
var app = express(); var app = express();
var httpserv = http.createServer(app); var httpserv = http.createServer(app);
httpserv.listen(config.HTTP.port); httpserv.listen(npg.NPGServer.port);
//--- allow access to static files from "/client" directory //--- allow access to static files from "/client" directory
app.use(express.static(__dirname + '/client/')); app.use(express.static(__dirname + '/client/'));
//--- socket.io //--- socket.io
nPong.Server.log('$ # registering socket.io service on port ' + config.HTTP.port); npg.NPGServer.log('$ # registering socket.io service on port ' + npg.NPGServer.port);
var io = require('socket.io').listen(httpserv, { log: true } ); var io = require('socket.io').listen(httpserv, { log: true } );
//-- setup server socket handling features //-- setup server socket handling features
nPong.Server.socketHandling(io); npg.NPGServer.socketHandling(io);
// //
nPong.Server.log('$ #####'); npg.NPGServer.log('$ #####');

View File

@ -3,13 +3,12 @@
* @author frtk * @author frtk
*/ */
var VERSION = '0.0.5'; var Config = {
VERSION : '0.0.8',
/** HTTP: {
* HTTP Service host: '127.0.0.1',
*/ port: 8042
var HTTP = { },
port: 8042,
} }
@ -20,6 +19,5 @@ var HTTP = {
* *
*/ */
if (typeof exports !== "undefined") { if (typeof exports !== "undefined") {
exports.HTTP = HTTP; exports.Config = Config;
exports.VERSION = VERSION;
} }

View File

@ -10,13 +10,16 @@
* nodePong Server Object * nodePong Server Object
* *
*/ */
var Server = { var NPGServer = {
/* /*
* Data * Data
*/ */
// version // app
version: '', version: '',
host: '',
port: 0,
// Users and Games // Users and Games
users: [], users: [],
games: [], games: [],
@ -26,9 +29,12 @@ var Server = {
* *
*/ */
//--- init() //--- init()
init: function() { init: function(o) {
var self = this; var self = this;
self.version = o.VERSION || '';
self.host = o.HTTP.host || '';
self.port = o.HTTP.port || 8042;
self.log('$ ##### nodePong - v'+self.version);
}, },
@ -37,10 +43,6 @@ var Server = {
this.version = s; this.version = s;
}, },
//--- setIO(io)
setIO: function(io) {
},
/* /*
* Server Messages * Server Messages
@ -90,16 +92,14 @@ var Server = {
socketHandling: function(io) { socketHandling: function(io) {
var self = this; var self = this;
io.sockets.on('connection', function (socket) { io.sockets.on('connection', function (socket) {
//
// self.log('$ User connected : id=' + socket.id);
self.log('$ User connected : id=' + socket.id);
// 'disconnect' // 'disconnect'
socket.on('disconnect', function () { socket.on('disconnect', function () { self.log('$ User disconnected : id=' + socket.id);
self.log('$ User disconnected : id=' + socket.id); });
connected = false;
});
//
}); });
}, },
@ -135,7 +135,7 @@ var Game = function() {
* *
*/ */
if (typeof exports !== "undefined") { if (typeof exports !== "undefined") {
exports.Server = Server; exports.NPGServer = NPGServer;
exports.User = User; exports.User = User;
exports.Game = Game; exports.Game = Game;
} }

View File

@ -1,7 +1,25 @@
### **v0.0.8:**
--- focus on client side
- Renamed files (lower case + _ )
- Client directory structure : config, core, keyboard, pages, socket
- added keyboard event handler basic features
- added AppPage object definition
- added login page skeletton
- nothing crashed
### **v0.0.7:**
--- focus on server object
- Renamed server object in server_core.js (Server -> NPGServer)
- Removed setIO(io) function in NPGServer object
- added init() function to NPGClient
- Changed server_config.js structure
- updated nodePong.js
### **v0.0.6:** ### **v0.0.6:**
- focus on socket.io client & server) --- focus on socket.io client & server)
- Renamed SocketClient.js to SocketIO.js (files and objects) - Renamed SocketClient.js to SocketIO.js (files and objects)
- Added SocketIO object (NGPClient lib in /client/js/) - Added SocketIO object (NGPClient lib in /client/js/)
- Implemented socket.io client connection (with loop) => working - Implemented socket.io client connection (with loop) => working