diff --git a/index.html b/index.html index cf90b03..b57450e 100644 --- a/index.html +++ b/index.html @@ -148,6 +148,7 @@
+
diff --git a/js/pacosako_ui.js b/js/pacosako_ui.js index 02e014e..56d8175 100644 --- a/js/pacosako_ui.js +++ b/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'))) { - /* ignore partial moves */ - if (!game.board.phantom) { + if (!deepEqual(moves, cb_board.data('last_state'))) { + /* ignore partial moves */ + 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) { diff --git a/wav/191678__porphyr__waterdrop.wav b/wav/191678__porphyr__waterdrop.wav new file mode 100644 index 0000000..4ad54e4 Binary files /dev/null and b/wav/191678__porphyr__waterdrop.wav differ diff --git a/webpack.config.js b/webpack.config.js index 8d27b29..ee4db6a 100644 --- a/webpack.config.js +++ b/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]',