From 59f07c5dbb6852bcc9495928f8176f5ef6de47fd Mon Sep 17 00:00:00 2001 From: Shikiryu Date: Sat, 21 Feb 2015 00:11:38 +0100 Subject: [PATCH 1/3] 1st try in this idea. Hope it's the good one :) --- src/generator.html | 55 ++++++++++++ src/js/generator.js | 199 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 254 insertions(+) create mode 100644 src/generator.html create mode 100644 src/js/generator.js diff --git a/src/generator.html b/src/generator.html new file mode 100644 index 0000000..3c93f14 --- /dev/null +++ b/src/generator.html @@ -0,0 +1,55 @@ + + + + + + mots mélés generator + + + +
+

Current mode : nothing

+
+
+ +
+ +
+
+ + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/src/js/generator.js b/src/js/generator.js new file mode 100644 index 0000000..a5f4572 --- /dev/null +++ b/src/js/generator.js @@ -0,0 +1,199 @@ +var grid = []; +var words= []; +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 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); + } +}); +// 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 '; + } + iHtml += '
'; + } + 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 Date: Sat, 21 Feb 2015 14:33:58 +0100 Subject: [PATCH 2/3] Seems good and functionnal. Need small bugs correction & design --- src/generator.html | 17 ++- src/js/generator.js | 274 +++++++++++++++++++++++++++----------------- 2 files changed, 182 insertions(+), 109 deletions(-) diff --git a/src/generator.html b/src/generator.html index 3c93f14..a651e30 100644 --- a/src/generator.html +++ b/src/generator.html @@ -13,20 +13,30 @@ display: block; height: 100%; width: 100%; + overflow: hidden; } header { - height: 30px; + height: 50px; display: block; - position: fixed; + 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: 30px; + padding-top: 50px; display: block; width: 100%; height: 100%; } + textarea { + width: 500px; + height: 300px; + box-shadow: inset 0 0 10px #000000; + } @@ -47,7 +57,6 @@
-
diff --git a/src/js/generator.js b/src/js/generator.js index a5f4572..eaad034 100644 --- a/src/js/generator.js +++ b/src/js/generator.js @@ -25,109 +25,111 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, { ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20); } }); -// 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 '; + +var initGrid = function() { + // 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 '; + } + iHtml += '
'; } - iHtml += '
'; - } - 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 = 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 Date: Sat, 21 Feb 2015 22:56:45 +0100 Subject: [PATCH 3/3] Evrything works. Generator is ugly (but who cares?) Grunt and folders modified. --- Gruntfile.js | 55 ++++++++++++------- dist/css/motsmeles.css | 1 - dist/index.html | 14 ++--- dist/js/motsmeles.min.js | 2 - src/{css/style.css => game/css/game.css} | 0 src/game/index.html | 17 ++++++ src/{ => game}/js/const.js | 0 src/{ => game}/js/script.js | 0 src/generator.html | 64 ---------------------- src/generator/css/generator.css | 32 +++++++++++ src/generator/generator.html | 17 ++++++ src/{ => generator}/js/generator.js | 67 ++++++++++++++++++------ src/index.html | 17 ------ 13 files changed, 161 insertions(+), 125 deletions(-) delete mode 100644 dist/css/motsmeles.css delete mode 100644 dist/js/motsmeles.min.js rename src/{css/style.css => game/css/game.css} (100%) create mode 100644 src/game/index.html rename src/{ => game}/js/const.js (100%) rename src/{ => game}/js/script.js (100%) delete mode 100644 src/generator.html create mode 100644 src/generator/css/generator.css create mode 100644 src/generator/generator.html rename src/{ => generator}/js/generator.js (81%) delete mode 100644 src/index.html diff --git a/Gruntfile.js b/Gruntfile.js index 6cb5fdc..7f0cef6 100644 --- a/Gruntfile.js +++ b/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']); }; \ No newline at end of file diff --git a/dist/css/motsmeles.css b/dist/css/motsmeles.css deleted file mode 100644 index 5dc119c..0000000 --- a/dist/css/motsmeles.css +++ /dev/null @@ -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} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index fe7de75..9aa1f60 100644 --- a/dist/index.html +++ b/dist/index.html @@ -4,14 +4,14 @@ Mot mélés - + -

Mots Mélés

-
- -
    -
    - +

    Mots Mélés

    +
    + +
      +
      + \ No newline at end of file diff --git a/dist/js/motsmeles.min.js b/dist/js/motsmeles.min.js deleted file mode 100644 index c420b28..0000000 --- a/dist/js/motsmeles.min.js +++ /dev/null @@ -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 + + + Mot mélés + + + + + +

      Mots Mélés

      +
      + +
        +
        + + + \ No newline at end of file diff --git a/src/js/const.js b/src/game/js/const.js similarity index 100% rename from src/js/const.js rename to src/game/js/const.js diff --git a/src/js/script.js b/src/game/js/script.js similarity index 100% rename from src/js/script.js rename to src/game/js/script.js diff --git a/src/generator.html b/src/generator.html deleted file mode 100644 index a651e30..0000000 --- a/src/generator.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - mots mélés generator - - - -
        -

        Current mode : nothing

        -
        -
        - -
        - -
        -
        - -
          - -
          -
          - -
          - - - \ No newline at end of file diff --git a/src/generator/css/generator.css b/src/generator/css/generator.css new file mode 100644 index 0000000..0ac0c33 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/generator/generator.html b/src/generator/generator.html new file mode 100644 index 0000000..ec97131 --- /dev/null +++ b/src/generator/generator.html @@ -0,0 +1,17 @@ + + + + + + mots mélés generator + + + +
          +

          Instructions: nothing

          +
          +
          +
          + + + \ No newline at end of file diff --git a/src/js/generator.js b/src/generator/js/generator.js similarity index 81% rename from src/js/generator.js rename to src/generator/js/generator.js index eaad034..28e44e5 100644 --- a/src/js/generator.js +++ b/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 = '
          '+ + ''+ + '
          '+ + ''+ + '
          '; + 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 '+ + '
            '+ + ''+ + ''; + 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 = ''; + 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) { - 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]; - } + 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 = '
            '+ + ''+ + '
            '; // save var arrayToString = function arrayToString(array) { var result = '['; diff --git a/src/index.html b/src/index.html deleted file mode 100644 index fe7de75..0000000 --- a/src/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - Mot mélés - - - - - -

            Mots Mélés

            -
            - -
              -
              - - - \ No newline at end of file