Refactor `keyEvents.js`

static/js/keyEvents.js

@@ -1,71 +1,60 @@
-// implement `key` events
-document.onkeydown = checkKey;
-
-urlParams = new URLSearchParams(window.location.search);
-
 // Utils informations
-var KEYCODE_Q           = '81'
-var KEYCODE_ENTER       = '13'
-var KEYCODE_LEFT_ARROW  = '37'
-var KEYCODE_RIGHT_ARROW = '39'
-
-// get params if exists
-if (urlParams.has('scene')){
-
-   var scene = urlParams.get('scene')
-   var expe  = urlParams.get('expe')
-}
+const KEYCODE_Q           = 81
+const KEYCODE_ENTER       = 13
+const KEYCODE_LEFT_ARROW  = 37
+const KEYCODE_RIGHT_ARROW = 39
 
-function checkKey(e) {
+urlParams = new URLSearchParams(window.location.search)
 
-   e = e || window.event;
+const scene = urlParams.get('scene')
+const expe  = urlParams.get('expe')
 
-   if (e.keyCode == '81') {
-      // `q` for quit expe
+const checkKey = e => {
+   if (e.keyCode === KEYCODE_Q) {
+      // `q` to quit expe
       console.log('`q` key is pressed')
       window.location = baseUrl
    }
-   else if (e.keyCode == '13') {
-
+   else if (e.keyCode === KEYCODE_ENTER) {
       // check if experience is begin
-      if (!BEGIN_EXPE){
-
-         console.log(window.location.href + "&begin=true")
+      if (!BEGIN_EXPE) {
          // right arrow
-         window.location = window.location.href + "&begin=true"
+         window.location = window.location.href + '&begin=true'
       } 
    }
-   else if (e.keyCode == '37' || e.keyCode == '39'){
-
-      // only do something is experience is begin
-      if (BEGIN_EXPE){
-         var answer;
+   else if (e.keyCode === KEYCODE_LEFT_ARROW || e.keyCode === KEYCODE_RIGHT_ARROW) {
+      // only do something is experience has begun
+      if (BEGIN_EXPE) {
+         let answer
 
          // left arrow key
-         if (e.keyCode == '37'){
+         if (e.keyCode === KEYCODE_LEFT_ARROW) {
             console.log('left arrow is pressed')
             answer = '1'
          }
 
          // right arrow key
-         if (e.keyCode == '39'){
+         if (e.keyCode === KEYCODE_RIGHT_ARROW) {
             console.log('right arrow is pressed')
             answer = '0'
          }
 
-         var iteration = 0;
+         let iteration = 0
 
          // update of iteration if exists
-         if (urlParams.has('iteration')){
+         if (urlParams.has('iteration')) {
             iteration = urlParams.get('iteration')
 
             // increment step
-            iteration++;
+            iteration++
          }
          
          // construct url with params for experience
-         var params = "?scene=" + scene + "&expe=" + expe + "&iteration=" + iteration + "&answer=" + answer
+         const params = `?scene=${scene}&expe=${expe}&iteration${iteration}&answer=${answer}`
          window.location = expeUrl + params
       }
    }
-}
+}
+
+// implement `key` events
+document.addEventListener('keydown', checkKey)