Evrything works. Generator is ugly (but who cares?) Grunt and folders modified.

Gruntfile.js

@@ -7,45 +7,64 @@ module.exports = function(grunt) {
             options: {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
-            build: {
-                src: 'src/js/*.js',
-                dest: 'dist/js/<%= pkg.name %>.min.js'
+            game: {
+                files: {
+                    'dist/js/<%= pkg.name %>.game.min.js': ['src/game/js/*.js']
+                }
+            },
+            generator: {
+                files: {
+                    'dist/js/<%= pkg.name %>.generator.min.js': ['src/generator/js/*.js']
+                }
             }
         },
         cssmin: {
             target: {
                 files: {
-                    'dist/css/<%= pkg.name %>.css': 'src/css/*.css'
+                    'dist/css/<%= pkg.name %>.generator.css': 'src/generator/css/*.css',
+                    'dist/css/<%= pkg.name %>.game.css': 'src/game/css/*.css'
                 }
             }
         },
         jshint: {
-            all: ['src/js/*.js']
+            all: ['src/game/js/*.js', 'src/generator/js/*.js']
         },
         copy: {
             main: {
                 files: [
-                    {expand: true, cwd: 'src/', src: '*.html', dest: 'dist/', filter: 'isFile'},
-                    {expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}
-                ]
+                    {expand: true, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'}
+                ],
+                options: {
+                    process: function (content, srcpath) {
+                        return content.replace(/(game.css|generator.css)/g, "motsmeles.$1");
+                        //return content.replace(/(\.\.\/\.\.\/vendor\/fabric\.1\.4\.0\.min\.js)/g,"js/fabric.1.4.0.min.js");
+                    }
+                }
             },
             dev: {
                 files: [
-                    {expand: true, cwd: 'src/', src: '*.html', dest: 'dist/', filter: 'isFile'},
-                    {expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'},
-                    {expand: true, cwd: 'src/js/', src: '*.js', dest: 'dist/js/', filter: 'isFile'},
-                    {expand: true, cwd: 'src/css/', src: '*.js', dest: 'dist/js/', filter: 'isFile'}
+                    {expand: true, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'},
+                    {expand: true, cwd: 'src/game/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
+                    {expand: true, cwd: 'src/generator/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
                 ]
+            },
+            vendor: {
+                files: [{expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}]
             }
         },
         concat: {
-            dist: {
-                src: ['src/js/*.js'],
-                dest: 'dist/js/<%= pkg.name %>.min.js'
+            game: {
+                src: ['src/game/js/*.js'],
+                dest: 'dist/js/<%= pkg.name %>.game.min.js'
+            },
+            generator: {
+                src: ['src/generator/js/*.js'],
+                dest: 'dist/js/<%= pkg.name %>.generator.min.js'
             }
         },
         clean: {
-            dist: ['dist/js','dist/css','index.html']
+            dist: ['dist'],
+            force: true
         }
     });
 
@@ -56,7 +75,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-contrib-concat');
 
-    grunt.registerTask('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main']);
-    grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev']);
+    grunt.registerTask('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main', 'copy:vendor']);
+    grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev', 'copy:vendor']);
 
 };

dist/index.html

@@ -4,14 +4,14 @@
 	<title>Mot mélés</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<script src="js/fabric.1.4.0.min.js"></script>
-	<link rel="stylesheet" type="text/css" href="css/motsmeles.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="css/game.css" media="screen" />
 </head>
 <body>
-<h1>Mots Mélés</h1>
-	<div id="playground">
-		<canvas id="c"></canvas>
-		<ul id="words"></ul>
-	</div>
-	<script src="js/motsmeles.min.js"></script>
+    <h1>Mots Mélés</h1>
+    <div id="playground">
+        <canvas id="c"></canvas>
+        <ul id="words"></ul>
+    </div>
+    <script src="js/motsmeles.game.min.js"></script>
 </body>
 </html>

src/game/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Mot mélés</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<script src="js/fabric.1.4.0.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="css/game.css" media="screen" />
+</head>
+<body>
+    <h1>Mots Mélés</h1>
+    <div id="playground">
+        <canvas id="c"></canvas>
+        <ul id="words"></ul>
+    </div>
+    <script src="js/motsmeles.game.min.js"></script>
+</body>
+</html>

src/generator.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <script src="../vendor/fabric.1.4.0.min.js"></script>
-    <title>mots mélés generator</title>
-    <style>
-        .inputGrid { width: 10px; height: 10px; float:left;}
-        .clearboth {
-            clear: both;
-        }
-        html, body {
-            display: block;
-            height: 100%;
-            width: 100%;
-            overflow: hidden;
-        }
-        header {
-            height: 50px;
-            display: block;
-            position: absolute;
-            right: 0;
-            top: 0;
-            left: 0;
-            background-color: #6C9BD9;
-            box-shadow: 0 8px 6px -6px black;
-        }
-        h3 {margin: 5px;}
-        body>div {
-            padding-top: 50px;
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-        textarea {
-            width: 500px;
-            height: 300px;
-            box-shadow: inset 0 0 10px #000000;
-        }
-    </style>
-</head>
-<body>
-    <header>
-        <h3>Current mode : <span id="currentMode">nothing</span></h3>
-    </header>
-    <div id="grid">
-        <aside id="generator-options">
-            <label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>
-            <label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
-        </aside>
-        <section id="generator-grid"></section>
-        <button id="validateGrid">Validate</button>
-    </div>
-    <div id="wordsList">
-        <canvas id="c"></canvas>
-        <ul id="words"></ul>
-        <button id="validateWord">Validate</button>
-    </div>
-    <div id="validate">
-        <textarea></textarea>
-    </div>
-</body>
-<script src="js/generator.js"></script>
-</html>

src/generator/css/generator.css

@@ -0,0 +1,32 @@
+.inputGrid { width: 10px; height: 10px; float:left;}
+.clearboth {
+    clear: both;
+}
+html, body {
+    display: block;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+header {
+    height: 50px;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    background-color: #6C9BD9;
+    box-shadow: 0 8px 6px -6px black;
+}
+h3 {margin: 5px;}
+section#step {
+    padding-top: 50px;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+textarea {
+    width: 500px;
+    height: 300px;
+    box-shadow: inset 0 0 10px #000000;
+}

src/generator/generator.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <script src="js/fabric.1.4.0.min.js"></script>
+    <title>mots mélés generator</title>
+    <link rel="stylesheet" type="text/css" href="css/generator.css" media="screen" />
+</head>
+<body>
+    <header>
+        <h3>Instructions: <span id="currentMode">nothing</span></h3>
+    </header>
+    <section id="step">
+    </section>
+</body>
+<script src="js/motsmeles.generator.min.js"></script>
+</html>

src/js/generator.js → src/generator/js/generator.js

@@ -4,8 +4,8 @@ var width = 1;
 var height= 1;
 var SIZE = 30;
 var currentModeText = document.getElementById('currentMode');
-var inputGrid = document.getElementById('generator-grid');
-var canvas = new fabric.Canvas('c', { selection: false });
+var inputGrid;
+var canvas;
 var LabeledRect = fabric.util.createClass(fabric.Rect, {
     type: 'labeledRect',
     initialize: function(options) {
@@ -25,8 +25,19 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, {
         ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
     }
 });
+var stepSection = document.getElementById('step');
 
 var initGrid = function() {
+    stepSection.innerHTML = '<div id="grid">'+
+        '<aside id="generator-options">'+
+        '<label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>'+
+        '<label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>'+
+        '</aside>'+
+        '<section id="generator-grid"></section>'+
+        '<button id="validateGrid">Validate</button>'+
+        '</div>';
+    currentModeText.innerHTML = 'Fill the grid with letters';
+    inputGrid = document.getElementById('generator-grid');
     // grid
     var modifyGridSize = function modifyGridSize() {
         var currentWidth = width;//grid[0] ? grid[0].length : 0;
@@ -81,7 +92,7 @@ var initGrid = function() {
             default: nextCase = currentCase;
                 break;
         }
-        if(nextCase != undefined) {
+        if(nextCase !== undefined) {
             nextCase.focus();
         }
     };
@@ -107,7 +118,7 @@ var initGrid = function() {
     var isGridValid = function isGridValid() {
         for (var i = 0,l = height; i <l ; i++) {
             for (var j = 0, m = width; j<m; j++) {
-                if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value == '') {
+                if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value === '') {
                     return false;
                 }
             }
@@ -130,6 +141,13 @@ var initGrid = function() {
     }, false);
 };
 var initWords = function initWords() {
+    stepSection.innerHTML = '<div id="wordsList">'+
+        '<canvas id="c"></canvas>'+
+        '<ul id="words"></ul>'+
+        '<button id="validateWord">Validate</button>'+
+        '</div>';
+    currentModeText.innerHTML = 'Cross all your words';
+    canvas = new fabric.Canvas('c', { selection: false });
     var numHeight = grid.length;
     var numWidth = grid[0].length;
     var ulContent = document.createDocumentFragment();
@@ -210,21 +228,34 @@ var initWords = function initWords() {
         var isVertical = origin[1] === end[1];
         var isDiagonal = Math.abs(origin[0]-end[0]) === Math.abs(origin[1]-end[1]);
         var x;
-        var first;
-        var last;
+        var toGo = [];
         var word = '';
-        if(isHorizontal) {
-            first = Math.min(origin[1], end[1]);
-            last = Math.max(origin[1], end[1]);
-            for( x=first;x<=last; x++ ) {
-                word += grid[origin[0]][x];
+        var range = function range(origin, end) {
+            var matrix = [];
+            var plus;
+            plus = origin <= end;
+            if (plus) {
+                while (origin <= end) {
+                    matrix.push(origin);
+                    origin ++;
+                }
+            } else {
+                while (origin >= end) {
+                    matrix.push(origin);
+                    origin --;
+                }
             }
+            return matrix;
+        };
+
+        if(isHorizontal) {
+            range(origin[1], end[1]).forEach(function(elt) {
+                word += grid[origin[0]][elt];
+            });
         }else if (isVertical) {
-            first = Math.min(origin[0], end[0]);
-            last = Math.max(origin[0], end[0]);
-            for( x=first;x<=last; x++ ) {
-                word += grid[x][origin[1]];
-            }
+            range(origin[0], end[0]).forEach(function(elt) {
+                word += grid[elt][origin[1]];
+            });
         } else if(isDiagonal) {
             var xRight = origin[0] - end[0] < 0;
             var yDown = origin[1] - end[1] < 0;
@@ -243,6 +274,10 @@ var initWords = function initWords() {
     }, false);
 };
 var initSave = function initSave() {
+    currentModeText.innerHTML = 'Copy this in your game and that\'s it. :)';
+    stepSection.innerHTML = '<div id="validate">'+
+        '<textarea></textarea>'+
+        '</div>';
     // save
     var arrayToString = function arrayToString(array) {
         var result = '[';

src/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Mot mélés</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<script src="js/fabric.1.4.0.min.js"></script>
-	<link rel="stylesheet" type="text/css" href="css/motsmeles.css" media="screen" />
-</head>
-<body>
-<h1>Mots Mélés</h1>
-	<div id="playground">
-		<canvas id="c"></canvas>
-		<ul id="words"></ul>
-	</div>
-	<script src="js/motsmeles.min.js"></script>
-</body>
-</html>