Fixes

Author: ProLoser

src/Board/Point.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useRef, useState, type DragEventHandler } from "react";
-import { playCheckerSound } from '../Utils';
 import Piece from './Piece'
 
 type PointProps = {
@@ -15,7 +14,6 @@ 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)

src/Dialogues/Login.tsx

@@ -27,22 +27,10 @@ const uiConfig = {
     },
 };
 
-interface Props {
-    // The Firebase UI Web UI Config object.
-    // See: https://github.com/firebase/firebaseui-web#configuration
-    uiConfig: firebaseui.auth.Config;
-    // Callback that will be passed the FirebaseUi instance before it is
-    // started. This allows access to certain configuration options such as
-    // disableAutoSignIn().
-    uiCallback?(ui: firebaseui.auth.AuthUI): void;
-    // The Firebase App auth instance to use.
-    firebaseAuth: any; // As firebaseui-web
-    className?: string;
-}
-
 type LoginProps = {
     reset: () => void;
     friend?: { name: string };
+    load: () => void;
 };
 
 export default function Login({ reset, friend, load }: LoginProps) {

src/Types.ts

@@ -9,7 +9,7 @@ export type UserData = {
     search: string;
     photoURL: string | null;
     language: string;
-    fcmToken: string;
+    fcmToken?: string;
 }
 
 export type ModalState = 'chat' | 'profile' | 'friends' | 'login' | boolean;
@@ -39,7 +39,7 @@ export type GameType = {
     status?: string;
     board: number[];
     dice: number[];
-    color: string;
+    color: 'black' | 'white';
     turn: string;
     prison: {
         black: number;

src/Utils.ts

@@ -113,12 +113,12 @@ export function calculate(state: GameType, from: number | "white" | "black", to:
 
 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',
+    'capture.mp3',
+    'castle.mp3',
+    'move-check.mp3',
+    'move-self.mp3',
+    'notify.mp3',
+    'promote.mp3',
   ];
 
   const randomIndex = Math.floor(Math.random() * mp3Files.length);

src/index.tsx

@@ -17,6 +17,7 @@ import './Toolbar.css'
 import { calculate, newGame, rollDie, vibrate } from './Utils';
 import firebase from "./firebase.config";
 import { saveMessagingDeviceToken } from './firebase-messaging-setup';
+import { playCheckerSound } from './Utils';
 
 // Start React
 ReactDOM.createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>)
@@ -222,6 +223,7 @@ export function App() {
   const move = useCallback((from: number | "white" | "black", to: number) => {
     const { state: nextState, moveLabel } = calculate(game, from, to);
     if (!moveLabel) return;
+    playCheckerSound();
     setGame(nextState);
     // dispatch({ type: Actions.MOVE, data: { from, to } });
     // sendMove(nextState, `${nextState.dice.join("-")}: ${moveLabel}`);