Seems good and functionnal. Need small bugs correction & design

This commit is contained in:
Shikiryu 2015-02-21 14:33:58 +01:00
parent 59f07c5dbb
commit 921015d0a5
2 changed files with 182 additions and 109 deletions

View File

@ -13,20 +13,30 @@
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden;
} }
header { header {
height: 30px; height: 50px;
display: block; display: block;
position: fixed; position: absolute;
right: 0;
top: 0; top: 0;
left: 0; left: 0;
background-color: #6C9BD9;
box-shadow: 0 8px 6px -6px black;
} }
h3 {margin: 5px;}
body>div { body>div {
padding-top: 30px; padding-top: 50px;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
textarea {
width: 500px;
height: 300px;
box-shadow: inset 0 0 10px #000000;
}
</style> </style>
</head> </head>
<body> <body>
@ -47,7 +57,6 @@
<button id="validateWord">Validate</button> <button id="validateWord">Validate</button>
</div> </div>
<div id="validate"> <div id="validate">
<button id="save">Save</button>
<textarea></textarea> <textarea></textarea>
</div> </div>
</body> </body>

View File

@ -25,109 +25,111 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, {
ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20); ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
} }
}); });
// grid
var modifyGridSize = function modifyGridSize() { var initGrid = function() {
var currentWidth = width;//grid[0] ? grid[0].length : 0; // grid
var currentHeight = height;//grid.length; var modifyGridSize = function modifyGridSize() {
console.log('grid size is ' + currentWidth + ' x ' + currentHeight); var currentWidth = width;//grid[0] ? grid[0].length : 0;
var iHtml = ''; var currentHeight = height;//grid.length;
for(var i = 0,l = currentHeight; i <l ; i++) { console.log('grid size is ' + currentWidth + ' x ' + currentHeight);
for (var j = 0, m = currentWidth; j<m; j++) { var iHtml = '';
iHtml += '<input type="text" class="inputGrid" data-x="'+j+'" data-y="'+i+'" maxlength="1"/>'; 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>';
} }
iHtml += '<div class="clearboth"></div>'; inputGrid.innerHTML = iHtml;
} dynamicEvents();
inputGrid.innerHTML = iHtml; };
dynamicEvents(); document.getElementById('grid-width').addEventListener("change", function(evt){
}; width = evt.currentTarget.value;
document.getElementById('grid-width').addEventListener("change", function(evt){ modifyGridSize();
width = evt.currentTarget.value; }, false);
modifyGridSize(); document.getElementById('grid-height').addEventListener("change", function(evt){
}, false); height = evt.currentTarget.value;
document.getElementById('grid-height').addEventListener("change", function(evt){ modifyGridSize();
height = evt.currentTarget.value; }, false);
modifyGridSize(); var goToNextCase = function goToNextCase(sens) {
}, false); var currentCase = document.activeElement;
var goToNextCase = function goToNextCase(sens) { var currentX = currentCase.getAttribute('data-x');
var currentCase = document.activeElement; var currentY = currentCase.getAttribute('data-y');
var currentX = currentCase.getAttribute('data-x'); if (sens === 39) {
var currentY = currentCase.getAttribute('data-y'); if (currentX == width-1) {
if (sens === 39) { currentY++;
if (currentX == width-1) { currentX = -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;
} }
} }
} var nextCase;
return true; // left = 37
}; // up = 38
document.getElementById('validateGrid').addEventListener('click', function(e) { // right = 39
if (isGridValid()) { // 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 i = 0,l = height; i <l ; i++) {
grid[i] = [];
for (var j = 0, m = width; j<m; j++) { for (var j = 0, m = width; j<m; j++) {
grid[i][j] = document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value; if (document.querySelector('.inputGrid[data-x="'+j+'"][data-y="'+i+'"]').value == '') {
return false;
}
} }
} }
console.log(grid); return true;
location.href = '#wordsList'; };
initGrid(); document.getElementById('validateGrid').addEventListener('click', function(e) {
// gotonextstep if (isGridValid()) {
} for (var i = 0,l = height; i <l ; i++) {
}, false); grid[i] = [];
// words for (var j = 0, m = width; j<m; j++) {
var initGrid = function initGrid() { 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() {
var numHeight = grid.length; var numHeight = grid.length;
var numWidth = grid[0].length; var numWidth = grid[0].length;
var ulContent = document.createDocumentFragment(); var ulContent = document.createDocumentFragment();
@ -181,19 +183,81 @@ var initGrid = function initGrid() {
end = [Math.floor(position[1]/SIZE),Math.floor(position[0]/SIZE)]; end = [Math.floor(position[1]/SIZE),Math.floor(position[0]/SIZE)];
canvas.remove(drawingLine); canvas.remove(drawingLine);
if(origin[0] !== end[0] || origin[1] !== end[1]) { if(origin[0] !== end[0] || origin[1] !== end[1]) {
var newWord = addWord();
var newLi = document.createElement('li'); var newLi = document.createElement('li');
newLi.innerHTML = "test"; // TODO newLi.innerHTML = newWord;
document.getElementById('words').appendChild(newLi); document.getElementById('words').appendChild(newLi);
words.push("test"); 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 = []; origin = [];
end = []; 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 first;
var last;
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];
}
}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]];
}
} 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);
}; };
document.getElementById('validateWord').addEventListener('click', function(evt) { var initSave = function initSave() {
location.href = '#validate'; // save
}, false); var arrayToString = function arrayToString(array) {
// save var result = '[';
document.getElementById('save').addEventListener('click', function(evt) { array.forEach(function(elt){
document.querySelector('textarea').innerHTML = 'var GRID = ' + grid.toString() + '; var words = ' + words.toString() + ';'; if (typeof elt === "object") {
}, false); 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();