From d627d4d2f63f3cb46fe11c0e31d7fc6ff760b9a8 Mon Sep 17 00:00:00 2001
From: Jaber Said <jabrsalm449@gmail.com>
Date: Fri, 1 Sep 2023 23:35:58 +0300
Subject: [PATCH 1/2] up date to apply best practices in programming

---
 src/HangmanWord.tsx | 68 +++++++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/HangmanWord.tsx b/src/HangmanWord.tsx
index afb73db..f5b83c7 100644
--- a/src/HangmanWord.tsx
+++ b/src/HangmanWord.tsx
@@ -1,41 +1,49 @@
+import React from 'react';
+
 type HangmanWordProps = {
-  guessedLetters: string[]
-  wordToGuess: string
-  reveal?: boolean
-}
+  guessedLetters: string[];
+  wordToGuess: string;
+  reveal?: boolean;
+};
 
-export function HangmanWord({
+const HangmanWord: React.FC<HangmanWordProps> = ({
   guessedLetters,
   wordToGuess,
   reveal = false,
-}: HangmanWordProps) {
+}) => {
+  const renderLetter = (letter: string, index: number) => {
+    const isGuessed = guessedLetters.includes(letter);
+    const isHidden = !isGuessed && reveal;
+    const textColor = isHidden ? 'red' : 'black';
+
+    return (
+      <span
+        key={index}
+        style={{
+          borderBottom: '.1em solid black',
+          visibility: isHidden ? 'visible' : 'hidden',
+          color: textColor,
+        }}
+      >
+        {letter}
+      </span>
+    );
+  };
+
   return (
     <div
       style={{
-        display: "flex",
-        gap: ".25em",
-        fontSize: "6rem",
-        fontWeight: "bold",
-        textTransform: "uppercase",
-        fontFamily: "monospace",
+        display: 'flex',
+        gap: '.25em',
+        fontSize: '6rem',
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        fontFamily: 'monospace',
       }}
     >
-      {wordToGuess.split("").map((letter, index) => (
-        <span style={{ borderBottom: ".1em solid black" }} key={index}>
-          <span
-            style={{
-              visibility:
-                guessedLetters.includes(letter) || reveal
-                  ? "visible"
-                  : "hidden",
-              color:
-                !guessedLetters.includes(letter) && reveal ? "red" : "black",
-            }}
-          >
-            {letter}
-          </span>
-        </span>
-      ))}
+      {wordToGuess.split('').map((letter, index) => renderLetter(letter, index))}
     </div>
-  )
-}
+  );
+};
+
+export default HangmanWord;

From af23a6f6ebcb0b907af57fbd7527f43a29304f89 Mon Sep 17 00:00:00 2001
From: Jaber Said <jabrsalm449@gmail.com>
Date: Fri, 1 Sep 2023 23:38:28 +0300
Subject: [PATCH 2/2] update to apply best practices in programming

---
 src/HangmanWord.tsx | 47 ++++++++++++++++------------
 src/Keyboard.tsx    | 76 +++++++++++++++++----------------------------
 2 files changed, 55 insertions(+), 68 deletions(-)

diff --git a/src/HangmanWord.tsx b/src/HangmanWord.tsx
index f5b83c7..7b29d9d 100644
--- a/src/HangmanWord.tsx
+++ b/src/HangmanWord.tsx
@@ -6,30 +6,35 @@ type HangmanWordProps = {
   reveal?: boolean;
 };
 
+const renderLetter = (
+  letter: string,
+  index: number,
+  guessedLetters: string[],
+  reveal: boolean
+) => {
+  const isGuessed = guessedLetters.includes(letter);
+  const isHidden = !isGuessed && reveal;
+  const textColor = isHidden ? 'red' : 'black';
+
+  return (
+    <span
+      key={index}
+      style={{
+        borderBottom: '.1em solid black',
+        visibility: isHidden ? 'visible' : 'hidden',
+        color: textColor,
+      }}
+    >
+      {letter}
+    </span>
+  );
+};
+
 const HangmanWord: React.FC<HangmanWordProps> = ({
   guessedLetters,
   wordToGuess,
   reveal = false,
 }) => {
-  const renderLetter = (letter: string, index: number) => {
-    const isGuessed = guessedLetters.includes(letter);
-    const isHidden = !isGuessed && reveal;
-    const textColor = isHidden ? 'red' : 'black';
-
-    return (
-      <span
-        key={index}
-        style={{
-          borderBottom: '.1em solid black',
-          visibility: isHidden ? 'visible' : 'hidden',
-          color: textColor,
-        }}
-      >
-        {letter}
-      </span>
-    );
-  };
-
   return (
     <div
       style={{
@@ -41,7 +46,9 @@ const HangmanWord: React.FC<HangmanWordProps> = ({
         fontFamily: 'monospace',
       }}
     >
-      {wordToGuess.split('').map((letter, index) => renderLetter(letter, index))}
+      {wordToGuess.split('').map((letter, index) =>
+        renderLetter(letter, index, guessedLetters, reveal)
+      )}
     </div>
   );
 };
diff --git a/src/Keyboard.tsx b/src/Keyboard.tsx
index 58c95b1..0fa4e49 100644
--- a/src/Keyboard.tsx
+++ b/src/Keyboard.tsx
@@ -1,71 +1,51 @@
-import styles from "./Keyboard.module.css"
+import React from 'react';
+import styles from './Keyboard.module.css';
 
-const KEYS = [
-  "a",
-  "b",
-  "c",
-  "d",
-  "e",
-  "f",
-  "g",
-  "h",
-  "i",
-  "j",
-  "k",
-  "l",
-  "m",
-  "n",
-  "o",
-  "p",
-  "q",
-  "r",
-  "s",
-  "t",
-  "u",
-  "v",
-  "w",
-  "x",
-  "y",
-  "z",
-]
+const KEYS = Array.from('abcdefghijklmnopqrstuvwxyz');
 
 type KeyboardProps = {
-  disabled?: boolean
-  activeLetters: string[]
-  inactiveLetters: string[]
-  addGuessedLetter: (letter: string) => void
-}
+  disabled?: boolean;
+  activeLetters: string[];
+  inactiveLetters: string[];
+  addGuessedLetter: (letter: string) => void;
+};
 
-export function Keyboard({
+const Keyboard: React.FC<KeyboardProps> = ({
   activeLetters,
   inactiveLetters,
   addGuessedLetter,
   disabled = false,
-}: KeyboardProps) {
+}) => {
   return (
     <div
       style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(75px, 1fr))",
-        gap: ".5rem",
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(75px, 1fr))',
+        gap: '0.5rem',
       }}
     >
-      {KEYS.map(key => {
-        const isActive = activeLetters.includes(key)
-        const isInactive = inactiveLetters.includes(key)
+      {KEYS.map((key) => {
+        const isActive = activeLetters.includes(key);
+        const isInactive = inactiveLetters.includes(key);
+        const buttonClasses = [
+          styles.btn,
+          isActive ? styles.active : '',
+          isInactive ? styles.inactive : '',
+        ].join(' ');
+
         return (
           <button
             onClick={() => addGuessedLetter(key)}
-            className={`${styles.btn} ${isActive ? styles.active : ""} ${
-              isInactive ? styles.inactive : ""
-            }`}
+            className={buttonClasses}
             disabled={isInactive || isActive || disabled}
             key={key}
           >
             {key}
           </button>
-        )
+        );
       })}
     </div>
-  )
-}
+  );
+};
+
+export default Keyboard;