From b7322214b3595ebf1feaf5442a43369fda4c8295 Mon Sep 17 00:00:00 2001
From: Shikiryu <clement+github@desmidt.fr>
Date: Sun, 15 Feb 2015 23:42:03 +0100
Subject: [PATCH] Better event managment, needs a lot of work tho'

---
 src/generator.html | 81 ++++++++++++++++++++++++++++------------------
 1 file changed, 50 insertions(+), 31 deletions(-)
diff --git a/src/generator.html b/src/generator.html
index e7b5056..2cb026d 100644
--- a/src/generator.html
+++ b/src/generator.html
@@ -11,19 +11,28 @@
     </style>
 </head>
 <body>
-    <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-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
-    </aside>
-    <section id="generator-grid"></section>
+<h3>Current mode : <span id="currentMode">nothing</span></h3>
+<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-height"><input type="number" id="grid-height" min="1" max="20" step="1" name="grid-height" value="1"/></label>
+</aside>
+<section id="generator-grid"></section>
 </body>
 <script>
     var grid = [];
     var width = 1;
     var height= 1;
     var current = { word : '', start: [], end: [] };
+    //        left = 37
+    //        up = 38
+    //        right = 39
+    //        down = 40
     var sens;
+    var senses = [37,38,39,40];
     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 modifyGridSize = function modifyGridSize() {
@@ -33,7 +42,7 @@
         var iHtml = '';
         for(var i = 0,l = currentHeight; i <l ; i++) {
             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>';
         }
@@ -49,23 +58,6 @@
         modifyGridSize();
     }, 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() {
         console.log('todo validword');
     };
@@ -74,11 +66,11 @@
         console.log('todo gotonext');
     };
 
-    var gridFocus = function gridFocus(evt) {
+    /*var gridFocus = function gridFocus(evt) {
         if(sens == undefined && !isChoosingSens) {
             chooseSens();
         }
-    };
+    };*/
 
     var gridKeydown = function gridKeydown(evt) {
         var typedKey = evt.keyCode;
@@ -87,17 +79,44 @@
 //        right = 39
 //        down = 40
         var senses = [37,38,39,40];
-        if (isChoosingSens && senses.indexOf(evt.keyCode) !== -1 ) {
-            sens = evt.keyCode;
+        if (isChoosingSens &&  senses.indexOf(typedKey) !== -1) {
+            // chosing sens
+            console.log('current Mode : sens chosen!');
+            currentModeText.innerHTML = 'choosing sens';
+            sens = typedKey;
             isChoosingSens = false;
             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();
             sens = void 0;
             current.word = '';
-        } else {
+        } else if (isTypingWord()){
+            console.log('current Mode : typing word');
+            currentModeText.innerHTML = 'typing a word';
+            // type a letter
             current.word += typedKey;
             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;
         for (var i = 0; i < inputsLength; i++) {
             var input = inputs[i];
-            input.removeEventListener("focus",gridFocus);
+//            input.removeEventListener("focus",gridFocus);
             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);
         }
     };
