drunkoders · guilhermevrs · Dec 18, 2020
diff --git a/packages/components/src/components/atoms/PlayingCardFrontFace/PlayingCardFrontFace.test.tsx b/packages/components/src/components/atoms/PlayingCardFrontFace/PlayingCardFrontFace.test.tsx
@@ -1,6 +1,6 @@
 import { cleanup, render } from '@testing-library/react';
 import React from 'react';
-import { PlayingCard, PlayingCardSuit, PlayingCardName } from '@models/PlayingCard';
+import { PlayingCard } from '@models/PlayingCard';
 import { PlayingCardFrontFace } from './PlayingCardFrontFace';
 
 describe('PlayingCardFrontFace', () => {
@@ -12,8 +12,8 @@ describe('PlayingCardFrontFace', () => {
     const card: PlayingCard = {
       id: '1',
       type: 'PlayingCard',
-      suit: PlayingCardSuit.Hearts,
-      name: PlayingCardName.Five,
+      suit: 'hearts',
+      name: '5',
     };
 
     const { getByTestId } = render(<PlayingCardFrontFace card={card} />);

diff --git a/packages/components/src/components/atoms/PlayingCardFrontFace/PlayingCardFrontFace.tsx b/packages/components/src/components/atoms/PlayingCardFrontFace/PlayingCardFrontFace.tsx
@@ -7,7 +7,7 @@ export interface PlayingCardFrontFaceProps {
 }
 
 export const PlayingCardFrontFace: FC<PlayingCardFrontFaceProps> = ({ card }) => {
-  const cardString = `${card?.suit?.toLowerCase()}_${card?.name?.toLowerCase()}`;
+  const cardString = `${card.suit.toLowerCase()}_${card.name.toLowerCase()}`;
 
   return <SvgPlayingCard card={cardString} data-testid="PlayingCardFrontFace" />;
 };
diff --git a/packages/components/src/components/molecules/CardFaceRenderer/CardFaceRenderer.test.tsx b/packages/components/src/components/molecules/CardFaceRenderer/CardFaceRenderer.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { UnoCard } from '@models/UnoCard';
-import { PlayingCard, PlayingCardName, PlayingCardSuit } from '@models/PlayingCard';
+import { PlayingCard } from '@models/PlayingCard';
 import { CardRenderer } from '@models/CardRenderer';
 import { CardFaceRenderer } from './CardFaceRenderer';
 
@@ -15,8 +15,8 @@ describe('CardFaceRenderer', () => {
   const playingCard: PlayingCard = {
     id: '2',
     type: 'PlayingCard',
-    name: PlayingCardName.Ace,
-    suit: PlayingCardSuit.Clubs,
+    name: '1',
+    suit: 'clubs',
   };
   it('should display an UnoCardFace', () => {
     const { getByTestId } = render(<CardFaceRenderer card={unoCard} />);

diff --git a/packages/components/src/components/molecules/CardPile/CardPile.test.tsx b/packages/components/src/components/molecules/CardPile/CardPile.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import { PlayingCard, PlayingCardSuit, PlayingCardName } from '@models/PlayingCard';
+import { PlayingCard } from '@models/PlayingCard';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { CardPile } from './CardPile';
@@ -45,8 +45,8 @@ describe('CardPile', () => {
       const card: PlayingCard = {
         id: '1',
         type: 'PlayingCard',
-        suit: PlayingCardSuit.Spades,
-        name: PlayingCardName.Ace,
+        suit: 'spades',
+        name: '1',
       };
       const { getByTestId } = render(<CardPile cards={[card]} position={{ x: 0, y: 0 }} width={40} height={60} />);
       cardPile = getByTestId('CardPile');
@@ -79,14 +79,14 @@ describe('CardPile', () => {
       const card: PlayingCard = {
         id: '1',
         type: 'PlayingCard',
-        suit: PlayingCardSuit.Spades,
-        name: PlayingCardName.Ace,
+        suit: 'spades',
+        name: '1',
       };
       const otherCard: PlayingCard = {
         id: '1',
         type: 'PlayingCard',
-        suit: PlayingCardSuit.Hearts,
-        name: PlayingCardName.Three,
+        suit: 'hearts',
+        name: '3',
       };
       const { getAllByTestId, getByTestId } = render(
         <CardPile cards={[card, otherCard]} position={{ x: 0, y: 0 }} width={40} height={60} />
@@ -119,10 +119,10 @@ describe('CardPile', () => {
   describe('when rendering more than two cards', () => {
     it('should render the custom cards', () => {
       const cards: PlayingCard[] = [
-        { id: '2', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Ace },
-        { id: '4', type: 'PlayingCard', suit: PlayingCardSuit.Hearts, name: PlayingCardName.Ace },
-        { id: '6', type: 'PlayingCard', suit: PlayingCardSuit.Diamonds, name: PlayingCardName.Ace },
-        { id: '8', type: 'PlayingCard', suit: PlayingCardSuit.Clubs, name: PlayingCardName.Ace },
+        { id: '2', type: 'PlayingCard', suit: 'spades', name: '1' },
+        { id: '4', type: 'PlayingCard', suit: 'hearts', name: '1' },
+        { id: '6', type: 'PlayingCard', suit: 'diamonds', name: '1' },
+        { id: '8', type: 'PlayingCard', suit: 'clubs', name: '1' },
       ];
 
       const { getAllByTestId } = render(<CardPile cards={cards} position={{ x: 0, y: 0 }} width={40} height={60} />);
@@ -165,8 +165,8 @@ describe('CardPile', () => {
       const card: PlayingCard = {
         id: '1',
         type: 'PlayingCard',
-        suit: PlayingCardSuit.Spades,
-        name: PlayingCardName.Ace,
+        suit: 'spades',
+        name: '1',
       };
 
       render(
@@ -205,8 +205,8 @@ describe('CardPile', () => {
       const card: PlayingCard = {
         id: '1',
         type: 'PlayingCard',
-        suit: PlayingCardSuit.Spades,
-        name: PlayingCardName.Ace,
+        suit: 'spades',
+        name: '1',
       };
 
       render(

diff --git a/packages/components/src/components/organisms/Table/Table.test.tsx b/packages/components/src/components/organisms/Table/Table.test.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import * as cardStyleUtils from '@utils/card-style';
 import { fireEvent, screen } from '@testing-library/react';
 import * as reactRedux from 'react-redux';
-import { PlayingCardSuit, PlayingCardName, PlayingCard } from '@models/PlayingCard';
+import { PlayingCard } from '@models/PlayingCard';
 import { UnoCard } from '@models/UnoCard';
 import { Card } from '@models/Card';
 import { CardTypeStyle } from '@utils/card-style';
@@ -60,8 +60,8 @@ describe('Table', () => {
       const playingCard: PlayingCard = {
         id: '2',
         type: 'PlayingCard',
-        suit: PlayingCardSuit.Spades,
-        name: PlayingCardName.Two,
+        suit: 'spades',
+        name: '2',
       };
       const renderRoot = render(<Table height={400} width={600} />, {
         initialState: {
@@ -122,7 +122,7 @@ describe('Table', () => {
         table: {
           cards: {
             2: {
-              cards: { id: '2', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two },
+              cards: { id: '2', type: 'PlayingCard', suit: 'spades', name: '2' },
               isFaceUp: false,
               position: { x: 0, y: 0 },
             },
@@ -152,7 +152,7 @@ describe('Table', () => {
         table: {
           cards: {
             2: {
-              cards: { id: '2', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two },
+              cards: { id: '2', type: 'PlayingCard', suit: 'spades', name: '2' },
               isFaceUp: false,
               position: { x: 0, y: 0 },
             },
@@ -176,9 +176,7 @@ describe('Table', () => {
     describe('on rendering PlayingCards', () => {
       let getByTestId;
       let getAllByTestId;
-      const cards: PlayingCard[] = [
-        { id: '1', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two },
-      ];
+      const cards: PlayingCard[] = [{ id: '1', type: 'PlayingCard', suit: 'spades', name: '2' }];
       beforeEach(() => {
         customCardStyleFn.mockReset();
         customCardStyleFn.mockReturnValue({
@@ -246,9 +244,9 @@ describe('Table', () => {
             cards: {
               2: {
                 cards: [
-                  { id: '5', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two },
-                  { id: '7', type: 'PlayingCard', suit: PlayingCardSuit.Hearts, name: PlayingCardName.Three },
-                  { id: '14', type: 'PlayingCard', suit: PlayingCardSuit.Diamonds, name: PlayingCardName.Four },
+                  { id: '5', type: 'PlayingCard', suit: 'spades', name: '2' },
+                  { id: '7', type: 'PlayingCard', suit: 'hearts', name: '3' },
+                  { id: '14', type: 'PlayingCard', suit: 'diamonds', name: '4' },
                 ],
                 isFaceUp: false,
                 position: { x: 0, y: 0 },
@@ -279,9 +277,9 @@ describe('Table', () => {
             cards: {
               2: {
                 cards: [
-                  { id: '31', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two },
-                  { id: '41', type: 'PlayingCard', suit: PlayingCardSuit.Hearts, name: PlayingCardName.Three },
-                  { id: '61', type: 'PlayingCard', suit: PlayingCardSuit.Diamonds, name: PlayingCardName.Four },
+                  { id: '31', type: 'PlayingCard', suit: 'spades', name: '2' },
+                  { id: '41', type: 'PlayingCard', suit: 'hearts', name: '3' },
+                  { id: '61', type: 'PlayingCard', suit: 'diamonds', name: '4' },
                 ],
                 isFaceUp: false,
                 position: { x: 0, y: 0 },
@@ -311,7 +309,7 @@ describe('Table', () => {
           table: {
             cards: {
               5: {
-                cards: [{ id: '1', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two }],
+                cards: [{ id: '1', type: 'PlayingCard', suit: 'spades', name: '2' }],
                 isFaceUp: false,
                 position: { x: 0, y: 0 },
               },
@@ -337,9 +335,7 @@ describe('Table', () => {
     const customRenderFnSpy = jest.fn((_a: { card: Card; isBack?: boolean; currentElement?: JSX.Element }) => (
       <div data-testid="SPY-FACE" />
     ));
-    const cards: PlayingCard[] = [
-      { id: '1', type: 'PlayingCard', suit: PlayingCardSuit.Spades, name: PlayingCardName.Two },
-    ];
+    const cards: PlayingCard[] = [{ id: '1', type: 'PlayingCard', suit: 'spades', name: '2' }];
     let getAllByTestId;
 
     beforeEach(() => {

diff --git a/packages/components/src/models/PlayingCard.ts b/packages/components/src/models/PlayingCard.ts
@@ -1,27 +1,24 @@
 import type { Card } from '@models/Card';
 
-export enum PlayingCardSuit {
-  Spades = 'Spades',
-  Hearts = 'Hearts',
-  Diamonds = 'Diamonds',
-  Clubs = 'Clubs',
-}
+export const allPlayingCardSuits = ['spades', 'hearts', 'diamonds', 'clubs'] as const;
+export type PlayingCardSuit = typeof allPlayingCardSuits[number];
 
-export enum PlayingCardName {
-  Ace = '1',
-  Two = '2',
-  Three = '3',
-  Four = '4',
-  Five = '5',
-  Six = '6',
-  Seven = '7',
-  Eight = '8',
-  Nine = '9',
-  Ten = '10',
-  Jack = 'Jack',
-  Queen = 'Queen',
-  King = 'King',
-}
+export const allPlayingCardNames = [
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  'jack',
+  'queen',
+  'king',
+] as const;
+export type PlayingCardName = typeof allPlayingCardNames[number];
 
 const PLAYING_CARD_TYPE = 'PlayingCard' as const;
 export interface PlayingCard extends Card {

diff --git a/packages/components/src/store/slices/table/index.test.ts b/packages/components/src/store/slices/table/index.test.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import { Position } from '@models/Position';
-import { PlayingCard, PlayingCardName, PlayingCardSuit } from '@models/PlayingCard';
+import { allPlayingCardNames, allPlayingCardSuits, PlayingCard } from '@models/PlayingCard';
 import * as arrayUtils from '@utils/array-utils';
 import tableReducer, {
   addRandomPlayingCard,
@@ -48,8 +48,8 @@ describe('Cards reducer', () => {
       expect(cardState.position.y).toBeLessThanOrEqual(140);
 
       expect(cardId).toMatch(uuidRegExp);
-      expect(Object.values(PlayingCardSuit)).toContain(card.suit);
-      expect(Object.values(PlayingCardName)).toContain(card.name);
+      expect(allPlayingCardSuits).toContain(card.suit);
+      expect(allPlayingCardNames).toContain(card.name);
     });
 
     it('should generate a random card with default position', () => {
@@ -66,8 +66,8 @@ describe('Cards reducer', () => {
       expect(cardState.position.y).toEqual(0);
 
       expect(cardId).toMatch(uuidRegExp);
-      expect(Object.values(PlayingCardSuit)).toContain(card.suit);
-      expect(Object.values(PlayingCardName)).toContain(card.name);
+      expect(allPlayingCardSuits).toContain(card.suit);
+      expect(allPlayingCardNames).toContain(card.name);
     });
   });
 
@@ -112,7 +112,7 @@ describe('Cards reducer', () => {
       const currentState = {
         cards: {
           1: {
-            cards: { id: '1', type: 'PlayingCard', name: PlayingCardName.Two, suit: PlayingCardSuit.Spades },
+            cards: { id: '1', type: 'PlayingCard', name: '2', suit: 'spades' },
             isFaceUp: false,
             position: { x: 0, y: 0 },
           },
@@ -121,7 +121,7 @@ describe('Cards reducer', () => {
       const expectedState = {
         cards: {
           1: {
-            cards: { id: '1', type: 'PlayingCard', name: PlayingCardName.Two, suit: PlayingCardSuit.Spades },
+            cards: { id: '1', type: 'PlayingCard', name: '2', suit: 'spades' },
             isFaceUp: false,
             position,
           },
@@ -140,7 +140,7 @@ describe('Cards reducer', () => {
       const initialState = {
         cards: {
           1: {
-            cards: { id: '1', type: 'PlayingCard', name: PlayingCardName.Two, suit: PlayingCardSuit.Spades },
+            cards: { id: '1', type: 'PlayingCard', name: '2', suit: 'spades' },
             position: { x: 0, y: 0 },
             isFaceUp: false,
           },
@@ -149,7 +149,7 @@ describe('Cards reducer', () => {
       const expectedState = {
         cards: {
           1: {
-            cards: { id: '1', type: 'PlayingCard', name: PlayingCardName.Two, suit: PlayingCardSuit.Spades },
+            cards: { id: '1', type: 'PlayingCard', name: '2', suit: 'spades' },
             position: { x: 0, y: 0 },
             isFaceUp: true,
           },
@@ -165,8 +165,8 @@ describe('Cards reducer', () => {
   describe('shuffleCardDeck', () => {
     it('should shuffle cards', () => {
       const shuffledCards = [
-        { id: '3', type: 'PlayingCard', name: PlayingCardName.Three, suit: PlayingCardSuit.Spades },
-        { id: '1', type: 'PlayingCard', name: PlayingCardName.Two, suit: PlayingCardSuit.Spades },
+        { id: '3', type: 'PlayingCard', name: '3', suit: 'spades' },
+        { id: '1', type: 'PlayingCard', name: '2', suit: 'spades' },
       ];
       jest.spyOn(arrayUtils, 'shuffleArray').mockReturnValue(shuffledCards);
 
@@ -176,8 +176,8 @@ describe('Cards reducer', () => {
         cards: {
           1: {
             cards: [
-              { id: '1', type: 'PlayingCard', name: PlayingCardName.Two, suit: PlayingCardSuit.Spades },
-              { id: '3', type: 'PlayingCard', name: PlayingCardName.Three, suit: PlayingCardSuit.Spades },
+              { id: '1', type: 'PlayingCard', name: '2', suit: 'spades' },
+              { id: '3', type: 'PlayingCard', name: '3', suit: 'spades' },
             ],
             position: { x: 0, y: 0 },
             isFaceUp: false,

diff --git a/packages/components/src/utils/card-style.test.ts b/packages/components/src/utils/card-style.test.ts
@@ -2,7 +2,7 @@ import * as cardDimensionsUtils from '@utils/card-dimensions';
 import { UnoCard } from '@models/UnoCard';
 import { Dimensions } from '@models/Dimensions';
 import { UnoCardDimensions } from '@atoms/UnoCardFace';
-import { PlayingCard, PlayingCardName, PlayingCardSuit } from '@models/PlayingCard';
+import { PlayingCard } from '@models/PlayingCard';
 import { PlayingCardDimensions } from '@atoms/SvgPlayingCard';
 import { defaultCardStyleFactory, CustomCardStyleFactory } from './card-style';
 
@@ -16,8 +16,8 @@ describe('defaultCardStyleFactory', () => {
   const playingCard: PlayingCard = {
     type: 'PlayingCard',
     id: '1',
-    name: PlayingCardName.Ace,
-    suit: PlayingCardSuit.Clubs,
+    name: '1',
+    suit: 'clubs',
   };
   const tableDimensions: Dimensions = { width: 1, height: 2 };
   const mockDimensions: Dimensions = { width: 100, height: 200 };

diff --git a/packages/components/src/utils/generate-card-deck.ts b/packages/components/src/utils/generate-card-deck.ts
@@ -1,15 +1,12 @@
-import { PlayingCard, PlayingCardName, PlayingCardSuit } from '@models/PlayingCard';
+import { allPlayingCardNames, allPlayingCardSuits, PlayingCard } from '@models/PlayingCard';
 import { v4 as uuid } from 'uuid';
 import { Deck } from '@models/Deck';
 import { AllUnoColors, AllUnoValues, UnoCard, UnoCardColor } from '@models/UnoCard';
 import { shuffleArray } from './array-utils';
 
 export const generateRandomPlayingCardDeck = (): Deck<PlayingCard> => {
-  const names = Object.values(PlayingCardName);
-  const suits = Object.values(PlayingCardSuit);
-
-  const cardDeck: PlayingCard[] = suits.flatMap((suit) => {
-    return names.map((name) => {
+  const cardDeck: PlayingCard[] = allPlayingCardSuits.flatMap((suit) => {
+    return allPlayingCardNames.map((name) => {
       return { type: 'PlayingCard', name, suit, id: uuid() };
     });
   });