Skip to content

GitLab

Commit a67357e4 authored by DoNaTio s.r.o.'s avatar DoNaTio s.r.o.
Browse files

a lot changes

parent d38a7862
Hide whitespace changes
Inline Side-by-side
Showing with 269 additions and 184 deletions
.idea/pipo.iml
View file @ a67357e4
......@@ -4,6 +4,7 @@
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="sass-stdlib" level="application" />
</component>
</module>
PlayersCollection.js
View file @ a67357e4
......@@ -5,6 +5,8 @@
module.exports = function() {
var _players = {};
var _countPlayers = 0;
var _internalIndex = 0;
return {
getCount: function(){
return _countPlayers;
......@@ -12,14 +14,24 @@ module.exports = function() {
increaseCount: function(){
_countPlayers++;
},
decreaseCount: function(){
_countPlayers--;
},
addPlayer: function(player){
this.increaseCount();
player.setId(this.getCount()+1);
_internalIndex++;
player.setId( _internalIndex );
_players[player.getId()] = player;
},
getPlayerById: function(id){
return _players[id];
},
removeById: function(id){
if(this.getPlayerById(id)){
delete _players[id];
this.decreaseCount();
}
},
stringify: function(){
var strUser = {};
for (var key in _players) {
......
Racket.js
View file @ a67357e4
......@@ -4,7 +4,8 @@
*/
module.exports = function() {
var _x = 0,
_y = 0;
_y = 0,
_el;
return {
setX: function(x){
_x = x;
......@@ -18,6 +19,12 @@ module.exports = function() {
getY: function(){
return _y;
},
setEl: function(el){
_el = el;
},
show:function(){
_el.show();
},
stringify: function(){
var that = this;
return JSON.stringify({
......
public/ClientPlayer.js
View file @ a67357e4
/**
* ClientPlayer
* @returns {{setName: Function, getName: Function}}
* @param $usernameInput
* @returns {{init: Function, setName: Function, getName: Function, setLoginCallback: Function}}
* @constructor
*/
module.exports = function() {
var _id = '';
function ClientPlayer(dom){
var attributes = {
'name':'',
'id': null,
'inputEl': dom.find('.usernameInput'),
'signedInEl': dom.find('#signedInAs'),
'loginCallback': function(){}
};
return {
init: function(){
var that = this;
attributes.inputEl.keydown(function (event) {
// When the client hits ENTER on their keyboard
if (event.which === 13) {
that.setName($(this).val().trim());
attributes.loginCallback();
}
});
},
setName: function(name){
attributes.name = name;
attributes.signedInEl.text(name);
},
setId: function(id){
_id = id;
attributes.id = id;
},
getId: function(){
return _id;
return attributes.id;
},
stringify: function(){
var that = this;
return JSON.stringify({
name:that.getName(),
id: that.getId()
});
getName: function(){
return attributes.name;
},
setLoginCallback:function(callback){
attributes.loginCallback = callback;
}
};
}
\ No newline at end of file
}
}
public/ClientRacket.js 0 → 100644
View file @ a67357e4
function ClientRacket($el){
var attributes = {
'el': $el
};
return {
}
}
public/Log.js 0 → 100644
View file @ a67357e4
function Log(){
return {
add: function(msg){
Messenger().post(msg);
//attributes.el.append($('<li>').text(msg));
}
}
}
public/index.html 100755 → 100644
View file @ a67357e4
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PiPo</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>PiPo - Multiplayer Ping Pong</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/HubSpot-messenger/build/css/messenger.css" rel="stylesheet">
<link href="vendor/HubSpot-messenger/build/css/messenger-theme-future.css" rel="stylesheet">
<link href="style_boot.css" rel="stylesheet">
</head>
<body>
<div class="pages">
<div class="game-page">
<div class="rackets">
<div class="racket racket1"></div>
<div class="racket racket2"></div>
<div class="racket racket3"></div>
<div class="racket racket4"></div>
<div class="racket racket5"></div>
<div class="racket racket6"></div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">PiPo – Multiplayer awesome ping pong</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right" style="margin-left: 20px;">
<li><a class="logout" href="#">Logout</a></li>
</ul>
<p class="navbar-text navbar-right">
<span class="glyphicon glyphicon-user"></span> Signed in as <span id="signedInAs"></span>
</p>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<a class="disconnectBtn" href="#">Logout</a>
<ul class="messages"></ul>
<div class="rackets">
<div class="racket racket1"></div>
<div class="racket racket2"></div>
<div class="racket racket3"></div>
<div class="racket racket4"></div>
<div class="racket racket5"></div>
<div class="racket racket6"></div>
</div>
<canvas id="table"></canvas>
</div>
</li>
<li class="login page">
</div>
<div class="login-page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14"/>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/HubSpot-messenger/build/js/messenger.min.js"></script>
<script src="vendor/HubSpot-messenger/build/js/messenger-theme-future.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
<script src="/ClientPlayer.js"></script>
<script src="/Log.js"></script>
<script src="/Client.js"></script>
</body>
</html>
\ No newline at end of file
</html>
public/index2.html 0 → 100755
View file @ a67357e4
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PiPo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rackets">
<div class="racket racket1"></div>
<div class="racket racket2"></div>
<div class="racket racket3"></div>
<div class="racket racket4"></div>
<div class="racket racket5"></div>
<div class="racket racket6"></div>
</div>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<h1>Welcome to PiPo – Multiplayer awesome ping pong</h1>
<a class="disconnectBtn" href="#">Logout</a>
<ul class="messages"></ul>
<canvas id="table"></canvas>
</div>
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14"/>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/ClientPlayer.js"></script>
<script src="/Log.js"></script>
<script src="/Client.js"></script>
</body>
</html>
\ No newline at end of file
public/main.js deleted 100755 → 0
View file @ d38a7862
$(function () {
// Initialize varibles
var $window = $(window);
var $usernameInput = $('.usernameInput'); // Input for username
var $messages = $('.messages'); // Messages area
var $inputMessage = $('.inputMessage'); // Input message input box
var $loginPage = $('.login.page'); // The login page
var $chatPage = $('.chat.page'); // The chatroom page
// Prompt for setting a username
var user = {};
var connected = false;
var socket = io();
function addParticipantsMessage(data) {
var message = "Joined:" + data.numUsers;
log(message);
}
// Log a message
function log(message, options) {
var $el = $('<li>').addClass('log').text(message);
addMessageElement($el, options);
}
// Sets the client's username
function setUsername() {
username = cleanInput($usernameInput.val().trim());
// If the username is valid
if (username) {
$loginPage.fadeOut();
$chatPage.show();
$loginPage.off('click');
// Tell the server your username
socket.emit('add user', username);
}
}
// Adds a message element to the messages and scrolls to the bottom
// el - The element to add as a message
// options.fade - If the element should fade-in (default = true)
// options.prepend - If the element should prepend
// all other messages (default = false)
function addMessageElement (el, options) {
$messages.append($(el));
}
// Prevents input from having injected markup
function cleanInput(input) {
return $('<div/>').text(input).text();
}
// Keyboard events
$window.keydown(function (event) {
// When the client hits ENTER on their keyboard
if (event.which === 13) {
setUsername();
}
});
$(document).mousemove(function(event){
var d = {
id:user.id,
x:event.pageX,
y:event.pageY
};
drawRacket(d)
socket.emit('move racket', d);
});
// Whenever the server emits 'login', log the login message
socket.on('login', function (data) {
connected = true;
user = JSON.parse(data.user);
// Display the welcome message
var message = "Welcome to PiPo – Multiplayer awesome ping pong!!!";
log(message, {
prepend: true
});
addParticipantsMessage(data);
});
socket.on('show racket', function(data){
drawRacket(data);
})
// Whenever the server emits 'user joined', log it in the chat body
socket.on('user joined', function (data) {
log(data.username + ' joined');
addParticipantsMessage(data);
});
// Whenever the server emits 'user left', log it in the chat body
socket.on('user left', function (data) {
log(data.username + ' left');
addParticipantsMessage(data);
});
function drawRacket(data){
$('div.racket' + data.id).css({ left:data.x + 20, top: data.y + 20});
}
$('.disconnectBtn').click(function(){
socket.emit('disconnectUser', user);
});
});
public/style_boot.css 0 → 100644
View file @ a67357e4
body {
}
.pipo-holder {
/*padding: 40px 15px;*/
/*text-align: center;*/
width: 100%;
height: 100%;
}
.game-page{
display: none;
}
/* Login Page */
.login-page {
background-color: #000;
width: 100%;
height: 100%;
position: absolute;
}
.login-page .form {
height: 100px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.login-page .form .usernameInput {
background-color: transparent;
border: none;
border-bottom: 2px solid #fff;
outline: none;
padding-bottom: 15px;
text-align: center;
width: 400px;
}
.login-page .title {
font-size: 200%;
}
.login-page .usernameInput {
font-size: 200%;
letter-spacing: 3px;
}
.login-page .title, .login-page .usernameInput {
color: #fff;
font-weight: 100;
}
\ No newline at end of file
index.js → server.js
View file @ a67357e4
......@@ -21,7 +21,7 @@ io.on('connection', function (socket) {
// when the client emits 'add user', this listens and executes
socket.on('add user', function (username) {
// we store the username in the socket session for this client
socket.username = username;
//socket.username = username;
var newPlayer = Player();
newPlayer.setName(username);
......@@ -31,43 +31,46 @@ io.on('connection', function (socket) {
socket.emit('login', {
numUsers: PlayersCollection.getCount(),
user: newPlayer.stringify()
username: newPlayer.getName(),
id: newPlayer.getId()
});
//// echo globally (all clients) that a person has connected
socket.broadcast.emit('user joined', {
username: socket.username,
username: newPlayer.getName(),
numUsers: PlayersCollection.getCount()
});
socket.on('move racket', function (data) {
console.log(data);
var player = PlayersCollection.getPlayerById(data.id);
var r = player.getRacket();
r.setX(data.x);
r.setY(data.y);
var col = PlayersCollection.stringify();
//var r = player.getRacket();
//
//r.setX(data.x);
//r.setY(data.y);
//
//socket.broadcast.emit('show racket', {
// 'id': data.id,
// 'x':data.x,
// 'y':data.y
//});
})
// when the user disconnects.. perform this
socket.on('disconnectUser', function (data) {
PlayersCollection.removeById( data.id );
//@todo remove racket
socket.broadcast.emit('show racket', {
'id': data.id,
'x':data.x,
'y':data.y
// // echo globally that this client has left
socket.broadcast.emit('user left', {
username: socket.username,
numUsers: PlayersCollection.getCount()
});
})
socket.disconnect();
});
});
// when the user disconnects.. perform this
socket.on('disconnectUser', function (data) {
console.log(data);
//// remove the username from global usernames list
//if (addedUser) {
// delete usernames[socket.username];
// --numUsers;
//
// // echo globally that this client has left
// socket.broadcast.emit('user left', {
// username: socket.username,
// numUsers: numUsers
// });
//}
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment