From 5b7fc52d7e1b63546482781752b806e5638fb7a6 Mon Sep 17 00:00:00 2001 From: frtk Date: Sat, 13 Feb 2016 00:42:38 +0100 Subject: [PATCH] v0.0.8 --- client/index.html | 39 ++------- client/js/config/NPGClientConfig.js | 13 +++ client/js/core/page_base.js~ | 114 +++++++++++++++++++++++++++ client/js/keyboard/event_handler.js | 51 ++++++++++++ client/js/npg_client.js | 8 ++ client/js/pages/login_page.js | 13 +++ client/js/socket/socketio_handler.js | 77 ++++++++++++++++++ nodePong.js | 22 ++---- server/server_config.js | 16 ++-- server/server_core.js | 34 ++++---- version.md | 20 ++++- 11 files changed, 335 insertions(+), 72 deletions(-) create mode 100644 client/js/config/NPGClientConfig.js create mode 100644 client/js/core/page_base.js~ create mode 100644 client/js/keyboard/event_handler.js create mode 100644 client/js/npg_client.js create mode 100644 client/js/pages/login_page.js create mode 100644 client/js/socket/socketio_handler.js diff --git a/client/index.html b/client/index.html index 3ceffd1..7422c54 100644 --- a/client/index.html +++ b/client/index.html @@ -8,8 +8,11 @@ - - + + + + + @@ -21,37 +24,11 @@ - - - - - diff --git a/client/js/config/NPGClientConfig.js b/client/js/config/NPGClientConfig.js new file mode 100644 index 0000000..51293a9 --- /dev/null +++ b/client/js/config/NPGClientConfig.js @@ -0,0 +1,13 @@ +/** + * @file NPGClientConfig.js + */ + +var NPGClient.Config = { + + + + + + + +} diff --git a/client/js/core/page_base.js~ b/client/js/core/page_base.js~ new file mode 100644 index 0000000..705be25 --- /dev/null +++ b/client/js/core/page_base.js~ @@ -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); + }, + + +}; + diff --git a/client/js/keyboard/event_handler.js b/client/js/keyboard/event_handler.js new file mode 100644 index 0000000..917d45b --- /dev/null +++ b/client/js/keyboard/event_handler.js @@ -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); + }, + + +} diff --git a/client/js/npg_client.js b/client/js/npg_client.js new file mode 100644 index 0000000..6649891 --- /dev/null +++ b/client/js/npg_client.js @@ -0,0 +1,8 @@ +/** + * @file NPGClient.js + * @author frtk + */ + +var NPGClient = { 'version': '' }; + + diff --git a/client/js/pages/login_page.js b/client/js/pages/login_page.js new file mode 100644 index 0000000..61bee11 --- /dev/null +++ b/client/js/pages/login_page.js @@ -0,0 +1,13 @@ +/** + * @file login_page.js + * @author frtk@tetalab + */ + +NPGClient.LoginPage = { + + pageIdx: 0, + page: new NPGClient.AppPage('login'), + + +}; + diff --git a/client/js/socket/socketio_handler.js b/client/js/socket/socketio_handler.js new file mode 100644 index 0000000..81da11a --- /dev/null +++ b/client/js/socket/socketio_handler.js @@ -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; + }); + } + +}; diff --git a/nodePong.js b/nodePong.js index c2a96e8..61a5d5b 100644 --- a/nodePong.js +++ b/nodePong.js @@ -13,39 +13,33 @@ var express = require('express'); var http = require('http'); //--- server app libs & params //var servP = require('./server/server_config.js'); -var nPong = require('./server/server_core.js'); +var npg = require('./server/server_core.js'); //--- nodePong config -var config = require('./server/server_config.js'); - +var cfg = require('./server/server_config.js'); // -nPong.Server.setVersion(config.VERSION); -nPong.Server.log("$ ##### nodePong - v" + nPong.Server.version); +npg.NPGServer.init(cfg.Config); /* * starting HTTP and socket.io services */ //--- 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 httpserv = http.createServer(app); -httpserv.listen(config.HTTP.port); +httpserv.listen(npg.NPGServer.port); //--- allow access to static files from "/client" directory app.use(express.static(__dirname + '/client/')); //--- 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 } ); //-- setup server socket handling features -nPong.Server.socketHandling(io); - +npg.NPGServer.socketHandling(io); // -nPong.Server.log('$ #####'); - - - +npg.NPGServer.log('$ #####'); diff --git a/server/server_config.js b/server/server_config.js index 7fbb05c..d29862c 100644 --- a/server/server_config.js +++ b/server/server_config.js @@ -3,13 +3,12 @@ * @author frtk */ -var VERSION = '0.0.5'; - -/** - * HTTP Service - */ -var HTTP = { - port: 8042, +var Config = { + VERSION : '0.0.8', + HTTP: { + host: '127.0.0.1', + port: 8042 + }, } @@ -20,6 +19,5 @@ var HTTP = { * */ if (typeof exports !== "undefined") { - exports.HTTP = HTTP; - exports.VERSION = VERSION; + exports.Config = Config; } diff --git a/server/server_core.js b/server/server_core.js index 80d0fdd..45d8e54 100644 --- a/server/server_core.js +++ b/server/server_core.js @@ -10,13 +10,16 @@ * nodePong Server Object * */ -var Server = { +var NPGServer = { /* * Data */ - // version + // app version: '', + host: '', + port: 0, + // Users and Games users: [], games: [], @@ -26,9 +29,12 @@ var Server = { * */ //--- init() - init: function() { + init: function(o) { 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; }, - //--- setIO(io) - setIO: function(io) { - - }, /* * Server Messages @@ -90,16 +92,14 @@ var Server = { socketHandling: function(io) { var self = this; io.sockets.on('connection', function (socket) { - - // - self.log('$ User connected : id=' + socket.id); + // + self.log('$ User connected : id=' + socket.id); - // 'disconnect' - socket.on('disconnect', function () { - self.log('$ User disconnected : id=' + socket.id); - connected = false; - }); + // 'disconnect' + socket.on('disconnect', function () { self.log('$ User disconnected : id=' + socket.id); + }); + // }); }, @@ -135,7 +135,7 @@ var Game = function() { * */ if (typeof exports !== "undefined") { - exports.Server = Server; + exports.NPGServer = NPGServer; exports.User = User; exports.Game = Game; } diff --git a/version.md b/version.md index 606bf9a..4b963e0 100644 --- a/version.md +++ b/version.md @@ -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:** -- focus on socket.io client & server) +--- focus on socket.io client & server) - Renamed SocketClient.js to SocketIO.js (files and objects) - Added SocketIO object (NGPClient lib in /client/js/) - Implemented socket.io client connection (with loop) => working