Browse code

v0.0.8

frtk authored on 12/02/2016 23:36:12
Showing 9 changed files
... ...
@@ -8,8 +8,11 @@
8 8
   <link rel="stylesheet" type="text/css" media="all" href="./css/main.css">
9 9
   <script type="text/javascript" src="http://127.0.0.1:8042/socket.io/socket.io.js"></script>
10 10
   <script type="text/javascript" src="./src/jquery-2.1.3.min.js"></script>
11
-  <script type="text/javascript" src="./js/NPGClient.js"></script>
12
-  <script type="text/javascript" src="./js/socket/SocketIO.js"></script>
11
+  <script type="text/javascript" src="./js/npg_client.js"></script>
12
+  <script type="text/javascript" src="./js/socket/socketio_handler.js"></script>
13
+  <script type="text/javascript" src="./js/keyboard/event_handler.js"></script>
14
+  <script type="text/javascript" src="./js/core/page_base.js"></script>
15
+  <script type="text/javascript" src="./js/pages/login_page.js"></script>
13 16
 </head>
14 17
 
15 18
 <body>  
... ...
@@ -23,7 +26,9 @@
23 23
 
24 24
 <script type="text/javascript">
25 25
 $(document).ready(function() {
26
-  NPGClient.SocketIO.startConnectLoop();;
26
+  NPGClient.evtHandler.init();
27
+  NPGClient.SocketIO.startConnectLoop();
28
+
27 29
   if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo');
28 30
 });
29 31
 </script>
30 32
new file mode 100644
... ...
@@ -0,0 +1,13 @@
0
+/**
1
+ * @file NPGClientConfig.js
2
+ */
3
+
4
+var NPGClient.Config = {
5
+
6
+       
7
+
8
+
9
+
10
+
11
+
12
+}
0 13
new file mode 100644
... ...
@@ -0,0 +1,114 @@
0
+/**
1
+ * @file AppPage.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.AppPage = function(n) { 
6
+    
7
+  Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ });
8
+   
9
+  this.name = n || '';
10
+  // draw loop paramaters
11
+  this.loopIntervalId = 0;
12
+  this.loopDelay = 40; 
13
+  // canvas 
14
+  this.canvas_id = "";
15
+  this.canvas_bcol = "";
16
+  this.canvas = {};
17
+  this.ctx = {};
18
+
19
+  // ui elements   
20
+  this.uiElems = [];
21
+
22
+};
23
+
24
+NPGClient.AppPage.prototype = {
25
+
26
+  constructor: NPGClient.AppPage,
27
+
28
+  //
29
+  setLoopDelay: function(d) {
30
+    this.loopDelay = d;
31
+  },
32
+
33
+  //
34
+  startDrawLoop: function() {
35
+    var self = this;
36
+    self.loopIntervalId = setInterval(function() { 
37
+      self.run(); 
38
+    }, self.loopDelay);
39
+  },
40
+
41
+  //
42
+  stopDrawLoop: function() {
43
+    var self = this;
44
+    clearInterval(self.loopIntervalId); 
45
+    self.loopIntervalId = 0;            
46
+  },
47
+
48
+  //
49
+  run: function() {
50
+    var self = this;
51
+    self.drawUI();
52
+  },
53
+
54
+  //
55
+  configUI: function(id, w, h, c) {
56
+    var self = this;
57
+    self.canvas_id = id;
58
+    self.canvas = document.getElementById(id); 
59
+    self.ctx = self.canvas.getContext("2d");
60
+    self.canvas.width = w;
61
+    self.canvas.height = h;
62
+    self.canvas_bcol = c;
63
+  },
64
+
65
+  //
66
+  addUIObject: function(c) {
67
+    var self = this;
68
+    self.uiElems.push(c);
69
+  },
70
+
71
+  //
72
+  getUIElemByName: function(name) {
73
+    var self = this;
74
+    if (self.uiElems.length > 0) {
75
+      for (var i = 0; i < self.uiElems.length; i++)
76
+ 	if (self.uiElems[i].name == name) return self.uiElems[i];
77
+    }
78
+    return undefined;
79
+  },
80
+
81
+  //
82
+  drawUI: function() {
83
+    var self = this;
84
+    self.clear();
85
+    self.drawUIBackground();
86
+    self.drawUIObjects();	
87
+  },
88
+
89
+  //
90
+  drawUIBackground: function() {
91
+    var self = this;
92
+    self.ctx.fillStyle = self.canvas_bcol;
93
+    self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
94
+  },
95
+  
96
+  //
97
+  drawUIObjects: function() {
98
+    var self = this;
99
+    if (self.uiElems.length > 0) {
100
+      for (var i = 0; i < self.uiElems.length; i++)
101
+	self.uiElems[i].draw(self.ctx);
102
+    }
103
+  },
104
+
105
+  //
106
+  clear: function() {
107
+    var self = this;
108
+    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height); 
109
+  },
110
+
111
+    
112
+};
113
+
0 114
new file mode 100644
... ...
@@ -0,0 +1,51 @@
0
+/**
1
+ * @file event_handling.js
2
+ * @autour frtk@tetalab
3
+ */
4
+
5
+NPGClient.evtHandler = {
6
+
7
+  keysList: {
8
+    F1 : 112,
9
+    SPACE : 32,
10
+    ESC : 27,
11
+    ARROW_UP : 38,
12
+    ARROW_DOWN : 40,
13
+    ENTER : 13,
14
+    DELETE : 46,
15
+    BACKSPACE : 8,
16
+  },  
17
+    
18
+  keyState: {},
19
+  
20
+  //
21
+  init: function() {
22
+    var self = this;
23
+    //
24
+    self.keyState = {};
25
+    for (k in self.keyList) {
26
+      self.keyState[self.keysList[k]] = false;
27
+    }               
28
+    //
29
+    document.addEventListener('keydown',function(e) {
30
+      self.keyState[e.keyCode || e.which] = true;
31
+      self.onKeyDown(e);
32
+    }, true);
33
+    //
34
+    document.addEventListener('keyup',function(e){
35
+      self.keyState[e.keyCode || e.which] = false;
36
+    }, true);                       
37
+  },
38
+
39
+  // 
40
+  loginValidKey: function(k) {
41
+    return (key >= 48 && key <= 90);
42
+  },
43
+   
44
+  //
45
+  onKeyDown : function(evt) {
46
+    console.log(evt.keyCode); 
47
+  },
48
+
49
+
50
+}
0 51
new file mode 100644
... ...
@@ -0,0 +1,8 @@
0
+/**
1
+ * @file NPGClient.js
2
+ * @author frtk
3
+ */
4
+
5
+var NPGClient = { 'version': '' };
6
+
7
+
0 8
new file mode 100644
... ...
@@ -0,0 +1,13 @@
0
+/**
1
+ * @file login_page.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.LoginPage = {
6
+
7
+    pageIdx: 0,
8
+    page: new NPGClient.AppPage('login'),
9
+    
10
+    
11
+}; 
12
+
0 13
new file mode 100644
... ...
@@ -0,0 +1,77 @@
0
+/**
1
+ * @file SocketIO.js
2
+ * @author frtk
3
+ */
4
+
5
+NPGClient.SocketIO = { 
6
+
7
+  // Connection to server  
8
+  conn_nAttempts: 0,
9
+  conn_IntervalID: 0,
10
+  socket: {},
11
+  isConnected: false,
12
+
13
+  // start connection loop
14
+  initConnectLoop:  function() { 
15
+    var self = this;
16
+      console.log();  
17
+      self.startConnectLoop();
18
+  },
19
+  // start connection loop
20
+  startConnectLoop:  function() { 
21
+    var self = this;
22
+    self.conn_IntervalID = setInterval(function() { self.connect(); }, 1500); 
23
+  },
24
+  // stop connection loop
25
+  stopConnectLoop:  function() { 
26
+    var self =  this;
27
+    clearInterval(self.conn_IntervalID);
28
+    self.conn_IntervalID = 0;
29
+    self.conn_nAttempts = 0;
30
+  },
31
+  // connect socket
32
+  connect: function() {
33
+    var self = this;  
34
+    // check for connection
35
+    if (self.isConnected) {
36
+      return false;  
37
+    }
38
+    //
39
+    if (typeof io !== 'object') {
40
+      //console.log('[NPGClient.SocketIO] io object is unknown');
41
+    }
42
+    if ((typeof self.socket.socket === 'undefined')) {      
43
+      console.log('[NPGClient.SocketIO] attempting server connection...');
44
+      self.socket = io.connect();  
45
+      self.defineSocketMsgs();
46
+    } else if (!self.socket.socket.connected && !self.socket.socket.connecting) {
47
+      console.log('[NPGClient.SocketIO] attempting server connection...');
48
+      self.socket.socket.connect();   
49
+    }
50
+  },
51
+  // Define Socket Messages
52
+  defineSocketMsgs: function() {
53
+    var self = this;  
54
+    if (typeof self.socket === 'undefined') {
55
+      return false;
56
+    }
57
+    console.log('[NPGClient.SocketIO] deploying socket object features.');
58
+    // 'connecting' 
59
+    self.socket.on('connecting', function () {
60
+      console.log('[NPGClient.SocketIO] connecting ...');
61
+    });
62
+    // 'connect'
63
+    self.socket.on('connect', function() {
64
+      console.log('[NPGClient.SocketIO] connected to server');
65
+      self.stopConnectLoop();
66
+      self.isConnected = true;
67
+    });
68
+    // 'disconnect'
69
+    self.socket.on('disconnect', function() {
70
+      console.log('[NPGClient.SocketIO] > Server: socket disconnected.');
71
+      self.startConnectLoop();
72
+      self.isConnected = false;
73
+    });     
74
+  }
75
+  
76
+};
... ...
@@ -4,7 +4,7 @@
4 4
  */
5 5
 
6 6
 var Config = {
7
-  VERSION : '0.0.6',
7
+  VERSION : '0.0.8',
8 8
   HTTP: {
9 9
     host: '127.0.0.1',
10 10
     port: 8042
... ...
@@ -1,4 +1,14 @@
1 1
 
2
+### **v0.0.8:**
3
+--- focus on client side
4
+- Renamed files (lower case + _ )
5
+- Client directory structure : config, core, keyboard, pages, socket 
6
+- added keyboard event handler basic features
7
+- added AppPage object definition
8
+- added login page skeletton
9
+- nothing crashed
10
+
11
+
2 12
 ### **v0.0.7:**
3 13
 --- focus on server object
4 14
 - Renamed server object in server_core.js (Server -> NPGServer)