Fix bug of "move ding" audio playing every time the clock ticked

mreishus · Jan 8, 2020 · 844ccb6 · 844ccb6 · mreishus · Jan 8, 2020
1 parent d733936
commit 844ccb6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/apps/demon_spirit_web/assets/js/hooks/update_ding.js b/apps/demon_spirit_web/assets/js/hooks/update_ding.js
@@ -1,9 +1,15 @@
 let move_audio = new Audio();
-move_audio.src = '/sounds/move.mp3';
+move_audio.src = "/sounds/move.mp3";
+
+let moves = 0;
 
 let UpdateDing = {
   updated() {
-    move_audio.play();
+    let new_moves = this.el.getAttribute("data-moves");
+    if (new_moves != moves) {
+      moves = new_moves;
+      move_audio.play();
+    }
   }
 };
 export default UpdateDing;
diff --git a/apps/demon_spirit_web/lib/demon_spirit_web/templates/game/live_show.html.leex b/apps/demon_spirit_web/lib/demon_spirit_web/templates/game/live_show.html.leex
@@ -92,7 +92,7 @@ td .content {
   <%= render "show/ready.html", state: @state, socket: @socket, guest: @guest %>
 <% end %>
 
-<div phx-hook="UpdateDing" class="hidden">
+<div phx-hook="UpdateDing" class="hidden" data-moves=<%= @state.game.moves %>>
   <%= @state.game.moves %>
 </div>
 
@@ -103,9 +103,9 @@ td .content {
 
     <%# Left - Chat %>
     <div class="h-64 md:h-96 xl:h-112   mr-2 md:mr-4">
-      <%= live_render(@socket, DemonSpiritWeb.LiveChatIndex, 
-            session: %{chat_name: @game_name, guest: @guest}, 
-            id: @game_name, 
+      <%= live_render(@socket, DemonSpiritWeb.LiveChatIndex,
+            session: %{chat_name: @game_name, guest: @guest},
+            id: @game_name,
             container: {:div, class: "h-full"}
       ) %>
     </div>