Permalink
Browse files

initial dashboard checkin

  • Loading branch information...
1 parent 5e37692 commit 0809728b2d0387030589536ca71a26d7bc07ff90 @dwcares committed Sep 16, 2015
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
@@ -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});
+
+ });
});
@@ -0,0 +1,8 @@
+.gameboard {
+ width: 400px;
+}
+
+body {
+ background-color: lightblue;
+ overflow-y: auto;
+}
@@ -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>
@@ -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.