♟ Chess Clock

A full-featured chess clock mobile app built with React Native and Expo. Designed for portrait mode with each player's timer on opposite halves of the screen — Player 2 at the top (rotated 180° for face-to-face play) and Player 1 at the bottom.

Features

⏱ Core Clock Functionality

• Dual timers — Two independent countdown timers, one per player, displayed on opposite halves of the screen.
• Tap to switch — When it's your turn and you make a move, tap your half of the screen to stop your clock and start your opponent's.
• First move start — Either player taps their side to make the first move. The game begins and the opponent's clock starts counting down.
• Time-up detection — When a player's time reaches zero, the game automatically ends and the result is displayed.
• Millisecond precision — Timer updates every 50ms. When under 1 minute, tenths of a second are displayed for precise time tracking.

♛ Fischer Increment

• Automatic increment — When a time control includes an increment (e.g., 5|3 = 5 minutes + 3 seconds per move), the increment is automatically added to the player's clock after they press it.
• Increment display — The active increment value is shown on each clock face during the game.

🎛 Time Control Presets

The app includes a variety of standard chess time controls:

Category	Presets
Bullet	1 min, 1|1, 2|1
Blitz	3 min, 3|2, 5 min, 5|3
Rapid	10 min, 10|5, 15|10
Classical	30 min, 30|20
Custom	Set any minutes + increment

Notation: 5|3 means 5 minutes initial time with 3-second Fischer increment per move.

⏯ Game Controls

A control bar sits between the two clocks with three buttons:

• ⏱ Timer (left) — Opens the settings panel to change time control or preferences.
• ⏸ Pause / ▶ Play (center) — Pauses and resumes the game. Only shown when a game is in progress.
• ↻ Reset (right) — Resets the game. Shows a confirmation dialog if a game is currently running.

📊 Move Counter

Each player's clock displays a live move counter showing how many moves they've made in the current game.

⚙️ Settings & Preferences

Open the settings panel by tapping the timer icon in the control bar:

• Time Control Selection — Pick from presets or enter custom values (minutes + increment).
• Sound — Toggle move and time-up sounds on/off.
• Haptic Feedback — Toggle vibration feedback on tap.
• Show Move Count — Toggle move counter visibility.

🎨 Design

• Dark theme — Deep dark backgrounds with high-contrast text for easy reading in any lighting.
• Player colors — Player 1 (bottom) uses purple when active; Player 2 (top) uses teal.
• Low-time warning — Clock text turns yellow when under 30 seconds and red when under 10 seconds.
• Time-up indicator — The losing player's clock turns red with "⏱ TIME" displayed.
• Portrait orientation — Optimized for holding the phone between two players.
• Rotated top clock — Player 2's clock is rotated 180° so both players can read their own time.
• Screen stays awake — The screen will not auto-lock during use.

How to Play

1. Choose a time control — Tap the ⏱ icon to open settings and select your desired time control.
2. Start the game — Either player taps their half of the screen. This counts as their first move, and the opponent's clock begins.
3. Make moves — After making a physical chess move, tap your side of the screen to stop your clock and start your opponent's.
4. Pause if needed — Tap the ⏸ button in the center to pause. Tap ▶ to resume.
5. Game over — The game ends automatically when a player's time reaches zero.
6. Reset — Tap the ↻ button to start a new game with the same time control.

Getting Started

# Install dependencies
npm install

# Start the Expo development server
npx expo start

# Run on iOS simulator
npx expo start --ios

# Run on Android emulator
npx expo start --android

Tech Stack

• React Native — Cross-platform mobile framework
• Expo — Development platform and toolchain
• expo-keep-awake — Prevents screen from sleeping
• expo-haptics — Vibration feedback on tap
• TypeScript — Type-safe codebase

Project Structure

├── App.tsx                 # Main app component
├── src/
│   ├── types.ts            # TypeScript type definitions
│   ├── constants.ts        # Colors, presets, default settings
│   ├── utils.ts            # Time formatting utilities
│   ├── useChessClock.ts    # Core chess clock logic (custom hook)
│   ├── ClockFace.tsx       # Individual player clock UI
│   ├── ControlBar.tsx      # Pause / Reset / Settings buttons
│   └── SettingsModal.tsx   # Time control & preferences panel
├── app.json                # Expo configuration
└── package.json            # Dependencies