🎮 Tic Tac Toe

A modern, beautiful, and fully responsive Tic Tac Toe web application built with React, TypeScript, and Vite.

✨ Features

• Modern UI Design: Beautiful, responsive interface with smooth animations and visual effects
• Player vs Player: Local multiplayer mode for two players on the same device
• Winner Detection: Automatic winner detection with visual highlighting of the winning line
• Draw Detection: Intelligent draw/tie detection when the board is full
• Score Tracking: Persistent scoreboard tracking wins for both players and draws
• Current Player Display: Clear indication of which player's turn it is
• New Game: Easy reset button to start a new game while keeping the score
• Reset Scores: Option to completely reset the scoreboard
• Responsive Design: Fully optimized for desktop, tablet, and mobile devices
• Smooth Animations: Polished animations for piece placement, winning states, and UI interactions
• Accessibility: ARIA labels and keyboard-friendly interface

🚀 Technology Stack

Frontend Framework:

• React 19.2.0 - Modern component-based UI library
• TypeScript 5.9 - Type-safe JavaScript for better code quality

Build Tool:

• Vite 7.2 - Next-generation frontend tooling with lightning-fast HMR

Styling:

• Pure CSS - Modern CSS with custom properties (CSS variables), animations, and responsive design

Why This Tech Stack?

1. React + TypeScript: Provides excellent developer experience with type safety, component reusability, and a robust ecosystem. TypeScript catches errors at compile-time and makes the code more maintainable.

2. Vite: Chosen over traditional tools like Create React App because:

   • Extremely fast development server with instant Hot Module Replacement (HMR)
   • Optimized production builds using Rollup
   • Out-of-the-box TypeScript support
   • Modern, lean, and actively maintained

3. Pure CSS: No CSS-in-JS or UI framework dependencies keeps the bundle size small and performance high. Modern CSS features (Grid, Flexbox, Custom Properties) provide all the power needed for beautiful interfaces.

📋 Prerequisites

Before running this application, ensure you have the following installed:

• Node.js: Version 18.0.0 or higher
• npm: Version 9.0.0 or higher (comes with Node.js)

To check your versions, run:

node --version
npm --version

🔧 Installation

Follow these steps to get the application running on your local machine:

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

   git clone <repository-url>
   cd tic-tac-toe

2. Install dependencies:

   npm install

   This will install all required packages including React, TypeScript, Vite, and development tools.

🎯 Running the Application

🚀 Quick Start (Without Node.js)

For end users who just want to play the game without installing Node.js:

The repository includes pre-built start scripts that work without Node.js installation. You only need Python (usually pre-installed on most systems).

Windows

Double-click start.bat or run in Command Prompt:

start.bat

Linux / macOS

Run in Terminal:

./start.sh

The game will automatically open at http://localhost:8000 in your default browser.

Requirements:

• Python 3.x (check with python --version or python3 --version)
• If Python is not installed:
  • Windows: Download from python.org
  • macOS: brew install python3
  • Linux: sudo apt-get install python3 (Ubuntu/Debian) or sudo dnf install python3 (Fedora)

👨‍💻 Development Mode (For Developers)

To start the development server with hot module replacement:

npm run dev

The application will be available at:

• Local: http://localhost:5173
• Network: Your local network IP (shown in terminal)

The dev server features:

• Instant hot module replacement (HMR)
• Fast refresh for React components
• TypeScript type checking
• ESLint integration

Production Build

To create an optimized production build:

npm run build

This will:

1. Run TypeScript compiler to check for type errors
2. Bundle and optimize all assets
3. Generate output in the dist/ folder

Preview Production Build

To preview the production build locally:

npm run preview

This serves the built application from the dist/ folder, allowing you to test the production version before deployment.

📁 Project Structure

tic-tac-toe/
├── dist/                # Production build output (generated)
├── public/              # Static assets
│   └── logo.svg        # Application logo (also used as favicon)
├── src/
│   ├── components/      # React components
│   │   ├── Board.tsx   # Game board component
│   │   ├── Cell.tsx    # Individual cell component
│   │   ├── ScoreBoard.tsx     # Score display component
│   │   ├── LanguageSwitcher.tsx  # Language toggle component
│   │   └── TicTacToe.tsx      # Main game component with logic
│   ├── i18n/           # Internationalization
│   │   ├── translations.ts    # DE/EN translations
│   │   └── LanguageContext.tsx # Language state management
│   ├── gameLogic.ts    # Core game logic (winner detection, etc.)
│   ├── types.ts        # TypeScript type definitions
│   ├── App.tsx         # Root application component
│   ├── App.css         # Component styles
│   ├── index.css       # Global styles and CSS variables
│   └── main.tsx        # Application entry point
├── start.bat           # Windows start script (no Node.js needed)
├── start.sh            # Linux/macOS start script (no Node.js needed)
├── index.html          # HTML template
├── package.json        # Project dependencies and scripts
├── tsconfig.json       # TypeScript configuration
├── vite.config.ts      # Vite configuration
└── README.md           # This file

Key Files Explained

• start.bat / start.sh: Simple start scripts for running without Node.js (uses Python)
• src/types.ts: TypeScript interfaces and types for type-safe development
• src/gameLogic.ts: Pure functions for game logic (winner detection, board utilities)
• src/i18n/translations.ts: German and English translations for all UI text
• src/i18n/LanguageContext.tsx: React Context for managing language state
• src/components/TicTacToe.tsx: Main component managing game state and user interactions
• src/components/LanguageSwitcher.tsx: Language toggle button with flag icons
• src/App.css: All component-specific styles with CSS custom properties
• src/index.css: Global styles, CSS variables (color scheme, spacing, etc.), and animations
• dist/: Production build folder (created by npm run build)

🎨 Customization

Changing Colors

The application uses CSS custom properties for easy theming. Edit src/index.css to change colors:

:root {
  --primary: #6366f1;        /* Primary brand color */
  --player-x: #3b82f6;       /* Player X color (blue) */
  --player-o: #f59e0b;       /* Player O color (orange) */
  /* ... more variables ... */
}

Adjusting Animations

Animation speeds can be adjusted in the CSS variables:

:root {
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
}

🧪 Development Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint to check code quality

🌐 Browser Support

This application works in all modern browsers that support:

• ES2020+ JavaScript features
• CSS Grid and Flexbox
• CSS Custom Properties
• CSS Animations

Tested and working in:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Opera 76+

🎮 How to Play

1. The game is played on a 3x3 grid
2. Player X always goes first
3. Players take turns clicking empty cells to place their mark (X or O)
4. The first player to get 3 of their marks in a row (horizontally, vertically, or diagonally) wins
5. If all 9 cells are filled and no player has won, the game is a draw
6. Click "New Game" to play again while keeping the scores
7. Click "Reset Scores" to start fresh with zero scores

📄 License

MIT License

Copyright (c) 2026

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

👨‍💻 Author

Built with React, TypeScript, and Vite.

Enjoy playing Tic Tac Toe! 🎉