diff --git a/package-lock.json b/package-lock.json index e09d6eb..4c43e87 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "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", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "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" } diff --git a/package.json b/package.json index 2aaae2c..0eb2e9a 100644 --- a/package.json +++ b/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", diff --git a/public/sfx/move.wav b/public/sfx/move.wav new file mode 100644 index 0000000..78a25ac Binary files /dev/null and b/public/sfx/move.wav differ diff --git a/public/sfx/snap.wav b/public/sfx/snap.wav new file mode 100644 index 0000000..e0be898 Binary files /dev/null and b/public/sfx/snap.wav differ diff --git a/public/sfx/swap.wav b/public/sfx/swap.wav new file mode 100644 index 0000000..048f28c Binary files /dev/null and b/public/sfx/swap.wav differ diff --git a/public/sfx/take.wav b/public/sfx/take.wav new file mode 100644 index 0000000..efc9106 Binary files /dev/null and b/public/sfx/take.wav differ diff --git a/src/player/Player.ts b/src/player/Player.ts index 490d6f2..9c5d61a 100644 --- a/src/player/Player.ts +++ b/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(); } diff --git a/src/player/sfx.ts b/src/player/sfx.ts new file mode 100644 index 0000000..7e5a3f1 --- /dev/null +++ b/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; diff --git a/vite.config.ts b/vite.config.ts index 06c15e1..31ca950 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,6 +6,5 @@ export default defineConfig({ build: { target: "esnext", polyfillDynamicImport: false, - outDir: "docs", }, });