Card Duel

Overview#

Card Duel is a sleek and modern card game that brings the classic high-card duel to the web. Built with Next.js 14 and Tailwind CSS, the game features smooth animations, custom card designs, and an engaging user experience. Players compete against the computer in a simple yet addictive game of chance where the highest card wins.

Key Features#

🃏 Simple & Engaging Gameplay#

Classic high-card game mechanics:

• Deal cards with a single click or keyboard press
• Compare card values to determine the winner
• Build win streaks by winning consecutive rounds
• Quick rounds for fast-paced entertainment

🎴 Custom Card Design#

Professional card visuals:

• Custom designed faces for royal cards (Jack, Queen, King)
• Clean, modern card styling
• Distinct suits with proper symbols (♠ ♥ ♦ ♣)
• Responsive card sizing for all devices

🌟 Smooth Animations#

Polished visual effects:

• Card flip animations on deal
• Smooth transitions between states
• Winner highlight effects
• Responsive hover states

🏆 Score Tracking#

Comprehensive statistics:

• Player vs Computer score tracking
• Win streak counter
• Win rate percentage calculation
• Round counter
• Reset functionality to start fresh

⌨️ Keyboard Controls#

Accessibility-focused input:

• Space/Enter - Deal cards
• R - Reset game
• Mouse click support for all actions
• Clear visual feedback for all interactions

📱 Responsive Design#

Optimized for all devices:

• Desktop-first layout with mobile adaptations
• Touch-friendly controls
• Readable card values on small screens
• Consistent experience across devices

Technical Implementation#

Frontend Architecture#

• Next.js 14 with App Router
• React 18 with hooks for state management
• TypeScript for type safety
• Tailwind CSS 4 for styling and animations

Component Structure#

Card Component:

• Displays individual card with suit and value
• Handles flip animation
• Responsive sizing
• Custom styling for face cards

Game Component:

• Manages game state (scores, cards, streaks)
• Handles game logic and winner determination
• Controls animation timing
• Tracks statistics

Game Logic#

Deck Creation:

// 52-card standard deck
const suits = ['♠', '♥', '♦', '♣'];
const values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

Card Values:

• Ace: 14 points (highest)
• King: 13 points
• Queen: 12 points
• Jack: 11 points
• Number cards: Face value (2-10)

Winner Determination: Simple comparison of card values with tie handling.

State Management#

React hooks manage:

• Current cards for player and computer
• Score tracking
• Win streak counter
• Game state (dealing, showing results)
• Statistics calculation

Animation System#

CSS transitions and Tailwind utilities create:

• Card flip effects (3D transforms)
• Fade in/out transitions
• Scale animations on hover
• Winner highlight effects

Challenges & Solutions#

Challenge: Smooth Card Animations#

Solution: Used CSS 3D transforms with transform-style: preserve-3d to create realistic card flip animations. Timing functions ensure smooth, natural-looking flips.

Challenge: Fair Randomization#

Solution: Implemented Fisher-Yates shuffle algorithm for proper deck randomization. Each deal draws from a shuffled deck to ensure fair gameplay.

Challenge: State Timing#

Solution: Carefully orchestrated state updates with setTimeout to control animation timing. Cards flip before revealing results, creating suspense.

Challenge: Keyboard Accessibility#

Solution: Added keyboard event listeners with proper key handling. Visual feedback ensures users know their input is registered.

Game Design#

User Experience Flow#

1. Initial State - Clean interface with "DEAL" button
2. Dealing - Cards flip with animation
3. Result - Winner highlighted, scores updated
4. Next Round - Button ready for next deal

Visual Hierarchy#

• Large, clear card displays
• Prominent score display
• Obvious action buttons
• Subtle statistics panel

Feedback Systems#

• Visual winner indication
• Score updates with animation
• Streak counter for motivation
• Win rate for long-term tracking

Results#

• ✅ Engaging, replayable card game
• ✅ Smooth animations and transitions
• ✅ Comprehensive score tracking
• ✅ Keyboard and mouse controls
• ✅ Fully responsive design
• ✅ Clean, modern UI

Future Enhancements#

• 🎮 Multiple game modes (best of 3, first to 10, etc.)
• 🎯 Betting system with virtual chips
• 👥 Multiplayer support
• 🏅 Achievement system
• 📊 Detailed statistics and history
• 🎨 Multiple card deck themes
• 🔊 Sound effects and music
• 💾 Save game progress
• 🎲 Additional card game variants
• 🌐 Leaderboard system

Lessons Learned#

This project provided valuable experience with:

• CSS 3D transforms and animations
• Game state management in React
• Timing and sequencing of animations
• Keyboard event handling
• Random number generation and shuffling algorithms
• TypeScript for game logic
• Responsive game design
• User feedback systems
• Clean, minimal UI design

Card Duel demonstrates how simple game mechanics combined with polished animations and user experience can create an engaging web application.

"Not all those who wander are lost, but in this game, the highest card wins!"