Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Perfect Ten Stop" is an addictive web-based game designed for casual players seeking quick entertainment. Users will engage in a fast-paced reaction timing challenge where they must stop a moving bar within a target zone to score points, all within a minimalist and responsive framework suitable for both desktop and mobile platforms.

## CORE FEATURES
- **Fast Reaction Gameplay**: Players stop a moving bar to score points based on their precision within a green target zone, with a bonus for hitting the smaller gold zone.
- **Dynamic Difficulty**: The game speed increases and the target zone shrinks with each successful score, enhancing the challenge and excitement.
- **Global Leaderboard**: A competitive edge is introduced with a leaderboard displaying top scores and automatically identifying player countries.
- **Instant Play**: Users can jump right into the game without login requirements, ensuring a seamless experience.
- **Game Over Notifications**: Clear "Game Over" prompts and instant restart options keep users engaged and encourage retrying.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space and a focus on typography, emphasizing user interface clarity.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring readability and visual comfort.
- **Layout**: The main layout consists of a central game area for the moving bar and target zones, with score counters prominently displayed at the top. The leaderboard and start/restart buttons are accessible below the game area.
- **Typography**: Use sans-serif fonts for a modern and clean look. Headings should be bold and larger for emphasis, while body text remains easily readable.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for component-based architecture and type safety.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design adjustments and responsive layouts.
- **UI Components**: Utilize shadcn/ui for consistent and accessible UI elements.
- **State Management**: Consider using React's built-in state management for handling scores and game state, ensuring a lightweight and efficient solution.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS.
2. **Create Game Component**: Develop the main game component that includes the moving bar, target zones, and score display.
3. **Implement Game Logic**: Use JavaScript’s `requestAnimationFrame` for smooth animations and to manage game state (scoring, speed increase, zone size).
4. **Build Leaderboard Feature**: Set up a Node.js backend to manage and store leaderboard data in PostgreSQL, creating API endpoints for fetching and submitting scores.
5. **Design UI Components**: Use shadcn/ui to create buttons, score counters, and notifications, ensuring responsive design across devices.
6. **Integrate Sound Effects**: Add audio feedback for scoring to enhance user experience during gameplay.
7. **Test Across Devices**: Ensure the game is fully responsive and functions smoothly on both desktop and mobile platforms.

## USER EXPERIENCE
Players will interact with the game by tapping the screen or pressing the spacebar to stop the moving bar. Clear feedback is provided through visual cues for scoring and game over notifications. The leaderboard allows players to track their performance and compete with others, fostering a sense of community. The minimalistic design ensures that users remain focused on the game, enhancing the overall experience.