Merge pull request #33 from ProLoser/feature/piece-sound-vibration

Author: ProLoser

src/Board/Piece.tsx

@@ -1,4 +1,5 @@
 import { useCallback, forwardRef, type DragEventHandler } from "react";
+import { playCheckerSound } from '../../Utils';
 import black from './images/piece-black-2.png';
 import white from './images/piece-white-2.png';
 import './Piece.css'
@@ -13,6 +14,8 @@ type PieceProps = {
 
 const Piece = forwardRef<HTMLImageElement, PieceProps>(({ color, position, onSelect }, ref) => {
     const onDragStart: DragEventHandler = useCallback((event) => {
+        playCheckerSound();
+        navigator.vibrate?.(10);
         if (onSelect) onSelect(null)
         switch (position) {
             case undefined: // Home

src/Board/Point.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState, type DragEventHandler } from "react";
+import { playCheckerSound } from '../../Utils';
 import Piece from './Piece'
 
 type PointProps = {
@@ -14,6 +15,8 @@ export default function Point({ pieces, move, position, onSelect, selected }: Po
     const pieceRef = useRef<HTMLImageElement>(null);
     const onDragOver: DragEventHandler = useCallback((event) => { event.preventDefault(); }, [])
     const onDrop: DragEventHandler = useCallback((event) => {
+        playCheckerSound();
+        navigator.vibrate?.(10);
         event.preventDefault();
         onSelect(null)
         let from = event.dataTransfer?.getData("text")!

src/Utils.ts

@@ -109,4 +109,21 @@ export function calculate(state: GameType, from: number | "white" | "black", to:
         nextGame.status = 'moved'
     }
     return { state: nextGame, moveLabel };
-}
+}
+
+export const playCheckerSound = () => {
+  const mp3Files = [
+    'public/capture.mp3',
+    'public/castle.mp3',
+    'public/move-check.mp3',
+    'public/move-self.mp3',
+    'public/notify.mp3',
+    'public/promote.mp3',
+  ];
+
+  const randomIndex = Math.floor(Math.random() * mp3Files.length);
+  const randomMp3 = mp3Files[randomIndex];
+
+  const audio = new Audio(randomMp3);
+  audio.play();
+};