🔥💧 Elements Battle – A Mystical Tic-Tac-Toe Experience

Elements Battle transforms the classic Tic-Tac-Toe game into an epic showdown between Fire (🔥) and Water (💧) in a mystical arena. With stunning animations, dynamic themes, and immersive visual effects, this game delivers a next-level experience beyond the traditional grid!

🚀 Live Demo: https://roaring-blini-15df9c.netlify.app/

---

✨ Features

🌟 Dynamic Theme: A fiery vs. watery clash with vibrant colors and animations
🎨 Animated Background: Shifting gradients flowing between warm and cool hues
🔥 Element Effects:

• Fire cells glow with warm gradients
• Water cells ripple with cool blue tones
• Empty cells have a stylish glass-morphism effect
  💥 Visual Enhancements:
• Pulse animations on placement
• Pop effects for the last played move
• Glowing shadows and blur depth
  🎭 Immersive UI:
• Themed Flame & Droplet icons
• Animated turn indicator
• Glass-morphism panels for a modern look
  🏆 Epic Victory Messages: Custom win screens for Fire and Water
  📜 Battle Records: A stylish scoreboard with element-specific sections

---

📸 Screenshots

---

🚀 How to Run the Project

1️⃣ Clone the Repository

Open a terminal and run:

"git clone https://github.com/abhiramiramadas/tic-tac-toe.git"

2️⃣ Install Dependencies

Make sure you have Node.js installed. Then, run:
"npm install"
If you face script execution issues in PowerShell, run:
"Set-ExecutionPolicy Unrestricted -Scope CurrentUser" or use Command Prompt (CMD) instead of PowerShell.

3️⃣ Start the Development Server

Run:
npm run dev
This will start a local server. Open the URL shown in the terminal (e.g., http://localhost:3000/) in your browser.

🔧 Prerequisites

Before running the project, make sure you have:
✅ Node.js installed
✅ npm (Comes with Node.js)
✅ Git (For cloning the repository)

🌐 Run Online (Without Installation)

If you don’t want to install anything, you can:
Use GitHub Codespaces (Click "Code" → "Open in Codespaces")
Run on Replit (Import the repo and run it there)

🎮 How to Play
Players take turns placing Fire (🔥) or Water (💧) elements on the grid.
The first player to get three in a row wins the battle!
Enjoy the animations and visual effects while playing.
🌍 Tech Stack
React + TypeScript
Tailwind CSS (for styling and animations)
Framer Motion (for smooth animations)
📜 License
This project is open-source under the MIT License.
💡 Feel free to contribute, suggest improvements, or fork the project!
🔥💧 Let the battle begin! 🚀