From f77a5c6c1c2c9a11e8b1fb23087d355efaaa5573 Mon Sep 17 00:00:00 2001
From: Paul DobbinSchmaltz <p.dobbinschmaltz@icloud.com>
Date: Mon, 27 Jan 2025 11:25:33 -0600
Subject: [PATCH] Add a slight delay before highlighting neighbors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This aims to cut down, at least a little bit, on unnecessary server
requests. Otherwise we're just always processing 2 server requests per
click... so we're trying to get that o be 1 request per click, as often
as possible, while still preserving that "fast" Game play dynamic.

The 100 ms delay I've settled on attempts to thread the needle between
being:
1. Just enough time for a fast-ish click event to occur (canceling the
   highlightNeighbors request), while also being
2. Not too long™--so that it doesn't feelt delayed or too annoying to
   wait for the Cell highlight effect to appear.

Notes:

I chose to add a `mouseup` event handler to cancel the timer because:
1. `mouseup` occurs before `click`, so this gives us maybe an extra
   millisecond or 2 of extra leeway.
2. It reduces the responsibilities on the dispatchClick event.
3. I expect to add more to the `mouseup` event soon.

I've also considered making a lead-in Highlight effect with local
JS, which would then be supplanted by the server response (if we get
that far). While this could work... I don't want to lose that
interactive/responsive/exciting Game play experience for other
participants either. Reducing the ratio of highlight events transmitted
vs seen on the originating User's side might start to erode that line a
bit.
---
 .../games/current/board/desktop_controller.js          | 10 ++++++++--
 app/views/games/current/board/_content.html.erb        |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/games/current/board/desktop_controller.js b/app/javascript/controllers/games/current/board/desktop_controller.js
index 3c5a4c17..fc467d77 100644
--- a/app/javascript/controllers/games/current/board/desktop_controller.js
+++ b/app/javascript/controllers/games/current/board/desktop_controller.js
@@ -20,12 +20,18 @@ export default class extends Controller {
     revealNeighborsUrl: String,
   }
 
-  static cellIdRegex = /cells\/(\d+)\//
+  static highlightNeighborsDelay = 100 // ms
 
   dispatchMousedown(event) {
     if (!mouse(event).actsAsLeftClick()) return
 
-    cell(event.target).highlightNeighbors(this.highlightNeighborsUrlValue)
+    this.highlightNeighborsTimer = setTimeout(() => {
+      cell(event.target).highlightNeighbors(this.highlightNeighborsUrlValue)
+    }, this.constructor.highlightNeighborsDelay)
+  }
+
+  dispatchMouseup() {
+    clearTimeout(this.highlightNeighborsTimer)
   }
 
   dispatchContextmenu(event) {
diff --git a/app/views/games/current/board/_content.html.erb b/app/views/games/current/board/_content.html.erb
index bf0950b6..bc68bd10 100644
--- a/app/views/games/current/board/_content.html.erb
+++ b/app/views/games/current/board/_content.html.erb
@@ -31,6 +31,7 @@
         data-<%= controller %>-reveal-neighbors-url-value="<%= content.reveal_neighbors_url %>"
         data-action="
           mousedown-><%= controller %>#dispatchMousedown
+          mouseup-><%= controller %>#dispatchMouseup
           contextmenu-><%= controller %>#dispatchContextmenu:prevent
           click-><%= controller %>#dispatchClick
         "