🎮 Tic Tac Toe

A modern, responsive Tic Tac Toe game built with HTML, CSS, and Vanilla JavaScript.

Play in:

• 👥 Pass-N-Play (PvP) mode
• 🤖 Bot Mode (Play against AI)

Game history is saved locally using localStorage and displayed in a structured table format.

---

✨ Features

• 🎨 Clean UI with SVG-based board
• 🔄 Restart anytime
• 📜 Game history tracking (separate for PvP & Bot)
• 💾 Persistent history using localStorage
• 📅 Stores structured JSON (result, mode, timestamp)
• 📊 Displays history in a scrollable table
• 📱 Fully responsive layout
• 🔤 Modern typography using Inter font

---

🖼 Preview

• Dynamic SVG board
• Turn indicator styling
• Scrollable history with date & time
• Active mode switching

---

📂 Project Structure

tic-tac-toe/
│
├── index.html
├── style.css
├── script.js
└── README.md

---

🚀 How to Run

1. Clone or download this repository
2. Open index.html in your browser

No build tools. No dependencies. Just open and play.

---

🧠 How It Works

Game Modes

• startGame('pvp') → Pass-N-Play
• startGame('bot') → Play with Bot

History System

Game results are stored as structured JSON:

{
  "result": "player",
  "mode": "bot",
  "timestamp": "2026-02-13T14:25:31.123Z"
}

Each mode uses a separate key in localStorage:

• TTT_PVP_HISTORY
• TTT_BOT_HISTORY

History is limited to the most recent 100 games.

---

🗂 History Table

The table displays:

Result	Date	Time

• Invalid or corrupted entries are automatically skipped.
• Empty history shows: No history yet.

---

🎨 Styling Highlights

• Scrollable table wrapper with sticky header
• Active mode toggle button
• Clean button system
• Mobile-friendly design

---

🔮 Possible Improvements

• 🧠 Smarter AI (Minimax algorithm)
• 📈 Win statistics summary
• 🎨 Win/Loss color indicators
• 🗑 Clear history button
• 💾 Export history to JSON
• 🌙 Dark mode toggle
• 🔊 Sound effects

---

📦 Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript
• SVG
• localStorage API

---

📄 License

Free to use and modify for learning or personal projects.

---