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]',