fixed issue #47 and keyboard bug
This commit is contained in:
parent
8104c6cd26
commit
d4166eba7f
3 changed files with 25 additions and 18 deletions
34
src/App.tsx
34
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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue