v0.0.8
This commit is contained in:
		
							parent
							
								
									316f15db48
								
							
						
					
					
						commit
						3feadddb03
					
				@ -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>  
 | 
				
			||||||
@ -23,7 +26,9 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<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>
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										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;
 | 
				
			||||||
 | 
					    });     
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
@ -4,7 +4,7 @@
 | 
				
			|||||||
 */
 | 
					 */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
var Config = {
 | 
					var Config = {
 | 
				
			||||||
  VERSION : '0.0.6',
 | 
					  VERSION : '0.0.8',
 | 
				
			||||||
  HTTP: {
 | 
					  HTTP: {
 | 
				
			||||||
    host: '127.0.0.1',
 | 
					    host: '127.0.0.1',
 | 
				
			||||||
    port: 8042
 | 
					    port: 8042
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										10
									
								
								version.md
									
									
									
									
									
								
							
							
						
						
									
										10
									
								
								version.md
									
									
									
									
									
								
							@ -1,4 +1,14 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					### **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:**
 | 
					### **v0.0.7:**
 | 
				
			||||||
--- focus on server object
 | 
					--- focus on server object
 | 
				
			||||||
- Renamed server object in server_core.js (Server -> NPGServer)
 | 
					- Renamed server object in server_core.js (Server -> NPGServer)
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user