Wordle youness abtaouri

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.env
+.vs_code/

README.md

@@ -1,57 +1,41 @@
 # OpenDevEd-Wordle
-## Requirements:
-Your task is to create a web-based Wordle game using React that adheres to the following specifications:
 
-### User Interface (UI):
+## How to run the app:
 
-Design a clean and intuitive UI for the game that includes:
+Clone the repository locally.</br>
+Switch branch to wordle-youness-abtaouri.</br>
+Change the directory to wordle.</br>
+Run the command npm install.</br>
+Run the command npm run build.</br>
+Run the command npm run preview.</br>
+Copy the URL displayed in the terminal and open it in your browser.</br>
 
-- 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).
+## Components:
 
-### State Management:
+Grid and Row Components: Used for displaying the input fields and the previous guesses.</br>
+Keyboard Component: Keeps track of the used keys.</br>
+Wordle Component: Contains the entire game UI.</br>
 
-Implement a robust state management system to handle:
+## Game logic:
 
-- Target word selection (randomly generate a word at the start of the game).
-- Storing user guesses and their results.
-- Tracking remaining attempts.
+The user is shown a grid to input letters.</br>
+When the user presses Enter, the typed word is evaluated letter by letter and colored depending on the correctness of the letters.</br>
+The user wins the game by correctly guessing all the letters in the word in the right positions.</br>
+The user loses if they fail to guess the word in 6 attempts.</br>
 
-### User Interaction:
+## States:
 
-- Capture user input for word guesses.
-- Validate input (alphabetic characters, word length, etc.).
-- Handle the submission of guesses and update the game state accordingly.
+turns: Keeps track of the number of guesses evaluated.</br>
+guesses: Stores the user's guesses to display them.</br>
+currentGuess: Tracks the user's current input.</br>
+isCorrect: Changes to true when the user guesses the correct word, and is used to show the end-game modal.</br>
+usedKeys: Stores the state of the keyboard letters and their corresponding colors.</br>
 
+## Implementation:
 
-### Game Logic:
-
-- 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.
-
-## Code Quality:
-
-- Write clean, readable, and maintainable code.
-- Implement best practices for React development.
-- Ensure error handling for edge cases (invalid input, unexpected behavior).
-
-## 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.
-
-## Evaluation Criteria:
-
-- 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 Wordle component has a keyup event listener that triggers the handleKeyUp function. This function decides whether to delete the last character or start evaluating the guess. As long as the user hasn't pressed Enter, we keep storing the pressed letters in currentGuess.</br></br>
+When the user hits Enter, we evaluate the currentGuess. If it matches the correct word, we set isCorrect to true. We then create an array of objects containing each letter and its color, add it to the guess history, and use the same formatted guess array to update the usedKeys accordingly.</br></br>
+All of this logic is handled in the useWordle hook, which returns these states, making them accessible in the Wordle component.</br></br>
+The Wordle component is responsible for the display, utilizing the Grid and Keyboard components.</br></br>
+The Grid component loops over the guesses and uses the Row component to create rows for displaying the guesses.</br></br>
+The Keyboard component loops over the usedKeys and displays them.

wordle/.gitignore

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

wordle/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

wordle/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 },
+    ],
+  },
+})

wordle/index.html

@@ -0,0 +1,50 @@
+<!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>My Wordle</title>
+  </head>
+  <body>
+		<header>
+			<button>
+				<a href="#rules">
+					rules
+				</a>
+			</button>
+		</header>
+		<div class="modal" id="rules">
+			<div class="rulesModal">
+				<button class="close-button" aria-label="Close">
+					<a href="#">X</a>
+				</button>
+				<h2>
+					How to play the game
+				</h2>
+				<div>
+					<p>
+						- try a word
+					</p>
+					<p>
+						- green letter means the right letter at the right position
+					</p>
+					<p>
+						- yellow letter means the right letter at the wrong position
+					</p>
+					<p>
+						- red card means the letter does not exist
+					</p>
+					<p>
+						- you have 6 attempts to guess the word
+					</p>
+					<p>
+						- refresh the page for a new word
+					</p>
+				</div>
+			</div>
+		</div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>