fix: backward compatibility

src/components/Players/CardPicker/CardPicker.tsx

@@ -4,7 +4,7 @@ import { updatePlayerValue } from '../../../service/players';
 import { Game } from '../../../types/game';
 import { Player } from '../../../types/player';
 import { Status } from '../../../types/status';
-import { CardConfig, getRandomEmoji } from './CardConfigs';
+import { CardConfig, getCards, getRandomEmoji } from './CardConfigs';
 import './CardPicker.css';
 import { GoogleAd } from '../../GoogleAd/GoogleAd';
 
@@ -26,12 +26,15 @@ export const CardPicker: React.FC<CardPickerProps> = ({ game, players, currentPl
       setRandomEmoji(getRandomEmoji);
     }
   }, [game.gameStatus]);
+
+  const cards = game.cards?.length ? game.cards : getCards(game.gameType);
+
   return (
     <Grow in={true} timeout={1000}>
       <div>
         <div className='CardPickerContainer'>
           <Grid container spacing={4} justify='center'>
-            {game.cards.map((card: CardConfig, index) => (
+            {cards.map((card: CardConfig, index) => (
               <Grid key={card.value} item xs>
                 <Slide in={true} direction={'right'} timeout={(1000 * index) / 2}>
                   <Card

src/components/Players/PlayerCard/PlayerCard.tsx

@@ -75,15 +75,16 @@ const getCardValue = (player: Player, game: Game) => {
       if (player.value && player.value === -1) {
         return player.emoji || '☕'; // coffee emoji
       }
-      return getCardDisplayValue(game.cards, player.value);
+      return getCardDisplayValue(game, player.value);
     }
     return '🤔';
   }
 };
 
 const getCardDisplayValue = (
-  cards: CardConfig[],
+  game: Game,
   cardValue: number | undefined,
 ): string | number | undefined => {
+  const cards = game.cards?.length > 0 ? game.cards : getCards(game.gameType);
   return cards.find((card) => card.value === cardValue)?.displayValue || cardValue;
 };