Make "Reload Page" message in New Game Notification a link

... for re-joining the Current Game. Also: - Ensure a good mobile experience by controlling word-wrapping / line length of "Reload Page" message, etc. - Add, but rotate the "reload" emoji so that it looks like the one in the browser window. - Which require manually fixing a quirk in the underline behavior for the link, as the default behavior would crop out the portion that should have gone under the emoji. - Allow pressing `esc` to clear the notification/overlay.
pdobb · Dec 27, 2024 · f888f88 · f888f88
1 parent 688e9b3
commit f888f88
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 2 deletions.
diff --git a/app/javascript/controllers/game_notification_controller.js b/app/javascript/controllers/game_notification_controller.js
@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+// GameNotificationController is responsible for a singleton flash-style
+// notification overlay that may appear on a Game Show page, specifically.
+export default class extends Controller {
+  static classes = ["hide"]
+
+  close() {
+    this.element.classList.add(...this.hideClasses)
+  }
+
+  remove() {
+    this.element.remove()
+  }
+}
diff --git a/app/javascript/controllers/page_controller.js b/app/javascript/controllers/page_controller.js
@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  reload(event) {
+    event.preventDefault()
+    location.reload(true)
+  }
+}
diff --git a/app/views/games/just_ended/_container.html.erb b/app/views/games/just_ended/_container.html.erb
@@ -3,9 +3,16 @@
 <%= turbo_stream_from(container.turbo_stream_name) %>
 <div
   id="new_game_notification_container"
+  data-controller="game-notification"
+  data-action="
+    keydown.esc@window->game-notification#close
+    transitionend->game-notification#remove
+  "
+  data-game-notification-hide-class="opacity-0"
   class="
     pointer-events-none z-20
     fixed top-6 left-1/2 -translate-x-1/2
+    transition-opacity ease-in
   "></div>
 
 <%= turbo_frame_tag(

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -53,7 +53,7 @@
 
   <body
     data-turbo="<%= !App.disable_turbo? %>"
-    data-controller="theme time-zone"
+    data-controller="theme time-zone page"
     data-theme-active-theme-button-class="text-red-700 dark:text-red-600"
     data-time-zone-update-url-value="<%= current_user_time_zone_update_path %>"
     class="flex flex-col gap-y-12 h-screen"

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -72,7 +72,19 @@ en:
               taken: has already been ended
 
   flash:
-    new_current_game: New Game Started! Reload Page to join in.
+    new_current_game_html: |
+      <span class="whitespace-nowrap">New fleet deployed.</span>
+      <span class="whitespace-nowrap">
+        <a href="/"
+           data-action="page#reload"
+           class="relative no-underline inline-flex items-center gap-x-2"
+        >
+          Reload
+          <span class="inline-block text-[22px] rotate-45">↻</span>
+          <span class="absolute bottom-1 inset-x-0 h-px bg-current"></span>
+        </a>
+        to join in!
+      </span>
     not_found: "%{type} not found."
     successful_update: "Updated %{type}"
     successful_update_to: "Updated %{type} to %{to}"