WIP

2022-03-23 23:31:33 +01:00
parent 684f462fd2
commit ff9d710288
9 changed files with 98 additions and 15 deletions
--- 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"
      }
--- 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",
--- a/public/sfx/move.wav
+++ b/public/sfx/move.wav
--- a/public/sfx/snap.wav
+++ b/public/sfx/snap.wav
--- a/public/sfx/swap.wav
+++ b/public/sfx/swap.wav
--- a/public/sfx/take.wav
+++ b/public/sfx/take.wav
--- 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();
  }

--- a/src/player/sfx.ts
+++ 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;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,5 @@ export default defineConfig({
  build: {
    target: "esnext",
    polyfillDynamicImport: false,
-    outDir: "docs",
  },
 });