clue list navigation added, added smooth transition for clue lists

sketch.js

@@ -51,7 +51,9 @@ class Word {
     if (!mycell[x][y].hintNr) {
       mycell[x][y].hintNr = ++Word.number;
     }
-
+    this.li.setAttribute("x", x);
+    this.li.setAttribute("y", y);
+    this.li.setAttribute("o", direction);
     this.li.innerHTML = mycell[x][y].hintNr + ":" + clue;
     direction ? down.appendChild(this.li) : across.appendChild(this.li); //add clue to list
     mycell[x][y].word[direction] = this;
@@ -62,10 +64,21 @@ class Word {
       mycell[x][y].drawChar("white");
       direction ? y += 1 : x += 1;
     }
+    this.li.onclick = function (e) {
+      let x =Number(e.target.attributes[0].value);
+      let y =Number(e.target.attributes[1].value);
+      let o =Number(e.target.attributes[2].value);
+      lastCell = activeCell;
+      activeCell = mycell[x][y]
+      m_orientation = o;
+      activeMode = mode.insert;
+      lastCell.clearHighlight();
+      activeCell.highlight();
+    }
   }
   highlight = function () {
     let filled = true;
-    this.li.scrollIntoView();
+    this.li.scrollIntoView({ behavior: 'smooth'});
     this.li.style.color = "black";
     this.li.style.background = this.highlightColor;
     this.chars.forEach(element => {
@@ -118,14 +131,14 @@ var mycell = new Array(columns);    //create array
 for (i = 0; i < columns; i++) {
   mycell[i] = new Array(rows); //make array 2D
   for (j = 0; j < rows; j++) {
-    mycell[i][j] = new Cell(i, j, ""); //create array of cells
+    mycell[i][j] = new Cell(i, j, ""); //create array of empty cells
   }
 }
 //test word
 initTestPuzzle2();
 initNeighbours();
 
-activeCell = words[0].chars[0];
+activeCell = words[0].chars[0]; //start cell
 activeCell.highlight();
 
 function sleep(ms) {