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

1

parent 9b97b4b4
......@@ -7,6 +7,7 @@ module.exports = function() {
var _name = '',
_racket = '',
_id = '';
_team = 0;
return {
setName: function(name){
_name = name;
......@@ -26,6 +27,12 @@ module.exports = function() {
getRacket: function () {
return _racket;
},
setTeam: function(team){
_team = team;
},
getTeam: function(){
return _team;
},
stringify: function(){
var that = this;
......
......@@ -21,6 +21,7 @@ module.exports = function() {
this.increaseCount();
_internalIndex++;
player.setId( _internalIndex );
player.setTeam(_internalIndex % 2);
_players[player.getId()] = player;
},
getPlayerById: function(id){
......
// Setup basic express server
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;
var Player = require('./Player.js').Player;
server.listen(port, function () {
console.log('Server listening at port %d', port);
});
// Routing
app.use(express.static(__dirname + '/public'));
// usernames which are currently connected to the chat
var Players = {};
var usernames = {};
var numUsers = 0;
io.on('connection', function (socket) {
var addedUser = false;
// when the client emits 'new message', this listens and executes
socket.on('new message', function (data) {
// we tell the client to execute 'new message'
socket.broadcast.emit('new message', {
username: socket.username,
message: data
});
});
// 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;
// add the client's username to the global list
usernames[username] = username;
++numUsers;
addedUser = true;
socket.emit('login', {
numUsers: numUsers
});
// echo globally (all clients) that a person has connected
socket.broadcast.emit('user joined', {
username: socket.username,
numUsers: numUsers
});
});
// when the client emits 'typing', we broadcast it to others
socket.on('typing', function () {
socket.broadcast.emit('typing', {
username: socket.username
});
});
// when the client emits 'stop typing', we broadcast it to others
socket.on('stop typing', function () {
socket.broadcast.emit('stop typing', {
username: socket.username
});
});
// when the user disconnects.. perform this
socket.on('disconnect', function () {
// 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
});
}
});
});
/**
* ClientBall
* @param $el
* @returns {{init: Function, setAxis: Function, redraw: Function}}
* @constructor
*/
function ClientBall($el){
var attributes = {
el: $el,
x: 0,
y: 0
};
return {
init: function(){
},
setAxis: function(x,y){
attributes.x = x;
attributes.y = y;
},
redraw: function(){
attributes.el.css('top',y);
attributes.el.css('left',x);
}
}
}
......@@ -8,6 +8,7 @@ $(function () {
var log = new Log($('.messages'));
var score = new ClientScore( $('.score') );
// Prompt for setting a username
var user = new ClientPlayer($('.pages'));
user.setLoginCallback(function () {
......@@ -49,6 +50,7 @@ $(function () {
// Whenever the server emits 'user joined', log it in the chat body
socket.on('user joined', function (data) {
log.add(data.username + ' joined');
log.add(data.username + ' is team ' + data.team);
});
// Whenever the server emits 'user left', log it in the chat body
......
function ClientScore(el){
var attributes = {
'$el':el,
'team0': 0,
'team1': 0
};
return {
increaseScoreTeam0: function(){
attributes.team0++;
this.updateScore()
},
increaseScoreTeam1: function(){
attributes.team1++;
this.updateScore();
},
updateScore: function(){
attributes.$el.find('team0').text( attributes.team0 );
attributes.$el.find('team1').text( attributes.team1 );
}
}
}
......@@ -50,6 +50,7 @@
</div>
<div id="playground">
<div class="score"><span class="team0">0</span>:<span class="team1">0</span></div>
<div id="table"></div>
</div>
</div>
......@@ -72,7 +73,10 @@
<script src="/socket.io/socket.io.js"></script>
<script src="/ClientScore.js"></script>
<script src="/ClientScore.js"></script>
<script src="/ClientPlayer.js"></script>
<script src="/Log.js"></script>
<script src="/ClientMain.js"></script>
......
<!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
<!DOCTYPE html>
<html lang="en">
<head>
<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</title>
<!-- Bootstrap core CSS -->
<link href="./vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-default">Learn more</a>
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
</body>
</html>
\ No newline at end of file
/* Fix user-agent */
* {
box-sizing: border-box;
}
html {
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
html, input {
font-family:
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica,
Arial,
"Lucida Grande",
sans-serif;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
ul {
list-style: none;
word-wrap: break-word;
}
/* Pages */
.pages {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page {
height: 100%;
position: absolute;
width: 100%;
}
/* Login Page */
.login.page {
background-color: #000;
}
.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;
}
/* Chat page */
.chat.page {
display: none;
}
/* Font */
.messages {
font-size: 150%;
}
.inputMessage {
font-size: 100%;
}
.log {
color: gray;
font-size: 70%;
margin: 5px;
text-align: center;
}
/* Messages */
.chatArea {
height: 100%;
padding-bottom: 60px;
}
.messages {
height: 100%;
margin: 0;
overflow-y: scroll;
padding: 10px 20px 10px 20px;
}
.message.typing .messageBody {
color: gray;
}
.username {
float: left;
font-weight: 700;
overflow: hidden;
padding-right: 15px;
text-align: right;
}
/* Input */
.inputMessage {
border: 10px solid #000;
bottom: 0;
height: 60px;
left: 0;
outline: none;
padding-left: 10px;
position: absolute;
right: 0;
width: 100%;
}
.rackets .racket{
position: absolute;
left:0;
top:0;
width: 30px;
height: 30px;
z-index: 99999;
}
.racket1{ background: url(images/racket.png) no-repeat; }
.racket2{ background: url(images/racket-green.png) no-repeat; }
.racket3{ background: url(images/racket-blue.png) no-repeat; }
.racket4{ background: url(images/azure.png) no-repeat; }
.racket5{ background: pink; }
.racket6{ background: gray; }
#table{width: 800px; height: 400px; background-color: green;}
\ No newline at end of file
......@@ -95,7 +95,7 @@ body {
background: url(images/parkety.jpg);
width: 968px;
height: 776px;
margin: 50px auto;
margin-top: 50px;
position: relative;
}
......@@ -103,5 +103,15 @@ body {
width: 768px;
height: 576px;
background: url(images/table.png) no-repeat;
position: absolute;
top:100px;
left: 100px;
}
.score{
font-size: 38px;
color:white;
position: absolute;
top: 50px;
left: 458px;
}
......@@ -37,7 +37,8 @@ io.on('connection', function (socket) {
//// echo globally (all clients) that a person has connected
socket.broadcast.emit('user joined', {
username: newPlayer.getName(),
numUsers: PlayersCollection.getCount()
numUsers: PlayersCollection.getCount(),
team: newPlayer.getTeam()
});
socket.on('move racket', function (data) {
......
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