Browse code

version v0.1.1

frtk authored on 13/02/2016 20:06:40
Showing 15 changed files
... ...
@@ -12,7 +12,13 @@
12 12
   <script type="text/javascript" src="./lib/socket/socketio_handler.js"></script>
13 13
   <script type="text/javascript" src="./lib/keyboard/event_handler.js"></script>
14 14
   <script type="text/javascript" src="./lib/core/page_base.js"></script>
15
-  <script type="text/javascript" src="./lib/pages/login_page.js"></script>
15
+  <script type="text/javascript" src="./lib/core/page_handler.js"></script>
16
+  <script type="text/javascript" src="./lib/ui/ui.js"></script>
17
+  <script type="text/javascript" src="./lib/ui/objects/ui_object.js"></script>
18
+  <script type="text/javascript" src="./lib/ui/objects/ui_style.js"></script>
19
+  <script type="text/javascript" src="./lib/ui/objects/ui_point2d.js"></script>
20
+  <script type="text/javascript" src="./lib/ui/objects/ui_rect.js"></script>
21
+  <script type="text/javascript" src="./lib/ui/objects/ui_label.js"></script>
16 22
 </head>
17 23
 
18 24
 <body>  
... ...
@@ -26,10 +32,10 @@
26 26
 
27 27
 <script type="text/javascript">
28 28
 $(document).ready(function() {
29
+  NPGClient.PageHandler.setup();
30
+  NPGClient.ui.setupUI('pong',NPGClient.CAN_W, NPGClient.CAN_H, NPGClient.CAN_COL);
29 31
   NPGClient.evtHandler.init();
30 32
   NPGClient.SocketIO.startConnectLoop();
31
-
32
-  if (NPGClient.SocketIO.isConnected) NPGClient.SocketIO.socket.emit('data','yo');
33 33
 });
34 34
 </script>
35 35
 
... ...
@@ -8,14 +8,7 @@ NPGClient.AppPage = function(n) {
8 8
   Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ });
9 9
    
10 10
   this.name = n || '';
11
-  // draw loop paramaters
12
-  this.loopIntervalId = 0;
13
-  this.loopDelay = 40; 
14
-  // canvas 
15
-  this.canvas_id = "";
16
-  this.canvas_bcol = "";
17
-  this.canvas = {};
18
-  this.ctx = {};
11
+  this.idx = NPGClient.pageCount;   
19 12
 
20 13
   // ui elements   
21 14
   this.uiElems = [];
... ...
@@ -27,47 +20,17 @@ NPGClient.AppPage.prototype = {
27 27
   constructor: NPGClient.AppPage,
28 28
 
29 29
   //
30
-  setLoopDelay: function(d) {
31
-    this.loopDelay = d;
32
-  },
33
-
34
-  //
35
-  startDrawLoop: function() {
36
-    var self = this;
37
-    self.loopIntervalId = setInterval(function() { 
38
-      self.run(); 
39
-    }, self.loopDelay);
40
-  },
41
-
42
-  //
43
-  stopDrawLoop: function() {
44
-    var self = this;
45
-    clearInterval(self.loopIntervalId); 
46
-    self.loopIntervalId = 0;            
47
-  },
48
-
49
-  //
50
-  run: function() {
30
+  addUIObject: function(c) {
51 31
     var self = this;
52
-    self.drawUI();
32
+    self.uiElems.push(c);
53 33
   },
54 34
 
55 35
   //
56
-  configUI: function(id, w, h, c) {
36
+  getUIElems: function() {
57 37
     var self = this;
58
-    self.canvas_id = id;
59
-    self.canvas = document.getElementById(id); 
60
-    self.ctx = self.canvas.getContext("2d");
61
-    self.canvas.width = w;
62
-    self.canvas.height = h;
63
-    self.canvas_bcol = c;
38
+    return self.uiElems;     
64 39
   },
65 40
 
66
-  //
67
-  addUIObject: function(c) {
68
-    var self = this;
69
-    self.uiElems.push(c);
70
-  },
71 41
 
72 42
   //
73 43
   getUIElemByName: function(name) {
... ...
@@ -79,36 +42,12 @@ NPGClient.AppPage.prototype = {
79 79
     return undefined;
80 80
   },
81 81
 
82
-  //
83
-  drawUI: function() {
82
+  // 
83
+  printInfo: function() {
84 84
     var self = this;
85
-    self.clear();
86
-    self.drawUIBackground();
87
-    self.drawUIObjects();	
88
-  },
85
+    console.log('[NPGClient.AppPage] name:' + self.name + ', nUIElems=' + self.pages.length);
89 86
 
90
-  //
91
-  drawUIBackground: function() {
92
-    var self = this;
93
-    self.ctx.fillStyle = self.canvas_bcol;
94
-    self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
95
-  },
96
-  
97
-  //
98
-  drawUIObjects: function() {
99
-    var self = this;
100
-    if (self.uiElems.length > 0) {
101
-      for (var i = 0; i < self.uiElems.length; i++)
102
-	self.uiElems[i].draw(self.ctx);
103
-    }
104
-  },
105
-
106
-  //
107
-  clear: function() {
108
-    var self = this;
109
-    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height); 
110
-  },
87
+  }
111 88
 
112
-    
113 89
 };
114 90
 
115 91
new file mode 100644
... ...
@@ -0,0 +1,48 @@
0
+/**
1
+ * @file page_handler.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.PageHandler = {
6
+
7
+  currPage: '',
8
+  pages: [],  
9
+    
10
+  //
11
+  setup: function() {
12
+    var self = this; 
13
+    self.currPage = 'login';
14
+    // create login page 
15
+    self.createLoginPage();
16
+  },
17
+
18
+  //
19
+  getCurrPageUIElems: function() {
20
+    var self = this;
21
+    return self.getPageByName(self.currPage).getUIElems();
22
+  },
23
+
24
+
25
+  //
26
+  getPageByName: function(name) {
27
+    var self = this;
28
+    if (self.pages.length > 0) {
29
+      for (var i = 0; i < self.pages.length; i++) {
30
+        if (name == self.pages[i].name) return self.pages[i];
31
+      }
32
+    }
33
+    return undefined;
34
+  },
35
+
36
+  // create login page
37
+  createLoginPage: function() {
38
+    //
39
+    var self = this;
40
+    var p = new NPGClient.AppPage('login');
41
+    // Title label     
42
+    p.addUIObject(new NPGClient.UILabel('login', NPGClient.LABELS.TITLE));
43
+    self.pages.push(p);
44
+  },
45
+
46
+}; 
47
+
... ...
@@ -44,7 +44,7 @@ NPGClient.evtHandler = {
44 44
    
45 45
   //
46 46
   onKeyDown : function(evt) {
47
-    console.log(evt.keyCode); 
47
+    //console.log(evt.keyCode); 
48 48
   },
49 49
 
50 50
 
... ...
@@ -5,4 +5,24 @@
5 5
 
6 6
 var NPGClient = { 'version': '' };
7 7
 
8
+// ui
9
+NPGClient.CAN_W = 800;
10
+NPGClient.CAN_H = 500;
11
+NPGClient.CAN_COL = '#000000';
12
+
13
+// counters
14
+NPGClient.pageCount = -1;
15
+
16
+// Labels
17
+NPGClient.LABELS = {
18
+  TITLE: {
19
+    'text': 'nodePong',
20
+    'x': 280,
21
+    'y': 150,
22
+    'f': '50px Lucida Console',
23
+    'c': '#FFFFFF'
24
+  }
25
+}
26
+
27
+
8 28
 
9 29
new file mode 100644
... ...
@@ -0,0 +1,40 @@
0
+/**
1
+ * @file ui_label.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UILabel = function(n, o) { 
6
+
7
+  // obj name
8
+  this.name = n !== undefined ? n : '';
9
+  // bkg rect
10
+  //this.bkg = r !== undefined ? r : new NPGClient.UIRect();
11
+  // pos
12
+  this.x = o.x !== undefined ? o.x : 0; 
13
+  this.y = o.y !== undefined ? o.y : 0; 
14
+  // text
15
+  this.text = o.text !== undefined ? o.text : '';
16
+  // font
17
+  this.font = o.f !== undefined ? o.f : '';
18
+  // color
19
+  this.col = o.c !== undefined ? o.c : '';
20
+
21
+};
22
+
23
+
24
+NPGClient.UILabel.prototype = {
25
+
26
+  // Constructor
27
+  constructor: NPGClient.UILabel,
28
+  
29
+  //
30
+  draw: function(ctx) {
31
+    var self = this;
32
+    //self.rect.draw(ctx); 
33
+    ctx.font = self.font
34
+    ctx.fillStyle = self.col;
35
+    ctx.fillText(self.text, self.x, self.y);  
36
+  }
37
+
38
+};
39
+
0 40
new file mode 100644
... ...
@@ -0,0 +1,35 @@
0
+/**
1
+ * @file ui_line.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.Line = function(name, p1, p2, style) { 
6
+
7
+    NPGClient.UIObject.call(this, name, style);
8
+    
9
+    this.p1 = p1 !== undefined ? p1 : new NPGClient.Point2D();
10
+    this.p2 = p2 !== undefined ? p2 : new NPGClient.Point2D();
11
+
12
+};
13
+
14
+NPGClient.Line.prototype = Object.create(NPGClient.UIObject.prototype);
15
+
16
+NPGClient.Line.prototype.constructor = NPGClient.Line;
17
+
18
+NPGCLient.Line.prototype.draw = function(ctx) {
19
+    var self = this;
20
+    self.drawLine(ctx);
21
+};
22
+
23
+NPGClient.Line.prototype.drawLine = function(ctx) {
24
+	
25
+    var self = this;
26
+    self.applyStyle(ctx);
27
+
28
+    ctx.beginPath();
29
+    ctx.moveTo(self.p1.x, self.p1.y);
30
+    ctx.lineTo(self.p2.x, self.p2.y);
31
+    ctx.stroke();
32
+
33
+};
34
+
0 35
new file mode 100644
... ...
@@ -0,0 +1,45 @@
0
+/**
1
+ * @file ui_object
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIObject = function(name, style) { 
6
+
7
+    //Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ });
8
+    
9
+    this.name = name !== undefined ? name : '';
10
+    this.style = style !== undefined ? style : new NPGClient.UIStyle();
11
+
12
+};
13
+
14
+NPGClient.UIObject.prototype = {
15
+    
16
+    constructor: NPGClient.UIObject,
17
+
18
+    setStyle: function(s) {
19
+	this.style = s;
20
+    },
21
+    
22
+    hasBorders: function() {
23
+	return this.style.getBorderMode();
24
+    },
25
+
26
+    hasFillStyle: function() {
27
+	return this.style.getFillMode();
28
+    },
29
+    
30
+    applyStyle: function(ctx) {
31
+	
32
+	var self = this;
33
+	if (self.style.getBorderMode()) {
34
+	    ctx.lineWidth = self.style.bw;
35
+	    ctx.strokeStyle = self.style.bc;
36
+	}
37
+	
38
+	if (self.style.getFillMode()) {
39
+	    ctx.fillStyle = self.style.fc;
40
+	}
41
+    }
42
+    
43
+};
44
+
0 45
new file mode 100644
... ...
@@ -0,0 +1,37 @@
0
+/**
1
+ * @file ui_point2d.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIPoint2D = function(x, y) { 
6
+  
7
+  // (x,y) position
8
+  this.x = x !== undefined ? x : 0;
9
+  this.y = y !== undefined ? y : 0;
10
+
11
+};
12
+
13
+NPGClient.UIPoint2D.prototype = {
14
+    
15
+  // Constructor
16
+  constructor: NPGClient.UIPoint2D,
17
+
18
+  //
19
+  set: function(x, y) {
20
+    this.x = x;
21
+    this.y = y;
22
+  },
23
+
24
+  //
25
+  setX: function(x) {
26
+    this.x = x;
27
+  },
28
+  
29
+  //
30
+  setY: function(y) {
31
+    this.y = y;
32
+  }
33
+  
34
+
35
+};
36
+
0 37
new file mode 100644
... ...
@@ -0,0 +1,54 @@
0
+/**
1
+ * @file ui_rect.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIRect = function(n, p, w, h, s) { 
6
+
7
+  // obj name
8
+  this.name = n !== undefined ? n : '';
9
+  // geom
10
+  this.pos = p !== undefined ? p : new NPGClient.UIPoint2D();  
11
+  this.w = w !== undefined ? w : 0;
12
+  this.h = h !== undefined ? h : 0;
13
+  // style
14
+  this.style = s !== undefined ? s : new NPGclient.UIStyle(); 
15
+
16
+};
17
+
18
+NPGClient.UIRect.prototype = {
19
+   
20
+  // Constructor
21
+  constructor: NPGClient.UIRect,
22
+    
23
+  //
24
+
25
+
26
+  //
27
+  draw: function(ctx) {
28
+    var self = this;
29
+    if (!self.s.fillMode()) {
30
+      drawNoFill(ctx, self.x, self.y, self.w, self.h, self.lw, self.lc);
31
+    } else {
32
+      drawFill(ctx, self.x, self.y, self.w, self.h, self.fc);
33
+    }
34
+  },
35
+
36
+  //
37
+  drawFill: function(ctx) {
38
+    var self = this;  
39
+    self.applyStyle(ctx);
40
+    ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h);
41
+  },
42
+
43
+  //
44
+  drawNoFill: function(ctx, x1, y1, w, h, lw, c) {
45
+    var self = this;      
46
+    ctx.beginPath();
47
+    self.applyStyle(ctx);
48
+    ctx.rect(self.pos.x, self.pos.y, self.w, self.h);
49
+    ctx.stroke();
50
+  },
51
+
52
+};
53
+
0 54
new file mode 100644
... ...
@@ -0,0 +1,51 @@
0
+/**
1
+ * @file ui_style.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.UIStyle = function(fm, fc, bm, bw, bc) { 
6
+
7
+  this.fm = fm !== undefined ? fm : false;
8
+  this.fc = fc !== undefined ? fc : '';
9
+  this.bm = bm !== undefined ? bm : false;
10
+  this.bw = bw !== undefined ? bw : 0;
11
+  this.bc = bc !== undefined ? bc : '';
12
+
13
+};
14
+
15
+NPGClient.UIStyle.prototype = {
16
+    
17
+  constructor: NPGClient.UIStyle,
18
+  
19
+  borderMode: function() {
20
+    return this.bm;
21
+  },
22
+
23
+  fillMode: function() {
24
+    return this.fm;
25
+  },
26
+
27
+  setBorders: function(m, w, c) {
28
+    this.bm = m;
29
+    this.bw = w;
30
+    this.bc = c;
31
+  },
32
+
33
+  setFillStyle: function(m, c) {
34
+    this.fm = m;
35
+    this.fc = c;
36
+  },
37
+    
38
+  applyStyle: function(ctx) {
39
+    var self = this;
40
+    // fill style
41
+    if (fm == true) ctx.fillStyle = self.fc; 	
42
+    // border mode	  
43
+    if (bm == true) {
44
+      ctx.lineWidth = bw;
45
+      ctx.strokeStyle = bc;
46
+    }	
47
+  }
48
+    
49
+};
50
+
0 51
new file mode 100644
... ...
@@ -0,0 +1,101 @@
0
+/**
1
+ * @file ui.js
2
+ * @author frtk@tetalab
3
+ */
4
+
5
+NPGClient.ui = { 
6
+
7
+  // canvas 
8
+  canvas_id: '',
9
+  canvas_bcol: '',
10
+  canvas: {},
11
+  ctx: {},
12
+
13
+  // draw loop paramaters
14
+  loopIntervalId: 0,
15
+  loopDelay: 40, 
16
+
17
+
18
+  /* 
19
+   * init
20
+   */
21
+  //
22
+  setupUI: function(id, w, h, c) {
23
+    var self = this;
24
+    self.canvas_id = id;
25
+    self.canvas = document.getElementById(id); 
26
+    self.ctx = self.canvas.getContext("2d");
27
+    self.canvas.width = w;
28
+    self.canvas.height = h;
29
+    self.canvas_bcol = c;
30
+    // start draw loop
31
+    self.startDrawLoop();
32
+  },
33
+
34
+
35
+  /* 
36
+   * Draw loop
37
+   */
38
+  //
39
+  setLoopDelay: function(d) {
40
+    this.loopDelay = d;
41
+  },
42
+
43
+  //
44
+  startDrawLoop: function() {
45
+    var self = this;
46
+    self.loopIntervalId = setInterval(function() { 
47
+      self.run(); 
48
+    }, self.loopDelay);
49
+  },
50
+
51
+  //
52
+  stopDrawLoop: function() {
53
+    var self = this;
54
+    clearInterval(self.loopIntervalId); 
55
+    self.loopIntervalId = 0;            
56
+  },
57
+
58
+  //
59
+  run: function() {
60
+    var self = this;
61
+    self.drawPage();
62
+  },
63
+
64
+
65
+  /* 
66
+   * Draw functions
67
+   */
68
+  //
69
+  drawPage: function() {
70
+    var self = this;
71
+    self.clear();
72
+    self.drawUIBackground();
73
+    self.drawUIObjects();	
74
+  },
75
+
76
+  //
77
+  drawUIBackground: function() {
78
+    var self = this;
79
+    self.ctx.fillStyle = self.canvas_bcol;
80
+    self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
81
+  },
82
+
83
+  //
84
+  drawUIObjects: function() {
85
+    var self = this;
86
+    var elems = NPGClient.PageHandler.getCurrPageUIElems();  
87
+    if (elems !== undefined && elems.length > 0) {
88
+	for (var i = 0; i < elems.length; i++) elems[i].draw(self.ctx);
89
+    }
90
+  },
91
+
92
+  //
93
+  clear: function() {
94
+    var self = this;
95
+    self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height); 
96
+  },
97
+
98
+    
99
+};
100
+
... ...
@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "npg_app.js",
3
-  "version": "0.1.0",
3
+  "version": "0.1.1",
4 4
   "description": "Multiplayer online Pong Game using nodejs and socket.io",
5 5
   "directories": {
6 6
     "server": "server",
... ...
@@ -4,7 +4,7 @@
4 4
  */
5 5
 
6 6
 var Config = {
7
-  VERSION : '0.1.0',
7
+  VERSION : '0.1.1',
8 8
   HTTP: {
9 9
     host: '127.0.0.1',
10 10
     port: 8042
... ...
@@ -1,5 +1,25 @@
1 1
 
2 2
 
3
+### **v0.1.1:**
4
+-------------------------- 
5
+focus: client ui lib
6
+-------------------------- 
7
+---- added app page handling in client/core
8
+- page_base.js
9
+- page_handler.js 
10
+---- added ui handling in /client/ui
11
+- ui.js
12
+---- added ui objects in /client/ui/objects
13
+- ui_label.js
14
+- ui_line.js
15
+- ui_object.js
16
+- ui_point2d.js
17
+- ui_rect.js
18
+- ui_style.js
19
+---- login page
20
+- created login page with title
21
+
22
+
3 23
 ### **v0.1.0:**
4 24
 -------------------------- 
5 25
 focus: app