Skip to content

Commit

Permalink
Add a slight delay before highlighting neighbors
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
pdobb committed Jan 27, 2025
1 parent 670aaaa commit f77a5c6
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions app/views/games/current/board/_content.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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
"
Expand Down

0 comments on commit f77a5c6

Please sign in to comment.