add an optional in-page notification sound

index.html

@@ -148,6 +148,7 @@
 							<div class="cb-hbox">
 								<div class="cb-vbox cb-align-start">
 									<div><input id="cb_notify" type="checkbox"><label for="cb_notify">Notify</label></div>
+									<div><input id="cb_sound" type="checkbox"><label for="cb_sound">Sound</label></div>
 									<div><input id="cb_reverse" type="checkbox"><label for="cb_reverse">Reverse</label></div>
 								</div>
 								<div class="cb-vbox cb-align-stretch">

js/pacosako_ui.js

@@ -14,6 +14,9 @@ import 'webpack-jquery-ui/droppable';
 import 'webpack-jquery-ui/selectmenu';
 import 'webpack-jquery-ui/css';
 
+/* "Waterdrop" by Porphyr (freesound.org/people/Porphyr) / CC BY 3.0 (creativecommons.org/licenses/by/3.0) */
+import Waterdrop from '../wav/191678__porphyr__waterdrop.wav';
+
 $(function (){
    /* workaround for persistent errors accumulating which break synchronization */
    if ('localStorage' in window) {
@@ -400,13 +403,16 @@ $(function (){
       const moves = game.moves;
 
       const cb_board = $('#cb_board').first();
-      if ($('#cb_notify')[0].checked) {
+      if (!deepEqual(moves, cb_board.data('last_state'))) {
-         if (!deepEqual(moves, cb_board.data('last_state'))) {
+         /* ignore partial moves */
-            /* ignore partial moves */
+         if (!game.board.phantom) {
-            if (!game.board.phantom) {
+            if ($('#cb_notify')[0].checked) {
                const gameString = cb_board.data('lightName') + ' vs. ' + cb_board.data('darkName');
                notify(gameString + '\n' + $('#cb_message').text());
             }
+            if ($('#cb_sound')[0].checked) {
+               playNotifySound();
+            }
          }
       }
 
@@ -579,6 +585,16 @@ $(function (){
       }
    }
 
+   const notifyAudio = new Audio(Waterdrop);
+
+   function playNotifySound(){
+      const now = new Date().getTime();
+      const then = $(window).data('notifyAfter');
+      if (!then || now >= then) {
+         try { notifyAudio.play(); } catch (err) {}
+      }
+   }
+
    function notify(body) {
       const now = new Date().getTime();
       const then = $(window).data('notifyAfter');
@@ -647,6 +663,7 @@ $(function (){
    }
 
    const LS_KEY_NOTIFY = 'pacosako/notify';
+   const LS_KEY_SOUND = 'pacosako/sound';
    const LS_KEY_REVERSE = 'pacosako/reverse';
    const LS_KEY_THEME = 'pacosako/theme';
 
@@ -656,10 +673,15 @@ $(function (){
          if (key === LS_KEY_NOTIFY) {
             const doNotify = value === 'on';
             const cb_notify = $('#cb_notify')[0];
+            const wasChecked = cb_notify.checked;
             cb_notify.checked = doNotify;
-            if (doNotify && !cb_notify.checked) {
+            if (doNotify && !wasChecked) {
                requestNotify();
             }
+         } else if (key === LS_KEY_SOUND) {
+            const doSound = value === 'on';
+            const cb_sound = $('#cb_sound')[0];
+            cb_sound.checked = doSound;
          } else if (key === LS_KEY_REVERSE) {
             const doReverse = value === 'on';
             const cb_reverse = $('#cb_reverse')[0];
@@ -682,7 +704,7 @@ $(function (){
          fromStorage(event.originalEvent.key, event.originalEvent.newValue);
       });
 
-      for (const key of [LS_KEY_NOTIFY, LS_KEY_REVERSE, LS_KEY_THEME]) {
+      for (const key of [LS_KEY_NOTIFY, LS_KEY_SOUND, LS_KEY_REVERSE, LS_KEY_THEME]) {
          const value = window.localStorage.getItem(key);
          if (value !== null) {
             fromStorage(key, value);
@@ -708,6 +730,12 @@ $(function (){
       }
    });
 
+   $('#cb_sound').on('change', function(){
+      if ('localStorage' in window) {
+         window.localStorage.setItem(LS_KEY_SOUND, this.checked ? 'on' : 'off');
+      }
+   });
+
    $('#cb_reverse').on('change', function(){
       debug('cb_reverse changed to ' + this.checked);
       if ('localStorage' in window) {

webpack.config.js

@@ -30,7 +30,7 @@ module.exports = {
         }
       },
       {
-        test: { and: [ /\.(jpe?g|png|gif)$/i, { not: [ /jquery-ui/i ] } ] },
+        test: { and: [ /\.(jpe?g|png|gif|mp3|wav)$/i, { not: [ /jquery-ui/i ] } ] },
         loader: "file-loader",
         options: {
           name: '[path][name].[contenthash].[ext]',