Neon Tic-Tac-Toe 🎮

A modern, stylish implementation of the classic Tic-Tac-Toe game, featuring a Neon Glassmorphism design. Built with React, TypeScript, and Tailwind CSS, and powered by Zustand for state management. Now includes online multiplayer using Socket.IO.

✨ Features

• Neon Glassmorphism UI: A stunning, modern interface with glowing effects, gradients, and glass-like panels.
• Time Travel: Jump back to any previous move in the game history to change your strategy.
• Persistent State: Your game progress is automatically saved to your browser's LocalStorage, so you never lose your game even if you refresh.
• Responsive Design: Fully responsive layout that looks great on both desktop and mobile devices.
• Sound Effects: Interactive sound feedback for moves and game events (Winning/Draw).
• Smart State Management: Utilizes zustand for efficient and clean state management.
• Online Multiplayer (Socket.IO): Play with a friend over the network by joining/creating a Room ID, with real-time synced moves, undo/redo, and connection status handled via WebSockets.

🛠️ Tech Stack

• Framework: React (v19)
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS (v4)
• State Management: Zustand
• Real-time Communication: Socket.IO (client & server)
• Backend: Node.js + Express + Socket.IO server (in server/index.js)
• Linting: ESLint

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have Node.js installed.

Installation

1. Clone the repository (or download the source code):

   git clone https://github.com/1970Mr/tic-toc-toe
   cd tic-toc-toe

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Start the development (frontend) server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173 (or the URL shown in your terminal).

Online Multiplayer / Socket Server

To use the Online Multiplayer features, you also need to run the Socket.IO server:

1. Copy .env.example to .env in the project root (next to package.json). The default values are suitable for local development; you can adjust them later if needed.
2. In another terminal, from the project root, run:

   npm run server

3. By default, the server listens on http://localhost:3001 and allows CORS from http://localhost:5173 (or the values you set in .env).
4. On the frontend, the socket client reads these optional environment variables (via Vite):
   • VITE_SOCKET_HOSTNAME (default: current window.location.hostname)
   • VITE_SOCKET_PORT (default: 3001)
   • VITE_SOCKET_PROTOCOL (default: http)
5. On the server, you can configure:
   • PORT (default: 3001)
   • CORS_ORIGIN (default: http://localhost:5173)

Once both frontend and socket server are running, use the Online Multiplayer panel in the UI:

• Click "Go Online 🚀" to connect to the server.
• Enter a Room ID (e.g. room1) and click "Join / Create Room".
• Share this Room ID with a friend so they can join the same room and play against you in real time.

📜 Scripts

• npm run dev: Starts the frontend development server (Vite).
• npm run server: Starts the Socket.IO backend server (Express + Socket.IO).
• npm run build: Builds the app for production.
• npm run lint: Runs ESLint to check for code quality issues.
• npm run preview: Previews the production build locally.

📂 Project Structure

src/
├── components/      # React components (Board, GameInfo, etc.)
├── stores/          # Zustand store (useGameStore.ts)
├── utils/           # Helper functions (gameLogic.ts, soundUtils.ts)
├── App.tsx          # Main application component
└── main.tsx         # Entry point

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have any ideas for improvements.

📄 License

This project is open source and available under the MIT License.