Skip to content

A modern, feature-rich chess timer application built with Next.js and TypeScript. Designed for chess players of all levels, from casual games to tournament play.

License

Notifications You must be signed in to change notification settings

UtkarshTheDev/ChessTicks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

89 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

ChessTicks โฑ๏ธ

Live Demo License TypeScript Next.js

A modern, professional chess timer application designed for chess players of all levels. From casual games to tournament play, ChessTicks provides all five major tournament timer modes with a sleek, intuitive interface.

Chess Timer

๐Ÿš€ Try It Now - No Installation Required!

๐Ÿ‘‰ Launch ChessTicks ๐Ÿ‘ˆ

Simply click the link above to start using the chess timer immediately in your browser. Works perfectly on:

  • ๐Ÿ–ฅ๏ธ Desktop computers
  • ๐Ÿ“ฑ Mobile phones
  • ๐Ÿ“ฑ Tablets
  • ๐Ÿ’ป Any device with a web browser

No downloads, no installation, no setup required!

๐Ÿ“– What is ChessTicks?

ChessTicks is a comprehensive chess timer application that supports all five major tournament timer modes used in professional chess. Whether you're playing a quick blitz game or a classical tournament match, ChessTicks provides the precise timing controls you need.

โœจ Key Features

๐Ÿ† Complete Tournament Timer Support

  • โšก Sudden Death - Classic time control (e.g., 5 minutes per player)
  • โณ Simple Delay - Delay before main time counts down (e.g., 3 min + 5 sec delay)
  • ๐Ÿ”„ Bronstein Delay - Unused delay time is added back (e.g., 15 min + 10 sec Bronstein)
  • โž• Fischer Increment - Time added after each move (e.g., 3 min + 2 sec increment)
  • ๐ŸŽฏ Multi-Stage - Complex tournament formats (e.g., World Championship style)

๐ŸŽฎ Professional Game Controls

  • ๐Ÿ‘† Gesture Controls - Single tap (move), two-finger tap (check), long press (checkmate)
  • ๐Ÿ”Š Audio Feedback - Sound effects for moves, checks, and game events
  • ๐Ÿ“ณ Haptic Feedback - Vibration feedback on mobile devices
  • โŒจ๏ธ Keyboard Shortcuts - Quick access to all timer functions
  • โœจ Visual Animations - Smooth transitions and game state indicators

๐Ÿ“Š Advanced Game Analytics

  • ๐Ÿ“ˆ Move Statistics - Track average move time and game phases
  • ๐Ÿ“‹ Detailed Game Summary - Comprehensive post-game analysis
  • ๐Ÿ“Š Performance Charts - Visual representation of time usage patterns
  • ๐Ÿ Game History - Review past games and performance trends

๐ŸŽจ Modern User Experience

  • ๐Ÿ“ฑ Fully Responsive - Perfect on desktop, tablet, and mobile
  • ๐ŸŒ™ Professional Dark Theme - Easy on the eyes for long sessions
  • ๐ŸŽญ Smooth Animations - Powered by Framer Motion for fluid interactions
  • โ™ฟ Accessibility First - Keyboard navigation and screen reader support
  • ๐Ÿš€ Lightning Fast - Optimized performance for instant responsiveness

๐ŸŽฏ For Chess Players (Users)

Just Want to Play Chess?

๐Ÿ‘‰ Click here to start playing immediately ๐Ÿ‘ˆ

No installation required! ChessTicks runs directly in your web browser on any device.

Quick Start Guide

  1. Visit chessticks.vercel.app
  2. Choose your preferred timer mode (Sudden Death, Fischer, etc.)
  3. Set your time controls
  4. Start playing chess with professional timing!

๐Ÿ› ๏ธ For Developers (Contributors)

Want to contribute to ChessTicks or run it locally? Here's how to get started:

Prerequisites

  • Node.js 18+ or Bun
  • npm, yarn, pnpm, or bun

Local Development Setup

  1. Clone the repository

    git clone https://github.com/UtkarshTheDev/ChessTicks.git
    cd ChessTicks
  2. Install dependencies

    # Using npm
    npm install
    
    # Using yarn
    yarn install
    
    # Using pnpm
    pnpm install
    
    # Using bun
    bun install
  3. Start the development server

    # Using npm
    npm run dev
    
    # Using yarn
    yarn dev
    
    # Using pnpm
    pnpm dev
    
    # Using bun
    bun dev
  4. Open your browser Navigate to http://localhost:3000

๐Ÿ“– How to Use ChessTicks

Basic Timer Operation

  1. ๐ŸŽฏ Select Timer Mode - Choose from five tournament-grade timer modes
  2. โš™๏ธ Configure Time Control - Set base time and increments/delays
  3. โ–ถ๏ธ Start Game - Tap the start button to begin timing
  4. ๐Ÿ‘† Make Moves - Tap your side of the timer after each move
  5. ๐ŸŽฎ Special Moves - Use gestures for check (two-finger tap) or checkmate (long press)

๐Ÿ† Tournament Timer Modes Explained

โšก Sudden Death

Perfect for blitz and rapid games. Each player gets a fixed amount of time.

  • Example: 5 minutes per player
  • Best for: Quick games, online play, casual matches

โณ Simple Delay

Adds a delay before your main time starts counting down.

  • Example: 3 minutes + 5 second delay
  • Best for: Beginner-friendly games, reducing time pressure

๐Ÿ”„ Bronstein Delay

Time used during the delay is added back to your main time.

  • Example: 15 minutes + 10 second Bronstein delay
  • Best for: Classical games, tournament play

โž• Fischer Increment

Adds time to your clock after each move.

  • Example: 3 minutes + 2 second increment
  • Best for: Online platforms, modern tournament formats

๐ŸŽฏ Multi-Stage

Complex tournament formats with multiple time control phases.

  • Example: 90 minutes for 40 moves, then 30 minutes + 30 second increment
  • Best for: World Championship style, classical tournaments

๐ŸŽฎ Controls & Shortcuts

Gesture Controls

  • ๐Ÿ‘† Single Tap - Normal move
  • โœŒ๏ธ Two-Finger Tap - Check move (plays special sound)
  • ๐Ÿ‘‡ Long Press - Checkmate (ends game with confirmation)

Keyboard Shortcuts

  • Spacebar - Switch active player / Make move
  • P - Pause/Resume timer
  • R - Reset timer
  • Escape - Return to home screen

๐Ÿ—๏ธ Technical Architecture

Project Structure

src/
โ”œโ”€โ”€ app/                 # Next.js app router
โ”œโ”€โ”€ components/          # React components
โ”‚   โ”œโ”€โ”€ ui/             # Reusable UI components
โ”‚   โ””โ”€โ”€ ...             # Feature-specific components
โ”œโ”€โ”€ hooks/              # Custom React hooks
โ”œโ”€โ”€ lib/                # Core timer logic and utilities
โ”œโ”€โ”€ stores/             # Zustand state management
โ”œโ”€โ”€ types/              # TypeScript type definitions
โ”œโ”€โ”€ utils/              # Utility functions
โ””โ”€โ”€ __tests__/          # Test files

๐Ÿ› ๏ธ Technology Stack

  • โšก Framework: Next.js 15 with App Router
  • ๐Ÿ“ Language: TypeScript
  • ๐ŸŽจ Styling: Tailwind CSS
  • ๐Ÿงฉ UI Components: Radix UI + shadcn/ui
  • โœจ Animations: Framer Motion
  • ๐Ÿ—„๏ธ State Management: Zustand
  • ๐Ÿงช Testing: Jest
  • ๐ŸŽฏ Icons: Lucide React
  • ๐Ÿ”Š Sound: use-sound (Howler.js)
  • ๐Ÿš€ Deployment: Vercel

โš™๏ธ Timer Engine Architecture

The timer engine is built with a modular, extensible architecture:

  • TimerEngine - Core timer logic and state management
  • TimerModeHandler - Interface for different timer modes
  • TimerStore - Zustand store for React state management
  • GameAnalytics - Move tracking and performance analysis

๐Ÿงช Development Commands

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

Code Quality

# Lint code
npm run lint

# Format code
npm run format

# Type check
npm run type-check

# Build for production
npm run build

๐Ÿค Contributing

We welcome contributions from the chess and developer community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.

๐Ÿš€ Quick Contribution Guide

  1. ๐Ÿด Fork the repository
  2. ๐ŸŒฟ Create a feature branch (git checkout -b feature/amazing-feature)
  3. โœจ Make your changes
  4. ๐Ÿงช Add tests for new functionality
  5. โœ… Ensure all tests pass (npm test)
  6. ๐Ÿ’พ Commit your changes (git commit -m 'Add amazing feature')
  7. ๐Ÿ“ค Push to the branch (git push origin feature/amazing-feature)
  8. ๐Ÿ”„ Open a Pull Request

๐ŸŽฏ Areas for Contribution

  • ๐Ÿ› Bug fixes and improvements
  • โœจ New timer modes or features
  • ๐ŸŽจ UI/UX enhancements
  • ๐Ÿ“š Documentation improvements
  • ๐Ÿงช Test coverage expansion
  • ๐ŸŒ Internationalization (i18n)

๐Ÿ—บ๏ธ Roadmap

๐Ÿ”œ Coming Soon

  • ๐ŸŽ›๏ธ Custom timer presets

๐Ÿš€ Future Plans

  • ๐Ÿ“ฑ Native mobile app (React Native)
  • ๐Ÿค– AI-powered game analysis
  • ๐Ÿ“Š Advanced statistics dashboard

๐Ÿ“ž Support & Community

๐Ÿ“ License

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

๐Ÿ™ Acknowledgments

  • ๐Ÿ† Chess Community - For feedback and feature requests
  • ๐ŸŽจ Radix UI - For accessible UI components
  • ๐ŸŽญ shadcn/ui - For beautiful component designs
  • โœจ Framer Motion - For smooth animations
  • ๐Ÿš€ Vercel - For seamless deployment

๐Ÿ† Made with โค๏ธ for the chess community ๐Ÿ†

Live Demo

Professional chess timing for players of all levels

About

A modern, feature-rich chess timer application built with Next.js and TypeScript. Designed for chess players of all levels, from casual games to tournament play.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Contributors 2

  •  
  •  

Languages