feat: add sounds to game

Author: Abel13

components/Bet.tsx

@@ -147,6 +147,7 @@ export function Bet({
             title='APOSTAR'
             onPress={() => handleBet(bet)}
             loading={betting}
+            disabled={loading}
           />
         </View>
 

components/Table/TablePlayer.tsx

@@ -12,6 +12,7 @@ interface ITablePlayer {
   name: string | null;
   bet: string;
   dealer: boolean;
+  current: boolean;
 }
 
 interface TablePlayerProps {
@@ -37,6 +38,10 @@ const styles = StyleSheet.create({
     height: 40,
     borderRadius: 20,
   },
+  current: {
+    borderWidth: 2,
+    borderColor: Colors.dark.success,
+  },
   livesIndicator: {
     left: -5,
     bottom: 15,
@@ -131,7 +136,10 @@ function PlayerInfo({ player, isVertical }: PlayerInfoProps) {
     <ThemedView style={getFlexStyle(isVertical)}>
       <ThemedView>
         {player.playerPicture && (
-          <Image source={{ uri: player.playerPicture }} style={styles.image} />
+          <Image
+            source={{ uri: player.playerPicture }}
+            style={[styles.image, player.current && styles.current]}
+          />
         )}
 
         <ThemedView style={styles.livesIndicator}>

components/Table/TableSeat.tsx

@@ -71,6 +71,7 @@ export function TableSeat({
             playerPicture,
             lives: player.lives,
             dealer: player.dealer,
+            current: player.current,
             number,
           }}
         />

hooks/useGame.ts

@@ -5,9 +5,9 @@ import {
   dealCardsMutation,
   updateGame,
   betMutation,
-  playMutation,
   getTrumps,
   finishRoundMutation,
+  usePlayMutation,
 } from '@/services/game';
 import { type Bet, type GamePlayer } from '@/types';
 import { NotificationFeedbackType } from 'expo-haptics';
@@ -25,7 +25,7 @@ export const useGame = (matchId: string) => {
     finishRoundMutation(session?.access_token || ''),
   );
   const { mutate: mutatePlay } = useMutation(
-    playMutation(session?.access_token || ''),
+    usePlayMutation(session?.access_token || ''),
   );
   const { mutate: mutateBet } = useMutation(betMutation());
   const [dealing, setDealing] = useState<boolean>(false);
@@ -113,9 +113,10 @@ export const useGame = (matchId: string) => {
     async (id: string) => {
       if (me?.current) {
         setPlaying(true);
+        playSoundAsync({ type: 'card', volume: getVolume('effects') });
+
         mutatePlay(id, {
           onSuccess: () => {
-            playSoundAsync({ type: 'card', volume: getVolume('effects') });
             notification(NotificationFeedbackType.Success);
             setPlaying(false);
           },

services/game.ts

@@ -1,9 +1,10 @@
 import { type BetInsert, type Deck, type Game } from '@/types';
 import { supabase } from '@/providers/supabase';
+import { UseMutationOptions, useQueryClient } from '@tanstack/react-query';
 import { api } from './api';
 
-export const gameKey = (gameId: string) => {
-  return ['game', gameId];
+export const gameKey = () => {
+  return ['game'];
 };
 
 export const trumpKey = (gameId: string, roundNumber: number) => {
@@ -12,7 +13,7 @@ export const trumpKey = (gameId: string, roundNumber: number) => {
 
 export const updateGame = (gameId: string, token: string) => {
   return {
-    queryKey: gameKey(gameId),
+    queryKey: gameKey(),
     queryFn: async (): Promise<Game> => {
       if (!gameId) return {} as Game;
 
@@ -77,7 +78,11 @@ export const finishRoundMutation = (token: string) => {
   };
 };
 
-export const playMutation = (token: string) => {
+export const usePlayMutation = (
+  token: string,
+): UseMutationOptions<void, Error, string, unknown> => {
+  const queryClient = useQueryClient();
+
   return {
     mutationFn: async (id: string): Promise<void> => {
       try {
@@ -96,6 +101,45 @@ export const playMutation = (token: string) => {
         // ignore error
       }
     },
+    onMutate: async (id: string) => {
+      await queryClient.cancelQueries({ queryKey: gameKey() });
+
+      const previousGame = queryClient.getQueryData<Game>(gameKey());
+
+      if (previousGame) {
+        const turn =
+          previousGame.player_cards
+            .sort((a, b) => a.turn - b.turn)
+            .findLast((c) => c.turn)?.turn || 1;
+
+        const currentCard = previousGame.player_cards.find((c) => c.id === id);
+
+        const updatedGame = {
+          ...previousGame,
+          player_cards: previousGame.player_cards.map((card) => {
+            if (card.id === id) return { ...card, status: 'on table', turn };
+
+            if (
+              card.user_id === currentCard?.user_id &&
+              card.status === 'on table'
+            )
+              return { ...card, status: 'played', turn };
+
+            return card;
+          }),
+        };
+
+        queryClient.setQueryData(gameKey(), updatedGame);
+      }
+
+      return previousGame;
+    },
+    onError: (err, newTodo, context) => {
+      queryClient.setQueryData(gameKey(), context);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: gameKey() });
+    },
   };
 };