Skip to content

Commit 77f5dd1

Browse files
wariofdzwariofdz
committed
feat(web-ui): add onClick to show selected cards and styles and modify his tests
1 parent d95e619 commit 77f5dd1

File tree

7 files changed

+253
-13
lines changed

7 files changed

+253
-13
lines changed

‎packages/frontend/web-ui/src/game/hooks/useGame.spec.ts

+6
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,12 @@ describe(useGame.name, () => {
6161

6262
useGameCardsResultFixture = {
6363
cards: [],
64+
deleteAllSelectedCard: jest.fn(),
6465
hasNext: false,
6566
hasPrevious: false,
6667
setNext: jest.fn(),
6768
setPrevious: jest.fn(),
69+
switchCardSelection: jest.fn(),
6870
};
6971

7072
(
@@ -146,6 +148,7 @@ describe(useGame.name, () => {
146148
currentCard: undefined,
147149
deckCardsAmount: undefined,
148150
game: undefined,
151+
isMyTurn: false,
149152
isPending: true,
150153
useCountdownResult: useCountdownResultFixture,
151154
useGameCardsResult: useGameCardsResultFixture,
@@ -250,10 +253,12 @@ describe(useGame.name, () => {
250253

251254
useGameCardsResultFixture = {
252255
cards: [],
256+
deleteAllSelectedCard: jest.fn(),
253257
hasNext: false,
254258
hasPrevious: false,
255259
setNext: jest.fn(),
256260
setPrevious: jest.fn(),
261+
switchCardSelection: jest.fn(),
257262
};
258263

259264
useCountdownResultFixture = {
@@ -402,6 +407,7 @@ describe(useGame.name, () => {
402407
currentCard: gameFixture.state.currentCard,
403408
deckCardsAmount: 189,
404409
game: gameFixture,
410+
isMyTurn: true,
405411
isPending: false,
406412
useCountdownResult: useCountdownResultFixture,
407413
useGameCardsResult: useGameCardsResultFixture,

‎packages/frontend/web-ui/src/game/hooks/useGame.ts

+6
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface UseGameResult {
2828
currentCard: apiModels.CardV1 | undefined;
2929
deckCardsAmount: number | undefined;
3030
game: apiModels.GameV1 | undefined;
31+
isMyTurn: boolean;
3132
isPending: boolean;
3233
useCountdownResult: UseCountdownResult;
3334
useGameCardsResult: UseGameCardsResult;
@@ -93,6 +94,10 @@ export const useGame = (): UseGameResult => {
9394
? getGameSlotIndex(gameOrUndefined, usersV1MeResult.value)
9495
: undefined;
9596

97+
const isMyTurn: boolean =
98+
isActiveGame(game) &&
99+
game.state.currentPlayingSlotIndex === gameSlotIndexParam;
100+
96101
const {
97102
refetch: refetchGamesV1GameIdSlotsSlotIdCards,
98103
result: gamesV1GameIdSlotsSlotIdCardsResult,
@@ -206,6 +211,7 @@ export const useGame = (): UseGameResult => {
206211
currentCard: getGameCurrentCard(game),
207212
deckCardsAmount,
208213
game,
214+
isMyTurn,
209215
isPending:
210216
gamesV1GameIdResult === null ||
211217
gamesV1GameIdSlotsSlotIdCardsResult === null,

‎packages/frontend/web-ui/src/game/hooks/useGameCards.spec.ts

+147-7
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { models as apiModels } from '@cornie-js/api-models';
44
import { renderHook, RenderHookResult } from '@testing-library/react';
55
import { act } from 'react';
66

7-
import { useGameCards, UseGameCardsResult } from './useGameCards';
7+
import { GameCard, useGameCards, UseGameCardsResult } from './useGameCards';
88

99
describe(useGameCards.name, () => {
1010
describe('when called', () => {
1111
let cardsFixture: apiModels.CardArrayV1;
12-
12+
let gameCardFixture: GameCard[];
1313
let renderResult: RenderHookResult<UseGameCardsResult, unknown>;
1414

1515
beforeAll(() => {
@@ -19,16 +19,27 @@ describe(useGameCards.name, () => {
1919
},
2020
];
2121

22+
gameCardFixture = [
23+
{
24+
card: { kind: 'wildDraw4' },
25+
index: 0,
26+
isSelected: false,
27+
},
28+
];
2229
renderResult = renderHook(() => useGameCards(cardsFixture));
2330
});
2431

2532
it('should return expected result', () => {
2633
const expected: UseGameCardsResult = {
27-
cards: cardsFixture,
34+
cards: gameCardFixture,
35+
deleteAllSelectedCard: expect.any(Function) as unknown as () => void,
2836
hasNext: false,
2937
hasPrevious: false,
3038
setNext: expect.any(Function) as unknown as () => void,
3139
setPrevious: expect.any(Function) as unknown as () => void,
40+
switchCardSelection: expect.any(Function) as unknown as (
41+
index: number,
42+
) => void,
3243
};
3344

3445
expect(renderResult.result.current).toStrictEqual(expected);
@@ -37,11 +48,25 @@ describe(useGameCards.name, () => {
3748

3849
describe('having more than ten cards', () => {
3950
let cardsFixture: apiModels.CardArrayV1;
51+
let gameCardFixture: GameCard[];
4052

4153
beforeAll(() => {
4254
cardsFixture = new Array<apiModels.CardV1>(11).fill({
4355
kind: 'wildDraw4',
4456
});
57+
58+
gameCardFixture = [
59+
{ card: { kind: 'wildDraw4' }, index: 0, isSelected: false },
60+
{ card: { kind: 'wildDraw4' }, index: 1, isSelected: false },
61+
{ card: { kind: 'wildDraw4' }, index: 2, isSelected: false },
62+
{ card: { kind: 'wildDraw4' }, index: 3, isSelected: false },
63+
{ card: { kind: 'wildDraw4' }, index: 4, isSelected: false },
64+
{ card: { kind: 'wildDraw4' }, index: 5, isSelected: false },
65+
{ card: { kind: 'wildDraw4' }, index: 6, isSelected: false },
66+
{ card: { kind: 'wildDraw4' }, index: 7, isSelected: false },
67+
{ card: { kind: 'wildDraw4' }, index: 8, isSelected: false },
68+
{ card: { kind: 'wildDraw4' }, index: 9, isSelected: false },
69+
];
4570
});
4671

4772
describe('when called', () => {
@@ -53,13 +78,15 @@ describe(useGameCards.name, () => {
5378

5479
it('should return expected result', () => {
5580
const expected: UseGameCardsResult = {
56-
cards: new Array<apiModels.CardV1>(10).fill({
57-
kind: 'wildDraw4',
58-
}),
81+
cards: gameCardFixture,
82+
deleteAllSelectedCard: expect.any(Function) as unknown as () => void,
5983
hasNext: true,
6084
hasPrevious: false,
6185
setNext: expect.any(Function) as unknown as () => void,
6286
setPrevious: expect.any(Function) as unknown as () => void,
87+
switchCardSelection: expect.any(Function) as unknown as (
88+
index: number,
89+
) => void,
6390
};
6491

6592
expect(renderResult.result.current).toStrictEqual(expected);
@@ -81,13 +108,126 @@ describe(useGameCards.name, () => {
81108
const expected: UseGameCardsResult = {
82109
cards: [
83110
{
84-
kind: 'wildDraw4',
111+
card: { kind: 'wildDraw4' },
112+
index: 10,
113+
isSelected: false,
85114
},
86115
],
116+
deleteAllSelectedCard: expect.any(Function) as unknown as () => void,
87117
hasNext: false,
88118
hasPrevious: true,
89119
setNext: expect.any(Function) as unknown as () => void,
90120
setPrevious: expect.any(Function) as unknown as () => void,
121+
switchCardSelection: expect.any(Function) as unknown as (
122+
index: number,
123+
) => void,
124+
};
125+
126+
expect(renderResult.result.current).toStrictEqual(expected);
127+
});
128+
});
129+
130+
describe('when called, and switchCardSelection() is called and a deselected card is selected', () => {
131+
let renderResult: RenderHookResult<UseGameCardsResult, unknown>;
132+
133+
beforeAll(() => {
134+
renderResult = renderHook(() => useGameCards(cardsFixture));
135+
136+
act(() => {
137+
renderResult.result.current.switchCardSelection(9);
138+
});
139+
140+
gameCardFixture = [
141+
{ card: { kind: 'wildDraw4' }, index: 0, isSelected: false },
142+
{ card: { kind: 'wildDraw4' }, index: 1, isSelected: false },
143+
{ card: { kind: 'wildDraw4' }, index: 2, isSelected: false },
144+
{ card: { kind: 'wildDraw4' }, index: 3, isSelected: false },
145+
{ card: { kind: 'wildDraw4' }, index: 4, isSelected: false },
146+
{ card: { kind: 'wildDraw4' }, index: 5, isSelected: false },
147+
{ card: { kind: 'wildDraw4' }, index: 6, isSelected: false },
148+
{ card: { kind: 'wildDraw4' }, index: 7, isSelected: false },
149+
{ card: { kind: 'wildDraw4' }, index: 8, isSelected: false },
150+
{ card: { kind: 'wildDraw4' }, index: 9, isSelected: true },
151+
];
152+
});
153+
154+
it('should return expected result', () => {
155+
const expected: UseGameCardsResult = {
156+
cards: gameCardFixture,
157+
deleteAllSelectedCard: expect.any(Function) as unknown as () => void,
158+
hasNext: true,
159+
hasPrevious: false,
160+
setNext: expect.any(Function) as unknown as () => void,
161+
setPrevious: expect.any(Function) as unknown as () => void,
162+
switchCardSelection: expect.any(Function) as unknown as (
163+
index: number,
164+
) => void,
165+
};
166+
167+
expect(renderResult.result.current).toStrictEqual(expected);
168+
});
169+
});
170+
171+
describe('when called, and switchCardSelection() is called and a selected card is deselected', () => {
172+
let renderResult: RenderHookResult<UseGameCardsResult, unknown>;
173+
let renderResultInTheMiddle: UseGameCardsResult;
174+
let gameCardResultInTheMiddle: GameCard[];
175+
176+
beforeAll(() => {
177+
renderResult = renderHook(() => useGameCards(cardsFixture));
178+
179+
act(() => {
180+
renderResult.result.current.switchCardSelection(9);
181+
});
182+
183+
renderResultInTheMiddle = renderResult.result.current;
184+
gameCardResultInTheMiddle = renderResult.result.current.cards;
185+
186+
act(() => {
187+
renderResult.result.current.switchCardSelection(9);
188+
});
189+
190+
gameCardFixture = [
191+
{ card: { kind: 'wildDraw4' }, index: 0, isSelected: false },
192+
{ card: { kind: 'wildDraw4' }, index: 1, isSelected: false },
193+
{ card: { kind: 'wildDraw4' }, index: 2, isSelected: false },
194+
{ card: { kind: 'wildDraw4' }, index: 3, isSelected: false },
195+
{ card: { kind: 'wildDraw4' }, index: 4, isSelected: false },
196+
{ card: { kind: 'wildDraw4' }, index: 5, isSelected: false },
197+
{ card: { kind: 'wildDraw4' }, index: 6, isSelected: false },
198+
{ card: { kind: 'wildDraw4' }, index: 7, isSelected: false },
199+
{ card: { kind: 'wildDraw4' }, index: 8, isSelected: false },
200+
{ card: { kind: 'wildDraw4' }, index: 9, isSelected: false },
201+
];
202+
});
203+
204+
it('should return deselected cards but one of them selected', () => {
205+
const expected: UseGameCardsResult = {
206+
cards: gameCardResultInTheMiddle,
207+
deleteAllSelectedCard: expect.any(Function) as unknown as () => void,
208+
hasNext: true,
209+
hasPrevious: false,
210+
setNext: expect.any(Function) as unknown as () => void,
211+
setPrevious: expect.any(Function) as unknown as () => void,
212+
switchCardSelection: expect.any(Function) as unknown as (
213+
index: number,
214+
) => void,
215+
};
216+
217+
expect(renderResultInTheMiddle).toStrictEqual(expected);
218+
});
219+
220+
it('should return all deselected cards', () => {
221+
const expected: UseGameCardsResult = {
222+
cards: gameCardFixture,
223+
deleteAllSelectedCard: expect.any(Function) as unknown as () => void,
224+
hasNext: true,
225+
hasPrevious: false,
226+
setNext: expect.any(Function) as unknown as () => void,
227+
setPrevious: expect.any(Function) as unknown as () => void,
228+
switchCardSelection: expect.any(Function) as unknown as (
229+
index: number,
230+
) => void,
91231
};
92232

93233
expect(renderResult.result.current).toStrictEqual(expected);

‎packages/frontend/web-ui/src/game/hooks/useGameCards.ts

+54-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@ import { models as apiModels } from '@cornie-js/api-models';
22
import { useState } from 'react';
33

44
export interface UseGameCardsResult {
5-
cards: apiModels.CardArrayV1;
5+
cards: GameCard[];
6+
deleteAllSelectedCard: () => void;
67
hasNext: boolean;
78
hasPrevious: boolean;
89
setNext: () => void;
910
setPrevious: () => void;
11+
switchCardSelection: (index: number) => void;
12+
}
13+
14+
export interface GameCard {
15+
card: apiModels.CardV1;
16+
index: number;
17+
isSelected?: boolean;
1018
}
1119

1220
const PAGE_SIZE: number = 10;
@@ -19,6 +27,8 @@ export const useGameCards = (
1927
React.Dispatch<React.SetStateAction<number>>,
2028
] = useState(0);
2129

30+
const [selectedCards, setSelectedCards] = useState<number[]>([]);
31+
2232
const cardsSlice: apiModels.CardV1[] = cards.slice(
2333
PAGE_SIZE * page,
2434
PAGE_SIZE * (page + 1),
@@ -27,6 +37,21 @@ export const useGameCards = (
2737
const hasNext: boolean = cards.length > PAGE_SIZE * (page + 1);
2838
const hasPrevious: boolean = page > 0;
2939

40+
const gameCardSlice: GameCard[] = buildCardGameSlices();
41+
42+
function buildCardGameSlices(): GameCard[] {
43+
const gameSlice: GameCard[] = [];
44+
cardsSlice.forEach((card: apiModels.CardV1, index: number): void => {
45+
gameSlice.push({
46+
card: card,
47+
index: page * PAGE_SIZE + index,
48+
isSelected: selectedCards.includes(page * PAGE_SIZE + index),
49+
});
50+
});
51+
52+
return gameSlice;
53+
}
54+
3055
function setNext(): void {
3156
if (hasNext) {
3257
setPage(page + 1);
@@ -39,11 +64,38 @@ export const useGameCards = (
3964
}
4065
}
4166

67+
function isSelectedCard(index: number): boolean {
68+
return selectedCards.includes(index);
69+
}
70+
71+
function addSelectedCard(index: number): void {
72+
setSelectedCards([...selectedCards, index]);
73+
}
74+
75+
function deleteSelectedCard(index: number): void {
76+
const filteredSelectedCard = selectedCards.filter((card) => card !== index);
77+
setSelectedCards(filteredSelectedCard);
78+
}
79+
80+
function switchCardSelection(index: number): void {
81+
if (isSelectedCard(index)) {
82+
deleteSelectedCard(index);
83+
} else {
84+
addSelectedCard(index);
85+
}
86+
}
87+
88+
function deleteAllSelectedCard(): void {
89+
setSelectedCards([]);
90+
}
91+
4292
return {
43-
cards: cardsSlice,
93+
cards: gameCardSlice,
94+
deleteAllSelectedCard,
4495
hasNext,
4596
hasPrevious,
4697
setNext,
4798
setPrevious,
99+
switchCardSelection,
48100
};
49101
};

0 commit comments

Comments
 (0)