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:
parent
59f07c5dbb
commit
921015d0a5
@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -47,7 +57,6 @@
|
||||
<button id="validateWord">Validate</button>
|
||||
</div>
|
||||
<div id="validate">
|
||||
<button id="save">Save</button>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -25,6 +25,8 @@ var LabeledRect = fabric.util.createClass(fabric.Rect, {
|
||||
ctx.fillText(this.label, -this.width/2 + 5, -this.height/2 + 20);
|
||||
}
|
||||
});
|
||||
|
||||
var initGrid = function() {
|
||||
// grid
|
||||
var modifyGridSize = function modifyGridSize() {
|
||||
var currentWidth = width;//grid[0] ? grid[0].length : 0;
|
||||
@ -122,12 +124,12 @@ document.getElementById('validateGrid').addEventListener('click', function(e) {
|
||||
}
|
||||
console.log(grid);
|
||||
location.href = '#wordsList';
|
||||
initGrid();
|
||||
initWords();
|
||||
// gotonextstep
|
||||
}
|
||||
}, false);
|
||||
// words
|
||||
var initGrid = function initGrid() {
|
||||
};
|
||||
var initWords = function initWords() {
|
||||
var numHeight = grid.length;
|
||||
var numWidth = grid[0].length;
|
||||
var ulContent = document.createDocumentFragment();
|
||||
@ -181,19 +183,81 @@ var initGrid = function initGrid() {
|
||||
end = [Math.floor(position[1]/SIZE),Math.floor(position[0]/SIZE)];
|
||||
canvas.remove(drawingLine);
|
||||
if(origin[0] !== end[0] || origin[1] !== end[1]) {
|
||||
var newWord = addWord();
|
||||
var newLi = document.createElement('li');
|
||||
newLi.innerHTML = "test"; // TODO
|
||||
newLi.innerHTML = newWord;
|
||||
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 = [];
|
||||
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);
|
||||
};
|
||||
var initSave = function initSave() {
|
||||
// save
|
||||
document.getElementById('save').addEventListener('click', function(evt) {
|
||||
document.querySelector('textarea').innerHTML = 'var GRID = ' + grid.toString() + '; var words = ' + words.toString() + ';';
|
||||
}, false);
|
||||
var arrayToString = function arrayToString(array) {
|
||||
var result = '[';
|
||||
array.forEach(function(elt){
|
||||
if (typeof elt === "object") {
|
||||
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