Tic-Tac-Toe

An elegant, minimal two-player Tic-Tac-Toe game built with React, TypeScript, and Framer Motion.

---

Overview

This is a web-based tic-tac-toe game designed for two players on the same device. While functionally simple, the application emphasizes visual craftsmanship through smooth animations, a sophisticated dark theme, and polished user interactions.

---

Features

• Two-Player Local Multiplayer - Two players take turns on the same device
• Turn Indicator - Clear display of whose turn it is
• Win Detection - Automatically detects all 8 winning patterns (3 rows, 3 columns, 2 diagonals)
• Draw Detection - Detects when all cells are filled with no winner
• Winning Highlight - Animated glow effect on winning cells
• Game Reset - Play again with a single click
• Smooth Animations - Premium feel with Framer Motion spring physics
• Keyboard Accessible - Full Tab/Enter/Space navigation
• Elegant Design - Dark theme with sophisticated color palette

---

Tech Stack

Technology	Version	Purpose
React	18.x	UI Framework
TypeScript	5.x	Type Safety
Vite	5.x	Build Tool
Framer Motion	10.x	Animations
CSS Modules	-	Scoped Styling

---

Quick Start

Prerequisites

• Node.js 18+ installed
• npm or yarn

Development

# Clone the repository
git clone <repository-url>
cd tic-tac-toe

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

Build for Production

# Create production build
npm run build

# Preview production build locally
npm run preview

The built files will be in the dist/ directory.

---

Running with Docker

# Build and run with Docker Compose
docker-compose up -d

# Or build the image directly
docker build -t tic-tac-toe .
docker run -p 3000:80 tic-tac-toe

The application will be available at http://localhost:3000

---

Project Structure

tic-tac-toe/
|-- src/
|   |-- components/
|   |   |-- App/           # Application shell
|   |   |-- Game/          # Main game container + state hook
|   |   |-- Header/        # Title and turn indicator
|   |   |-- Board/         # 3x3 grid container
|   |   |-- Cell/          # Individual clickable squares
|   |   |-- GameStatus/    # Win/draw announcements
|   |   |-- ResetButton/   # Play again action
|   |-- types/
|   |   |-- game.ts        # TypeScript type definitions
|   |-- utils/
|   |   |-- constants.ts   # WIN_COMBINATIONS, INITIAL_STATE
|   |   |-- gameLogic.ts   # checkWinner(), checkDraw()
|   |-- styles/
|   |   |-- variables.css  # CSS custom properties (design tokens)
|   |   |-- global.css     # Reset, base styles, fonts
|   |-- main.tsx           # Entry point
|-- docs/                  # Comprehensive documentation
|-- public/
|   |-- favicon.svg        # Custom favicon
|-- index.html
|-- package.json
|-- tsconfig.json
|-- vite.config.ts
|-- Dockerfile
|-- docker-compose.yml

---

Component Architecture

App
 |
 +-- Game (state management via useGameLogic hook)
      |
      +-- Header (turn indicator)
      |
      +-- Board (3x3 grid)
      |    |
      |    +-- Cell (x9)
      |
      +-- GameStatus (win/draw announcement)
      |
      +-- ResetButton

---

Design Tokens

The application uses CSS custom properties for consistent styling:

Token	Value	Usage
--color-bg-primary	#0a0a0f	Page background
--color-surface	#1a1a24	Cell background
--color-x	#f472b6	X mark color (pink)
--color-o	#22d3ee	O mark color (cyan)
--color-win	#fbbf24	Winning highlight (gold)
--color-accent	#6366f1	Button accent (indigo)

---

Deployment

Static Hosting (Recommended)

The built application can be deployed to any static hosting provider:

• Vercel - Zero configuration, automatic deploys from Git
• Netlify - Similar features to Vercel
• GitHub Pages - Free hosting for public repositories
• AWS S3 + CloudFront - For enterprise deployments

See Deployment Guide for detailed instructions.

Docker Deployment

The included Dockerfile creates a production-ready image using nginx:

docker build -t tic-tac-toe .
docker run -p 80:80 tic-tac-toe

---

Documentation

Comprehensive documentation is available in the docs/ directory:

Architecture

Document	Description
Technical Architecture	System overview and design decisions
Implementation Architecture	Code organization and patterns
Data Architecture	State management and data flow

Guides

Document	Description
Deployment Guide	How to deploy the application
User Guide	How to play the game
Developer Guide	Development setup and workflow
API Reference	Component and function documentation

Operations

Document	Description
Monitoring	Monitoring the application
Deployment Runbook	Step-by-step deployment procedures
Troubleshooting	Common issues and solutions

---

How to Play

1. X Goes First - The game starts with Player X
2. Take Turns - Click any empty cell to place your mark
3. Win or Draw - Get three in a row to win, or fill the board for a draw
4. Play Again - Click the "Play Again" button to start a new game

Controls

Input	Action
Click/Tap	Place mark in cell
Tab	Navigate between cells
Enter/Space	Place mark in focused cell

---

Accessibility

• Full keyboard navigation (Tab, Enter, Space)
• ARIA labels on all interactive elements
• Visible focus indicators
• Semantic HTML structure (roles: grid, gridcell)

---

Browser Support

Tested and supported on:

Browser	Minimum Version
Chrome	80+
Firefox	75+
Safari	13+
Edge	80+

---

Performance

• Production bundle: ~82KB gzipped (including Framer Motion)
• CSS: ~2KB gzipped
• Lighthouse Performance Score: 90+
• 60fps animations

---

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with care by The System Development Department.