highlight center square when cursor is on it

also, when auto-grouping answers in the center row, stop looking if
we cross the center square

drumline-client/src/lib/components/ClueGrid.svelte

@@ -702,6 +702,7 @@
         box-shadow: var(--shadow-right), var(--shadow-top);
     }
 
+    .grid .center-cell.selected,
     .grid .odd-band.selected,
     .grid .even-band.selected {
         background-color: rgba(199, 36, 177, 0.7);

drumline-client/src/lib/editor/word_grouping.ts

@@ -133,6 +133,14 @@ const findWordBounds = (
         return grid[row_next][col_next].is_filled() && !answer_segments.in_answer_at_offset(idx)[0];
     };
 
+    // when in the center row, stop searching when we cross the center square
+    const is_in_center_row = !use_band && (location[0] === grid_attributes.center);
+    const crossed_center = (idx: number): boolean => {
+        const orig_col = location[1];
+        const new_col = locations[idx][1];
+        return (orig_col < grid_attributes.center) !== (new_col < grid_attributes.center);
+    };
+
     // look backwards for a square that has a letter in it and is not
     // part of an existing word
     let idxStart = cell_group.offset;
@@ -141,6 +149,9 @@ const findWordBounds = (
         if (!fn_is_suitable_for_word(idxStartNext)) {
             break;
         }
+        if (is_in_center_row && crossed_center(idxStartNext)) {
+            break;
+        }
         idxStart = idxStartNext;
     }
 
@@ -153,6 +164,9 @@ const findWordBounds = (
         if (!fn_is_suitable_for_word(idxEndNext)) {
             break;
         }
+        if (is_in_center_row && crossed_center(idxEndNext)) {
+            break;
+        }
         idxEnd = idxEndNext;
     }
     return [idxStart, idxEnd];