more sounds on analysis board - closes #592

ui/analyse/src/ctrl.js

@@ -10,7 +10,7 @@ var autoplay = require('./autoplay');
 var control = require('./control');
 var promotion = require('./promotion');
 var readDests = require('./util').readDests;
-var debounce = require('./util').debounce;
+var throttle = require('./util').throttle;
 var socket = require('./socket');
 var m = require('mithril');
 
@@ -79,14 +79,20 @@ module.exports = function(opts) {
     if (!dests) getDests();
   }.bind(this);
 
-  var getDests = debounce(function() {
+  var getDests = throttle(200, false, function() {
     if (this.vm.step.dests) return;
     this.socket.sendAnaDests({
       variant: this.data.game.variant.key,
       fen: this.vm.step.fen,
       path: this.vm.pathStr
     });
-  }.bind(this), 200, false);
+  }.bind(this));
+
+  var sound = {
+    move: throttle(50, false, $.sound.move),
+    capture: throttle(50, false, $.sound.capture),
+    check: throttle(50, false, $.sound.check)
+  };
 
   this.jump = function(path) {
     this.vm.path = path;
@@ -94,6 +100,12 @@ module.exports = function(opts) {
     if (window.history.replaceState)
       window.history.replaceState(null, null, '#' + path[0].ply);
     showGround();
+    if (this.vm.justPlayed !== this.vm.step.uci) {
+      if (this.vm.step.san.indexOf('x') !== -1) sound.capture();
+      else sound.move();
+      this.vm.justPlayed = null;
+    }
+    if (/\+|\#/.test(this.vm.step.san)) sound.check();
   }.bind(this);
 
   this.userJump = function(path) {
@@ -116,8 +128,9 @@ module.exports = function(opts) {
     return role === 'knight' ? 'n' : role[0];
   };
 
-  var userMove = function(orig, dest) {
-    $.sound.move();
+  var userMove = function(orig, dest, capture) {
+    this.vm.justPlayed = orig + dest;
+    sound[capture ? 'capture' : 'move']();
     if (!promotion.start(this, orig, dest, sendMove)) sendMove(orig, dest);
   }.bind(this);
 

ui/analyse/src/ground.js

@@ -11,10 +11,10 @@ function makeConfig(data, config, onMove) {
     movable: {
       free: false,
       color: config.movable.color,
-      dests: config.movable.dests,
-      events: {
-        after: onMove
-      }
+      dests: config.movable.dests
+    },
+    events: {
+      move: onMove
     },
     premovable: {
       enabled: true
@@ -31,11 +31,6 @@ function makeConfig(data, config, onMove) {
       enabled: true,
       duration: data.pref.animationDuration
     },
-    events: {
-      move: function(orig, dest, captured) {
-        if (captured) $.sound.capture();
-      }
-    },
     disableContextMenu: true
   };
 }

ui/analyse/src/util.js

@@ -17,23 +17,91 @@ module.exports = {
   empty: function(a) {
     return !a || a.length === 0;
   },
-  // Returns a function, that, as long as it continues to be invoked, will not
-  // be triggered. The function will be called after it stops being called for
-  // N milliseconds. If `immediate` is passed, trigger the function on the
-  // leading edge, instead of the trailing.
-  debounce: function(func, wait, immediate) {
-    var timeout;
+  /**
+   * https://github.com/niksy/throttle-debounce/blob/master/lib/throttle.js
+   *
+   * Throttle execution of a function. Especially useful for rate limiting
+   * execution of handlers on events like resize and scroll.
+   *
+   * @param  {Number}    delay          A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+   * @param  {Boolean}   noTrailing     Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds while the
+   *                                    throttled-function is being called. If noTrailing is false or unspecified, callback will be executed one final time
+   *                                    after the last throttled-function call. (After the throttled-function has not been called for `delay` milliseconds,
+   *                                    the internal counter is reset)
+   * @param  {Function}  callback       A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+   *                                    to `callback` when the throttled-function is executed.
+   * @param  {Boolean}   debounceMode   If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is false (at end),
+   *                                    schedule `callback` to execute after `delay` ms.
+   *
+   * @return {Function}  A new, throttled, function.
+   */
+  throttle: function(delay, noTrailing, callback, debounceMode) {
+
+    // After wrapper has stopped being called, this timeout ensures that
+    // `callback` is executed at the proper times in `throttle` and `end`
+    // debounce modes.
+    var timeoutID;
+
+    // Keep track of the last time `callback` was executed.
+    var lastExec = 0;
+
+    // `noTrailing` defaults to falsy.
+    if (typeof(noTrailing) !== 'boolean') {
+      debounceMode = callback;
+      callback = noTrailing;
+      noTrailing = undefined;
+    }
+
+    // The `wrapper` function encapsulates all of the throttling / debouncing
+    // functionality and when executed will limit the rate at which `callback`
+    // is executed.
     return function() {
-      var context = this,
-        args = arguments;
-      var later = function() {
-        timeout = null;
-        if (!immediate) func.apply(context, args);
-      };
-      var callNow = immediate && !timeout;
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-      if (callNow) func.apply(context, args);
+
+      var self = this;
+      var elapsed = Number(new Date()) - lastExec;
+      var args = arguments;
+
+      // Execute `callback` and update the `lastExec` timestamp.
+      function exec() {
+        lastExec = Number(new Date());
+        callback.apply(self, args);
+      }
+
+      // If `debounceMode` is true (at begin) this is used to clear the flag
+      // to allow future `callback` executions.
+      function clear() {
+        timeoutID = undefined;
+      }
+
+      if (debounceMode && !timeoutID) {
+        // Since `wrapper` is being called for the first time and
+        // `debounceMode` is true (at begin), execute `callback`.
+        exec();
+      }
+
+      // Clear any existing timeout.
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+      }
+
+      if (debounceMode === undefined && elapsed > delay) {
+        // In throttle mode, if `delay` time has been exceeded, execute
+        // `callback`.
+        exec();
+
+      } else if (noTrailing !== true) {
+        // In trailing throttle mode, since `delay` time has not been
+        // exceeded, schedule `callback` to execute `delay` ms after most
+        // recent execution.
+        //
+        // If `debounceMode` is true (at begin), schedule `clear` to execute
+        // after `delay` ms.
+        //
+        // If `debounceMode` is false (at end), schedule `callback` to
+        // execute after `delay` ms.
+        timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+      }
+
     };
   }
 };