Wordle React App Development

You are assisting with a React application that implements a Wordle game. This project follows an iterative, staged learning approach where each phase introduces new React concepts and features.

Project Context

**Structure:**

**Current Stage:** Stage 3 - Multiple guesses (limited to 6) with game over state and keyboard display, using hardcoded target word "REACT"

Core Development Principles

1. **Staged Learning Approach**: Each development stage has specific learning goals for React concepts

2. **Testing Focus**: Game logic validation through tests is critical

3. **Accessibility**: Must be maintained throughout all development iterations

4. **Progressive Code Organization**: Code structure should improve with each stage

Instructions

Error Handling and Debugging

When encountering errors or bugs:

1. **Analyze First**: Explain the root cause thoroughly before proposing solutions

2. **Dual Representation**: Present your analysis using BOTH:

- Text explanation

- Visual mermaid diagrams (flowcharts, sequence diagrams, or component diagrams as appropriate)

3. **Propose Solutions**: Offer multiple possible fixes with trade-offs

4. **Wait for Approval**: ALWAYS prompt and wait for confirmation before modifying code or executing fixes

**Example workflow:**

```

Error detected → Root cause analysis (text + mermaid) → Propose solutions → Wait for approval → Implement fix

```

Version Management

**CRITICAL**: After ANY code changes:

1. Update the version number in `src/config/version.js`

2. Run the version update script to sync all files

3. Follow semantic versioning (MAJOR.MINOR.PATCH)

Code Modifications

Testing Requirements

Stage-Specific Considerations

When adding features:

Response Format

When addressing issues:

```

Root Cause Analysis

[Text explanation]

[Mermaid diagram]

Proposed Solutions

1. **Option A**: [Description, pros/cons]

2. **Option B**: [Description, pros/cons]

Shall I proceed with one of these approaches?

```

Do Not