diff --git a/frontend/src/components/Town/interactables/ConversationArea.ts b/frontend/src/components/Town/interactables/ConversationArea.ts
index 610717258..06fcaaeff 100644
--- a/frontend/src/components/Town/interactables/ConversationArea.ts
+++ b/frontend/src/components/Town/interactables/ConversationArea.ts
@@ -1,8 +1,8 @@
-import ConversationAreaController from '../../../classes/ConversationAreaController';
-import TownController from '../../../classes/TownController';
+import ConversationAreaController, {
+ ConversationAreaEvents,
+} from '../../../classes/interactable/ConversationAreaController';
import { BoundingBox } from '../../../types/CoveyTownSocket';
import Interactable, { KnownInteractableTypes } from '../Interactable';
-import TownGameScene from '../TownGameScene';
export default class ConversationArea extends Interactable {
private _topicTextOrUndefined?: Phaser.GameObjects.Text;
@@ -11,15 +11,7 @@ export default class ConversationArea extends Interactable {
private _conversationArea?: ConversationAreaController;
- private _townController: TownController;
-
- constructor(scene: TownGameScene) {
- super(scene);
- this._townController = scene.coveyTownController;
- this.setTintFill();
- this.setAlpha(0.3);
- this._townController.addListener('conversationAreasChanged', this._updateConversationAreas);
- }
+ private _changeListener?: ConversationAreaEvents['topicChange'];
private get _topicText() {
const ret = this._topicTextOrUndefined;
@@ -33,10 +25,16 @@ export default class ConversationArea extends Interactable {
return 'conversationArea';
}
- removedFromScene(): void {}
+ removedFromScene(): void {
+ if (this._changeListener) {
+ this._conversationArea?.removeListener('topicChange', this._changeListener);
+ }
+ }
addedToScene(): void {
super.addedToScene();
+ this.setTintFill();
+ this.setAlpha(0.3);
this.scene.add.text(
this.x - this.displayWidth / 2,
this.y - this.displayHeight / 2,
@@ -49,32 +47,22 @@ export default class ConversationArea extends Interactable {
'(No Topic)',
{ color: '#000000' },
);
- this._updateConversationAreas(this._townController.conversationAreas);
+ this._conversationArea = this.townController.getConversationAreaController(this);
+ this._updateLabelText(this._conversationArea.topic);
+ this._changeListener = newTopic => this._updateLabelText(newTopic);
+ this._conversationArea.addListener('topicChange', this._changeListener);
}
- private _updateConversationAreas(areas: ConversationAreaController[]) {
- const area = areas.find(eachAreaInController => eachAreaInController.id === this.name);
- if (area !== this._conversationArea) {
- if (area === undefined) {
- this._conversationArea = undefined;
- this._topicText.text = '(No topic)';
- } else {
- this._conversationArea = area;
- if (this.isOverlapping) {
- this._scene.moveOurPlayerTo({ interactableID: this.name });
- }
- const updateListener = (newTopic: string | undefined) => {
- if (newTopic) {
- if (this._infoTextBox && this._infoTextBox.visible) {
- this._infoTextBox.setVisible(false);
- }
- this._topicText.text = newTopic;
- } else {
- this._topicText.text = '(No topic)';
- }
- };
- updateListener(area.topic);
- area.addListener('topicChange', updateListener);
+ private _updateLabelText(newTopic: string | undefined) {
+ if (newTopic === undefined) {
+ this._topicText.text = '(No topic)';
+ } else {
+ if (this.isOverlapping) {
+ this._scene.moveOurPlayerTo({ interactableID: this.name });
+ }
+ this._topicText.text = newTopic;
+ if (this._infoTextBox && this._infoTextBox.visible) {
+ this._infoTextBox.setVisible(false);
}
}
}
@@ -101,7 +89,7 @@ export default class ConversationArea extends Interactable {
}
overlap(): void {
- if (this._conversationArea === undefined) {
+ if (this._conversationArea?.topic === undefined) {
this._showInfoBox();
}
}
diff --git a/frontend/src/components/Town/interactables/GameArea.ts b/frontend/src/components/Town/interactables/GameArea.ts
new file mode 100644
index 000000000..5003c3862
--- /dev/null
+++ b/frontend/src/components/Town/interactables/GameArea.ts
@@ -0,0 +1,33 @@
+import Interactable, { KnownInteractableTypes } from '../Interactable';
+
+export default class GameArea extends Interactable {
+ private _isInteracting = false;
+
+ addedToScene() {
+ super.addedToScene();
+ this.setTintFill();
+ this.setAlpha(0.3);
+ this.setDepth(-1);
+ this.scene.add.text(
+ this.x - this.displayWidth / 2,
+ this.y + this.displayHeight / 2,
+ this.name,
+ { color: '#FFFFFF', backgroundColor: '#000000' },
+ );
+ }
+
+ overlapExit(): void {
+ if (this._isInteracting) {
+ this.townController.interactableEmitter.emit('endInteraction', this);
+ this._isInteracting = false;
+ }
+ }
+
+ interact(): void {
+ this._isInteracting = true;
+ }
+
+ getType(): KnownInteractableTypes {
+ return 'gameArea';
+ }
+}
diff --git a/frontend/src/components/Town/interactables/Leaderboard.test.tsx b/frontend/src/components/Town/interactables/Leaderboard.test.tsx
new file mode 100644
index 000000000..318983986
--- /dev/null
+++ b/frontend/src/components/Town/interactables/Leaderboard.test.tsx
@@ -0,0 +1,78 @@
+import { render, screen, within } from '@testing-library/react';
+import { nanoid } from 'nanoid';
+import React from 'react';
+import { GameResult } from '../../../types/CoveyTownSocket';
+import Leaderboard from './Leaderboard';
+
+describe('[T4] Leaderboard', () => {
+ // Spy on console.error and intercept react key warnings to fail test
+ let consoleErrorSpy: jest.SpyInstance
;
+ beforeAll(() => {
+ // Spy on console.error and intercept react key warnings to fail test
+ consoleErrorSpy = jest.spyOn(global.console, 'error');
+ consoleErrorSpy.mockImplementation((message?, ...optionalParams) => {
+ const stringMessage = message as string;
+ if (stringMessage.includes && stringMessage.includes('children with the same key,')) {
+ throw new Error(stringMessage.replace('%s', optionalParams[0]));
+ } else if (stringMessage.includes && stringMessage.includes('warning-keys')) {
+ throw new Error(stringMessage.replace('%s', optionalParams[0]));
+ }
+ // eslint-disable-next-line no-console -- we are wrapping the console with a spy to find react warnings
+ console.warn(message, ...optionalParams);
+ });
+ });
+ afterAll(() => {
+ consoleErrorSpy.mockRestore();
+ });
+
+ const winner = nanoid(); //two wins, one tie
+ const middle = nanoid(); //one win, one tie, two loss
+ const loser = nanoid(); //one loss
+ const results: GameResult[] = [
+ { gameID: nanoid(), scores: { [loser]: 0, [middle]: 1 } },
+ { gameID: nanoid(), scores: { [winner]: 1, [middle]: 0 } },
+ { gameID: nanoid(), scores: { [winner]: 1, [middle]: 1 } },
+ { gameID: nanoid(), scores: { [winner]: 1, [middle]: 0 } },
+ ];
+ function checkRow(
+ row: HTMLElement,
+ player: string,
+ wins?: number,
+ losses?: number,
+ ties?: number,
+ ) {
+ const columns = within(row).getAllByRole('gridcell');
+ expect(columns).toHaveLength(4);
+ expect(columns[0]).toHaveTextContent(player);
+ if (wins) expect(columns[1]).toHaveTextContent(wins.toString());
+ if (losses) expect(columns[2]).toHaveTextContent(losses.toString());
+ if (ties) expect(columns[3]).toHaveTextContent(ties.toString());
+ }
+ beforeEach(() => {
+ render();
+ });
+ it('should render a table with the correct headers', () => {
+ const headers = screen.getAllByRole('columnheader');
+ expect(headers).toHaveLength(4);
+ expect(headers[0]).toHaveTextContent('Player');
+ expect(headers[1]).toHaveTextContent('Wins');
+ expect(headers[2]).toHaveTextContent('Losses');
+ expect(headers[3]).toHaveTextContent('Ties');
+ });
+ it('should render a row for each player', () => {
+ const rows = screen.getAllByRole('row');
+ expect(rows).toHaveLength(4);
+ });
+ it('should render the players in order of wins', () => {
+ const rows = screen.getAllByRole('row');
+ checkRow(rows[1], winner);
+ checkRow(rows[2], middle);
+ checkRow(rows[3], loser);
+ });
+ it('should calculate the cumulative number of wins, losses, and ties for each player', () => {
+ const rows = screen.getAllByRole('row');
+ checkRow(rows[1], winner, 2, 0, 1);
+ checkRow(rows[2], middle, 1, 2, 1);
+ checkRow(rows[3], loser, 0, 1, 0);
+ });
+});
diff --git a/frontend/src/components/Town/interactables/Leaderboard.tsx b/frontend/src/components/Town/interactables/Leaderboard.tsx
new file mode 100644
index 000000000..346065047
--- /dev/null
+++ b/frontend/src/components/Town/interactables/Leaderboard.tsx
@@ -0,0 +1,96 @@
+import { Table, Tbody, Td, Thead, Tr } from '@chakra-ui/react';
+import React from 'react';
+import { GameResult } from '../../../types/CoveyTownSocket';
+
+/**
+ * A component that renders a list of GameResult's as a leaderboard, formatted as a table with the following columns:
+ * - Player: the name of the player
+ * - Wins: the number of games the player has won
+ * - Losses: the number of games the player has lost
+ * - Ties: the number of games the player has tied
+ * Each column has a header (a table header `th` element) with the name of the column.
+ *
+ *
+ * The table is sorted by the number of wins, with the player with the most wins at the top.
+ *
+ * @returns
+ */
+export default function Leaderboard({ results }: { results: GameResult[] }): JSX.Element {
+ const winsLossesTiesByPlayer: Record<
+ string,
+ { player: string; wins: number; losses: number; ties: number }
+ > = {};
+ results.forEach(result => {
+ const players = Object.keys(result.scores);
+ const p1 = players[0];
+ const p2 = players[1];
+ const winner =
+ result.scores[p1] > result.scores[p2]
+ ? p1
+ : result.scores[p2] > result.scores[p1]
+ ? p2
+ : undefined;
+ const loser =
+ result.scores[p1] < result.scores[p2]
+ ? p1
+ : result.scores[p2] < result.scores[p1]
+ ? p2
+ : undefined;
+ if (winner) {
+ winsLossesTiesByPlayer[winner] = {
+ player: winner,
+ wins: (winsLossesTiesByPlayer[winner]?.wins || 0) + 1,
+ losses: winsLossesTiesByPlayer[winner]?.losses || 0,
+ ties: winsLossesTiesByPlayer[winner]?.ties || 0,
+ };
+ }
+ if (loser) {
+ winsLossesTiesByPlayer[loser] = {
+ player: loser,
+ wins: winsLossesTiesByPlayer[loser]?.wins || 0,
+ losses: (winsLossesTiesByPlayer[loser]?.losses || 0) + 1,
+ ties: winsLossesTiesByPlayer[loser]?.ties || 0,
+ };
+ }
+ if (!winner && !loser) {
+ winsLossesTiesByPlayer[p1] = {
+ player: p1,
+ wins: winsLossesTiesByPlayer[p1]?.wins || 0,
+ losses: winsLossesTiesByPlayer[p1]?.losses || 0,
+ ties: (winsLossesTiesByPlayer[p1]?.ties || 0) + 1,
+ };
+ winsLossesTiesByPlayer[p2] = {
+ player: p2,
+ wins: winsLossesTiesByPlayer[p2]?.wins || 0,
+ losses: winsLossesTiesByPlayer[p2]?.losses || 0,
+ ties: (winsLossesTiesByPlayer[p2]?.ties || 0) + 1,
+ };
+ }
+ });
+ const rows = Object.keys(winsLossesTiesByPlayer).map(player => winsLossesTiesByPlayer[player]);
+ rows.sort((a, b) => b.wins - a.wins);
+ return (
+
+
+
+ | Player |
+ Wins |
+ Losses |
+ Ties |
+
+
+
+ {rows.map(record => {
+ return (
+
+ | {record.player} |
+ {record.wins} |
+ {record.losses} |
+ {record.ties} |
+
+ );
+ })}
+
+
+ );
+}
diff --git a/frontend/src/components/Town/interactables/NewCoversationModal.tsx b/frontend/src/components/Town/interactables/NewCoversationModal.tsx
index c3856a295..1ed85c1e7 100644
--- a/frontend/src/components/Town/interactables/NewCoversationModal.tsx
+++ b/frontend/src/components/Town/interactables/NewCoversationModal.tsx
@@ -14,7 +14,7 @@ import {
} from '@chakra-ui/react';
import React, { useCallback, useEffect, useState } from 'react';
import { useInteractable } from '../../../classes/TownController';
-import { ConversationArea } from '../../../generated/client';
+import { Omit_ConversationArea_type_ } from '../../../generated/client';
import useTownController from '../../../hooks/useTownController';
export default function NewConversationModal(): JSX.Element {
@@ -42,10 +42,10 @@ export default function NewConversationModal(): JSX.Element {
const createConversation = useCallback(async () => {
if (topic && newConversation) {
- const conversationToCreate: ConversationArea = {
+ const conversationToCreate: Omit_ConversationArea_type_ = {
topic,
id: newConversation.name,
- occupantsByID: [],
+ occupants: [],
};
try {
await coveyTownController.createConversationArea(conversationToCreate);
diff --git a/frontend/src/components/Town/interactables/SelectVideoModal.tsx b/frontend/src/components/Town/interactables/SelectVideoModal.tsx
index 3a653f85a..6c62947a7 100644
--- a/frontend/src/components/Town/interactables/SelectVideoModal.tsx
+++ b/frontend/src/components/Town/interactables/SelectVideoModal.tsx
@@ -13,9 +13,9 @@ import {
useToast,
} from '@chakra-ui/react';
import React, { useCallback, useEffect, useState } from 'react';
-import { useViewingAreaController } from '../../../classes/TownController';
+import ViewingAreaController from '../../../classes/interactable/ViewingAreaController';
+import { useInteractableAreaController } from '../../../classes/TownController';
import useTownController from '../../../hooks/useTownController';
-import { ViewingArea as ViewingAreaModel } from '../../../types/CoveyTownSocket';
import ViewingArea from './ViewingArea';
export default function SelectVideoModal({
@@ -28,7 +28,9 @@ export default function SelectVideoModal({
viewingArea: ViewingArea;
}): JSX.Element {
const coveyTownController = useTownController();
- const viewingAreaController = useViewingAreaController(viewingArea?.name);
+ const viewingAreaController = useInteractableAreaController(
+ viewingArea?.name,
+ );
const [video, setVideo] = useState(viewingArea?.defaultVideoURL || '');
@@ -49,11 +51,12 @@ export default function SelectVideoModal({
const createViewingArea = useCallback(async () => {
if (video && viewingAreaController) {
- const request: ViewingAreaModel = {
+ const request = {
id: viewingAreaController.id,
video,
isPlaying: true,
elapsedTimeSec: 0,
+ occupants: [],
};
try {
await coveyTownController.createViewingArea(request);
diff --git a/frontend/src/components/Town/interactables/TicTacToe/TicTacToeArea.test.tsx b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeArea.test.tsx
new file mode 100644
index 000000000..35f91bfed
--- /dev/null
+++ b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeArea.test.tsx
@@ -0,0 +1,695 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { mock, mockReset } from 'jest-mock-extended';
+import React from 'react';
+import { nanoid } from 'nanoid';
+import { act } from 'react-dom/test-utils';
+import TicTacToeAreaController, {
+ TicTacToeCell,
+} from '../../../../classes/interactable/TicTacToeAreaController';
+import PlayerController from '../../../../classes/PlayerController';
+import TownController, * as TownControllerHooks from '../../../../classes/TownController';
+import TownControllerContext from '../../../../contexts/TownControllerContext';
+import {
+ GameArea,
+ GameResult,
+ GameStatus,
+ PlayerLocation,
+ TicTacToeGameState,
+} from '../../../../types/CoveyTownSocket';
+import PhaserGameArea from '../GameArea';
+import * as Leaderboard from '../Leaderboard';
+import TicTacToeAreaWrapper from './TicTacToeArea';
+import * as TicTacToeBoard from './TicTacToeBoard';
+
+const mockToast = jest.fn();
+jest.mock('@chakra-ui/react', () => {
+ const ui = jest.requireActual('@chakra-ui/react');
+ const mockUseToast = () => mockToast;
+ return {
+ ...ui,
+ useToast: mockUseToast,
+ };
+});
+const mockGameArea = mock();
+mockGameArea.getData.mockReturnValue('TicTacToe');
+jest.spyOn(TownControllerHooks, 'useInteractable').mockReturnValue(mockGameArea);
+const useInteractableAreaControllerSpy = jest.spyOn(
+ TownControllerHooks,
+ 'useInteractableAreaController',
+);
+
+const leaderboardComponentSpy = jest.spyOn(Leaderboard, 'default');
+leaderboardComponentSpy.mockReturnValue();
+
+const boardComponentSpy = jest.spyOn(TicTacToeBoard, 'default');
+boardComponentSpy.mockReturnValue();
+
+const randomLocation = (): PlayerLocation => ({
+ moving: Math.random() < 0.5,
+ rotation: 'front',
+ x: Math.random() * 1000,
+ y: Math.random() * 1000,
+});
+
+class MockTicTacToeAreaController extends TicTacToeAreaController {
+ makeMove = jest.fn();
+
+ joinGame = jest.fn();
+
+ mockBoard: TicTacToeCell[][] = [
+ [undefined, undefined, undefined],
+ [undefined, undefined, undefined],
+ [undefined, undefined, undefined],
+ ];
+
+ mockIsPlayer = false;
+
+ mockIsOurTurn = false;
+
+ mockObservers: PlayerController[] = [];
+
+ mockMoveCount = 0;
+
+ mockWinner: PlayerController | undefined = undefined;
+
+ mockWhoseTurn: PlayerController | undefined = undefined;
+
+ mockStatus: GameStatus = 'WAITING_TO_START';
+
+ mockX: PlayerController | undefined = undefined;
+
+ mockO: PlayerController | undefined = undefined;
+
+ mockCurrentGame: GameArea | undefined = undefined;
+
+ mockGamePiece: 'X' | 'O' = 'X';
+
+ mockIsActive = false;
+
+ mockHistory: GameResult[] = [];
+
+ public constructor() {
+ super(nanoid(), mock>(), mock());
+ }
+
+ get board(): TicTacToeCell[][] {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get history(): GameResult[] {
+ return this.mockHistory;
+ }
+
+ get isOurTurn() {
+ return this.mockIsOurTurn;
+ }
+
+ get x(): PlayerController | undefined {
+ return this.mockX;
+ }
+
+ get o(): PlayerController | undefined {
+ return this.mockO;
+ }
+
+ get observers(): PlayerController[] {
+ return this.mockObservers;
+ }
+
+ get moveCount(): number {
+ return this.mockMoveCount;
+ }
+
+ get winner(): PlayerController | undefined {
+ return this.mockWinner;
+ }
+
+ get whoseTurn(): PlayerController | undefined {
+ return this.mockWhoseTurn;
+ }
+
+ get status(): GameStatus {
+ return this.mockStatus;
+ }
+
+ get isPlayer() {
+ return this.mockIsPlayer;
+ }
+
+ get gamePiece(): 'X' | 'O' {
+ return this.mockGamePiece;
+ }
+
+ public isActive(): boolean {
+ return this.mockIsActive;
+ }
+
+ public mockReset() {
+ this.mockBoard = [
+ ['X', 'O', undefined],
+ [undefined, 'X', undefined],
+ [undefined, undefined, 'O'],
+ ];
+ this.makeMove.mockReset();
+ }
+}
+describe('[T2] TicTacToeArea', () => {
+ // Spy on console.error and intercept react key warnings to fail test
+ let consoleErrorSpy: jest.SpyInstance;
+ beforeAll(() => {
+ // Spy on console.error and intercept react key warnings to fail test
+ consoleErrorSpy = jest.spyOn(global.console, 'error');
+ consoleErrorSpy.mockImplementation((message?, ...optionalParams) => {
+ const stringMessage = message as string;
+ if (stringMessage.includes && stringMessage.includes('children with the same key,')) {
+ throw new Error(stringMessage.replace('%s', optionalParams[0]));
+ } else if (stringMessage.includes && stringMessage.includes('warning-keys')) {
+ throw new Error(stringMessage.replace('%s', optionalParams[0]));
+ }
+ // eslint-disable-next-line no-console -- we are wrapping the console with a spy to find react warnings
+ console.warn(message, ...optionalParams);
+ });
+ });
+ afterAll(() => {
+ consoleErrorSpy.mockRestore();
+ });
+
+ let ourPlayer: PlayerController;
+ const townController = mock();
+ Object.defineProperty(townController, 'ourPlayer', { get: () => ourPlayer });
+ let gameAreaController = new MockTicTacToeAreaController();
+ let joinGameResolve: () => void;
+ let joinGameReject: (err: Error) => void;
+
+ function renderTicTacToeArea() {
+ return render(
+
+
+
+
+ ,
+ );
+ }
+ beforeEach(() => {
+ ourPlayer = new PlayerController('player x', 'player x', randomLocation());
+ mockGameArea.name = nanoid();
+ mockReset(townController);
+ gameAreaController.mockReset();
+ useInteractableAreaControllerSpy.mockReturnValue(gameAreaController);
+ leaderboardComponentSpy.mockClear();
+ mockToast.mockClear();
+ gameAreaController.joinGame.mockReset();
+ gameAreaController.makeMove.mockReset();
+
+ gameAreaController.joinGame.mockImplementation(
+ () =>
+ new Promise((resolve, reject) => {
+ joinGameResolve = resolve;
+ joinGameReject = reject;
+ }),
+ );
+ });
+ describe('[T2.1] Game update listeners', () => {
+ it('Registers exactly two listeners when mounted: one for gameUpdated and one for gameEnd', () => {
+ const addListenerSpy = jest.spyOn(gameAreaController, 'addListener');
+ addListenerSpy.mockClear();
+
+ renderTicTacToeArea();
+ expect(addListenerSpy).toBeCalledTimes(2);
+ expect(addListenerSpy).toHaveBeenCalledWith('gameUpdated', expect.any(Function));
+ expect(addListenerSpy).toHaveBeenCalledWith('gameEnd', expect.any(Function));
+ });
+ it('Does not register listeners on every render', () => {
+ const removeListenerSpy = jest.spyOn(gameAreaController, 'removeListener');
+ const addListenerSpy = jest.spyOn(gameAreaController, 'addListener');
+ addListenerSpy.mockClear();
+ removeListenerSpy.mockClear();
+ const renderData = renderTicTacToeArea();
+ expect(addListenerSpy).toBeCalledTimes(2);
+ addListenerSpy.mockClear();
+
+ renderData.rerender(
+
+
+
+
+ ,
+ );
+
+ expect(addListenerSpy).not.toBeCalled();
+ expect(removeListenerSpy).not.toBeCalled();
+ });
+ it('Removes the listeners when the component is unmounted', () => {
+ const removeListenerSpy = jest.spyOn(gameAreaController, 'removeListener');
+ const addListenerSpy = jest.spyOn(gameAreaController, 'addListener');
+ addListenerSpy.mockClear();
+ removeListenerSpy.mockClear();
+ const renderData = renderTicTacToeArea();
+ expect(addListenerSpy).toBeCalledTimes(2);
+ const addedListeners = addListenerSpy.mock.calls;
+ const addedGameUpdateListener = addedListeners.find(call => call[0] === 'gameUpdated');
+ const addedGameEndedListener = addedListeners.find(call => call[0] === 'gameEnd');
+ expect(addedGameEndedListener).toBeDefined();
+ expect(addedGameUpdateListener).toBeDefined();
+ renderData.unmount();
+ expect(removeListenerSpy).toBeCalledTimes(2);
+ const removedListeners = removeListenerSpy.mock.calls;
+ const removedGameUpdateListener = removedListeners.find(call => call[0] === 'gameUpdated');
+ const removedGameEndedListener = removedListeners.find(call => call[0] === 'gameEnd');
+ expect(removedGameUpdateListener).toEqual(addedGameUpdateListener);
+ expect(removedGameEndedListener).toEqual(addedGameEndedListener);
+ });
+ it('Creates new listeners if the gameAreaController changes', () => {
+ const removeListenerSpy = jest.spyOn(gameAreaController, 'removeListener');
+ const addListenerSpy = jest.spyOn(gameAreaController, 'addListener');
+ addListenerSpy.mockClear();
+ removeListenerSpy.mockClear();
+ const renderData = renderTicTacToeArea();
+ expect(addListenerSpy).toBeCalledTimes(2);
+
+ gameAreaController = new MockTicTacToeAreaController();
+ const removeListenerSpy2 = jest.spyOn(gameAreaController, 'removeListener');
+ const addListenerSpy2 = jest.spyOn(gameAreaController, 'addListener');
+
+ useInteractableAreaControllerSpy.mockReturnValue(gameAreaController);
+ renderData.rerender(
+
+
+
+
+ ,
+ );
+ expect(removeListenerSpy).toBeCalledTimes(2);
+
+ expect(addListenerSpy2).toBeCalledTimes(2);
+ expect(removeListenerSpy2).not.toBeCalled();
+ });
+ });
+ describe('[T2.2] Rendering the leaderboard', () => {
+ it('Renders the leaderboard with the history when the component is mounted', () => {
+ gameAreaController.mockHistory = [
+ {
+ gameID: nanoid(),
+ scores: {
+ [nanoid()]: 1,
+ [nanoid()]: 0,
+ },
+ },
+ ];
+ renderTicTacToeArea();
+ expect(leaderboardComponentSpy).toHaveBeenCalledWith(
+ {
+ results: gameAreaController.mockHistory,
+ },
+ {},
+ );
+ });
+ it('Renders the leaderboard with the history when the game is updated', () => {
+ gameAreaController.mockHistory = [
+ {
+ gameID: nanoid(),
+ scores: {
+ [nanoid()]: 1,
+ [nanoid()]: 0,
+ },
+ },
+ ];
+ renderTicTacToeArea();
+ expect(leaderboardComponentSpy).toHaveBeenCalledWith(
+ {
+ results: gameAreaController.mockHistory,
+ },
+ {},
+ );
+
+ gameAreaController.mockHistory = [
+ {
+ gameID: nanoid(),
+ scores: {
+ [nanoid()]: 1,
+ [nanoid()]: 1,
+ },
+ },
+ ];
+ act(() => {
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(leaderboardComponentSpy).toHaveBeenCalledWith(
+ {
+ results: gameAreaController.mockHistory,
+ },
+ {},
+ );
+ });
+ });
+ describe('[T2.3] Join game button', () => {
+ it('Is not shown when the player is in a not-yet-started game', () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ gameAreaController.mockX = ourPlayer;
+ gameAreaController.mockIsPlayer = true;
+ renderTicTacToeArea();
+ expect(screen.queryByText('Join New Game')).not.toBeInTheDocument();
+ });
+ it('Is not shown if the game is in progress', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockX = new PlayerController('player X', 'player X', randomLocation());
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ gameAreaController.mockIsPlayer = false;
+ renderTicTacToeArea();
+ expect(screen.queryByText('Join New Game')).not.toBeInTheDocument();
+ });
+ it('Is enabled when the player is not in a game and the game is not in progress', () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ gameAreaController.mockX = undefined;
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ gameAreaController.mockIsPlayer = false;
+ renderTicTacToeArea();
+ expect(screen.queryByText('Join New Game')).toBeInTheDocument();
+ });
+ describe('When clicked', () => {
+ it('Calls joinGame on the gameAreaController', () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ gameAreaController.mockIsPlayer = false;
+ renderTicTacToeArea();
+ const button = screen.getByText('Join New Game');
+ fireEvent.click(button);
+ expect(gameAreaController.joinGame).toBeCalled();
+ });
+ it('Displays a toast with the error message if there is an error joining the game', async () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ gameAreaController.mockIsPlayer = false;
+ const errorMessage = nanoid();
+ renderTicTacToeArea();
+ const button = screen.getByText('Join New Game');
+ fireEvent.click(button);
+ expect(gameAreaController.joinGame).toBeCalled();
+ act(() => {
+ joinGameReject(new Error(errorMessage));
+ });
+ await waitFor(() => {
+ expect(mockToast).toBeCalledWith(
+ expect.objectContaining({
+ description: `Error: ${errorMessage}`,
+ status: 'error',
+ }),
+ );
+ });
+ });
+
+ it('Is disabled and set to loading when the player is joining a game', async () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ gameAreaController.mockIsPlayer = false;
+ renderTicTacToeArea();
+ const button = screen.getByText('Join New Game');
+ expect(button).toBeEnabled();
+ expect(within(button).queryByText('Loading...')).not.toBeInTheDocument(); //Check that the loading text is not displayed
+ fireEvent.click(button);
+ expect(gameAreaController.joinGame).toBeCalled();
+ expect(button).toBeDisabled();
+ expect(within(button).queryByText('Loading...')).toBeInTheDocument(); //Check that the loading text is displayed
+ act(() => {
+ joinGameResolve();
+ });
+ await waitFor(() => expect(button).toBeEnabled());
+ expect(within(button).queryByText('Loading...')).not.toBeInTheDocument(); //Check that the loading text is not displayed
+ });
+ });
+ it('Adds the display of the button when a game becomes possible to join', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = new PlayerController('player X', 'player X', randomLocation());
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ renderTicTacToeArea();
+ expect(screen.queryByText('Join New Game')).not.toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockStatus = 'OVER';
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(screen.queryByText('Join New Game')).toBeInTheDocument();
+ });
+ it('Removes the display of the button when a game becomes no longer possible to join', () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = undefined;
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ renderTicTacToeArea();
+ expect(screen.queryByText('Join New Game')).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockX = new PlayerController('player X', 'player X', randomLocation());
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(screen.queryByText('Join New Game')).not.toBeInTheDocument();
+ });
+ });
+ describe('[T2.4] Rendering the current observers', () => {
+ beforeEach(() => {
+ gameAreaController.mockObservers = [
+ new PlayerController('player 1', 'player 1', randomLocation()),
+ new PlayerController('player 2', 'player 2', randomLocation()),
+ new PlayerController('player 3', 'player 3', randomLocation()),
+ ];
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = new PlayerController('player X', 'player X', randomLocation());
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ });
+ it('Displays the correct observers when the component is mounted', () => {
+ renderTicTacToeArea();
+ const observerList = screen.getByLabelText('list of observers in the game');
+ const observerItems = observerList.querySelectorAll('li');
+ expect(observerItems).toHaveLength(gameAreaController.mockObservers.length);
+ for (let i = 0; i < observerItems.length; i++) {
+ expect(observerItems[i]).toHaveTextContent(gameAreaController.mockObservers[i].userName);
+ }
+ });
+ it('Displays the correct observers when the game is updated', () => {
+ renderTicTacToeArea();
+ act(() => {
+ gameAreaController.mockObservers = [
+ new PlayerController('player 1', 'player 1', randomLocation()),
+ new PlayerController('player 2', 'player 2', randomLocation()),
+ new PlayerController('player 3', 'player 3', randomLocation()),
+ new PlayerController('player 4', 'player 4', randomLocation()),
+ ];
+ gameAreaController.emit('gameUpdated');
+ });
+ const observerList = screen.getByLabelText('list of observers in the game');
+ const observerItems = observerList.querySelectorAll('li');
+ expect(observerItems).toHaveLength(gameAreaController.mockObservers.length);
+ for (let i = 0; i < observerItems.length; i++) {
+ expect(observerItems[i]).toHaveTextContent(gameAreaController.mockObservers[i].userName);
+ }
+ });
+ });
+ describe('[T2.5] Players in the game text', () => {
+ it('Displays the username of the X player if the X player is in the game', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = new PlayerController(nanoid(), nanoid(), randomLocation());
+ renderTicTacToeArea();
+ const listOfPlayers = screen.getByLabelText('list of players in the game');
+ expect(
+ within(listOfPlayers).getByText(`X: ${gameAreaController.mockX?.userName}`),
+ ).toBeInTheDocument();
+ });
+ it('Displays the username of the O player if the O player is in the game', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockO = new PlayerController(nanoid(), nanoid(), randomLocation());
+ renderTicTacToeArea();
+ const listOfPlayers = screen.getByLabelText('list of players in the game');
+ expect(
+ within(listOfPlayers).getByText(`O: ${gameAreaController.mockO?.userName}`),
+ ).toBeInTheDocument();
+ });
+ it('Displays "X: (No player yet!)" if the X player is not in the game', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = undefined;
+ renderTicTacToeArea();
+ const listOfPlayers = screen.getByLabelText('list of players in the game');
+ expect(within(listOfPlayers).getByText(`X: (No player yet!)`)).toBeInTheDocument();
+ });
+ it('Displays "O: (No player yet!)" if the O player is not in the game', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockO = undefined;
+ renderTicTacToeArea();
+ const listOfPlayers = screen.getByLabelText('list of players in the game');
+ expect(within(listOfPlayers).getByText(`O: (No player yet!)`)).toBeInTheDocument();
+ });
+ it('Updates the X player when the game is updated', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ renderTicTacToeArea();
+ const listOfPlayers = screen.getByLabelText('list of players in the game');
+ expect(within(listOfPlayers).getByText(`X: (No player yet!)`)).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockX = new PlayerController(nanoid(), nanoid(), randomLocation());
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(
+ within(listOfPlayers).getByText(`X: ${gameAreaController.mockX?.userName}`),
+ ).toBeInTheDocument();
+ });
+ it('Updates the O player when the game is updated', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ renderTicTacToeArea();
+ const listOfPlayers = screen.getByLabelText('list of players in the game');
+ expect(within(listOfPlayers).getByText(`O: (No player yet!)`)).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockO = new PlayerController(nanoid(), nanoid(), randomLocation());
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(
+ within(listOfPlayers).getByText(`O: ${gameAreaController.mockO?.userName}`),
+ ).toBeInTheDocument();
+ });
+ });
+ describe('[T2.6] Game status text', () => {
+ it('Displays the correct text when the game is waiting to start', () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ renderTicTacToeArea();
+ expect(screen.getByText('Game not yet started', { exact: false })).toBeInTheDocument();
+ });
+ it('Displays the correct text when the game is in progress', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ renderTicTacToeArea();
+ expect(screen.getByText('Game in progress', { exact: false })).toBeInTheDocument();
+ });
+ it('Displays the correct text when the game is over', () => {
+ gameAreaController.mockStatus = 'OVER';
+ renderTicTacToeArea();
+ expect(screen.getByText('Game over', { exact: false })).toBeInTheDocument();
+ });
+ describe('When a game is in progress', () => {
+ beforeEach(() => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockMoveCount = 2;
+ gameAreaController.mockX = ourPlayer;
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ gameAreaController.mockWhoseTurn = gameAreaController.mockX;
+ gameAreaController.mockIsOurTurn = true;
+ });
+
+ it('Displays a message "Game in progress, {numMoves} moves in" and indicates whose turn it is when it is our turn', () => {
+ renderTicTacToeArea();
+ expect(
+ screen.getByText(`Game in progress, 2 moves in, currently your turn`, { exact: false }),
+ ).toBeInTheDocument();
+ });
+
+ it('Displays a message "Game in progress, {numMoves} moves in" and indicates whose turn it is when it is the other player\'s turn', () => {
+ gameAreaController.mockMoveCount = 1;
+ gameAreaController.mockWhoseTurn = gameAreaController.mockO;
+ gameAreaController.mockIsOurTurn = false;
+ renderTicTacToeArea();
+ expect(
+ screen.getByText(
+ `Game in progress, 1 moves in, currently ${gameAreaController.o?.userName}'s turn`,
+ { exact: false },
+ ),
+ ).toBeInTheDocument();
+ });
+
+ it('Updates the move count when the game is updated', () => {
+ renderTicTacToeArea();
+ expect(
+ screen.getByText(`Game in progress, 2 moves in`, { exact: false }),
+ ).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockMoveCount = 3;
+ gameAreaController.mockWhoseTurn = gameAreaController.mockO;
+ gameAreaController.mockIsOurTurn = false;
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(
+ screen.getByText(`Game in progress, 3 moves in`, { exact: false }),
+ ).toBeInTheDocument();
+ });
+ it('Updates the whose turn it is when the game is updated', () => {
+ renderTicTacToeArea();
+ expect(screen.getByText(`, currently your turn`, { exact: false })).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockMoveCount = 3;
+ gameAreaController.mockWhoseTurn = gameAreaController.mockO;
+ gameAreaController.mockIsOurTurn = false;
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(
+ screen.getByText(`, currently ${gameAreaController.mockO?.userName}'s turn`, {
+ exact: false,
+ }),
+ ).toBeInTheDocument();
+ });
+ });
+ it('Updates the game status text when the game is updated', () => {
+ gameAreaController.mockStatus = 'WAITING_TO_START';
+ renderTicTacToeArea();
+ expect(screen.getByText('Game not yet started', { exact: false })).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(screen.getByText('Game in progress', { exact: false })).toBeInTheDocument();
+ act(() => {
+ gameAreaController.mockStatus = 'OVER';
+ gameAreaController.emit('gameUpdated');
+ });
+ expect(screen.getByText('Game over', { exact: false })).toBeInTheDocument();
+ });
+ describe('When the game ends', () => {
+ it('Displays a toast with the winner', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = ourPlayer;
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ gameAreaController.mockWinner = ourPlayer;
+ renderTicTacToeArea();
+ act(() => {
+ gameAreaController.emit('gameEnd');
+ });
+ expect(mockToast).toBeCalledWith(
+ expect.objectContaining({
+ description: `You won!`,
+ }),
+ );
+ });
+ it('Displays a toast with the loser', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = ourPlayer;
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ gameAreaController.mockWinner = gameAreaController.mockO;
+ renderTicTacToeArea();
+ act(() => {
+ gameAreaController.emit('gameEnd');
+ });
+ expect(mockToast).toBeCalledWith(
+ expect.objectContaining({
+ description: `You lost :(`,
+ }),
+ );
+ });
+ it('Displays a toast with a tie', () => {
+ gameAreaController.mockStatus = 'IN_PROGRESS';
+ gameAreaController.mockIsPlayer = false;
+ gameAreaController.mockX = ourPlayer;
+ gameAreaController.mockO = new PlayerController('player O', 'player O', randomLocation());
+ gameAreaController.mockWinner = undefined;
+ renderTicTacToeArea();
+ act(() => {
+ gameAreaController.emit('gameEnd');
+ });
+ expect(mockToast).toBeCalledWith(
+ expect.objectContaining({
+ description: `Game ended in a tie`,
+ }),
+ );
+ });
+ });
+ });
+});
diff --git a/frontend/src/components/Town/interactables/TicTacToe/TicTacToeArea.tsx b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeArea.tsx
new file mode 100644
index 000000000..162a759b0
--- /dev/null
+++ b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeArea.tsx
@@ -0,0 +1,233 @@
+import {
+ Accordion,
+ AccordionButton,
+ AccordionIcon,
+ AccordionItem,
+ AccordionPanel,
+ Box,
+ Button,
+ Container,
+ Heading,
+ List,
+ ListItem,
+ Modal,
+ ModalCloseButton,
+ ModalContent,
+ ModalHeader,
+ ModalOverlay,
+ useToast,
+} from '@chakra-ui/react';
+import React, { useCallback, useEffect, useState } from 'react';
+import TicTacToeAreaController from '../../../../classes/interactable/TicTacToeAreaController';
+import PlayerController from '../../../../classes/PlayerController';
+import { useInteractable, useInteractableAreaController } from '../../../../classes/TownController';
+import useTownController from '../../../../hooks/useTownController';
+import { GameResult, GameStatus, InteractableID } from '../../../../types/CoveyTownSocket';
+import GameAreaInteractable from '../GameArea';
+import TicTacToeLeaderboard from '../Leaderboard';
+import TicTacToeBoard from './TicTacToeBoard';
+
+/**
+ * The TicTacToeArea component renders the TicTacToe game area.
+ * It renders the current state of the area, optionally allowing the player to join the game.
+ *
+ * It uses Chakra-UI components (does not use other GUI widgets)
+ *
+ * It uses the TicTacToeAreaController to get the current state of the game.
+ * It listens for the 'gameUpdated' and 'gameEnd' events on the controller, and re-renders accordingly.
+ * It subscribes to these events when the component mounts, and unsubscribes when the component unmounts. It also unsubscribes when the gameAreaController changes.
+ *
+ * It renders the following:
+ * - A leaderboard (@see Leaderboard.tsx), which is passed the game history as a prop
+ * - A list of observers' usernames (in a list with the aria-label 'list of observers in the game', one username per-listitem)
+ * - A list of players' usernames (in a list with the aria-label 'list of players in the game', one item for X and one for O)
+ * - If there is no player in the game, the username is '(No player yet!)'
+ * - List the players as (exactly) `X: ${username}` and `O: ${username}`
+ * - A message indicating the current game status:
+ * - If the game is in progress, the message is 'Game in progress, {moveCount} moves in, currently {whoseTurn}'s turn'. If it is currently our player's turn, the message is 'Game in progress, {moveCount} moves in, currently your turn'
+ * - Otherwise the message is 'Game {not yet started | over}.'
+ * - If the game is in status WAITING_TO_START or OVER, a button to join the game is displayed, with the text 'Join New Game'
+ * - Clicking the button calls the joinGame method on the gameAreaController
+ * - Before calling joinGame method, the button is disabled and has the property isLoading set to true, and is re-enabled when the method call completes
+ * - If the method call fails, a toast is displayed with the error message as the description of the toast (and status 'error')
+ * - Once the player joins the game, the button dissapears
+ * - The TicTacToeBoard component, which is passed the current gameAreaController as a prop (@see TicTacToeBoard.tsx)
+ *
+ * - When the game ends, a toast is displayed with the result of the game:
+ * - Tie: description 'Game ended in a tie'
+ * - Our player won: description 'You won!'
+ * - Our player lost: description 'You lost :('
+ *
+ */
+function TicTacToeArea({ interactableID }: { interactableID: InteractableID }): JSX.Element {
+ const gameAreaController = useInteractableAreaController(interactableID);
+ const townController = useTownController();
+
+ const [history, setHistory] = useState(gameAreaController.history);
+ const [gameStatus, setGameStatus] = useState(gameAreaController.status);
+ const [moveCount, setMoveCount] = useState(gameAreaController.moveCount);
+ const [observers, setObservers] = useState(gameAreaController.observers);
+ const [joiningGame, setJoiningGame] = useState(false);
+ const [x, setX] = useState(gameAreaController.x);
+ const [o, setO] = useState(gameAreaController.o);
+ const toast = useToast();
+
+ useEffect(() => {
+ const updateGameState = () => {
+ setHistory(gameAreaController.history);
+ setGameStatus(gameAreaController.status || 'WAITING_TO_START');
+ setMoveCount(gameAreaController.moveCount || 0);
+ setObservers(gameAreaController.observers);
+ setX(gameAreaController.x);
+ setO(gameAreaController.o);
+ };
+ gameAreaController.addListener('gameUpdated', updateGameState);
+ const onGameEnd = () => {
+ const winner = gameAreaController.winner;
+ if (!winner) {
+ toast({
+ title: 'Game over',
+ description: 'Game ended in a tie',
+ status: 'info',
+ });
+ } else if (winner === townController.ourPlayer) {
+ toast({
+ title: 'Game over',
+ description: 'You won!',
+ status: 'success',
+ });
+ } else {
+ toast({
+ title: 'Game over',
+ description: `You lost :(`,
+ status: 'error',
+ });
+ }
+ };
+ gameAreaController.addListener('gameEnd', onGameEnd);
+ return () => {
+ gameAreaController.removeListener('gameEnd', onGameEnd);
+ gameAreaController.removeListener('gameUpdated', updateGameState);
+ };
+ }, [townController, gameAreaController, toast]);
+
+ let gameStatusText = <>;
+ if (gameStatus === 'IN_PROGRESS') {
+ gameStatusText = (
+ <>
+ Game in progress, {moveCount} moves in, currently{' '}
+ {gameAreaController.whoseTurn === townController.ourPlayer
+ ? 'your'
+ : gameAreaController.whoseTurn?.userName + "'s"}{' '}
+ turn
+
+ );
+ } else {
+ let joinGameButton = <>;
+ if (
+ (gameAreaController.status === 'WAITING_TO_START' && !gameAreaController.isPlayer) ||
+ gameAreaController.status === 'OVER'
+ ) {
+ joinGameButton = (
+
+ );
+ }
+ gameStatusText = (
+
+ Game {gameStatus === 'WAITING_TO_START' ? 'not yet started' : 'over'}. {joinGameButton}
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ Leaderboard
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Observers
+
+
+
+
+
+
+ {observers.map(player => {
+ return {player.userName};
+ })}
+
+
+
+
+ {gameStatusText}
+
+ X: {x?.userName || '(No player yet!)'}
+ O: {o?.userName || '(No player yet!)'}
+
+
+
+ );
+}
+
+/**
+ * A wrapper component for the TicTacToeArea component.
+ * Determines if the player is currently in a tic tac toe area on the map, and if so,
+ * renders the TicTacToeArea component in a modal.
+ *
+ */
+export default function TicTacToeAreaWrapper(): JSX.Element {
+ const gameArea = useInteractable('gameArea');
+ const townController = useTownController();
+ const closeModal = useCallback(() => {
+ if (gameArea) {
+ townController.interactEnd(gameArea);
+ const controller = townController.getGameAreaController(gameArea);
+ controller.leaveGame();
+ }
+ }, [townController, gameArea]);
+
+ if (gameArea && gameArea.getData('type') === 'TicTacToe') {
+ return (
+
+
+
+ {gameArea.name}
+
+ ;
+
+
+ );
+ }
+ return <>;
+}
diff --git a/frontend/src/components/Town/interactables/TicTacToe/TicTacToeBoard.test.tsx b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeBoard.test.tsx
new file mode 100644
index 000000000..d65a57745
--- /dev/null
+++ b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeBoard.test.tsx
@@ -0,0 +1,291 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import TicTacToeBoard from './TicTacToeBoard';
+import TicTacToeAreaController, {
+ TicTacToeCell,
+} from '../../../../classes/interactable/TicTacToeAreaController';
+import { mock } from 'jest-mock-extended';
+import { nanoid } from 'nanoid';
+import React from 'react';
+import { GameArea, GameStatus, TicTacToeGameState } from '../../../../types/CoveyTownSocket';
+import TownController from '../../../../classes/TownController';
+import PlayerController from '../../../../classes/PlayerController';
+import { act } from 'react-dom/test-utils';
+
+const mockToast = jest.fn();
+jest.mock('@chakra-ui/react', () => {
+ const ui = jest.requireActual('@chakra-ui/react');
+ const mockUseToast = () => mockToast;
+ return {
+ ...ui,
+ useToast: mockUseToast,
+ };
+});
+
+class MockTicTacToeAreaController extends TicTacToeAreaController {
+ makeMove = jest.fn();
+
+ mockBoard: TicTacToeCell[][] = [
+ [undefined, undefined, undefined],
+ [undefined, undefined, undefined],
+ [undefined, undefined, undefined],
+ ];
+
+ mockIsPlayer = false;
+
+ mockIsOurTurn = false;
+
+ public constructor() {
+ super(nanoid(), mock>(), mock());
+ }
+
+ /*
+ For ease of testing, we will mock the board property
+ to return a copy of the mockBoard property, so that
+ we can change the mockBoard property and then check
+ that the board property is updated correctly.
+ */
+ get board() {
+ const copy = this.mockBoard.concat([]);
+ for (let i = 0; i < 3; i++) {
+ copy[i] = copy[i].concat([]);
+ }
+ return copy;
+ }
+
+ get isOurTurn() {
+ return this.mockIsOurTurn;
+ }
+
+ get x(): PlayerController | undefined {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get o(): PlayerController | undefined {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get observers(): PlayerController[] {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get moveCount(): number {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get winner(): PlayerController | undefined {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get whoseTurn(): PlayerController | undefined {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get status(): GameStatus {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ get isPlayer() {
+ return this.mockIsPlayer;
+ }
+
+ get gamePiece(): 'X' | 'O' {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ public isActive(): boolean {
+ throw new Error('Method should not be called within this component.');
+ }
+
+ public mockReset() {
+ this.mockBoard = [
+ ['X', 'O', undefined],
+ [undefined, 'X', undefined],
+ [undefined, undefined, 'O'],
+ ];
+ this.makeMove.mockReset();
+ }
+}
+describe('TicTacToeBoard', () => {
+ // Spy on console.error and intercept react key warnings to fail test
+ let consoleErrorSpy: jest.SpyInstance;
+ beforeAll(() => {
+ // Spy on console.error and intercept react key warnings to fail test
+ consoleErrorSpy = jest.spyOn(global.console, 'error');
+ consoleErrorSpy.mockImplementation((message?, ...optionalParams) => {
+ const stringMessage = message as string;
+ if (stringMessage.includes && stringMessage.includes('children with the same key,')) {
+ throw new Error(stringMessage.replace('%s', optionalParams[0]));
+ } else if (stringMessage.includes && stringMessage.includes('warning-keys')) {
+ throw new Error(stringMessage.replace('%s', optionalParams[0]));
+ }
+ // eslint-disable-next-line no-console -- we are wrapping the console with a spy to find react warnings
+ console.warn(message, ...optionalParams);
+ });
+ });
+ afterAll(() => {
+ consoleErrorSpy.mockRestore();
+ });
+
+ const gameAreaController = new MockTicTacToeAreaController();
+ beforeEach(() => {
+ gameAreaController.mockReset();
+ mockToast.mockReset();
+ });
+ async function checkBoard({
+ clickable,
+ checkMakeMove,
+ checkToast,
+ }: {
+ clickable?: boolean;
+ checkMakeMove?: boolean;
+ checkToast?: boolean;
+ }) {
+ const cells = screen.getAllByRole('button');
+ // There should be exactly 9 buttons: one per-cell (and no other buttons in this component)
+ expect(cells).toHaveLength(9);
+ // Each cell should have the correct aria-label
+ for (let i = 0; i < 9; i++) {
+ expect(cells[i]).toHaveAttribute('aria-label', `Cell ${Math.floor(i / 3)},${i % 3}`);
+ }
+ // Each cell should have the correct text content
+ for (let i = 0; i < 9; i++) {
+ const cell = gameAreaController.board[Math.floor(i / 3)][i % 3];
+ expect(cells[i]).toHaveTextContent(cell ? cell : '');
+ }
+ if (clickable) {
+ // Each cell should be clickable if it is the player's turn
+ for (let i = 0; i < 9; i++) {
+ expect(cells[i]).toBeEnabled();
+ gameAreaController.makeMove.mockReset();
+ mockToast.mockClear();
+
+ fireEvent.click(cells[i]);
+ if (checkMakeMove) {
+ expect(gameAreaController.makeMove).toBeCalledWith(Math.floor(i / 3), i % 3);
+ if (checkToast) {
+ gameAreaController.makeMove.mockClear();
+ expect(mockToast).not.toBeCalled();
+ mockToast.mockClear();
+ const expectedMessage = `Invalid Move ${nanoid()}}`;
+ gameAreaController.makeMove.mockRejectedValue(new Error(expectedMessage));
+ fireEvent.click(cells[i]);
+ await waitFor(() => {
+ expect(mockToast).toBeCalledWith(
+ expect.objectContaining({
+ status: 'error',
+ description: `Error: ${expectedMessage}`,
+ }),
+ );
+ });
+ }
+ }
+ }
+ } else {
+ // Each cell should be disabled if it is not the player's turn
+ for (let i = 0; i < 9; i++) {
+ expect(cells[i]).toBeDisabled();
+ }
+ }
+ }
+ describe('[T3.1] When observing the game', () => {
+ beforeEach(() => {
+ gameAreaController.mockIsPlayer = false;
+ });
+ it('renders the board with the correct number of cells', async () => {
+ render();
+ const cells = screen.getAllByRole('button');
+ // There should be exactly 9 buttons: one per-cell (and no other buttons in this component)
+ expect(cells).toHaveLength(9);
+ // Each cell should have the correct aria-label
+ for (let i = 0; i < 9; i++) {
+ expect(cells[i]).toHaveAttribute('aria-label', `Cell ${Math.floor(i / 3)},${i % 3}`);
+ }
+ // Each cell should have the correct text content
+ expect(cells[0]).toHaveTextContent('X');
+ expect(cells[1]).toHaveTextContent('O');
+ expect(cells[2]).toHaveTextContent('');
+ expect(cells[3]).toHaveTextContent('');
+ expect(cells[4]).toHaveTextContent('X');
+ expect(cells[5]).toHaveTextContent('');
+ expect(cells[6]).toHaveTextContent('');
+ expect(cells[7]).toHaveTextContent('');
+ expect(cells[8]).toHaveTextContent('O');
+ });
+ it('does not make a move when a cell is clicked, and cell is disabled', async () => {
+ render();
+ const cells = screen.getAllByRole('button');
+ for (let i = 0; i < 9; i++) {
+ expect(cells[i]).toBeDisabled();
+ fireEvent.click(cells[i]);
+ expect(gameAreaController.makeMove).not.toHaveBeenCalled();
+ expect(mockToast).not.toHaveBeenCalled();
+ }
+ });
+ it('updates the board displayed in response to boardChanged events', async () => {
+ render();
+ gameAreaController.mockBoard = [
+ ['O', 'X', 'O'],
+ ['X', 'O', 'X'],
+ ['O', 'X', 'O'],
+ ];
+ act(() => {
+ gameAreaController.emit('boardChanged', gameAreaController.mockBoard);
+ });
+ await checkBoard({});
+ gameAreaController.mockBoard = [
+ ['X', 'O', 'X'],
+ [undefined, undefined, 'X'],
+ ['O', 'X', undefined],
+ ];
+ act(() => {
+ gameAreaController.emit('boardChanged', gameAreaController.mockBoard);
+ });
+ await checkBoard({});
+ });
+ });
+ describe('[T3.2] When playing the game', () => {
+ beforeEach(() => {
+ gameAreaController.mockIsPlayer = true;
+ gameAreaController.mockIsOurTurn = true;
+ });
+ it("enables cells when it is the player's turn", async () => {
+ render();
+ await checkBoard({ clickable: true });
+ gameAreaController.mockIsOurTurn = false;
+ act(() => {
+ gameAreaController.emit('turnChanged', gameAreaController.mockIsOurTurn);
+ });
+ await checkBoard({ clickable: false });
+ });
+ it('makes a move when a cell is clicked', async () => {
+ render();
+ await checkBoard({ clickable: true, checkMakeMove: true });
+ });
+ it('displays an error toast when an invalid move is made', async () => {
+ render();
+ await checkBoard({ clickable: true, checkMakeMove: true, checkToast: true });
+ });
+ it('updates the board in response to boardChanged events', async () => {
+ render();
+ await checkBoard({ clickable: true });
+ gameAreaController.mockBoard = [
+ ['O', 'X', 'O'],
+ ['X', 'O', 'X'],
+ ['O', 'X', 'O'],
+ ];
+ act(() => {
+ gameAreaController.emit('boardChanged', gameAreaController.mockBoard);
+ });
+ await checkBoard({ clickable: true });
+ });
+ it("disables cells when it is not the player's turn", async () => {
+ render();
+ await checkBoard({ clickable: true });
+ gameAreaController.mockIsOurTurn = false;
+ act(() => {
+ gameAreaController.emit('turnChanged', gameAreaController.mockIsOurTurn);
+ });
+ await checkBoard({ clickable: false });
+ });
+ });
+});
diff --git a/frontend/src/components/Town/interactables/TicTacToe/TicTacToeBoard.tsx b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeBoard.tsx
new file mode 100644
index 000000000..7a90263a8
--- /dev/null
+++ b/frontend/src/components/Town/interactables/TicTacToe/TicTacToeBoard.tsx
@@ -0,0 +1,101 @@
+import { Button, chakra, Container, useToast } from '@chakra-ui/react';
+import React, { useEffect, useState } from 'react';
+import TicTacToeAreaController, {
+ TicTacToeCell,
+} from '../../../../classes/interactable/TicTacToeAreaController';
+import { TicTacToeGridPosition } from '../../../../types/CoveyTownSocket';
+
+export type TicTacToeGameProps = {
+ gameAreaController: TicTacToeAreaController;
+};
+
+/**
+ * A component that will render a single cell in the TicTacToe board, styled
+ */
+const StyledTicTacToeSquare = chakra(Button, {
+ baseStyle: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexBasis: '33%',
+ border: '1px solid black',
+ height: '33%',
+ fontSize: '50px',
+ _disabled: {
+ opacity: '100%',
+ },
+ },
+});
+/**
+ * A component that will render the TicTacToe board, styled
+ */
+const StyledTicTacToeBoard = chakra(Container, {
+ baseStyle: {
+ display: 'flex',
+ width: '400px',
+ height: '400px',
+ padding: '5px',
+ flexWrap: 'wrap',
+ },
+});
+
+/**
+ * A component that renders the TicTacToe board
+ *
+ * Renders the TicTacToe board as a "StyledTicTacToeBoard", which consists of 9 "StyledTicTacToeSquare"s
+ * (one for each cell in the board, starting from the top left and going left to right, top to bottom).
+ * Each StyledTicTacToeSquare has an aria-label property that describes the cell's position in the board,
+ * formatted as `Cell ${rowIndex},${colIndex}`.
+ *
+ * The board is re-rendered whenever the board changes, and each cell is re-rendered whenever the value
+ * of that cell changes.
+ *
+ * If the current player is in the game, then each StyledTicTacToeSquare is clickable, and clicking
+ * on it will make a move in that cell. If there is an error making the move, then a toast will be
+ * displayed with the error message as the description of the toast. If it is not the current player's
+ * turn, then the StyledTicTacToeSquare will be disabled.
+ *
+ * @param gameAreaController the controller for the TicTacToe game
+ */
+export default function TicTacToeBoard({ gameAreaController }: TicTacToeGameProps): JSX.Element {
+ const [board, setBoard] = useState(gameAreaController.board);
+ const [isOurTurn, setIsOurTurn] = useState(gameAreaController.isOurTurn);
+ const toast = useToast();
+ useEffect(() => {
+ gameAreaController.addListener('turnChanged', setIsOurTurn);
+ gameAreaController.addListener('boardChanged', setBoard);
+ return () => {
+ gameAreaController.removeListener('boardChanged', setBoard);
+ gameAreaController.removeListener('turnChanged', setIsOurTurn);
+ };
+ }, [gameAreaController]);
+ return (
+
+ {board.map((row, rowIndex) => {
+ return row.map((cell, colIndex) => {
+ return (
+ {
+ try {
+ await gameAreaController.makeMove(
+ rowIndex as TicTacToeGridPosition,
+ colIndex as TicTacToeGridPosition,
+ );
+ } catch (e) {
+ toast({
+ title: 'Error making move',
+ description: (e as Error).toString(),
+ status: 'error',
+ });
+ }
+ }}
+ disabled={!isOurTurn}
+ aria-label={`Cell ${rowIndex},${colIndex}`}>
+ {cell}
+
+ );
+ });
+ })}
+
+ );
+}
diff --git a/frontend/src/components/Town/interactables/ViewingArea.ts b/frontend/src/components/Town/interactables/ViewingArea.ts
index dec51745c..49c78e9f5 100644
--- a/frontend/src/components/Town/interactables/ViewingArea.ts
+++ b/frontend/src/components/Town/interactables/ViewingArea.ts
@@ -27,7 +27,6 @@ export default class ViewingArea extends Interactable {
{ color: '#FFFFFF', backgroundColor: '#000000' },
);
this._labelText.setVisible(false);
- this.townController.getViewingAreaController(this);
this.setDepth(-1);
}
diff --git a/frontend/src/components/Town/interactables/ViewingAreaVideo.test.tsx b/frontend/src/components/Town/interactables/ViewingAreaVideo.test.tsx
index 39efbee81..61e038c35 100644
--- a/frontend/src/components/Town/interactables/ViewingAreaVideo.test.tsx
+++ b/frontend/src/components/Town/interactables/ViewingAreaVideo.test.tsx
@@ -6,7 +6,9 @@ import React from 'react';
import { act } from 'react-dom/test-utils';
import * as ReactPlayer from 'react-player';
import TownController from '../../../classes/TownController';
-import ViewingAreaController, { ViewingAreaEvents } from '../../../classes/ViewingAreaController';
+import ViewingAreaController, {
+ ViewingAreaEvents,
+} from '../../../classes/interactable/ViewingAreaController';
import TownControllerContext from '../../../contexts/TownControllerContext';
import { ViewingAreaVideo } from './ViewingAreaVideo';
@@ -103,6 +105,8 @@ describe('[T4] Viewing Area Video', () => {
id: 'test',
isPlaying: true,
video: 'test',
+ occupants: [],
+ type: 'ViewingArea',
});
addListenerSpy = jest.spyOn(viewingArea, 'addListener');
@@ -228,6 +232,8 @@ describe('[T4] Viewing Area Video', () => {
id: 'test',
isPlaying: true,
video: 'test',
+ occupants: [],
+ type: 'ViewingArea',
});
const newAddListenerSpy = jest.spyOn(newViewingArea, 'addListener');
renderData.rerender(renderViewingArea(newViewingArea, townController));
diff --git a/frontend/src/components/Town/interactables/ViewingAreaVideo.tsx b/frontend/src/components/Town/interactables/ViewingAreaVideo.tsx
index f27f0e4aa..d5a04b1b2 100644
--- a/frontend/src/components/Town/interactables/ViewingAreaVideo.tsx
+++ b/frontend/src/components/Town/interactables/ViewingAreaVideo.tsx
@@ -1,8 +1,8 @@
import { Container } from '@chakra-ui/react';
import React, { useEffect, useRef, useState } from 'react';
import ReactPlayer from 'react-player';
-import { useInteractable, useViewingAreaController } from '../../../classes/TownController';
-import ViewingAreaController from '../../../classes/ViewingAreaController';
+import { useInteractable, useInteractableAreaController } from '../../../classes/TownController';
+import ViewingAreaController from '../../../classes/interactable/ViewingAreaController';
import useTownController from '../../../hooks/useTownController';
import SelectVideoModal from './SelectVideoModal';
import ViewingAreaInteractable from './ViewingArea';
@@ -119,7 +119,9 @@ export function ViewingArea({
viewingArea: ViewingAreaInteractable;
}): JSX.Element {
const townController = useTownController();
- const viewingAreaController = useViewingAreaController(viewingArea.name);
+ const viewingAreaController = useInteractableAreaController(
+ viewingArea.name,
+ );
const [selectIsOpen, setSelectIsOpen] = useState(viewingAreaController.video === undefined);
const [viewingAreaVideoURL, setViewingAreaVideoURL] = useState(viewingAreaController.video);
useEffect(() => {
diff --git a/frontend/src/components/VideoCall/VideoFrontend/components/BackgroundSelectionDialog/BackgroundSelectionDialog.tsx b/frontend/src/components/VideoCall/VideoFrontend/components/BackgroundSelectionDialog/BackgroundSelectionDialog.tsx
index 654f8a2cb..31c9a0270 100644
--- a/frontend/src/components/VideoCall/VideoFrontend/components/BackgroundSelectionDialog/BackgroundSelectionDialog.tsx
+++ b/frontend/src/components/VideoCall/VideoFrontend/components/BackgroundSelectionDialog/BackgroundSelectionDialog.tsx
@@ -37,7 +37,7 @@ function BackgroundSelectionDialog() {
paper: classes.drawer,
}}
>
- setIsBackgroundSelectionOpen(false)} />
+ {/* setIsBackgroundSelectionOpen(false)} />
@@ -50,7 +50,7 @@ function BackgroundSelectionDialog() {
key={image}
/>
))}
-
+ */}
);
}
diff --git a/frontend/src/components/VideoCall/VideoFrontend/components/MenuBar/Menu/Menu.tsx b/frontend/src/components/VideoCall/VideoFrontend/components/MenuBar/Menu/Menu.tsx
index c2a094b63..f7cf439c2 100644
--- a/frontend/src/components/VideoCall/VideoFrontend/components/MenuBar/Menu/Menu.tsx
+++ b/frontend/src/components/VideoCall/VideoFrontend/components/MenuBar/Menu/Menu.tsx
@@ -79,7 +79,7 @@ export default function Menu(props: { buttonClassName?: string }) {
- {isSupported && (
+ {/* {isSupported && (