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">
|
<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>
|
||||||
@ -21,37 +24,11 @@
|
|||||||
|
|
||||||
</html>
|
</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">
|
<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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
22
nodePong.js
22
nodePong.js
@ -13,39 +13,33 @@ var express = require('express');
|
|||||||
var http = require('http');
|
var http = require('http');
|
||||||
//--- server app libs & params
|
//--- server app libs & params
|
||||||
//var servP = require('./server/server_config.js');
|
//var servP = require('./server/server_config.js');
|
||||||
var nPong = require('./server/server_core.js');
|
var npg = require('./server/server_core.js');
|
||||||
//--- nodePong config
|
//--- nodePong config
|
||||||
var config = require('./server/server_config.js');
|
var cfg = require('./server/server_config.js');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
nPong.Server.setVersion(config.VERSION);
|
npg.NPGServer.init(cfg.Config);
|
||||||
nPong.Server.log("$ ##### nodePong - v" + nPong.Server.version);
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* starting HTTP and socket.io services
|
* starting HTTP and socket.io services
|
||||||
*/
|
*/
|
||||||
//--- HTTP server
|
//--- 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 app = express();
|
||||||
var httpserv = http.createServer(app);
|
var httpserv = http.createServer(app);
|
||||||
httpserv.listen(config.HTTP.port);
|
httpserv.listen(npg.NPGServer.port);
|
||||||
//--- allow access to static files from "/client" directory
|
//--- allow access to static files from "/client" directory
|
||||||
app.use(express.static(__dirname + '/client/'));
|
app.use(express.static(__dirname + '/client/'));
|
||||||
|
|
||||||
//--- socket.io
|
//--- 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 } );
|
var io = require('socket.io').listen(httpserv, { log: true } );
|
||||||
//-- setup server socket handling features
|
//-- 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
|
* @author frtk
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var VERSION = '0.0.5';
|
var Config = {
|
||||||
|
VERSION : '0.0.8',
|
||||||
/**
|
HTTP: {
|
||||||
* HTTP Service
|
host: '127.0.0.1',
|
||||||
*/
|
port: 8042
|
||||||
var HTTP = {
|
},
|
||||||
port: 8042,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -20,6 +19,5 @@ var HTTP = {
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
if (typeof exports !== "undefined") {
|
if (typeof exports !== "undefined") {
|
||||||
exports.HTTP = HTTP;
|
exports.Config = Config;
|
||||||
exports.VERSION = VERSION;
|
|
||||||
}
|
}
|
||||||
|
@ -10,13 +10,16 @@
|
|||||||
* nodePong Server Object
|
* nodePong Server Object
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
var Server = {
|
var NPGServer = {
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Data
|
* Data
|
||||||
*/
|
*/
|
||||||
// version
|
// app
|
||||||
version: '',
|
version: '',
|
||||||
|
host: '',
|
||||||
|
port: 0,
|
||||||
|
|
||||||
// Users and Games
|
// Users and Games
|
||||||
users: [],
|
users: [],
|
||||||
games: [],
|
games: [],
|
||||||
@ -26,9 +29,12 @@ var Server = {
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
//--- init()
|
//--- init()
|
||||||
init: function() {
|
init: function(o) {
|
||||||
var self = this;
|
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;
|
this.version = s;
|
||||||
},
|
},
|
||||||
|
|
||||||
//--- setIO(io)
|
|
||||||
setIO: function(io) {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Server Messages
|
* Server Messages
|
||||||
@ -90,16 +92,14 @@ var Server = {
|
|||||||
socketHandling: function(io) {
|
socketHandling: function(io) {
|
||||||
var self = this;
|
var self = this;
|
||||||
io.sockets.on('connection', function (socket) {
|
io.sockets.on('connection', function (socket) {
|
||||||
|
//
|
||||||
//
|
self.log('$ User connected : id=' + socket.id);
|
||||||
self.log('$ User connected : id=' + socket.id);
|
|
||||||
|
|
||||||
// 'disconnect'
|
// 'disconnect'
|
||||||
socket.on('disconnect', function () {
|
socket.on('disconnect', function () { self.log('$ User disconnected : id=' + socket.id);
|
||||||
self.log('$ User disconnected : id=' + socket.id);
|
});
|
||||||
connected = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
//
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -135,7 +135,7 @@ var Game = function() {
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
if (typeof exports !== "undefined") {
|
if (typeof exports !== "undefined") {
|
||||||
exports.Server = Server;
|
exports.NPGServer = NPGServer;
|
||||||
exports.User = User;
|
exports.User = User;
|
||||||
exports.Game = Game;
|
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:**
|
### **v0.0.6:**
|
||||||
- focus on socket.io client & server)
|
--- focus on socket.io client & server)
|
||||||
- Renamed SocketClient.js to SocketIO.js (files and objects)
|
- Renamed SocketClient.js to SocketIO.js (files and objects)
|
||||||
- Added SocketIO object (NGPClient lib in /client/js/)
|
- Added SocketIO object (NGPClient lib in /client/js/)
|
||||||
- Implemented socket.io client connection (with loop) => working
|
- Implemented socket.io client connection (with loop) => working
|
||||||
|
Loading…
Reference in New Issue
Block a user