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">
 | 
			
		||||
  <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>  
 | 
			
		||||
@ -23,7 +26,9 @@
 | 
			
		||||
 | 
			
		||||
<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;
 | 
			
		||||
    });     
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
};
 | 
			
		||||
@ -4,7 +4,7 @@
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
var Config = {
 | 
			
		||||
  VERSION : '0.0.6',
 | 
			
		||||
  VERSION : '0.0.8',
 | 
			
		||||
  HTTP: {
 | 
			
		||||
    host: '127.0.0.1',
 | 
			
		||||
    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:**
 | 
			
		||||
--- focus on server object
 | 
			
		||||
- Renamed server object in server_core.js (Server -> NPGServer)
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user