Merge pull request #4 from Chouchen/generator_simple

Finally a working "generator". Well it simplified the process but doesn't "generate" something automatically.

Gruntfile.js

@@ -7,45 +7,64 @@ module.exports = function(grunt) {
             options: {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
-            build: {
+            game: {
-                src: 'src/js/*.js',
+                files: {
-                dest: 'dist/js/<%= pkg.name %>.min.js'
+                    '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, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'}
-                    {expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', 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, flatten: true, src: ['src/game/*.html', 'src/generator/*.html'], dest: 'dist/', filter: 'isFile'},
-                    {expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'},
+                    {expand: true, cwd: 'src/game/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
-                    {expand: true, cwd: 'src/js/', src: '*.js', dest: 'dist/js/', filter: 'isFile'},
+                    {expand: true, cwd: 'src/generator/css/', src: '*.css', dest: 'dist/css/', filter: 'isFile'},
-                    {expand: true, cwd: 'src/css/', src: '*.js', dest: 'dist/js/', filter: 'isFile'}
                 ]
+            },
+            vendor: {
+                files: [{expand: true, cwd: 'vendor/', src: '*.min.js', dest: 'dist/js/', filter: 'isFile'}]
             }
         },
         concat: {
-            dist: {
+            game: {
-                src: ['src/js/*.js'],
+                src: ['src/game/js/*.js'],
-                dest: 'dist/js/<%= pkg.name %>.min.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('default', ['clean:dist', 'jshint', 'uglify', 'cssmin', 'copy:main', 'copy:vendor']);
-    grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev']);
+    grunt.registerTask('dev', ['clean:dist', 'jshint', 'concat', 'copy:dev', 'copy:vendor']);
 
 };

dist/css/motsmeles.css

@@ -1 +0,0 @@
-body{font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:700}h1{width:600px;text-align:center;margin:15px auto;z-index:10;font-weight:700;color:#6C9BD9;font-size:50px}ul{list-style:none;float:left;margin:50px 30px;line-height:20px;font-size:16px}ul li.validate{color:green;font-weight:700;text-decoration:line-through}ul li.validate:before{content:'\2713 ';color:green;font-weight:700}.canvas-container{float:left;margin:50px 30px}#playground{display:block;width:600px;height:600px;margin:0 auto}

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>
+    <h1>Mots Mélés</h1>
-	<div id="playground">
+    <div id="playground">
-		<canvas id="c"></canvas>
+        <canvas id="c"></canvas>
-		<ul id="words"></ul>
+        <ul id="words"></ul>
-	</div>
+    </div>
-	<script src="js/motsmeles.min.js"></script>
+    <script src="js/motsmeles.game.min.js"></script>
 </body>
 </html>

dist/js/motsmeles.min.js

@@ -1,2 +0,0 @@
-/*! motsmeles 2015-01-29 */
-var SIZE=30,NUMCASE=10,GRID=[["S","S","S","A","U","B","A","G","N","E"],["E","P","A","A","M","V","E","N","C","E"],["L","U","L","M","I","R","A","M","A","S"],["R","A","O","G","E","X","A","C","O","E"],["A","L","N","E","G","N","A","R","O","R"],["T","O","U","L","O","N","G","L","R","E"],["N","D","S","T","N","U","E","I","E","Y"],["I","N","P","E","E","N","I","L","D","H"],["C","A","S","S","U","J","E","R","F","L"],["E","B","E","L","S","I","S","S","A","C"]],words=["AIX","APT","ARLES","AUBAGNE","AUPS","AVIGNON","BANDOL","CANNES","CASSIS","DIGNE","FREJUS","HYERES","LUNEL","MIRAMAS","NICE","ORANGE","SALON","SORGUES","TOULON","VENCE"],reponse="BA";!function(a,b,c,d,e,f,g){var h,i,j,k,l=new a.Canvas("c",{selection:!1}),m=[],n=[],o=!1;l.setDimensions({width:c*d+d,height:c*d+d});var p=a.util.createClass(a.Rect,{type:"labeledRect",initialize:function(a){a=a||{},this.callSuper("initialize",a),this.set("label",a.label||"")},toObject:function(){return a.util.object.extend(this.callSuper("toObject"),{label:this.get("label")})},_render:function(a){this.callSuper("_render",a),a.font="20px Helvetica",a.fillStyle="#333",a.fillText(this.label,-this.width/2+5,-this.height/2+20)}}),q=function(){var a,b,c,d=-1,f=m[0]===n[0],h=m[1]===n[1],i=Math.abs(m[0]-n[0])===Math.abs(m[1]-n[1]),j="";if(f){for(b=Math.min(m[1],n[1]),c=Math.max(m[1],n[1]),a=b;c>=a;a++)j+=e[m[0]][a];return Math.max(g.indexOf(j),g.indexOf(j.split("").reverse().join("")))}if(h){for(b=Math.min(m[0],n[0]),c=Math.max(m[0],n[0]),a=b;c>=a;a++)j+=e[a][m[1]];return Math.max(g.indexOf(j),g.indexOf(j.split("").reverse().join("")))}if(i){for(var k=m[0]-n[0]<0,l=m[1]-n[1]<0,o=0,p=Math.abs(m[0]-n[0]);p>=o;o++)j+=e[k?m[0]+o:m[0]-o][l?m[1]+o:m[1]-o];return Math.max(g.indexOf(j),g.indexOf(j.split("").reverse().join("")))}return d},r=function(a){var c=b.getElementById("words").getElementsByTagName("li"),d=c.length;for(j=0;d>j;j++)if(c[j].textContent===a){c[j].className="validate";break}};for(h=0;d>h;h++)for(i=0;d>i;i++){var s=new p({left:h*c,top:i*c,fill:"white",stroke:"black",width:c,height:c,label:e[i][h],selectable:!1});l.add(s)}for(var t=0;t<g.length;t++){var u=b.createElement("li");u.innerHTML=g[t].toUpperCase(),b.getElementById("words").appendChild(u)}l.on("mouse:down",function(b){o=!0;var d=l.getPointer(b.e),e=[d.x,d.y,d.x,d.y];m=[Math.floor(e[1]/c),Math.floor(e[0]/c)],k=new a.Line(e,{stroke:"black",strokeLineCap:"round",strokeWidth:c/6,strokeDashArray:[c/6,c/6],originX:"center",originY:"center"}),l.add(k)}),l.on("mouse:move",function(a){if(o){var b=l.getPointer(a.e);k.set({x2:b.x,y2:b.y}),l.renderAll()}}),l.on("mouse:up",function(b){o=!1;var d=l.getPointer(b.e),e=[d.x,d.y];if(n=[Math.floor(e[1]/c),Math.floor(e[0]/c)],l.remove(k),m[0]!==n[0]||m[1]!==n[1]){var f=q();if(-1!==f){var h=g[f];h=m.reverse().join("").concat(n.reverse().join("")).split(""),h=h.map(function(a){return a*c+c/2});var i=new a.Line(h,{stroke:"black",strokeLineCap:"round",strokeWidth:c/6,originX:"center",originY:"center",selectable:!1});r(g[f]),g.splice(f,1),l.add(i),0===g.length&&v()}}m=[],n=[]});var v=function(){}}(fabric,document,SIZE,NUMCASE,GRID,reponse,words);

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/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/generator/js/generator.js

@@ -0,0 +1,298 @@
+var grid = [];
+var words= [];
+var width = 1;
+var height= 1;
+var SIZE = 30;
+var currentModeText = document.getElementById('currentMode');
+var inputGrid;
+var canvas;
+var LabeledRect = fabric.util.createClass(fabric.Rect, {
+    type: 'labeledRect',
+    initialize: function(options) {
+        options = options || {};
+        this.callSuper('initialize', options);
+        this.set('label', options.label || '');
+    },
+    toObject: function() {
+        return fabric.util.object.extend(this.callSuper('toObject'), {
+            label: this.get('label')
+        });
+    },
+    _render: function(ctx) {
+        this.callSuper('_render', ctx);
+        ctx.font = '20px Helvetica';
+        ctx.fillStyle = '#333';
+        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;
+        var currentHeight = height;//grid.length;
+        console.log('grid size is ' + currentWidth + ' x ' + currentHeight);
+        var iHtml = '';
+        for(var i = 0,l = currentHeight; i <l ; i++) {
+            for (var j = 0, m = currentWidth; j<m; j++) {
+                iHtml += '<input type="text" class="inputGrid" data-x="'+j+'" data-y="'+i+'" maxlength="1"/>';
+            }
+            iHtml += '<div class="clearboth"></div>';
+        }
+        inputGrid.innerHTML = iHtml;
+        dynamicEvents();
+    };
+    document.getElementById('grid-width').addEventListener("change", function(evt){
+        width = evt.currentTarget.value;
+        modifyGridSize();
+    }, false);
+    document.getElementById('grid-height').addEventListener("change", function(evt){
+        height = evt.currentTarget.value;
+        modifyGridSize();
+    }, false);
+    var goToNextCase = function goToNextCase(sens) {
+        var currentCase = document.activeElement;
+        var currentX = currentCase.getAttribute('data-x');
+        var currentY = currentCase.getAttribute('data-y');
+        if (sens === 39) {
+            if (currentX == width-1) {
+                currentY++;
+                currentX = -1;
+            }
+        }
+        var nextCase;
+        //        left = 37
+        //        up = 38
+        //        right = 39
+        //        down = 40
+        switch( sens ) {
+            case 37:
+                nextCase = document.querySelector('.inputGrid[data-x="'+(+currentX-1)+'"][data-y="'+currentY+'"]');
+                break;
+            case 38:
+                nextCase = document.querySelector('.inputGrid[data-x="'+currentX+'"][data-y="'+(+currentY-1)+'"]');
+                break;
+            case 39:
+                nextCase = document.querySelector('.inputGrid[data-x="'+(+currentX+1)+'"][data-y="'+currentY+'"]');
+                break;
+            case 40:
+                nextCase = document.querySelector('.inputGrid[data-x="'+currentX+'"][data-y="'+(+currentY+1)+'"]');
+                break;
+            default: nextCase = currentCase;
+                break;
+        }
+        if(nextCase !== undefined) {
+            nextCase.focus();
+        }
+    };
+    var gridKeyup = function gridKeyup(evt) {
+        var typedKey = evt.keyCode;
+        var senses = [37,38,39,40];
+        if (senses.indexOf(typedKey) !== -1) {
+            goToNextCase(typedKey);
+        } else if (typedKey >= 65 && typedKey <= 90) {
+            evt.currentTarget.value = String.fromCharCode(typedKey).toUpperCase();
+            goToNextCase(39);
+        }
+    };
+    var dynamicEvents = function dynamicEvents() {
+        var inputs = document.getElementsByClassName('inputGrid');
+        var inputsLength = inputs.length;
+        for (var i = 0; i < inputsLength; i++) {
+            var input = inputs[i];
+            input.removeEventListener("keyup",gridKeyup);
+            input.addEventListener("keyup", gridKeyup.bind(this), false);
+        }
+    };
+    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 === '') {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
+    document.getElementById('validateGrid').addEventListener('click', function(e) {
+        if (isGridValid()) {
+            for (var i = 0,l = height; i <l ; i++) {
+                grid[i] = [];
+                for (var j = 0, m = width; j<m; j++) {
+                    grid[i][j] = document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value;
+                }
+            }
+            console.log(grid);
+            location.href = '#wordsList';
+            initWords();
+            // gotonextstep
+        }
+    }, 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();
+    var tmpLi;
+    var i, isDragging, origin, drawingLine, end;
+
+    canvas.setDimensions({width: SIZE*numWidth + numWidth, height: SIZE*numHeight + numHeight});
+
+    for (i = 0; i < numWidth; i++) {
+        for (j = 0; j < numHeight; j++) {
+            var rect = new LabeledRect({
+                left: i * SIZE,
+                top: j * SIZE,
+                fill: 'white',
+                stroke: 'black',
+                width: SIZE,
+                height: SIZE,
+                label: grid[j][i],
+                selectable: false
+            });
+            canvas.add(rect);
+        }
+    }
+    canvas.on('mouse:down', function(options) {
+        isDragging 	= true;
+        var pointer = canvas.getPointer(options.e);
+        var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
+        origin = [Math.floor(points[1]/SIZE),Math.floor(points[0]/SIZE)];
+        drawingLine = new fabric.Line(points, {
+            stroke: 'black',
+            strokeLineCap: 'round',
+            strokeWidth: SIZE/6,
+            originX: 'center',
+            originY: 'center'
+        });
+        canvas.add(drawingLine);
+    });
+
+    canvas.on('mouse:move', function(options) {
+        if(isDragging) {
+            var pointer = canvas.getPointer(options.e);
+            drawingLine.set({ x2: pointer.x, y2: pointer.y });
+            canvas.renderAll();
+        }
+    });
+
+    canvas.on('mouse:up', function(options) {
+        isDragging = false;
+        var pointer = canvas.getPointer(options.e);
+        var position = [pointer.x, pointer.y];
+        end = [Math.floor(position[1]/SIZE),Math.floor(position[0]/SIZE)];
+        canvas.remove(drawingLine);
+        if(origin[0] !== end[0] || origin[1] !== end[1]) {
+            var newWord = addWord();
+            var newLi = document.createElement('li');
+            newLi.innerHTML = newWord;
+            document.getElementById('words').appendChild(newLi);
+            words.push(newWord);
+            var lineCoord = origin.reverse().join('').concat(end.reverse().join('')).split('');
+            lineCoord = lineCoord.map(function(map){return map*SIZE+SIZE/2;});
+            var line = new fabric.Line(lineCoord, {
+                stroke: 'black',
+                strokeLineCap: 'round',
+                strokeWidth: SIZE/6,
+                originX: 'center',
+                originY: 'center',
+                selectable: false
+            });
+            canvas.add(line);
+        }
+        origin = [];
+        end = [];
+    });
+
+    var addWord = function addWord() {
+        var result = -1;
+        var isHorizontal = origin[0] === end[0];
+        var isVertical = origin[1] === end[1];
+        var isDiagonal = Math.abs(origin[0]-end[0]) === Math.abs(origin[1]-end[1]);
+        var x;
+        var toGo = [];
+        var word = '';
+        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) {
+            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;
+            var i = 0;
+            var loopTime = Math.abs(origin[0]-end[0]);
+            for (;i<=loopTime;i++) {
+                word += grid[xRight ? origin[0] + i : origin[0] - i][yDown ? origin[1] +i : origin[1] - i];
+            }
+        }
+        return word;
+    };
+
+    document.getElementById('validateWord').addEventListener('click', function(evt) {
+        location.href = '#validate';
+        initSave();
+    }, 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 = '[';
+        array.forEach(function(elt){
+            if (typeof elt === "object") {
+                result += arrayToString(elt) + ',';
+            } else {
+                result += "'" +  ""+elt + "',";
+            }
+        });
+        result = result.slice(0, -1) + ']';
+        return result;
+    };
+    document.querySelector('textarea').innerHTML = 'var GRID = ' + arrayToString(grid) + '; var words = ' + arrayToString(words) + ';';
+};
+
+
+initGrid();

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>