Skip to content

README.md

Latest commit

 

History

History
188 lines (133 loc) · 4.85 KB

README.md

File metadata and controls

188 lines (133 loc) · 4.85 KB

🎮 Modern Tic-Tac-Toe Game

A feature-rich, responsive Tic-Tac-Toe game built with React and Tailwind CSS, featuring multiple themes, player customization, game history tracking, and persistent storage.

Deployment

🌟 Features

🎯 Core Gameplay

  • Classic 3x3 Tic-Tac-Toe mechanics
  • Two-player turn-based system
  • Win detection with highlighted winning line
  • Draw detection when the board is full
  • Game timer tracking match duration
  • Reset game to start fresh

⚡ Advanced Features

🎭 Customizable Player Names

  • Set custom Player X and O names
  • Names persist across sessions

🕒 Game History & Time Travel

  • Complete move history with timestamps
  • Jump to any previous game state
  • Sort moves (Ascending/Descending)
  • History persists across sessions

📊 Statistics Tracking

  • Tracks win counts for both players
  • Tracks total draws
  • Persistent across browser sessions

🎨 Theme System

Choose from three visually distinct themes:

  1. Light Theme – Clean, modern UI with blue accents
  2. Dark Theme – Dark mode for reduced eye strain
  3. Colorful Theme – Vibrant gradient backgrounds

🛠️ Technical Features

  • Fully responsive (mobile-first)
  • Local Storage Integration for persistence
  • Modular component-based architecture
  • Optimized re-renders for smooth UI
  • Accessibility-friendly design

🏗️ Technology Stack

Tech Usage
React 18 Frontend framework
Tailwind CSS Styling & theming
Lucide React, Material UI Icons
Vite Fast build tool
React Hooks State management
Local Storage API Persistent data

📁 Project Structure

src/
 ├── components/
 │   ├── GameBoard.jsx     # Main game grid
 │   ├── GameHistory.jsx   # Move history
 │   ├── GameSettings.jsx  # Settings panel
 │   ├── GameStatistics.jsx     # Win & draw tracking
 │   ├── Header.jsx        # Application header
 │   └── Footer.jsx        # Application footer
 ├── App.jsx               # Main application
 ├── App.css               # Global styles
 └── index.js              # Entry point

🚀 Getting Started

🔧 Prerequisites

Ensure you have Node.js (v22 or higher) installed.

📥 Installation

  1. Clone the repository:

    git clone https://github.com/TheUzair/tic-tac-toe.git
cd tic-tac-toe

  2. Install dependencies:

    npm install   # or yarn install

  3. Start the development server:

    npm run dev   # or yarn dev

  4. Open in browser:

    http://localhost:5173

🎮 How to Play

  • Start Game: Player X begins
  • Make a Move: Click an empty square
  • Alternate Turns: Players take turns placing marks
  • Win: Get three in a row (horizontal, vertical, or diagonal)
  • Game Features:
    • Customize player names
    • Toggle between themes
    • View and navigate move history
    • Reset game anytime

💾 Persistent Storage

The game automatically saves:
✅ Player Names
✅ Game Statistics
✅ Selected Theme
✅ Move History

🎨 Customization

🖌️ Modify Themes

Edit src/utils/theme.js to:

  • Adjust colors & backgrounds
  • Change button styles
  • Modify card layouts

⚙️ Customize Game Settings

Modify GameSettings.jsx to:

  • Adjust player name constraints
  • Add new themes
  • Modify default settings

🔧 Development

📜 Available Scripts

npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build
npm run lint      # Run ESLint

🛠️ Adding Features

  1. Create a new component in src/components
  2. Add utility functions in src/utils if needed
  3. Import and integrate into App.jsx
  4. Update the README accordingly

🤝 Contributing

  1. Fork the repository
  2. Create a branch (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'Add AmazingFeature')
  4. Push to branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📜 License

Distributed under the MIT License. See LICENSE for details.

👏 Acknowledgments

  • React.js – The amazing framework
  • Tailwind CSS – Utility-first styling
  • Lucide React – Elegant icons
  • The Open Source Community – For inspiration and contributions