v0.0.8
This commit is contained in:
		
							parent
							
								
									4c20da7d65
								
							
						
					
					
						commit
						5b7fc52d7e
					
				| @ -8,8 +8,11 @@ | ||||
|   <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="./src/jquery-2.1.3.min.js"></script> | ||||
|   <script type="text/javascript" src="./js/NPGClient.js"></script> | ||||
|   <script type="text/javascript" src="./js/socket/SocketIO.js"></script> | ||||
|   <script type="text/javascript" src="./js/npg_client.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> | ||||
| 
 | ||||
| <body>   | ||||
| @ -21,37 +24,11 @@ | ||||
| 
 | ||||
| </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"> | ||||
| $(document).ready(function() { | ||||
|   NPGClient.SocketIO.startConnectLoop();; | ||||
|   NPGClient.evtHandler.init(); | ||||
|   NPGClient.SocketIO.startConnectLoop(); | ||||
| 
 | ||||
|   if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo'); | ||||
| }); | ||||
| </script> | ||||
|  | ||||
							
								
								
									
										13
									
								
								client/js/config/NPGClientConfig.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										13
									
								
								client/js/config/NPGClientConfig.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,13 @@ | ||||
| /** | ||||
|  * @file NPGClientConfig.js | ||||
|  */ | ||||
| 
 | ||||
| var NPGClient.Config = { | ||||
| 
 | ||||
|         | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| } | ||||
							
								
								
									
										114
									
								
								client/js/core/page_base.js~
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										114
									
								
								client/js/core/page_base.js~
									
									
									
									
									
										Normal 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);  | ||||
|   }, | ||||
| 
 | ||||
|      | ||||
| }; | ||||
| 
 | ||||
							
								
								
									
										51
									
								
								client/js/keyboard/event_handler.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										51
									
								
								client/js/keyboard/event_handler.js
									
									
									
									
									
										Normal 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
									
								
							
							
						
						
									
										8
									
								
								client/js/npg_client.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,8 @@ | ||||
| /** | ||||
|  * @file NPGClient.js | ||||
|  * @author frtk | ||||
|  */ | ||||
| 
 | ||||
| var NPGClient = { 'version': '' }; | ||||
| 
 | ||||
| 
 | ||||
							
								
								
									
										13
									
								
								client/js/pages/login_page.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										13
									
								
								client/js/pages/login_page.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,13 @@ | ||||
| /** | ||||
|  * @file login_page.js | ||||
|  * @author frtk@tetalab | ||||
|  */ | ||||
| 
 | ||||
| NPGClient.LoginPage = { | ||||
| 
 | ||||
|     pageIdx: 0, | ||||
|     page: new NPGClient.AppPage('login'), | ||||
|      | ||||
|      | ||||
| };  | ||||
| 
 | ||||
							
								
								
									
										77
									
								
								client/js/socket/socketio_handler.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								client/js/socket/socketio_handler.js
									
									
									
									
									
										Normal 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; | ||||
|     });      | ||||
|   } | ||||
|    | ||||
| }; | ||||
							
								
								
									
										22
									
								
								nodePong.js
									
									
									
									
									
								
							
							
						
						
									
										22
									
								
								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('$ #####'); | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
|  | ||||
| @ -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; | ||||
| } | ||||
|  | ||||
| @ -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; | ||||
| } | ||||
|  | ||||
							
								
								
									
										20
									
								
								version.md
									
									
									
									
									
								
							
							
						
						
									
										20
									
								
								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 | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user