From 7029ce6655c2b3e258dcd2d2a04cfeac981cedb8 Mon Sep 17 00:00:00 2001 From: Paul DobbinSchmaltz Date: Mon, 27 Jan 2025 11:59:04 -0600 Subject: [PATCH] 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. --- .../board/cells/dehighlight_neighbors_controller.rb | 12 ++++++++++++ .../controllers/games/current/board/cell.js | 4 ++++ .../games/current/board/desktop_controller.js | 11 ++++++++++- app/views/games/current/board/_cell.html.erb | 4 +--- app/views/games/current/board/_content.html.erb | 1 + app/views/games/current/board/content.rb | 4 ++++ config/routes.rb | 1 + 7 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 app/controllers/games/current/board/cells/dehighlight_neighbors_controller.rb diff --git a/app/controllers/games/current/board/cells/dehighlight_neighbors_controller.rb b/app/controllers/games/current/board/cells/dehighlight_neighbors_controller.rb new file mode 100644 index 00000000..945669d4 --- /dev/null +++ b/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 diff --git a/app/javascript/controllers/games/current/board/cell.js b/app/javascript/controllers/games/current/board/cell.js index 0735044e..9b235565 100644 --- a/app/javascript/controllers/games/current/board/cell.js +++ b/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 diff --git a/app/javascript/controllers/games/current/board/desktop_controller.js b/app/javascript/controllers/games/current/board/desktop_controller.js index fc467d77..13a03cb5 100644 --- a/app/javascript/controllers/games/current/board/desktop_controller.js +++ b/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) { diff --git a/app/views/games/current/board/_cell.html.erb b/app/views/games/current/board/_cell.html.erb index cbed4e0b..c76447a2 100644 --- a/app/views/games/current/board/_cell.html.erb +++ b/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 %> - +><%= cell %> diff --git a/app/views/games/current/board/_content.html.erb b/app/views/games/current/board/_content.html.erb index bc68bd10..542b1d54 100644 --- a/app/views/games/current/board/_content.html.erb +++ b/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 diff --git a/app/views/games/current/board/content.rb b/app/views/games/current/board/content.rb index 06fffad1..07ae4f53 100644 --- a/app/views/games/current/board/content.rb +++ b/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 diff --git a/config/routes.rb b/config/routes.rb index a34aed6c..d6367bd7 100644 --- a/config/routes.rb +++ b/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