fixed issue #47 and keyboard bug

src/App.tsx

@@ -31,9 +31,13 @@ function App() {
     if (loaded?.solution !== solution) {
       return []
     }
-    if (loaded.guesses.includes(solution)) {
+    const gameWasWon = loaded.guesses.includes(solution)
+    if (gameWasWon) {
       setIsGameWon(true)
     }
+    if (loaded.guesses.length === 6 && !gameWasWon) {
+      setIsGameLost(true)
+    }
     return loaded.guesses
   })
 
@@ -60,7 +64,7 @@ function App() {
   }
 
   const onEnter = () => {
-    if (!(currentGuess.length === 5)) {
+    if (!(currentGuess.length === 5) && !isGameLost) {
       setIsNotEnoughLetters(true)
       return setTimeout(() => {
         setIsNotEnoughLetters(false)
@@ -88,26 +92,12 @@ function App() {
       if (guesses.length === 5) {
         setStats(addStatsForCompletedGame(stats, guesses.length + 1))
         setIsGameLost(true)
-        return setTimeout(() => {
-          setIsGameLost(false)
-        }, 2000)
       }
     }
   }
 
   return (
     <div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
-      <Alert message="Not enough letters" isOpen={isNotEnoughLetters} />
-      <Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
-      <Alert
-        message={`You lost, the word was ${solution}`}
-        isOpen={isGameLost}
-      />
-      <Alert
-        message="Game copied to clipboard"
-        isOpen={shareComplete}
-        variant="success"
-      />
       <div className="flex w-80 mx-auto items-center mb-8">
         <h1 className="text-xl grow font-bold">Not Wordle</h1>
         <InformationCircleIcon
@@ -159,6 +149,18 @@ function App() {
       >
         About this game
       </button>
+
+      <Alert message="Not enough letters" isOpen={isNotEnoughLetters} />
+      <Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
+      <Alert
+        message={`You lost, the word was ${solution}`}
+        isOpen={isGameLost}
+      />
+      <Alert
+        message="Game copied to clipboard"
+        isOpen={shareComplete}
+        variant="success"
+      />
     </div>
   )
 }

src/components/alerts/Alert.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 export const Alert = ({ isOpen, message, variant = 'warning' }: Props) => {
   const classes = classNames(
-    'fixed top-2.5 left-1/2 transform -translate-x-1/2 max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
+    'fixed top-20 left-1/2 transform -translate-x-1/2 max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden',
     {
       'bg-rose-200': variant === 'warning',
       'bg-green-200': variant === 'success',

src/components/keyboard/Key.tsx

@@ -30,11 +30,16 @@ export const Key = ({
     }
   )
 
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    onClick(value)
+    event.currentTarget.blur()
+  }
+
   return (
     <button
       style={{ width: `${width}px`, height: '58px' }}
       className={classes}
-      onClick={() => onClick(value)}
+      onClick={handleClick}
     >
       {children || value}
     </button>