move handling drag hover to JS side

assets/chessground.brown.css

@@ -17,10 +17,10 @@ cg-board square.oc.move-dest {
 cg-board square.oc.premove-dest {
   background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.2) 80%);
 }
-cg-board square.move-dest:hover {
+cg-board square.move-dest.hover {
   background: rgba(20, 85, 30, 0.3);
 }
-cg-board square.premove-dest:hover {
+cg-board square.premove-dest.hover {
   background: rgba(20, 30, 85, 0.2);
 }
 cg-board square.last-move {

src/drag.ts

@@ -144,13 +144,41 @@ function processDrag(s: State): void {
           cur.pos[1] - bounds.top - bounds.height / 16,
         ]);
 
-        cur.keyHasChanged ||= cur.orig !== board.getKeyAtDomPos(cur.pos, board.whitePov(s), bounds);
+        const hoveredKey = board.getKeyAtDomPos(cur.pos, board.whitePov(s), bounds);
+        if (cur.orig !== hoveredKey) {
+          cur.keyHasChanged = true;
+
+          if (hoveredKey) {
+            const isValidMove =
+              s.movable.dests?.get(cur.orig)?.includes(hoveredKey) ??
+              s.premovable.dests?.includes(hoveredKey);
+            if (isValidMove) {
+              const hoveredValidDestSquare = s.dom.elements.board.querySelector<SVGElement>(
+                `.move-dest.${hoveredKey}, .premove-dest.${hoveredKey}`,
+              );
+              if (hoveredValidDestSquare && !hoveredValidDestSquare.classList.contains('hover')) {
+                resetHoverState(s);
+                hoveredValidDestSquare.classList.add('hover');
+              }
+            }
+          }
+        } else {
+          cur.keyHasChanged ||= false;
+          resetHoverState(s);
+        }
       }
     }
     processDrag(s);
   });
 }
 
+function resetHoverState(s: State) {
+  const squares = s.dom.elements.board.querySelectorAll<SVGElement>(`.move-dest, .premove-dest`);
+  if (squares.length > 0) {
+    squares.forEach(sq => sq.classList.remove('hover'));
+  }
+}
+
 export function move(s: State, e: cg.MouchEvent): void {
   // support one finger touch only
   if (s.draggable.current && (!e.touches || e.touches.length < 2)) {

src/render.ts

@@ -255,8 +255,8 @@ function computeSquareClasses(s: State): cg.SquareClasses {
 
 function addSquare(squares: cg.SquareClasses, key: cg.Key, klass: string): void {
   const classes = squares.get(key);
-  if (classes) squares.set(key, `${classes} ${klass}`);
-  else squares.set(key, klass);
+  if (classes) squares.set(key, `${classes} ${key} ${klass}`);
+  else squares.set(key, `${key} ${klass}`);
 }
 
 function appendValue<K, V>(map: Map<K, V[]>, key: K, value: V): void {