Wordle zakaria lafou

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,57 +1,79 @@
-# OpenDevEd-Wordle
-## Requirements:
-Your task is to create a web-based Wordle game using React that adheres to the following specifications:
+# Wordle Clone
 
-### User Interface (UI):
+This project is a clone of the popular word-guessing game Wordle, built using React, TypeScript, and Vite. The application allows users to guess a five-letter word within six attempts.
 
-Design a clean and intuitive UI for the game that includes:
+## Table of Contents
 
-- Input field for guessing words.
-- Submit button to submit the guess.
-- Display area for previous guesses.
-= Indication of correct letters in correct positions (right letter, right position).
-- Indication of correct letters in the wrong position.
-- Display remaining attempts.
-- End game state UI (upon winning or losing).
+- [Installation](#installation)
+- [Usage](#usage)
+- [Features](#features)
+- [Approach and Decisions](#approach-and-decisions)
 
-### State Management:
+## Installation
 
-Implement a robust state management system to handle:
+To install and run the project locally, follow these steps:
 
-- Target word selection (randomly generate a word at the start of the game).
-- Storing user guesses and their results.
-- Tracking remaining attempts.
+1. Clone the repository:
+    ```sh
+    git clone https://github.com/your-username/wordle-clone.git
+    cd wordle-clone
+    ```
 
-### User Interaction:
+2. Install dependencies:
+    ```sh
+    npm install
+    ```
 
-- Capture user input for word guesses.
-- Validate input (alphabetic characters, word length, etc.).
-- Handle the submission of guesses and update the game state accordingly.
+3. Start the development server:
+    ```sh
+    npm run
 
+    ```
 
-### Game Logic:
+## Usage
 
-- Compare the user's guessed word against the target word.
-- Provide feedback to the user about the correctness of the guessed word.
-- End the game when the correct word is guessed or when the attempts reach zero.
+Open your browser and navigate to `http://localhost:5173` to start playing the game.
 
-## Code Quality:
+## Features
 
-- Write clean, readable, and maintainable code.
-- Implement best practices for React development.
-- Ensure error handling for edge cases (invalid input, unexpected behavior).
+- **Word Guessing**: Users can guess a five-letter word within six attempts.
+- **Keyboard Input**: Users can type their guesses using the keyboard.
+- **Win/Lose Modal**: Displays a modal when the user wins or loses the game.
+- **Remaining Attempts**: Shows the number of remaining attempts.
+- **Animating Wrong Row**: include Animtion when user type a non existing word
 
-## Submission Guidelines:
 
-- Fork this [repository](https://github.com/OpenDevEd/OpenDevEd-wordle/)) and create a new branch named `wordle-[YOUR NAME]`.
-- Provide clear instructions on how to run the application locally.
-- Include a README file explaining your approach, decisions made, and any additional features implemented.
-- Open a PR.
+## Approach and Decisions
 
-## Evaluation Criteria:
+### State Management
 
-- UI/UX design and functionality.
-- Code quality, structure, and maintainability.
-- State management and logic implementation.
-- Handling of edge cases and error scenarios.
-- Bonus points for additional features or optimizations.
+The application uses React's `useState` and `useEffect` hooks for state management. Key states include:
+
+- `focusedRow`: Tracks the current row being edited.
+- `letters`: Stores the current letters typed by the user.
+- `words`: An array of words guessed by the user.
+- `submitted`: A boolean indicating if the current guess has been submitted.
+- `remainingAttempts`: Tracks the number of remaining attempts.
+- `win` and `lose`: Booleans indicating the game status.
+
+### Event Handling
+
+- **Keyboard Events**: The `handleKeyDown` function handles keyboard events for typing letters, submitting guesses, and deleting letters.
+- **Submit Button**: The `SubmitButton` component triggers the `submit` function to validate and submit the user's guess.
+
+### Random Word Selection
+
+The solution word is randomly selected from a predefined list of words in [`src/data/words.ts`](src/data/words.ts)
+
+### Component Structure
+
+- **Header**: Displays the game logo.
+- **GameInfo**: Shows the number of remaining attempts.
+- **Row**: Represents each row of the game where the user types their guess.
+- **SubmitButton**: A button to submit the current guess.
+- **EndGameModal**: Displays a modal when the game ends, indicating whether the user won or lost.
+- **LetterBox**: Displays a single letter box. 
+
+### Styling
+
+The project uses Tailwind CSS for styling

eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+})

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Wordle</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>