WIP

package-lock.json

@@ -16,6 +16,7 @@
         "gif.js": "^0.2.0",
         "h264-mp4-encoder": "^1.0.12",
         "hammerjs": "^2.0.8",
+        "howler": "^2.2.3",
         "i": "^0.3.7",
         "is-mobile": "^3.0.0",
         "npm": "^8.4.0",
@@ -25,6 +26,7 @@
       "devDependencies": {
         "@types/common-tags": "^1.8.1",
         "@types/hammerjs": "^2.0.41",
+        "@types/howler": "^2.2.6",
         "@types/node": "^17.0.8",
         "@types/webfontloader": "^1.6.34",
         "typescript": "^4.4.4",
@@ -544,6 +546,12 @@
       "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
       "dev": true
     },
+    "node_modules/@types/howler": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.6.tgz",
+      "integrity": "sha512-9cLZICB6CFNIbwk0kJGvIvlEVI7D0dbbtcj00Uin81jQSMeKafaLq7r3v0RWQOX8BkM+KqboJaOeH5S/qpNqJg==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
@@ -560,6 +568,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -637,6 +646,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -655,6 +665,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -662,7 +673,8 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "node_modules/common-tags": {
       "version": "1.8.2",
@@ -1072,6 +1084,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -1148,10 +1161,16 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/html-entities": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -1245,15 +1264,16 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/nanoid": {
       "version": "3.3.1",
@@ -3585,6 +3605,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -3631,6 +3652,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -4130,6 +4152,12 @@
       "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
       "dev": true
     },
+    "@types/howler": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.6.tgz",
+      "integrity": "sha512-9cLZICB6CFNIbwk0kJGvIvlEVI7D0dbbtcj00Uin81jQSMeKafaLq7r3v0RWQOX8BkM+KqboJaOeH5S/qpNqJg==",
+      "dev": true
+    },
     "@types/node": {
       "version": "17.0.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
@@ -4146,6 +4174,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -4205,6 +4234,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -4220,6 +4250,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -4227,7 +4258,8 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "common-tags": {
       "version": "1.8.2",
@@ -4435,7 +4467,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "fsevents": {
       "version": "2.3.2",
@@ -4489,7 +4522,13 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
     },
     "html-entities": {
       "version": "2.3.2",
@@ -4554,15 +4593,16 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "nanoid": {
       "version": "3.3.1",
@@ -6147,7 +6187,8 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true
     },
     "solid-js": {
       "version": "1.3.12",
@@ -6182,6 +6223,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }

package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@types/common-tags": "^1.8.1",
     "@types/hammerjs": "^2.0.41",
+    "@types/howler": "^2.2.6",
     "@types/node": "^17.0.8",
     "@types/webfontloader": "^1.6.34",
     "typescript": "^4.4.4",
@@ -25,6 +26,7 @@
     "gif.js": "^0.2.0",
     "h264-mp4-encoder": "^1.0.12",
     "hammerjs": "^2.0.8",
+    "howler": "^2.2.3",
     "i": "^0.3.7",
     "is-mobile": "^3.0.0",
     "npm": "^8.4.0",

src/player/Player.ts

@@ -2,6 +2,7 @@ import { GameConfig } from "../types";
 import Board from "../board/Board";
 import Game from "../game/Game";
 import { setState } from "../state";
+import sfx from "./sfx";
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -99,7 +100,24 @@ class Player {
 
     this.ply = ply;
 
-    await this.board.frame(this.getPosition(), this.game.header);
+    const position = this.getPosition();
+
+    if (this.ply > 0) {
+      if (/[ce]/.test(position.move?.flags as string)) {
+        sfx.take.play();
+        sfx.move.play();
+      } else if (/[kqp]/.test(position.move?.flags as string)) {
+        sfx.swap.play();
+        sfx.move.play();
+      } else if (position.mate) {
+        sfx.snap.play();
+        sfx.move.play();
+      } else {
+        sfx.move.play();
+      }
+    }
+
+    await this.board.frame(position, this.game.header);
     this.board.render();
   }
 

src/player/sfx.ts

@@ -0,0 +1,22 @@
+import { Howl } from "howler";
+
+const sfx = {
+  move: new Howl({
+    src: ["/sfx/move.wav"],
+    volume: 0.4,
+  }),
+  take: new Howl({
+    src: ["/sfx/take.wav"],
+    volume: 0.5,
+  }),
+  swap: new Howl({
+    src: ["/sfx/swap.wav"],
+    volume: 0.5,
+  }),
+  snap: new Howl({
+    src: ["/sfx/snap.wav"],
+    volume: 0.5,
+  }),
+};
+
+export default sfx;

vite.config.ts

@@ -6,6 +6,5 @@ export default defineConfig({
   build: {
     target: "esnext",
     polyfillDynamicImport: false,
-    outDir: "docs",
   },
 });