diff --git a/backend/constants.py b/backend/constants.py index 14a1ce1..fa29548 100644 --- a/backend/constants.py +++ b/backend/constants.py @@ -20,6 +20,8 @@ GAME_UPDATE = "game:update" # Sends updated game state GAME_SUBMIT_KEYWORD = "game:submit_keyword" # Team lead submits keyword and count GAME_SUBMIT_GUESS = "game:submit_guess" # Team members submit their card guesses +GAME_SELECT_CARD = "game:select_card" # Team member selects/deselects a card +GAME_CARD_SELECTION_UPDATE = "game:card_selection_update" # Broadcast card selection changes GAME_ERROR = "game:error" # Game-related errors # Game card types diff --git a/backend/sockets/game.py b/backend/sockets/game.py index 1109a08..3c99e98 100644 --- a/backend/sockets/game.py +++ b/backend/sockets/game.py @@ -7,6 +7,8 @@ GAME_UPDATE, GAME_SUBMIT_KEYWORD, GAME_SUBMIT_GUESS, + GAME_SELECT_CARD, + GAME_CARD_SELECTION_UPDATE, FIELD_IS_TEAM_LEAD, FIELD_TEAM, ) @@ -17,7 +19,8 @@ get_sanitized_game_state, submit_keyword, submit_guess, - end_turn + end_turn, + handle_card_selection ) @@ -226,4 +229,59 @@ def handle_end_turn(data): end_turn(game_state) # Send updated game state to all players - send_game_update(lobby_id, game_state, lobby['participants']) \ No newline at end of file + send_game_update(lobby_id, game_state, lobby['participants']) + + @socketio.on(GAME_SELECT_CARD) + def handle_select_card(data): + """Handle team member selecting/deselecting a card""" + lobby_id = data.get('lobby_id') + user_id = data.get('user_id') + card_id = data.get('card_id') + is_selected = data.get('is_selected', True) + + if not lobby_id or not user_id or card_id is None: + emit(GAME_ERROR, {"message": "Invalid card selection data"}) + return + + # Get the game state + game_state = get_game(lobby_id) + if not game_state: + emit(GAME_ERROR, {"message": "Game not found"}) + return + + # Get the lobby data + lobbies = get_lobbies() + if lobby_id not in lobbies: + emit(GAME_ERROR, {"message": "Lobby not found"}) + return + + lobby = lobbies[lobby_id] + + # Verify the user is on the active team but is not a team lead + user_participant = next((p for p in lobby['participants'] if p['id'] == user_id), None) + if not user_participant: + emit(GAME_ERROR, {"message": "User not found in lobby"}) + return + + user_team = user_participant.get(FIELD_TEAM) + is_team_lead = user_participant.get(FIELD_IS_TEAM_LEAD, False) + + if user_team != game_state['active_team'] or is_team_lead: + emit(GAME_ERROR, {"message": "Only team members on the active team can select cards"}) + return + + # Handle the card selection + success = handle_card_selection(game_state, user_id, card_id, is_selected) + + if not success: + emit(GAME_ERROR, {"message": "Invalid card selection"}) + return + + # Broadcast the card selection update to all players in the lobby + emit(GAME_CARD_SELECTION_UPDATE, { + "selected_cards": game_state.get("selected_cards", {}), + "user_id": user_id, + "card_id": card_id, + "is_selected": is_selected, + "user_name": user_participant.get('display_name', 'Unknown') + }, room=lobby_id) diff --git a/backend/utils/game.py b/backend/utils/game.py index 07585b0..f5c02db 100644 --- a/backend/utils/game.py +++ b/backend/utils/game.py @@ -50,7 +50,8 @@ def create_game(lobby_id): "active_keyword": None, "board": board, "game_over": False, - "winner": None + "winner": None, + "selected_cards": {} # Tracks real-time card selections: {user_id: [card_ids]} } active_games[lobby_id] = game_state @@ -159,7 +160,8 @@ def get_sanitized_game_state(game_state, user_id, participants): "active_keyword": game_state["active_keyword"], "game_over": game_state["game_over"], "winner": game_state["winner"], - "board": sanitized_board + "board": sanitized_board, + "selected_cards": game_state.get("selected_cards", {}) } return sanitized @@ -290,4 +292,34 @@ def end_turn(game_state): if game_state["active_team"] == TEAM1: game_state["round_number"] += 1 + return True + + +def handle_card_selection(game_state, user_id, card_id, is_selected): + """Handle a team member selecting or deselecting a card""" + if not game_state or game_state.get("game_over", False): + return False + + if game_state["game_phase"] != "team_guessing": + return False + + # Initialize selected_cards if it doesn't exist + if "selected_cards" not in game_state: + game_state["selected_cards"] = {} + + # Initialize user's selections if they don't exist + if user_id not in game_state["selected_cards"]: + game_state["selected_cards"][user_id] = [] + + user_selections = game_state["selected_cards"][user_id] + + if is_selected: + # Add card to user's selections if not already selected + if card_id not in user_selections: + user_selections.append(card_id) + else: + # Remove card from user's selections + if card_id in user_selections: + user_selections.remove(card_id) + return True \ No newline at end of file diff --git a/docs/frontend-test-suite.md b/docs/frontend-test-suite.md new file mode 100644 index 0000000..0bfa8c2 --- /dev/null +++ b/docs/frontend-test-suite.md @@ -0,0 +1,327 @@ +# Frontend Test Suite Documentation + +## Overview + +This document provides a comprehensive overview of the frontend test suite for the Lockout Game application. The test suite is built using Vitest and Testing Library, providing thorough coverage of components, contexts, hooks, and utilities. + +## Test Statistics + +- **Total Test Files**: 19 +- **Total Tests**: 103 (97 passed, 6 skipped) +- **Test Categories**: Components, Contexts, Hooks, Utilities +- **Testing Framework**: Vitest with React Testing Library +- **Coverage Areas**: Unit tests, Integration tests, UI behavior tests + +## Test Structure + +### Components Tests (`/src/components/__tests__/`) + +#### Core Game Components + +**GameBoard.test.jsx** - 15 tests + +- Card border behavior for hackers vs team members +- Selection counter display and functionality +- Hacker legend display (card type indicators) +- Submit button behavior and validation +- Dark mode compatibility +- Revealed card interactions +- Comprehensive coverage of the main game board functionality + +**GameContent.test.jsx** - 9 tests + +- Game state rendering and display +- Host controls and permissions +- Team lead vs team member UI differences +- Keyword submission functionality +- End game functionality + +**Game.test.jsx** - 3 tests + +- Overall game component rendering +- Game state management +- Component integration + +#### Lobby Management Components + +**CreateLobby.test.jsx** - 4 tests + +- Lobby creation form validation +- Host setup and configuration +- Error handling for lobby creation +- User input validation + +**JoinLobby.test.jsx** - 3 tests + +- Lobby joining functionality +- User identification and validation +- Error handling for invalid lobbies + +**Lobby.test.jsx** - 2 tests + +- Lobby state management +- Participant management + +**LobbyActions.test.jsx** - 5 tests + +- Host action controls (start game, end game) +- Permission-based action availability +- Action confirmation and error handling + +**LobbyContent.test.jsx** - 4 tests + +- Lobby information display +- Participant list rendering +- Real-time updates + +**LobbyDetails.test.jsx** - 5 tests + +- Lobby metadata display +- Configuration settings +- Status indicators + +**LobbyParticipants.test.jsx** - 3 tests + +- Participant list management +- Team assignment display +- Role indicators (host, team lead) + +#### UI and Navigation Components + +**Navbar.test.jsx** - 7 tests (6 skipped) + +- Navigation functionality +- User authentication state +- Menu interactions +- Route handling + +**LandingPage.test.jsx** - 3 tests + +- Initial page rendering +- Navigation to lobby creation/joining +- User onboarding flow + +#### Team and Host Management + +**TeamTable.test.jsx** - 10 tests + +- Team composition display +- Member role assignments +- Team lead designation +- Interactive team management + +**HostControls.test.jsx** - 8 tests + +- Host-specific control panel +- Game state management controls +- Permission validation +- Control availability based on game state + +#### Environment and Sanity + +**envSanity.test.jsx** - 1 test + +- Environment configuration validation +- Basic setup verification + +### Context Tests (`/src/context/__tests__/`) + +**GameProvider.test.jsx** - 9 tests + +- Game state management +- Context provider functionality +- State updates and propagation +- Game logic integration + +**LobbyProvider.game.test.jsx** - 5 tests + +- Lobby-to-game state transitions +- Context switching between lobby and game states +- Data persistence during transitions + +### Hooks Tests (`/src/hooks/__tests__/`) + +**useWebex.test.js** - 3 tests + +- Webex SDK integration +- Connection management +- Error handling for SDK failures +- Real-time communication setup + +### Utilities Tests (`/src/utils/__tests__/`) + +**api.test.js** - 4 tests + +- API client functionality +- Error handling and response processing +- HTTP request/response validation +- Network error scenarios + +## Test Infrastructure + +### Testing Tools and Libraries + +- **Vitest**: Modern test runner with ES modules support +- **React Testing Library**: Component testing utilities +- **@testing-library/jest-dom**: Custom matchers for DOM assertions +- **Material-UI Test Utils**: Theme and component testing support + +### Mock Infrastructure + +**Mock Files** (`/src/test/mocks/`) + +- `mockApi.js`: API call mocking +- `mockGameContext.js`: Game state mocking utilities +- `mockLobbyContext.js`: Lobby state mocking utilities +- `mockReactRouterDom.js`: Router navigation mocking +- `mockUseWebex.js`: Webex SDK mocking + +### Test Utilities + +**testUtils.jsx**: Custom render functions with providers + +- Context providers wrapper +- Theme provider integration +- Router provider setup +- Common test setup utilities + +**setup.js**: Global test configuration + +- Testing library setup +- Mock configurations +- Global test utilities + +## Key Testing Patterns + +### 1. Component Isolation + +Each component is tested in isolation with mocked dependencies, ensuring unit test reliability. + +### 2. Context Integration + +Tests verify that components correctly consume and interact with React contexts. + +### 3. User Interaction Testing + +Comprehensive testing of user interactions including clicks, form submissions, and navigation. + +### 4. Permission-Based Testing + +Extensive testing of role-based functionality (host vs participant, team lead vs team member). + +### 5. Error Handling + +Robust testing of error scenarios and edge cases. + +### 6. Real-time Features + +Testing of live updates, WebSocket connections, and real-time state synchronization. + +## Coverage Areas + +### Game Logic + +- Card selection and validation +- Turn management +- Score calculation +- Win/lose conditions +- Keyword submission and validation + +### User Interface + +- Component rendering +- Interactive elements +- Form validation +- Navigation flows +- Responsive behavior + +### State Management + +- Context providers +- State updates +- Data persistence +- Cross-component communication + +### Integration Points + +- API communication +- WebSocket connections +- External SDK integration +- Route handling + +## Test Quality Standards + +### Accessibility + +Tests include accessibility considerations using Testing Library's accessibility-focused queries. + +### Performance + +Tests verify that components render efficiently and handle large datasets appropriately. + +### Error Boundaries + +Comprehensive error handling testing ensures graceful failure modes. + +### Browser Compatibility + +Tests are designed to work across different browser environments. + +## Recent Additions + +### GameBoard Component Testing + +The GameBoard test suite was recently expanded to include comprehensive testing of the new selection behavior: + +- **Selection Border Visibility**: Tests verify that hackers cannot see selection borders while team members can +- **Card Type Borders**: Ensures hackers retain access to card type identification through color borders +- **Selection Counters**: Validates that selection counters remain visible to all players +- **Role-Based Interactions**: Comprehensive testing of different user roles and their permitted actions + +## Running Tests + +### Full Test Suite + +```bash +npm test +``` + +### Specific Test File + +```bash +npm test -- GameBoard.test.jsx +``` + +### Watch Mode + +```bash +npm test --watch +``` + +### Coverage Report + +```bash +npm test --coverage +``` + +## Test Maintenance + +### Best Practices + +1. Keep tests focused and isolated +2. Use descriptive test names +3. Mock external dependencies +4. Test user behavior, not implementation details +5. Maintain test data consistency + +### Regular Maintenance + +- Update tests when components change +- Add tests for new features +- Remove obsolete tests +- Keep mock data current +- Review and update test utilities + +## Conclusion + +The frontend test suite provides comprehensive coverage of the Lockout Game application, ensuring reliability, maintainability, and quality. The tests cover all major functionality areas and provide confidence for ongoing development and refactoring efforts. diff --git a/frontend/src/components/GameBoard.jsx b/frontend/src/components/GameBoard.jsx index f09b77e..0a7b504 100644 --- a/frontend/src/components/GameBoard.jsx +++ b/frontend/src/components/GameBoard.jsx @@ -28,6 +28,7 @@ const GameTile = ({ isUserTurn, onCardSelect, selected, + otherPlayersSelections, }) => { const theme = useTheme(); const isDarkMode = theme.palette.mode === 'dark'; @@ -70,11 +71,21 @@ const GameTile = ({ } }; - // Define border for the card if it's visible to the team lead + // Define border for the card const getCardBorder = () => { - // If card is selected by team member during their turn - if (selected && !card.revealed) { - return `2px solid ${isDarkMode ? '#ff9800' : '#ed6c02'}`; + // If card is selected by current user during their turn (only for team members, not hackers) + if (selected && !card.revealed && !isTeamLead) { + return `3px solid ${isDarkMode ? '#ff9800' : '#ed6c02'}`; + } + + // If other players have selected this card, show a different border (only for team members, not hackers) + if ( + otherPlayersSelections && + otherPlayersSelections.length > 0 && + !card.revealed && + !isTeamLead + ) { + return `2px dashed ${isDarkMode ? '#9c27b0' : '#673ab7'}`; } // If card type is visible to the team lead @@ -101,31 +112,59 @@ const GameTile = ({ const isSelectable = isTeamMember && isUserTurn && !card.revealed; return ( - isSelectable && onCardSelect(card.id)} - sx={{ - height: 80, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - bgcolor: colors.bgcolor, - color: colors.color, - border: border, - cursor: isSelectable ? 'pointer' : 'default', - transition: 'all 0.2s ease', - '&:hover': isSelectable - ? { - transform: 'translateY(-2px)', - boxShadow: 6, - } - : {}, - }} - > - - {card.word} - - + + isSelectable && onCardSelect(card.id)} + sx={{ + height: 80, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + bgcolor: colors.bgcolor, + color: colors.color, + border: border, + cursor: isSelectable ? 'pointer' : 'default', + transition: 'all 0.2s ease', + '&:hover': isSelectable + ? { + transform: 'translateY(-2px)', + boxShadow: 6, + } + : {}, + }} + > + + {card.word} + + + + {/* Show indicator if other players have selected this card */} + {otherPlayersSelections && + otherPlayersSelections.length > 0 && + !card.revealed && ( + + {otherPlayersSelections.length} + + )} + ); }; @@ -141,15 +180,17 @@ GameTile.propTypes = { isUserTurn: PropTypes.bool.isRequired, onCardSelect: PropTypes.func.isRequired, selected: PropTypes.bool.isRequired, + otherPlayersSelections: PropTypes.arrayOf(PropTypes.string).isRequired, }; /** * Game Board component that displays a grid of word tiles */ const GameBoard = forwardRef( - ({ isUserTeamLead, userTeam, isUserTurn }, ref) => { + ({ isUserTeamLead, userTeam, isUserTurn, user }, ref) => { const theme = useTheme(); - const { gameState, handleSubmitGuess } = useGameContext(); + const { gameState, handleSubmitGuess, handleCardSelection } = + useGameContext(); const [boardData, setBoardData] = useState(gameState?.board || []); const [selectedCards, setSelectedCards] = useState([]); const isTeamMember = userTeam && !isUserTeamLead; @@ -188,21 +229,29 @@ const GameBoard = forwardRef( // Handle card selection by team members const handleCardSelect = (cardId) => { setSelectedCards((prev) => { + const isCurrentlySelected = prev.includes(cardId); + let newSelections; + // If already selected, deselect it - if (prev.includes(cardId)) { - return prev.filter((id) => id !== cardId); + if (isCurrentlySelected) { + newSelections = prev.filter((id) => id !== cardId); + } else { + // If we've already selected the maximum number of cards (based on keyword) + // remove the first selected card and add this new one + if (activeKeyword && prev.length >= activeKeyword.count) { + const updatedSelections = [...prev]; + updatedSelections.shift(); // Remove the first (oldest) selection + newSelections = [...updatedSelections, cardId]; + } else { + // Otherwise add this card to selections + newSelections = [...prev, cardId]; + } } - // If we've already selected the maximum number of cards (based on keyword) - // remove the first selected card and add this new one - if (activeKeyword && prev.length >= activeKeyword.count) { - const newSelections = [...prev]; - newSelections.shift(); // Remove the first (oldest) selection - return [...newSelections, cardId]; - } + // Emit real-time card selection to other players + handleCardSelection(cardId, !isCurrentlySelected); - // Otherwise add this card to selections - return [...prev, cardId]; + return newSelections; }); }; @@ -260,18 +309,31 @@ const GameBoard = forwardRef( - {boardData.map((card) => ( - - - - ))} + {boardData.map((card) => { + // Get other players who have selected this card (excluding current user) + const otherPlayersSelections = Object.entries( + gameState?.selectedCards || {}, + ) + .filter( + ([userId, selectedCardIds]) => + userId !== user?.id && selectedCardIds.includes(card.id), + ) + .map(([userId]) => userId); + + return ( + + + + ); + })} {/* Legend for hackers */} @@ -356,6 +418,9 @@ GameBoard.propTypes = { isUserTeamLead: PropTypes.bool.isRequired, userTeam: PropTypes.string, isUserTurn: PropTypes.bool.isRequired, + user: PropTypes.shape({ + id: PropTypes.string.isRequired, + }), }; GameBoard.displayName = 'GameBoard'; diff --git a/frontend/src/components/GameContent.jsx b/frontend/src/components/GameContent.jsx index 2c4610d..eafaf7a 100644 --- a/frontend/src/components/GameContent.jsx +++ b/frontend/src/components/GameContent.jsx @@ -60,6 +60,7 @@ const GameContent = ({ endGame, isUserHost, lobby, user, getCurrentTeam }) => { userTeam={userTeam} activeKeyword={gameState.activeKeyword} isUserTurn={isUserTurn && isTeamGuessingPhase && isTeamMember} + user={user} /> {/* Team Lead keyword input */} diff --git a/frontend/src/components/__tests__/GameBoard.test.jsx b/frontend/src/components/__tests__/GameBoard.test.jsx new file mode 100644 index 0000000..30f2f81 --- /dev/null +++ b/frontend/src/components/__tests__/GameBoard.test.jsx @@ -0,0 +1,343 @@ +// frontend/src/components/__tests__/GameBoard.test.jsx +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { screen, render, fireEvent } from '@testing-library/react'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import GameBoard from '../GameBoard'; +import { GameContext } from '../../context/GameContext'; +import { TEAMS, CARD_TYPES } from '../../constants'; +import { + createMockGameContext, + createMockGameState, +} from '../../test/mocks/mockGameContext'; + +// Helper function to render component with theme and context +const renderWithProviders = ( + ui, + contextOverrides = {}, + themeMode = 'light', +) => { + const theme = createTheme({ + palette: { + mode: themeMode, + }, + }); + + const gameContextValue = createMockGameContext(contextOverrides); + + return render( + + {ui} + , + ); +}; + +describe('GameBoard', () => { + const mockBoard = [ + { id: 1, word: 'Apple', type: CARD_TYPES.TEAM1_CARD, revealed: false }, + { id: 2, word: 'Banana', type: CARD_TYPES.TEAM2_CARD, revealed: false }, + { id: 3, word: 'Cherry', type: CARD_TYPES.PENALTY, revealed: false }, + { id: 4, word: 'Date', type: CARD_TYPES.NEUTRAL, revealed: false }, + { id: 5, word: 'Elderberry', type: CARD_TYPES.TEAM1_CARD, revealed: true }, + ]; + + const mockUser = { id: 'user-1' }; + const mockActiveKeyword = { word: 'Fruit', count: 2, team: TEAMS.TEAM1 }; + + const defaultProps = { + isUserTeamLead: false, + userTeam: TEAMS.TEAM1, + isUserTurn: true, + user: mockUser, + }; + + const gameStateWithBoard = createMockGameState({ + board: mockBoard, + activeKeyword: mockActiveKeyword, + selectedCards: { + 'user-2': [1], // Another user has selected card 1 + 'user-3': [2, 3], // Another user has selected cards 2 and 3 + }, + }); + + beforeEach(() => { + vi.clearAllMocks(); + }); + + describe('Card Border Behavior', () => { + it('shows card type borders for team leads (hackers)', () => { + const hackerProps = { + ...defaultProps, + isUserTeamLead: true, + isUserTurn: false, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + // Test that cards are rendered (we can't easily test specific border styles in JSDOM) + expect(screen.getByText('Apple')).toBeInTheDocument(); + expect(screen.getByText('Banana')).toBeInTheDocument(); + expect(screen.getByText('Cherry')).toBeInTheDocument(); + expect(screen.getByText('Date')).toBeInTheDocument(); + expect(screen.getByText('Elderberry')).toBeInTheDocument(); + }); + + it('does not show selection borders for team leads (hackers)', () => { + const hackerProps = { + ...defaultProps, + isUserTeamLead: true, + isUserTurn: false, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + // Selection counters should still be visible for hackers + const selectionCounters = screen.getAllByText('1'); + expect(selectionCounters.length).toBeGreaterThan(0); // Multiple cards with 1 selection each + }); + + it('shows selection borders for team members', () => { + const memberProps = { + ...defaultProps, + isUserTeamLead: false, + isUserTurn: true, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + // Team members should see selection indicators + const selectionCounters = screen.getAllByText('1'); + expect(selectionCounters.length).toBeGreaterThan(0); // Multiple cards with 1 selection each + }); + + it('allows team members to select cards', () => { + const mockHandleCardSelection = vi.fn(); + const memberProps = { + ...defaultProps, + isUserTeamLead: false, + isUserTurn: true, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + handleCardSelection: mockHandleCardSelection, + }); + + // Click on a card that's not revealed + const appleCard = screen.getByText('Apple'); + fireEvent.click(appleCard); + + expect(mockHandleCardSelection).toHaveBeenCalledWith(1, true); + }); + + it('prevents team leads (hackers) from selecting cards', () => { + const mockHandleCardSelection = vi.fn(); + const hackerProps = { + ...defaultProps, + isUserTeamLead: true, + isUserTurn: false, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + handleCardSelection: mockHandleCardSelection, + }); + + // Try to click on a card - should not trigger selection + const appleCard = screen.getByText('Apple'); + fireEvent.click(appleCard); + + expect(mockHandleCardSelection).not.toHaveBeenCalled(); + }); + }); + + describe('Selection Counter Display', () => { + it('displays selection counters for all players', () => { + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + // Check that selection counters are visible - use getAllByText since there are multiple "1"s + const selectionCounters = screen.getAllByText('1'); + expect(selectionCounters.length).toBeGreaterThan(0); + }); + + it('does not show selection counter for cards with no selections', () => { + const gameStateNoSelections = createMockGameState({ + board: mockBoard, + activeKeyword: mockActiveKeyword, + selectedCards: {}, + }); + + renderWithProviders(, { + gameState: gameStateNoSelections, + }); + + // Should not show any selection counters + expect(screen.queryByText('1')).not.toBeInTheDocument(); + expect(screen.queryByText('2')).not.toBeInTheDocument(); + }); + + it('excludes current user from selection counter', () => { + const gameStateWithCurrentUser = createMockGameState({ + board: mockBoard, + activeKeyword: mockActiveKeyword, + selectedCards: { + 'user-1': [1], // Current user selected card 1 + 'user-2': [1], // Another user also selected card 1 + }, + }); + + renderWithProviders(, { + gameState: gameStateWithCurrentUser, + }); + + // Should only show counter of 1 (excluding current user) + expect(screen.getByText('1')).toBeInTheDocument(); + }); + }); + + describe('Hacker Legend Display', () => { + it('shows card type legend for hackers', () => { + const hackerProps = { + ...defaultProps, + isUserTeamLead: true, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + expect(screen.getByText('Bluewave')).toBeInTheDocument(); + expect(screen.getByText('Redshift')).toBeInTheDocument(); + expect(screen.getByText('Cyber-Security Trap')).toBeInTheDocument(); + expect(screen.getByText('Honeypot')).toBeInTheDocument(); + }); + + it('does not show legend for team members', () => { + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + expect(screen.queryByText('Bluewave')).not.toBeInTheDocument(); + expect(screen.queryByText('Redshift')).not.toBeInTheDocument(); + expect(screen.queryByText('Cyber-Security Trap')).not.toBeInTheDocument(); + expect(screen.queryByText('Honeypot')).not.toBeInTheDocument(); + }); + }); + + describe('Submit Button Behavior', () => { + it('shows submit button for team members with selections', () => { + const mockHandleCardSelection = vi.fn(); + const memberProps = { + ...defaultProps, + isUserTeamLead: false, + isUserTurn: true, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + handleCardSelection: mockHandleCardSelection, + }); + + // Select a card first + const appleCard = screen.getByText('Apple'); + fireEvent.click(appleCard); + + // Submit button should appear after selection + expect( + screen.getByRole('button', { name: /Submit Guess/i }), + ).toBeInTheDocument(); + }); + + it('does not show submit button for hackers', () => { + const hackerProps = { + ...defaultProps, + isUserTeamLead: true, + isUserTurn: false, + }; + + renderWithProviders(, { + gameState: gameStateWithBoard, + }); + + expect( + screen.queryByRole('button', { name: /Submit Guess/i }), + ).not.toBeInTheDocument(); + }); + + it('disables submit button when too many cards selected', () => { + const mockHandleCardSelection = vi.fn(); + const memberProps = { + ...defaultProps, + isUserTeamLead: false, + isUserTurn: true, + }; + + // Create a keyword with count of 1 + const gameStateWithLimitedKeyword = createMockGameState({ + board: mockBoard, + activeKeyword: { word: 'Test', count: 1, team: TEAMS.TEAM1 }, + selectedCards: {}, + }); + + renderWithProviders(, { + gameState: gameStateWithLimitedKeyword, + handleCardSelection: mockHandleCardSelection, + }); + + // Select one card first + const appleCard = screen.getByText('Apple'); + fireEvent.click(appleCard); + + // Now select another card (which should replace the first due to count limit) + const bananaCard = screen.getByText('Banana'); + fireEvent.click(bananaCard); + + // Submit button should be enabled since only one card is effectively selected + const submitButton = screen.getByRole('button', { + name: /Submit Guess/i, + }); + expect(submitButton).not.toBeDisabled(); + }); + }); + + describe('Dark Mode', () => { + it('renders correctly in dark mode', () => { + renderWithProviders( + , + { + gameState: gameStateWithBoard, + }, + 'dark', + ); + + expect(screen.getByText('Apple')).toBeInTheDocument(); + expect(screen.getByText('Game Board')).toBeInTheDocument(); + }); + }); + + describe('Revealed Cards', () => { + it('shows revealed card colors and prevents interaction', () => { + const mockHandleCardSelection = vi.fn(); + + renderWithProviders(, { + gameState: gameStateWithBoard, + handleCardSelection: mockHandleCardSelection, + }); + + // Elderberry is revealed in our mock data + const revealedCard = screen.getByText('Elderberry'); + expect(revealedCard).toBeInTheDocument(); + + // Clicking revealed cards should not trigger selection + fireEvent.click(revealedCard); + expect(mockHandleCardSelection).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/frontend/src/constants.js b/frontend/src/constants.js index ba64928..b490a14 100644 --- a/frontend/src/constants.js +++ b/frontend/src/constants.js @@ -20,6 +20,8 @@ export const SOCKET_EVENTS = { GAME_LEAVE: 'leave_game', GAME_SUBMIT_KEYWORD: 'game:submit_keyword', GAME_SUBMIT_GUESS: 'game:submit_guess', + GAME_SELECT_CARD: 'game:select_card', + GAME_CARD_SELECTION_UPDATE: 'game:card_selection_update', GAME_END_TURN: 'end_turn', }; diff --git a/frontend/src/context/GameProvider.jsx b/frontend/src/context/GameProvider.jsx index eb5df09..5551c3f 100644 --- a/frontend/src/context/GameProvider.jsx +++ b/frontend/src/context/GameProvider.jsx @@ -17,6 +17,7 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { [TEAMS.TEAM1]: { remainingCards: 0 }, [TEAMS.TEAM2]: { remainingCards: 0 }, }, + selectedCards: {}, // Tracks real-time card selections: {user_id: [card_ids]} winner: null, }); const [notification, setNotification] = useState(null); @@ -51,6 +52,7 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { updatedGameState.team_data?.[TEAMS.TEAM2]?.remaining_cards || 0, }, }, + selectedCards: updatedGameState.selected_cards || {}, gameStartedAt: updatedGameState.game_started_at, roundNumber: updatedGameState.round_number, winner: updatedGameState.winner, @@ -86,6 +88,15 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { }); }); + // Handle real-time card selection updates + socket.on(SOCKET_EVENTS.GAME_CARD_SELECTION_UPDATE, (selectionData) => { + console.log('Received card selection update:', selectionData); + setGameState((prevState) => ({ + ...prevState, + selectedCards: selectionData.selected_cards || {}, + })); + }); + // Join game when component mounts if (lobbyId && user?.id) { console.log(`Joining game for lobby: ${lobbyId}`); @@ -99,6 +110,7 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { return () => { socket.off(SOCKET_EVENTS.GAME_UPDATE); socket.off(SOCKET_EVENTS.GAME_ERROR); + socket.off(SOCKET_EVENTS.GAME_CARD_SELECTION_UPDATE); if (lobbyId && user?.id) { socket.emit(SOCKET_EVENTS.GAME_LEAVE, { @@ -153,6 +165,20 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { }); }, [socket, lobbyId, user]); + const handleCardSelection = useCallback( + (cardId, isSelected) => { + if (!lobbyId || !user?.id || !socket) return; + + socket.emit(SOCKET_EVENTS.GAME_SELECT_CARD, { + lobby_id: lobbyId, + user_id: user.id, + card_id: cardId, + is_selected: isSelected, + }); + }, + [socket, lobbyId, user], + ); + const handleCloseNotification = useCallback(() => { setNotification(null); }, []); @@ -163,8 +189,9 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { gameState, notification, handleSubmitKeyword, - handleSubmitGuess, // <-- add to context + handleSubmitGuess, handleEndTurn, + handleCardSelection, handleCloseNotification, }), [ @@ -173,6 +200,7 @@ export const GameProvider = ({ children, socket, lobbyId, user }) => { handleSubmitKeyword, handleSubmitGuess, handleEndTurn, + handleCardSelection, handleCloseNotification, ], );