mirror of
https://github.com/Chouchen/motsmeles.git
synced 2018-06-07 06:04:38 +02:00
Seems good and functionnal. Need small bugs correction & design
This commit is contained in:
Shikiryu
parent
59f07c5dbb
commit
921015d0a5
@ -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>
|
||||||
|
|||||||
@ -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();
|
||||||
Loading…
Reference in New Issue
Block a user