Init

.npmignore

@@ -0,0 +1,2 @@
+node_modules
+build

app.js

@@ -0,0 +1,16 @@
+var express = require('express'),
+    http = require('http'),
+    app = express(),
+    opts = require(__dirname + '/server/config/opts.js');
+
+// Load express configuration
+require(__dirname + '/server/config/env.js')(express, app);
+
+// Load routes
+require(__dirname + '/server/routes')(app);
+
+// Start the server
+http.createServer(app).listen(opts.port, function () {
+    console.log("Express server listening on port %d in %s mode",
+                opts.port, app.settings.env);
+});

package.json

@@ -0,0 +1,11 @@
+{
+    "name": "application-name"
+  , "version": "0.0.1"
+  , "private": true
+  , "dependencies": {
+      "express": "3.4.8"
+    , "mu2": "0.5.x"
+    , "less-middleware": "1.0.*"
+    , "optimist": ">= 0.0.1"
+  }
+}

public/app.js

@@ -0,0 +1,7 @@
+'use strict';
+
+/* App Module */
+
+var tickTackApp = angular.module('tickTackApp', [
+    'board'
+]);

public/board/contoller/boardController.js

@@ -0,0 +1,26 @@
+var board = angular.module('board', ['ngResource']);
+
+board.controller('boardController', ['$scope','boardData', function ($scope,boardData) {
+
+    $scope.addPlayer = function(x,y){
+        var board = boardData.mark({x:x,y:y},function() {
+            $scope.board = board;
+        });
+
+    };
+    $scope.resetBoard = function(){
+        var board = boardData.clear(function() {
+            $scope.board = board;
+        });
+
+    }
+    var poll = function(){
+        var board = boardData.pull(function() {
+            $scope.board = board;
+        });
+        setTimeout(poll,1000);
+    }
+    poll();
+
+
+}]);

public/board/service/board.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/* Services */
+
+var board = angular.module('board');
+
+
+board.factory('boardData',['$resource',
+    function($resource){
+
+
+        var result = $resource(
+            "board/:action/:x/:y",
+            {
+                action: "@action",
+                x: "@x",
+                y: "@y"
+            },
+            {
+                pull: {
+                    method: "GET",
+                    params: {
+                        action: "get"
+                    }
+                },
+                clear: {
+                    method: "GET",
+                    params: {
+                        action: "clear"
+                    }
+                },
+                mark: {
+                    method: "GET",
+                    params: {
+                        action: "mark"
+                    }
+                }
+            });
+
+
+        return result
+    }]);

public/board/views/board.html

@@ -0,0 +1,25 @@
+<div ng-controller="boardController">
+   <span class="btn btn-info" ng-if="!board.winner">Up : {{board.player}}</span>
+    <div class="btn btn-info" ng-if="board.winner" ng-click="resetBoard()">
+       <div ng-if="board.winner === 'c'">
+           CAT
+       </div>
+        <div ng-if="board.winner !== 'c'">
+          WINNER : {{board.winner}}
+        </div>
+
+        <div class="btn btn-new" >New Game</div></div>
+    <div class="board">
+        <div class="box" ng-click="addPlayer(0,0)">{{board.boxes[0][0]||"_"}}</div>
+        <div class="box" ng-click="addPlayer(0,1)">{{board.boxes[0][1]||"_"}}</div>
+        <div class="box" ng-click="addPlayer(0,2)">{{board.boxes[0][2]||"_"}}</div>
+
+        <div class="box" ng-click="addPlayer(1,0)">{{board.boxes[1][0]||"_"}}</div>
+        <div class="box" ng-click="addPlayer(1,1)">{{board.boxes[1][1]||"_"}}</div>
+        <div class="box" ng-click="addPlayer(1,2)">{{board.boxes[1][2]||"_"}}</div>
+
+        <div class="box" ng-click="addPlayer(2,0)">{{board.boxes[2][0]||"_"}}</div>
+        <div class="box" ng-click="addPlayer(2,1)">{{board.boxes[2][1]||"_"}}</div>
+        <div class="box" ng-click="addPlayer(2,2)">{{board.boxes[2][2]||"_"}}</div>
+    </div>
+</div>

public/css/style.css

@@ -0,0 +1,135 @@
+body, textarea, input, select {
+    background: 0;
+    border-radius: 0;
+    font: 16px sans-serif;
+    margin: 0
+}
+
+.addon, .btn-sm, .nav, textarea, input, select {
+    outline: 0;
+    font-size: 14px
+}
+
+.smooth {
+    transition: all .2s
+}
+
+.btn, .nav a {
+    text-decoration: none
+}
+
+.container {
+    margin: 0 20px;
+    width: auto
+}
+
+@media (min-width: 1310px) {
+    .container {
+        margin: auto;
+        width: 1270px
+    }
+}
+
+.btn, h2 {
+    font-size: 2em
+}
+
+h1 {
+    font-size: 3em
+}
+
+.btn {
+    background: #999;
+    border-radius: 6px;
+    border: 0;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    margin: 2px 0;
+    padding: 12px 30px 14px
+}
+
+.btn:hover {
+    background: #888
+}
+
+.btn:active, .btn:focus {
+    background: #777
+}
+
+.btn-a {
+    background: #0ae
+}
+
+.btn-a:hover {
+    background: #09d
+}
+
+.btn-a:active, .btn-a:focus {
+    background: #08b
+}
+
+.btn-b {
+    background: #3c5
+}
+
+.btn-b:hover {
+    background: #2b4
+}
+
+.btn-b:active, .btn-b:focus {
+    background: #2a4
+}
+
+.btn-c {
+    background: #d33
+}
+
+.btn-c:hover {
+    background: #c22
+}
+
+.btn-c:active, .btn-c:focus {
+    background: #b22
+}
+
+.msg {
+    background: #def;
+    border-left: 5px solid #59d;
+    padding: 1.5em
+}
+
+.board {
+    width: 500px;
+    height: 500px;
+}
+
+.box {
+    width: 20%;
+    height: 20%;
+    padding: 4%;
+    padding-top: 0;
+    background: #999;
+    border-radius: 6px;
+    border: 0;
+    font-size: 9em;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    margin: 2px;
+}
+
+.btn {
+
+    background: #999;
+    border-radius: 6px;
+    border: 0;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    margin: 2px 0;
+}
+
+.btn-info {
+    background-color: #E9DC51
+}

server/config/env.js

@@ -0,0 +1,59 @@
+var util = require(__dirname + '/../libs/util.js'),
+    mustache = require('mu2');
+
+module.exports = function (express, app) {
+
+    // Common configuration
+    app.configure(function () {
+
+        // Configure mustache template engine
+        mustache.root = __dirname + '/../views';
+        app.set('views', __dirname + '/../views');
+        app.set('view engine', 'mustache');
+        app.engine('mustache', function (path, options, fn) {
+            var buffer = [];
+
+            // Always recompile in development
+            if (app.settings.env === 'development') {
+                mustache.clearCache();
+            }
+            mustache.compileAndRender(path, options).on('data', function (data) {
+                buffer.push(data);
+            }).on('end', function () {
+                fn(null, buffer.join(''));
+            }).on('error', function (e) {
+                fn(e);
+            });
+        });
+
+        app.use(app.router);
+
+        // Make sure build folders exist
+        util.mkdir(__dirname + '/../build');
+        util.mkdir(__dirname + '/../build/css');
+
+        // Configure LESS compiler
++       /*app.use('/css', require('less-middleware')(__dirname + '/../src/less', {
+            dest: __dirname + '/../build/css'
+        }));*/
+
+        // Create static file servers for the build and public folders
+        //app.use(express.static(__dirname + '/../build'));
+        app.use(express.static(__dirname + '/../../public'));
+
+    });
+
+    // Development specific configuration
+    app.configure('development', function () {
+        app.use(express.errorHandler({
+            dumpExceptions: true,
+            showStack: true
+        }));
+    });
+
+    // Production specific configuration
+    app.configure('production', function () {
+        app.use(express.errorHandler());
+    });
+
+};

server/config/opts.js

@@ -0,0 +1,7 @@
+// Argument parsing using the optimist module
+module.exports = require('optimist')
+    .usage('Usage: $0 --port [port]')
+    .alias('port', 'p')
+    .describe('port', 'Port number for the Express application.')
+    .default('port', 3000)
+    .argv;