diff --git a/src/App.tsx b/src/App.tsx
index c148bee..9a9b9ec 100644
--- a/src/App.tsx
+++ b/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 (
-
-
-
-
Not Wordle
About this game
+
+
+
+
+
)
}
diff --git a/src/components/alerts/Alert.tsx b/src/components/alerts/Alert.tsx
index 22ef7d2..593b75e 100644
--- a/src/components/alerts/Alert.tsx
+++ b/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',
diff --git a/src/components/keyboard/Key.tsx b/src/components/keyboard/Key.tsx
index 959ab58..1a5cbd1 100644
--- a/src/components/keyboard/Key.tsx
+++ b/src/components/keyboard/Key.tsx
@@ -30,11 +30,16 @@ export const Key = ({
}
)
+ const handleClick: React.MouseEventHandler
= (event) => {
+ onClick(value)
+ event.currentTarget.blur()
+ }
+
return (