Dehighlight on mouseup if != mousedown event target

Previously, mousedown -> drag away from Cell -> mouseup would not clear
the highlight effect until the User reloaded the page or re-inspired the
highlight effect on all now-highlighted Cells. This can be mitigated by
implementing a dehighlight function. And, fortunately, our dehighlight
function is dead simple and also pretty innocuous since it requires no
change in database state anymore.

Remaining issue:
mousedown on Cell -> drag away from Cell to an area outside of the Game
board -> mouseup...
- In this case we will not detect the `mouseup` event since it has
  occurred outside of the board and, thus, outside of the bubble context
  of our Stimulus controller.
  - I'm not sure if I want to add a `mouseup` listener that covers
    everything on the page just in case the drag happens on anything
    outside of the board. So, for now, just punting on this.

app/controllers/games/current/board/cells/dehighlight_neighbors_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Games::Current::Board::Cells::DehighlightNeighborsController <
+        ApplicationController
+  include Games::Current::Board::Cells::ActionBehaviors
+
+  def create
+    updated_cells = cell.highlightable_neighbors
+
+    broadcast_updates(updated_cells)
+  end
+end

app/javascript/controllers/games/current/board/cell.js

@@ -26,6 +26,10 @@ class Cell {
     this.#submit(url)
   }
 
+  dehighlightNeighbors(url) {
+    this.#submit(url)
+  }
+
   toggleFlag(url, beforeSubmit = () => {}) {
     if (this.isNotFlaggable) return
 

app/javascript/controllers/games/current/board/desktop_controller.js

@@ -17,6 +17,7 @@ export default class extends Controller {
     revealUrl: String,
     toggleFlagUrl: String,
     highlightNeighborsUrl: String,
+    dehighlightNeighborsUrl: String,
     revealNeighborsUrl: String,
   }
 
@@ -25,13 +26,21 @@ export default class extends Controller {
   dispatchMousedown(event) {
     if (!mouse(event).actsAsLeftClick()) return
 
+    this.mousedownTarget = event.target
+
     this.highlightNeighborsTimer = setTimeout(() => {
       cell(event.target).highlightNeighbors(this.highlightNeighborsUrlValue)
     }, this.constructor.highlightNeighborsDelay)
   }
 
-  dispatchMouseup() {
+  dispatchMouseup(event) {
     clearTimeout(this.highlightNeighborsTimer)
+
+    if (this.mousedownTarget && event.target != this.mousedownTarget) {
+      cell(this.mousedownTarget).dehighlightNeighbors(
+        this.dehighlightNeighborsUrlValue,
+      )
+    }
   }
 
   dispatchContextmenu(event) {

app/views/games/current/board/_cell.html.erb

@@ -5,6 +5,4 @@
   data-revealed="<%= cell.revealed? %>"
   data-flagged="<%= cell.flagged? %>"
   class="<%= class_names(cell.css) %>"
->
-  <%= cell %>
-</td>
+><%= cell %></td>

app/views/games/current/board/_content.html.erb

@@ -28,6 +28,7 @@
         data-<%= controller %>-reveal-url-value="<%= content.reveal_url %>"
         data-<%= controller %>-toggle-flag-url-value="<%= content.toggle_flag_url %>"
         data-<%= controller %>-highlight-neighbors-url-value="<%= content.highlight_neighbors_url %>"
+        data-<%= controller %>-dehighlight-neighbors-url-value="<%= content.dehighlight_neighbors_url %>"
         data-<%= controller %>-reveal-neighbors-url-value="<%= content.reveal_neighbors_url %>"
         data-action="
           mousedown-><%= controller %>#dispatchMousedown

app/views/games/current/board/content.rb

@@ -21,6 +21,10 @@ def highlight_neighbors_url
     Router.game_board_cell_highlight_neighbors_path(game, NULL_CELL_ID)
   end
 
+  def dehighlight_neighbors_url
+    Router.game_board_cell_dehighlight_neighbors_path(game, NULL_CELL_ID)
+  end
+
   def reveal_neighbors_url
     Router.game_board_cell_reveal_neighbors_path(game, NULL_CELL_ID)
   end

config/routes.rb

@@ -21,6 +21,7 @@
               resource :reveal, only: :create
               resource :toggle_flag, only: :create
               resource :highlight_neighbors, only: :create
+              resource :dehighlight_neighbors, only: :create
               resource :reveal_neighbors, only: :create
             end
           end