Added audio

draughts.css

@@ -9,7 +9,7 @@
 #dash {
   margin-left: 10px;
   border: outset 10px gray;
-  height: 400px;
+  height: 478px;
 }
 
 #dash > div {
@@ -52,8 +52,8 @@
 }
 
 #board {
-    width: 400px;
-    height: 400px;
+    width: 478px;
+    height: 478px;
     border: outset 10px gray;
 }
 

draughts.js

@@ -1445,6 +1445,24 @@ window.addEventListener('load', function () {
             }
 
         });
+
+        board.element.addEventListener('piecemove', function (event) {
+            // Game with audio feedback dude! The cherry for the cake
+
+            // No sounds... Ohhh :( but the user is always right! :)
+            if (!draughts.querySelector('#sounds').checked) {
+                return;
+            }
+
+            var piece = event.detail.piece;
+
+            var audio = document.querySelector('#audio-p' + piece.data.player());
+
+            // Sorry IE8, you don't have audio support... :(
+            if (audio && audio.play) {
+                audio.play();
+            }
+        });
     }
 
     // Disable drag events on the body
@@ -1454,6 +1472,18 @@ window.addEventListener('load', function () {
         return;
     });
 
+    // Yey we have audio
+    (function () {
+        var audio = document.createElement('audio');
+        audio.src = 'p1.wav';
+        audio.id = 'audio-p0';
+        document.body.appendChild(audio);
+        audio = document.createElement('audio');
+        audio.src = 'p2.wav';
+        audio.id = 'audio-p1';
+        document.body.appendChild(audio);
+    })();
+
     function updateBoard() {
         opt.element = draughts.querySelector('#board');
         opt.size = draughts.querySelector('#size').value;

index.html

@@ -46,6 +46,9 @@ <h3>You win!</h3>
                 <div>Queen attack and run: 
                     <input type="checkbox" id="queenattackrun" value="1">
                 </div>
+                <div>Sounds: 
+                    <input type="checkbox" id="sounds" value="1" checked>
+                </div>
             </div>
         </div>
     </body>