An interactive "Who's That Pokémon?" game built with Vue 3, TypeScript, and modern web technologies. Test your Pokémon knowledge while enjoying smooth animations, visual feedback, and a comprehensive scoring system.
Note: Replace with actual screenshots when available
Experience the thrill of identifying Pokémon with modern UI and smooth animations
- Interactive Quiz: Identify Pokémon from their silhouettes
- Multiple Choice: Choose from 4 randomized options per round
- Real-time Feedback: Instant visual responses for correct/incorrect answers
- Progressive Difficulty: Continuous rounds with varied Pokémon selection
- Points & Levels: Earn points to unlock new levels (100 points per level)
- Streak System: Build consecutive correct answers for bonus points
- Statistics Tracking: Monitor accuracy, best streak, and round progress
- Achievement Notifications: Celebrate milestones with visual rewards
- Modern UI: Glass morphism design with gradient backgrounds
- Smooth Animations: CSS animations for transitions and feedback states
- Responsive Design: Optimized for desktop and mobile devices
- Visual Effects: Confetti celebrations and interactive hover states
- Loading States: Engaging loading screens with animated elements
- Composables Pattern: Centralized game logic with
usePokemonGame - Component Structure: Modular Vue 3 components with TypeScript
- API Integration: Fetch Pokémon data from external APIs
- State Management: Reactive state handling with Vue's Composition API
- Frontend: Vue 3 + TypeScript + Vite
- Styling: Tailwind CSS + Custom CSS animations
- Testing: Vitest + Vue Test Utils
- API: Axios for HTTP requests
- Effects: Canvas Confetti for celebrations
- Development: ESLint + Prettier for code quality
- PokemonGame: Main game page with UI orchestration
- PokemonPicture: Displays Pokémon silhouettes with reveal animations
- PokemonOptions: Interactive multiple-choice buttons
- GameStats: Real-time statistics dashboard with progress tracking
- Node.js (v18 or higher)
- pnpm package manager
# Clone the repository
git clone <repository-url>
# Navigate to project directory
cd pokemon-game
# Install dependencies
pnpm install# Start development server
pnpm dev# Run unit tests
pnpm test:unit
# Run tests with coverage
pnpm test:unit --coverage# Build for production
pnpm build
# Preview production build
pnpm preview- Base Points: 10 points per correct answer
- Streak Bonus: Additional points for consecutive correct answers (max +10)
- Level System: Every 100 points unlocks a new level
- Progress Tracking: Visual progress bar showing advancement to next level
- Success States: Green highlighting with confetti animations
- Error States: Red highlighting with shake animations
- Hover Effects: Interactive button states with shimmer effects
- Achievement Badges: Pop-up notifications for milestones
- Mobile Optimized: Touch-friendly interface for mobile devices
- Adaptive Layout: Grid system that adjusts to screen size
- Performance: Optimized animations for various device capabilities
The project includes comprehensive test coverage:
- Unit Tests: 81 test cases covering all components and composables
- Component Testing: Vue Test Utils for component behavior validation
- Composable Testing: Business logic validation with proper mocking
- Mock Strategies: Efficient API mocking to prevent external dependencies
src/
├── assets/ # Static assets and global styles
├── modules/
│ └── pokemon/
│ ├── api/ # API integration layer
│ ├── components/ # Vue components
│ ├── composables/ # Game logic composables
│ ├── interfaces/ # TypeScript type definitions
│ └── pages/ # Main game page
└── main.ts # Application entry point
- Follow the existing code style and conventions
- Write tests for new features
- Ensure all tests pass before submitting
- Use meaningful commit messages