below you will find a prompt i made. but i think thinks like milestone and references are not needed. i also think it is a bit long. i want to have the same result with a smaller prompt. The implemantation plan could also be skipped. i just want to add a user story instead of a plan and add some files for context. an example of a user story is also provided below

----

1️⃣ **Implement the User Story**: Based on the provided implementation plan, develop the required features in alignment with the project's architecture and coding standards.

2️⃣ **Write Clean, Well-Commented Code**: Ensure the code is bug-free 🐞 and includes clear comments 📝 explaining complex logic.

3️⃣ **Follow Project's Coding Standards**:
   - Use 2-space indentation.
   - Keep lines under 100 characters.
   - Use single quotes `' '` for strings.
   - Adhere to naming conventions (`camelCase` for variables and functions).
   - Maintain clean and readable code structure.

4️⃣ **Output Each File's Content**: Provide the content of each file created or modified 📂, following the markdown code block format 📑:
FILENAME


5️⃣ **No Placeholders**: Provide the actual implementation code needed, starting from the entry point file 📚 if applicable. Ensure all code is complete and functional.

6️⃣ **Include Dependencies and Modules**:
- For **Frontend Components**:
  - Include necessary imports.
  - Integrate with state management, routing, and styling as per project standards.
- For **Backend Functions**:
  - Ensure all dependencies are included.
  - Use appropriate Firebase Cloud Functions practices.

7️⃣ **Testing**:
- Write **unit tests** and **integration tests** using the project's testing frameworks (e.g., Vitest, React Testing Library, Jest, Cypress).
- Comment on test cases to explain their purpose.

8️⃣ **Adhere to Architecture Plan**:
- Implement features according to the project's **Architecture Overview** and **Data Models**.
- Ensure consistency with existing components and modules.

🔍 **Review Task**:

1️⃣ **Identify Unclear Areas**: Summarize any areas in the instructions that are not clear, and ask for clarifications if necessary.

2️⃣ **Review the Implementation Plan**: As a skilled engineer 👷‍♂️, review the provided implementation plan for potential flaws 💥, missing elements 🔍, or simplifications 🧹. Make educated assumptions 🎓 if needed.

📚 **Spec Creation Task**:

1️⃣ **Create a Detailed Program Specification**:
- Outline the features, classes, functions, and methods to be implemented 🔡.
- Provide brief comments 🖊️ explaining their purposes.
- Reference the **Architecture Plan** and **Coding Standards**.

2️⃣ **Provide Code Structure**:
- Output the code structure 📂, following the markdown code block format 📑, ensuring full functionality 🔨.
- Include necessary imports, exports, and dependency declarations.

---

# Implementation Plan for **User Story 2.1: Create a New Game Session**

Based on the current progress and the existing **Product Backlog**, the following step-by-step plan outlines the implementation of **User Story 2.1: Create a New Game Session**. This plan ensures adherence to the **Architecture Overview** and **Coding Standards** provided in the documentation.

---

## **1. Review and Understand the User Story**

### **a. Analyze Requirements**
- **Description:**  
  *As a user, I want to create a new game session so that I can gather players and start playing.*

- **Definition of Done:**
  - **Frontend:**
    - Develop `CreateGame.tsx` with game parameter options.
    - Implement form validation for required settings.
    - Add submission button to create the game.
  - **Backend:**
    - Create a Firebase Cloud Function to initialize a new game in Firestore.
    - Generate a unique game code or link.
    - Assign the creator to a team and set as the initial Round Host.
  - **Testing:**
    - Write unit tests for form validation.
    - Develop integration tests for game creation and Firestore initialization.
  - **Documentation:**
    - Document steps to create a new game session.
  - **Acceptance Criteria:**
    - Users can specify game settings and create a session.
    - A unique game code/link is generated and shown to the creator.
    - The creator is assigned to a team and designated as the Round Host.

### **b. Identify Dependencies**
- **Epic 1: User Onboarding** is completed, enabling player name entry and participation in game sessions.

---

## **2. Frontend Implementation**

### **a. Develop `CreateGame.tsx` Component**
- **Design UI:**
  - **Game Parameters Options:**
    - Number of Teams
    - Number of Players per Team
    - Number of Rounds
    - Any additional settings (e.g., Joker usage)
  - **Form Elements:**
    - Input fields, dropdowns, sliders as needed.
    - Submit button labeled "Create Game".

- **Implement Form Validation:**
  - Ensure all required fields are filled.
  - Validate input formats (e.g., positive integers for team numbers).
  - Provide user feedback for invalid inputs.

### **b. Ensure Responsiveness and Styling**
- Utilize **Tailwind CSS** and **shadcn** components for a consistent and responsive design.
- Adhere to **Coding Standards**:
  - Use 2-space indentation.
  - Keep lines under 100 characters.
  - Single quotes for strings.

### **c. State Management and Integration**
- Manage form state using **React Hook Form** or similar library.
- Handle form submission to trigger backend operations.

### **d. Implement Navigation**
- Ensure that after game creation, users are redirected to the **Game Lobby** or appropriate interface.
- Use **React Router** for seamless navigation.

---

## **3. Backend Implementation**

### **a. Develop Firebase Cloud Function: `createGame`**
- **Function Responsibilities:**
  - Initialize a new game document in **Firestore** with specified parameters.
  - Generate a unique game code or link.
  - Assign the creating user to a team.
  - Designate the user as the initial Round Host.

- **Ensure Security and Data Integrity:**
  - Validate incoming data to prevent malformed entries.
  - Use **Firestore Transactions** or **Batch Writes** to ensure atomicity.

### **b. Generate Unique Game Code/Link**
- **Approach:**
  - Utilize UUIDs or a custom algorithm to create unique identifiers.
  - Ensure no collisions by checking Firestore for existing codes.

### **c. Assign Creator to Team and Round Host**
- **Team Assignment:**
  - Create a default team or assign to a newly created team based on game parameters.
  
- **Round Host Assignment:**
  - Set the creator as the initial Round Host within the game document.

### **d. Integrate with Firestore**
- Structure Firestore documents according to the **Database Models** in `architecture.md`.
- Ensure real-time capabilities are leveraged for immediate game setup visibility.

---

## **4. Testing**

### **a. Unit Tests for Frontend Form Validation**
- **Tools:** Vitest with React Testing Library
- **Test Cases:**
  - All required fields must be filled.
  - Valid input formats.
  - Error messages display for invalid inputs.

### **b. Integration Tests for Game Creation Workflow**
- **Tools:** Cypress
- **Test Scenarios:**
  - Successful game creation with valid inputs.
  - Verification of Firestore document initialization.
  - Unique game code/link generation and display to the creator.
  - Assignment of creator to a team and as Round Host.

### **c. Backend Function Testing**
- **Tools:** Jest with Firebase Emulator Suite
- **Test Cases:**
  - Correct initialization of game documents.
  - Unique game code generation without collisions.
  - Proper assignment of user to team and Round Host.
  - Handling of invalid or incomplete data inputs.

---

## **5. Documentation**

### **a. Update User Guides**
- **Location:** `docs/backlog.md` and any relevant sections in `docs/architecture.md`
- **Content:**
  - Step-by-step instructions on creating a new game session.
  - Description of game parameters and their effects.
  - Screenshots or UI mockups of the `CreateGame.tsx` component.

### **b. Code Documentation**
- **Inline Comments:**
  - Provide clear comments for complex logic within `CreateGame.tsx` and backend functions.
  
- **Function Documentation:**
  - Use JSDoc annotations for the `createGame` Cloud Function detailing inputs, outputs, and functionality.

---

## **6. Code Review and Quality Assurance**

### **a. Peer Code Review**
- **Process:**
  - Submit code via Pull Request (PR) adhering to the **Gitflow** branching strategy.
  - Ensure PR descriptions link to **User Story 2.1** in `backlog.md`.
  - Address feedback related to **Coding Standards**, performance, and security.

### **b. Adhere to Coding Standards**
- **Consistency:**
  - Follow naming conventions (`camelCase` for variables and functions).
  - Maintain clean and readable code structure.
  
- **Best Practices:**
  - DRY (Don’t Repeat Yourself) principle to avoid redundancy.
  - KISS (Keep It Simple, Stupid) for simplicity in implementation.

### **c. Automated Code Quality Checks**
- **Tools:**
  - Integrate ESLint and Prettier to enforce code formatting and linting rules.
  - Ensure CI pipeline runs linting and formatting checks on PRs.

---

## **7. Deployment**

### **a. Staging Environment Deployment**
- **Steps:**
  - Merge approved PR into the `develop` branch.
  - Utilize **GitHub Actions** to trigger deployment scripts.
  - Deploy frontend to Firebase Hosting’s staging environment.
  - Deploy backend Cloud Functions to Firebase Emulator or a designated staging project.

### **b. Post-Deployment Testing**
- **Verification:**
  - Conduct end-to-end tests in the staging environment.
  - Ensure that game creation flows function as intended.
  - Validate real-time updates and Firestore document integrity.

### **c. Production Deployment**
- **Steps:**
  - After successful staging verification, merge changes into the `main` branch.
  - Trigger CI/CD pipeline for production deployment.
  - Monitor deployment logs for any issues.

### **d. Monitoring and Feedback**
- **Tools:**
  - Use Firebase Console to monitor Firestore and Cloud Function performance.
  - Set up alerts for failed deployments or critical errors.

---

## **8. Risk Management and Mitigation**

### **a. Unique Code Collision**
- **Mitigation:**
  - Implement checks within the Cloud Function to verify the uniqueness of generated game codes.
  - Retry code generation upon collision detection.

### **b. Firestore Write Failures**
- **Mitigation:**
  - Use Firestore Transactions to ensure atomic writes.
  - Implement error handling to notify users of any failures during game creation.

### **c. Security Concerns**
- **Mitigation:**
  - Ensure Cloud Functions validate and sanitize all inputs.
  - Adhere to **Firestore Security Rules** to restrict unauthorized write operations.

---

## **9. Timeline and Milestones**

| **Milestone**                       | **Estimated Duration** | **Dependencies**                          |
|-------------------------------------|------------------------|-------------------------------------------|
| Frontend Component Development      | 2 Days                 | Completion of frontend setup              |
| Backend Cloud Function Development  | 3 Days                 | Firebase project configuration            |
| Unit and Integration Testing        | 2 Days                 | Completion of frontend and backend code   |
| Documentation Update                | 1 Day                  | Completion of development and testing     |
| Code Review and Feedback            | 1 Day                  | Submission of PR                          |
| Staging Deployment and Testing      | 2 Days                 | Successful code review and CI pipeline    |
| Production Deployment               | 1 Day                  | Successful staging verification           |
| **Total Estimated Time:**           | **12 Days**            |                                           |

*Note: Timeline estimates are approximate and may vary based on team size and resource availability.*

---

## **10. References**

- **Product Backlog:**  
  [`docs/backlog.md`](docs/backlog.md)

- **Architecture Plan:**  
  [`docs/architecture.md`](docs/architecture.md)

- **Coding Standards:**  
  [`docs/coding-standards.md`](docs/coding-standards.md)

---

By following this comprehensive implementation plan, the development team will successfully deliver the **Create a New Game Session** feature, establishing a solid foundation for subsequent functionalities in the **Dance Floor Ranking** game. This structured approach ensures quality, security, and adherence to established standards, facilitating a smooth development workflow and an optimal user experience.

----  

### **User Story 2.1: Create a New Game Session**

**Description:**  
As a user, I want to create a new game session so that I can gather players and start playing.

**Definition of Done:**
- **Frontend:**
  - UI component (`CreateGame.tsx`) with options to set game parameters (e.g., number of teams, players).
  - Form validation for required game settings.
  - Button to submit and create the game.
- **Backend:**
  - Firebase Cloud Function to initialize a new game document in Firestore.
  - Generate a unique game code or link for players to join.
  - Assign the creating user to a team and set initial Round Host.
- **Testing:**
  - Unit tests for form validation.
  - Integration tests for game creation and Firestore document initialization.
- **Documentation:**
  - Steps to create a new game session documented.
- **Acceptance Criteria:**
  - Users can specify game settings and create a game session.
  - A unique game code/link is generated and displayed to the creator.
  - The creator is assigned to a team and set as the initial Round Host.