mirror of
https://github.com/Chouchen/motsmeles.git
synced 2018-06-07 06:04:38 +02:00
Better event managment, needs a lot of work tho'
This commit is contained in:
parent
e634521128
commit
b7322214b3
@ -11,6 +11,7 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<h3>Current mode : <span id="currentMode">nothing</span></h3>
|
||||||
<aside id="generator-options">
|
<aside id="generator-options">
|
||||||
<label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>
|
<label for="grid-width"><input type="number" id="grid-width" min="1" max="20" step="1" name="grid-width" value="1"/></label>
|
||||||
<label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
|
<label for="grid-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
|
||||||
@ -22,8 +23,16 @@
|
|||||||
var width = 1;
|
var width = 1;
|
||||||
var height= 1;
|
var height= 1;
|
||||||
var current = { word : '', start: [], end: [] };
|
var current = { word : '', start: [], end: [] };
|
||||||
|
// left = 37
|
||||||
|
// up = 38
|
||||||
|
// right = 39
|
||||||
|
// down = 40
|
||||||
var sens;
|
var sens;
|
||||||
|
var senses = [37,38,39,40];
|
||||||
var isChoosingSens = false;
|
var isChoosingSens = false;
|
||||||
|
var currentModeText = document.getElementById('currentMode');
|
||||||
|
var isTypingWord = function() { return !isChoosingSens && sens !== undefined; };
|
||||||
|
var isNavigating = function() { return !isChoosingSens && sens === undefined; };
|
||||||
var inputGrid = document.getElementById('generator-grid');
|
var inputGrid = document.getElementById('generator-grid');
|
||||||
|
|
||||||
var modifyGridSize = function modifyGridSize() {
|
var modifyGridSize = function modifyGridSize() {
|
||||||
@ -33,7 +42,7 @@
|
|||||||
var iHtml = '';
|
var iHtml = '';
|
||||||
for(var i = 0,l = currentHeight; i <l ; i++) {
|
for(var i = 0,l = currentHeight; i <l ; i++) {
|
||||||
for (var j = 0, m = currentWidth; j<m; j++) {
|
for (var j = 0, m = currentWidth; j<m; j++) {
|
||||||
iHtml += '<input type="text" class="inputGrid" maxlength="1"/>';
|
iHtml += '<input type="text" class="inputGrid" data-x="'+j+'" data-y="'+i+'" maxlength="1"/>';
|
||||||
}
|
}
|
||||||
iHtml += '<div class="clearboth"></div>';
|
iHtml += '<div class="clearboth"></div>';
|
||||||
}
|
}
|
||||||
@ -49,23 +58,6 @@
|
|||||||
modifyGridSize();
|
modifyGridSize();
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
document.body.addEventListener("keydown", function(evt) {
|
|
||||||
// left = 37
|
|
||||||
// up = 38
|
|
||||||
// right = 39
|
|
||||||
// down = 40
|
|
||||||
var senses = [37,38,39,40];
|
|
||||||
if (isChoosingSens && senses.indexOf(evt.keyCode) !== -1 ) {
|
|
||||||
sens = evt.keyCode;
|
|
||||||
console.log("sens is " + sens);
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var chooseSens = function chooseSens() {
|
|
||||||
isChoosingSens = true;
|
|
||||||
console.log('choose a sens !');
|
|
||||||
};
|
|
||||||
|
|
||||||
var validWord = function validWord() {
|
var validWord = function validWord() {
|
||||||
console.log('todo validword');
|
console.log('todo validword');
|
||||||
};
|
};
|
||||||
@ -74,11 +66,11 @@
|
|||||||
console.log('todo gotonext');
|
console.log('todo gotonext');
|
||||||
};
|
};
|
||||||
|
|
||||||
var gridFocus = function gridFocus(evt) {
|
/*var gridFocus = function gridFocus(evt) {
|
||||||
if(sens == undefined && !isChoosingSens) {
|
if(sens == undefined && !isChoosingSens) {
|
||||||
chooseSens();
|
chooseSens();
|
||||||
}
|
}
|
||||||
};
|
};*/
|
||||||
|
|
||||||
var gridKeydown = function gridKeydown(evt) {
|
var gridKeydown = function gridKeydown(evt) {
|
||||||
var typedKey = evt.keyCode;
|
var typedKey = evt.keyCode;
|
||||||
@ -87,17 +79,44 @@
|
|||||||
// right = 39
|
// right = 39
|
||||||
// down = 40
|
// down = 40
|
||||||
var senses = [37,38,39,40];
|
var senses = [37,38,39,40];
|
||||||
if (isChoosingSens && senses.indexOf(evt.keyCode) !== -1 ) {
|
if (isChoosingSens && senses.indexOf(typedKey) !== -1) {
|
||||||
sens = evt.keyCode;
|
// chosing sens
|
||||||
|
console.log('current Mode : sens chosen!');
|
||||||
|
currentModeText.innerHTML = 'choosing sens';
|
||||||
|
sens = typedKey;
|
||||||
isChoosingSens = false;
|
isChoosingSens = false;
|
||||||
console.log("sens is " + sens);
|
console.log("sens is " + sens);
|
||||||
} else if (typedKey === 13) {
|
} else if(isNavigating() && senses.indexOf(typedKey) !== -1) {
|
||||||
|
// navigating
|
||||||
|
console.log('current Mode : navigating');
|
||||||
|
currentModeText.innerHTML = 'navigating';
|
||||||
|
var x = document.activeElement.getAttribute('data-x');
|
||||||
|
var y = document.activeElement.getAttribute('data-y');
|
||||||
|
var newX = typedKey === 37 ? +x-1 : typedKey === 39 ? +x+1 : +x;
|
||||||
|
var newY = typedKey === 38 ? +y-1 : typedKey === 40 ? +y+1 : +y;
|
||||||
|
var next = document.querySelector('.inputGrid[data-x="'+newX+'"][data-y="'+newY+'"]');
|
||||||
|
if(next) next.focus();
|
||||||
|
} else if (isTypingWord() && typedKey === 13) {
|
||||||
|
console.log('current Mode : validate word');
|
||||||
|
currentModeText.innerHTML = 'word validated';
|
||||||
|
// validate a word
|
||||||
validWord();
|
validWord();
|
||||||
sens = void 0;
|
sens = void 0;
|
||||||
current.word = '';
|
current.word = '';
|
||||||
} else {
|
} else if (isTypingWord()){
|
||||||
|
console.log('current Mode : typing word');
|
||||||
|
currentModeText.innerHTML = 'typing a word';
|
||||||
|
// type a letter
|
||||||
current.word += typedKey;
|
current.word += typedKey;
|
||||||
goToNextCase();
|
goToNextCase();
|
||||||
|
} else if(isNavigating() && typedKey === 13) {
|
||||||
|
console.log('current Mode : choosing sens');
|
||||||
|
currentModeText.innerHTML = 'choosing sens';
|
||||||
|
isChoosingSens = true;
|
||||||
|
} else {
|
||||||
|
// nothing from above
|
||||||
|
currentModeText.innerHTML = 'nothing';
|
||||||
|
console.log('nope');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -106,10 +125,10 @@
|
|||||||
var inputsLength = inputs.length;
|
var inputsLength = inputs.length;
|
||||||
for (var i = 0; i < inputsLength; i++) {
|
for (var i = 0; i < inputsLength; i++) {
|
||||||
var input = inputs[i];
|
var input = inputs[i];
|
||||||
input.removeEventListener("focus",gridFocus);
|
// input.removeEventListener("focus",gridFocus);
|
||||||
input.removeEventListener("keydown",gridKeydown);
|
input.removeEventListener("keydown",gridKeydown);
|
||||||
|
|
||||||
input.addEventListener("focus", gridFocus.bind(this), false);
|
// input.addEventListener("focus", gridFocus.bind(this), false);
|
||||||
input.addEventListener("keydown", gridKeydown.bind(this), false);
|
input.addEventListener("keydown", gridKeydown.bind(this), false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user