Added less

css/style.css → css/style.less

@@ -175,6 +175,10 @@ h1 {
 	font-size: 30px;
 }
 
+#container {
+	padding-bottom: 30px;
+}
+
 #board.disable .square {
 	cursor: default !important;
 }
@@ -255,6 +259,12 @@ span.nought {
 	width: 300px;
 	margin: 0 auto;
 	margin-top: 130px;
+
+	h4 {
+		color: #444;
+		margin-bottom: 10px;
+		font-size: 18px;
+	}
 }
 
 #nickname-err {
@@ -277,15 +287,15 @@ span.nought {
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
-}
 
-#messages ul b {
-	font-weight: bold;
-}
-
-#messages ul em {
-	font-style: italic;
-	color: #666;
+	b {
+		font-weight: bold;
+	}
+
+	em {
+		font-style: italic;
+		color: #666;
+	}
 }
 
 /**

index.html

@@ -28,10 +28,8 @@
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
   <!-- CSS: implied media="all" -->
-  <link rel="stylesheet" href="css/style.css">
-
-  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
-  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
+  <link rel="stylesheet/less" type="text/css" href="css/style.less">
+  <script src="js/less.min.js" type="text/javascript"></script>
 
   <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
   <script src="js/libs/modernizr-1.7.min.js"></script>
@@ -82,7 +80,7 @@ <h3>Online: </h3>
 		<div id="overlay">
 			<div id="nickname">
 				<form class="wrap" id="set-nickname">
-					<p>Please type in your nickname</p>
+					<h4>Please type in your nickname</h4>
 					<input type="text" id="name_input"/>
 					<input type="submit" />
 					<p id="nickname-err">Nickname already in use</p>

js/script.js

@@ -25,6 +25,27 @@ var Noughts = Backbone.Collection.extend({
 var crosses = new Crosses;
 var noughts = new Noughts;
 
+var BoardView = Backbone.View.extend({
+	initialize: function() {
+		console.log('Board view initialized');
+		crosses.bind("add", this.addCross);
+		noughts.bind("add", function(nought) {
+			alert(nought.get('owner'));
+		});
+	},
+	render: function() {
+		console.log(this.model.toJSON());
+	},
+	addCross: function(cross) {
+		$('#'+cross.get('element')).html('<span class="cross">X</span>').removeClass('active');
+		socket.emit('addcross', cross);
+	}
+});
+
+var viewCrosses = new BoardView({
+	model: crosses
+});
+
 /*
 var GameView = Backbone.View.extend({
 	tagName : 'div',
@@ -56,11 +77,12 @@ socket.on('connect', function() {
 
 // annoncements
 socket.on('announcement', function(msg) {
-	console.log(msg);
 	$('#chat #messages ul').append('<li><em>'+msg+'</em></li>');
+	$('#messages').get(0).scrollTop = 10000000;
 });
 
 socket.on('users', function(users) {
+	console.log(users);
 	$('#user_list').empty();
 	for (var i in users) {
 		$('#user_list').append($('<li>').text(users[i]));
@@ -69,27 +91,36 @@ socket.on('users', function(users) {
 
 socket.on('message', message);
 
+socket.on('addcross', function(data) {
+	console.log(data);
+	crosses.add(data);
+});
+
+socket.on('buffer', function(data) {
+	console.log(data);
+});
+
 function clear() {
 	$('#message').val('').focus();
 };
 
 function message(from, msg) {
 	console.log(from+' '+msg);
 	$('#chat #messages ul').append('<li><b>'+from+'</b> '+msg+'</li>');
+	$('#messages').get(0).scrollTop = 10000000;
 }
 
 $(document).ready(function(){
 
    // Add jquery 
 
 	$('.square').click(function() {
-		$(this).html('<span class="cross">X</span>').removeClass('active');
 		var position = $(this).attr('id').split('_');
 		position = position[1].split('x');
-		new Cross({
+		crosses.add({
 			x: parseInt(position[0]),
 			y: parseInt(position[1]),
-			owner: 'jk'
+			element: $(this).attr('id')
 		});
 		return false;
 	});

server.js

@@ -15,14 +15,23 @@ var io = io.listen(server),
 
 io.sockets.on('connection', function(socket) {
 
-	socket.emit('users', users);	
+	socket.emit('buffer', buffer);	
 
 	socket.on('user', function(user, fn) {
 		if(users[user]) { // if user already in users
 			fn(true); // then return true
 		} else {
 			fn(false);
 			users[user] = socket.user = user; // add user to buffer
+			console.log(users.length);
+			if(users.length == 0) {
+				// assign the user as cross
+				console.log('cross');
+				users['player'] = cross;
+			} else if(users.lenght == 1) {
+				// assign the users as nought
+				users['player'] = nought;
+			}
 			socket.broadcast.emit('announcement', user + ' connected');
 			io.sockets.emit('users', users);
 		}
@@ -32,6 +41,12 @@ io.sockets.on('connection', function(socket) {
 		socket.broadcast.emit('message', socket.user, msg);
 	});
 
+	socket.on('addcross', function(data) {
+		data.user = socket.user;
+		buffer = data;
+		socket.broadcast.emit('addcross', data);
+	});
+
 	socket.on('disconnect', function () {
 		if(!socket.user) return;