Permalink
Browse files

initial dashboard checkin

  • Loading branch information...
dwcares committed Sep 16, 2015
1 parent 5e37692 commit 0809728b2d0387030589536ca71a26d7bc07ff90
Showing with 169 additions and 15 deletions.
  1. +18 −1 app.js
  2. +8 −0 dashboard/dashboard.css
  3. +18 −0 dashboard/dashboard.html
  4. +63 −0 dashboard/dashboard.js
  5. +44 −4 public/default.css
  6. +8 −6 public/default.js
  7. +10 −4 public/index.html
View
19 app.js
@@ -1,6 +1,7 @@
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('dashboard'));
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
@@ -13,8 +14,12 @@ app.get('/', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
app.get('/dashboard/', function(req, res) {
res.sendFile(__dirname + '/dashboard/dashboard.html');
});
io.on('connection', function(socket) {
console.log('new connection');
console.log('new connection ' + socket);
socket.on('login', function(userId) {
console.log(userId + ' joining lobby');
@@ -103,6 +108,18 @@ io.on('connection', function(socket) {
gameId: socket.gameId
});
});
/////////////////////
// Dashboard messages
/////////////////////
socket.on('dashboardlogin', function() {
console.log('dashboard joined');
socket.gameses = ["hi", "hi"];
socket.emit('dashboardlogin', {games: activeGames});
});
});
View
@@ -0,0 +1,8 @@
.gameboard {
width: 400px;
}
body {
background-color: lightblue;
overflow-y: auto;
}
View
@@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<title>Real Chess Dashboard</title>
<link rel="stylesheet" href="../lib/chessboard-0.3.0.min.css">
<link rel="stylesheet" href="../lib/WinJS.4.0/css/ui-light.css" />
<link rel="stylesheet" href="/dashboard.css" />
</head>
<body>
<div id='games'></div>
<script src="../lib/socket.io-1.2.0.js"></script>
<script src="../lib/jquery-1.11.1.js"></script>
<script src="../lib/WinJS.4.0/js/WinJS.min.js"></script>
<script src="../lib/chess.min.js"></script>
<script src="../lib/chessboard-0.3.0.min.js"></script>
<script src="/dashboard.js"></script>
</body>
</html>
View
@@ -0,0 +1,63 @@
(function () {
WinJS.UI.processAll().then(function () {
var socket = io();
var games = {};
var boards = {};
//////////////////////////////
// Socket.io handlers
//////////////////////////////
socket.emit('dashboardlogin');
socket.on('dashboardlogin', function(msg) {
createGamesList(msg.games);
});
socket.on('gameadd', function(msg) {
initGame(msg.gameId, msg.gameState)
});
socket.on('move', function (msg) {
games[msg.gameId].move(msg.move);
boards[msg.gameId].position(games[msg.gameId].fen());
});
//////////////////////////////
// Chess Games
//////////////////////////////
var createGamesList = function(serverGames) {
Object.keys(serverGames).forEach(function(gameId) {
initGame(gameId, serverGames[gameId]);
});
};
var initGame = function (gameId, serverGame) {
var cfg = {
draggable: false,
showNotation: false,
orientation: 'white',
pieceTheme: '../img/chesspieces/wikipedia/{piece}.png',
position: serverGame.board ? serverGame.board : 'start',
};
// create the game parent div
$('#games').append($('<div id="game-board'+gameId+'" class="gameboard"></div>'));
// create the game
var game = serverGame.board ? new Chess(serverGame.board) : new Chess();
games[gameId] = game;
var board = new ChessBoard('game-board' + gameId, cfg);
boards[gameId] = board;
}
});
})();
View
@@ -4,13 +4,53 @@ body {
padding-top: 40px;
}
input {
margin-bottom: 20px;
.page {
}
button {
margin-bottom: 20px;
.page-login {
display: flex;
flex-direction: column;
}
.page.login .logo {
display: block;
background-color: lightgray;
margin-bottom: 50px;
width: 350px;
height: 350px;
}
.page.login button {
margin-left: 15px;
margin-bottom: 20px;
height: 35px;
}
.page.login input {
margin-bottom: 20px;
height: 25px;
font-size: 12pt;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.page.lobby {
}
.page.lobby h2 {
color: darkgrey;
}
.page.lobby h3 {
margin-bottom: 10px;
margin-top: 40px;
}
#page-lobby{
display: none;
View
@@ -67,12 +67,14 @@
//////////////////////////////
$('#login').on('click', function() {
username = $('#username').val();
$('#userLabel').text(username);
socket.emit('login', username);
$('#page-login').hide();
$('#page-lobby').show();
if (username.length > 0) {
$('#userLabel').text(username);
socket.emit('login', username);
$('#page-login').hide();
$('#page-lobby').show();
}
});
$('#game-back').on('click', function() {
@@ -108,7 +110,7 @@
document.getElementById('gamesList').innerHTML = '';
myGames.forEach(function(game) {
$('#gamesList').append($('<button>')
.text(game)
.text('#'+ game)
.on('click', function() {
socket.emit('resumegame', game);
}));
View
@@ -2,24 +2,30 @@
<html>
<head>
<meta name="viewport" content="width=410; user-scalable=no; minimal-ui">
<title>Real Chess</title>
<title>Real Chess 2</title>
<link rel="stylesheet" href="lib/chessboard-0.3.0.min.css">
<link rel="stylesheet" href="lib/WinJS.4.0/css/ui-light.css" />
<link rel="stylesheet" href="/default.css" />
</head>
<body>
<div id='page-login'>
<div class="page login" id='page-login'>
<div class='logo'></div>
<input id='username'></input>
<button id='login'>Login</button>
</div>
<div id='page-lobby'>
<div class="page lobby" id='page-lobby'>
<h1>Real Chess</h1>
<h2 id='userLabel'></h2>
<h3>Active games</h3>
<div id='gamesList'>
No active games
</div>
<h3>Online players</h3>
<div id='userList'>
No users online
</div>
</div>
<div id='page-game'>
<div class="page game" id='page-game'>
<button id='game-back'>Back</button>
<button id='game-quit'>Resign</button>
<div id='game-board' style="width: 400px">

0 comments on commit 0809728

Please sign in to comment.