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