feat: add comprehensive game configuration system
Add a centralized game configuration system that allows customizable scoring mechanics and game rules. Users can now set default game configurations that persist across sessions, and individual quizzes can have their own configuration overrides. ## New Features ### Game Configuration Options - Shuffle Questions: Randomize question order when starting a game - Shuffle Answers: Randomize answer positions for each question - Host Participates: Toggle whether the host plays as a competitor or spectates (host now shows as 'Spectator' when not participating) - Streak Bonus: Multiplied points for consecutive correct answers, with configurable threshold and multiplier values - Comeback Bonus: Extra points for players ranked below top 3 - Wrong Answer Penalty: Deduct percentage of max points for incorrect answers (configurable percentage) - First Correct Bonus: Extra points for the first player to answer correctly on each question ### Default Settings Management - New Settings icon in landing page header (authenticated users only) - DefaultConfigModal for editing user-wide default game settings - Default configs are loaded when creating new quizzes - Defaults persist to database via new user API endpoints ### Reusable UI Components - GameConfigPanel: Comprehensive toggle-based settings panel with expandable sub-options, tooltips, and suggested values based on question count - DefaultConfigModal: Modal wrapper for editing default configurations ## Technical Changes ### Frontend - New useUserConfig hook for fetching/saving user default configurations - QuizEditor now uses GameConfigPanel instead of inline toggle checkboxes - GameScreen handles spectator mode with disabled answer buttons - Updated useGame hook with new scoring calculations and config state - Improved useAuthenticatedFetch with deduped silent refresh and redirect-once pattern to prevent multiple auth redirects ### Backend - Added game_config column to quizzes table (JSON storage) - Added default_game_config column to users table - New PATCH endpoint for quiz config updates: /api/quizzes/:id/config - New PUT endpoint for user defaults: /api/users/me/default-config - Auto-migration in connection.ts for existing databases ### Scoring System - New calculatePoints() function in constants.ts handles all scoring logic including streaks, comebacks, penalties, and first-correct bonus - New calculateBasePoints() for time-based point calculation - New getPlayerRank() helper for comeback bonus eligibility ### Tests - Added tests for DefaultConfigModal component - Added tests for GameConfigPanel component - Added tests for QuizEditor config integration - Added tests for useUserConfig hook - Updated API tests for new endpoints ## Type Changes - Added GameConfig interface with all configuration options - Added DEFAULT_GAME_CONFIG constant with sensible defaults - Quiz type now includes optional config property
This commit is contained in:
parent
90fba17a1e
commit
af21f2bcdc
23 changed files with 2925 additions and 133 deletions
330
tests/components/DefaultConfigModal.test.tsx
Normal file
330
tests/components/DefaultConfigModal.test.tsx
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
import React from 'react';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { DefaultConfigModal } from '../../components/DefaultConfigModal';
|
||||
import { DEFAULT_GAME_CONFIG } from '../../types';
|
||||
import type { GameConfig } from '../../types';
|
||||
|
||||
describe('DefaultConfigModal', () => {
|
||||
const mockOnClose = vi.fn();
|
||||
const mockOnChange = vi.fn();
|
||||
const mockOnSave = vi.fn();
|
||||
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: mockOnClose,
|
||||
config: { ...DEFAULT_GAME_CONFIG },
|
||||
onChange: mockOnChange,
|
||||
onSave: mockOnSave,
|
||||
saving: false,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('rendering', () => {
|
||||
it('renders nothing when isOpen is false', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} isOpen={false} />);
|
||||
expect(screen.queryByText('Default Game Settings')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders modal when isOpen is true', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
expect(screen.getByText('Default Game Settings')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays subtitle explaining the settings', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
expect(screen.getByText('Applied to all new quizzes')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders GameConfigPanel with config', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
expect(screen.getByText('Shuffle Questions')).toBeInTheDocument();
|
||||
expect(screen.getByText('Host Participates')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Cancel button', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
expect(screen.getByText('Cancel')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders Save Defaults button', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
expect(screen.getByText('Save Defaults')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders close X button', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
const closeButtons = screen.getAllByRole('button');
|
||||
const xButton = closeButtons.find(btn => btn.querySelector('svg.lucide-x'));
|
||||
expect(xButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('interactions - happy path', () => {
|
||||
it('calls onClose when Cancel is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByText('Cancel'));
|
||||
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onClose when X button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
const closeButtons = screen.getAllByRole('button');
|
||||
const xButton = closeButtons.find(btn => btn.querySelector('svg.lucide-x'));
|
||||
await user.click(xButton!);
|
||||
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onClose when backdrop is clicked', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
const backdrop = document.querySelector('.fixed.inset-0');
|
||||
fireEvent.click(backdrop!);
|
||||
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('does not close when modal content is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByText('Default Game Settings'));
|
||||
|
||||
expect(mockOnClose).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls onSave when Save Defaults is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByText('Save Defaults'));
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onChange when config is modified', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByText('Shuffle Questions'));
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith({
|
||||
...DEFAULT_GAME_CONFIG,
|
||||
shuffleQuestions: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('interactions - unhappy path / edge cases', () => {
|
||||
it('disables Save button when saving is true', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} saving={true} />);
|
||||
|
||||
const saveButton = screen.getByText('Saving...').closest('button');
|
||||
expect(saveButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('shows Saving... text when saving', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} saving={true} />);
|
||||
|
||||
expect(screen.getByText('Saving...')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Save Defaults')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not call onSave when button is disabled and clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} saving={true} />);
|
||||
|
||||
const saveButton = screen.getByText('Saving...').closest('button')!;
|
||||
await user.click(saveButton);
|
||||
|
||||
expect(mockOnSave).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Cancel button is still clickable when saving', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} saving={true} />);
|
||||
|
||||
await user.click(screen.getByText('Cancel'));
|
||||
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('handles rapid clicks on Save button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
const saveButton = screen.getByText('Save Defaults');
|
||||
await user.click(saveButton);
|
||||
await user.click(saveButton);
|
||||
await user.click(saveButton);
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
it('remains functional after re-opening', async () => {
|
||||
const user = userEvent.setup();
|
||||
const { rerender } = render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByText('Save Defaults'));
|
||||
expect(mockOnSave).toHaveBeenCalledTimes(1);
|
||||
|
||||
rerender(<DefaultConfigModal {...defaultProps} isOpen={false} />);
|
||||
expect(screen.queryByText('Default Game Settings')).not.toBeInTheDocument();
|
||||
|
||||
rerender(<DefaultConfigModal {...defaultProps} isOpen={true} />);
|
||||
await user.click(screen.getByText('Save Defaults'));
|
||||
expect(mockOnSave).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('config propagation', () => {
|
||||
const getCheckboxForRow = (labelText: string) => {
|
||||
const label = screen.getByText(labelText);
|
||||
const row = label.closest('[class*="bg-white rounded-xl"]')!;
|
||||
return row.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
||||
};
|
||||
|
||||
it('displays provided config values', () => {
|
||||
const customConfig: GameConfig = {
|
||||
...DEFAULT_GAME_CONFIG,
|
||||
shuffleQuestions: true,
|
||||
streakBonusEnabled: true,
|
||||
streakThreshold: 5,
|
||||
};
|
||||
|
||||
render(<DefaultConfigModal {...defaultProps} config={customConfig} />);
|
||||
|
||||
expect(getCheckboxForRow('Shuffle Questions').checked).toBe(true);
|
||||
expect(screen.getByDisplayValue('5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('updates display when config prop changes', () => {
|
||||
const { rerender } = render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
expect(getCheckboxForRow('Shuffle Questions').checked).toBe(false);
|
||||
|
||||
const newConfig = { ...DEFAULT_GAME_CONFIG, shuffleQuestions: true };
|
||||
rerender(<DefaultConfigModal {...defaultProps} config={newConfig} />);
|
||||
|
||||
expect(getCheckboxForRow('Shuffle Questions').checked).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('state transitions', () => {
|
||||
it('transitions from not saving to saving correctly', () => {
|
||||
const { rerender } = render(<DefaultConfigModal {...defaultProps} saving={false} />);
|
||||
|
||||
expect(screen.getByText('Save Defaults')).toBeInTheDocument();
|
||||
|
||||
rerender(<DefaultConfigModal {...defaultProps} saving={true} />);
|
||||
|
||||
expect(screen.getByText('Saving...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('transitions from saving back to not saving', () => {
|
||||
const { rerender } = render(<DefaultConfigModal {...defaultProps} saving={true} />);
|
||||
|
||||
expect(screen.getByText('Saving...')).toBeInTheDocument();
|
||||
|
||||
rerender(<DefaultConfigModal {...defaultProps} saving={false} />);
|
||||
|
||||
expect(screen.getByText('Save Defaults')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('transitions from open to closed preserves state for re-open', () => {
|
||||
const customConfig = { ...DEFAULT_GAME_CONFIG, shuffleQuestions: true };
|
||||
const { rerender } = render(<DefaultConfigModal {...defaultProps} config={customConfig} />);
|
||||
|
||||
const getCheckbox = () => {
|
||||
const label = screen.getByText('Shuffle Questions');
|
||||
const row = label.closest('[class*="bg-white rounded-xl"]')!;
|
||||
return row.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
||||
};
|
||||
|
||||
expect(getCheckbox().checked).toBe(true);
|
||||
|
||||
rerender(<DefaultConfigModal {...defaultProps} config={customConfig} isOpen={false} />);
|
||||
rerender(<DefaultConfigModal {...defaultProps} config={customConfig} isOpen={true} />);
|
||||
|
||||
expect(getCheckbox().checked).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('accessibility', () => {
|
||||
it('all interactive elements are focusable', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
buttons.forEach(button => {
|
||||
expect(button).not.toHaveAttribute('tabindex', '-1');
|
||||
});
|
||||
});
|
||||
|
||||
it('modal traps focus within when open', () => {
|
||||
render(<DefaultConfigModal {...defaultProps} />);
|
||||
|
||||
const modal = document.querySelector('[class*="bg-white rounded-2xl"]');
|
||||
expect(modal).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('with all config options enabled', () => {
|
||||
it('renders all nested settings when all options are enabled', () => {
|
||||
const allEnabledConfig: GameConfig = {
|
||||
shuffleQuestions: true,
|
||||
shuffleAnswers: true,
|
||||
hostParticipates: true,
|
||||
streakBonusEnabled: true,
|
||||
streakThreshold: 3,
|
||||
streakMultiplier: 1.2,
|
||||
comebackBonusEnabled: true,
|
||||
comebackBonusPoints: 100,
|
||||
penaltyForWrongAnswer: true,
|
||||
penaltyPercent: 30,
|
||||
firstCorrectBonusEnabled: true,
|
||||
firstCorrectBonusPoints: 75,
|
||||
};
|
||||
|
||||
render(<DefaultConfigModal {...defaultProps} config={allEnabledConfig} />);
|
||||
|
||||
expect(screen.getByText('Streak threshold')).toBeInTheDocument();
|
||||
expect(screen.getByText('Multiplier')).toBeInTheDocument();
|
||||
expect(screen.getAllByText('Bonus points').length).toBe(2);
|
||||
expect(screen.getByText('Penalty')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('async save behavior', () => {
|
||||
it('handles async onSave that resolves', async () => {
|
||||
const user = userEvent.setup();
|
||||
const asyncOnSave = vi.fn().mockResolvedValue(undefined);
|
||||
|
||||
render(<DefaultConfigModal {...defaultProps} onSave={asyncOnSave} />);
|
||||
|
||||
await user.click(screen.getByText('Save Defaults'));
|
||||
|
||||
expect(asyncOnSave).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('handles async onSave that rejects', async () => {
|
||||
const user = userEvent.setup();
|
||||
const asyncOnSave = vi.fn().mockRejectedValue(new Error('Save failed'));
|
||||
|
||||
render(<DefaultConfigModal {...defaultProps} onSave={asyncOnSave} />);
|
||||
|
||||
await user.click(screen.getByText('Save Defaults'));
|
||||
|
||||
expect(asyncOnSave).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue