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