fixed issue #47 and keyboard bug

This commit is contained in:
Hannah Park 2022-01-23 20:47:34 -05:00
parent 8104c6cd26
commit d4166eba7f
3 changed files with 25 additions and 18 deletions

View file

@ -31,9 +31,13 @@ function App() {
if (loaded?.solution !== solution) { if (loaded?.solution !== solution) {
return [] return []
} }
if (loaded.guesses.includes(solution)) { const gameWasWon = loaded.guesses.includes(solution)
if (gameWasWon) {
setIsGameWon(true) setIsGameWon(true)
} }
if (loaded.guesses.length === 6 && !gameWasWon) {
setIsGameLost(true)
}
return loaded.guesses return loaded.guesses
}) })
@ -60,7 +64,7 @@ function App() {
} }
const onEnter = () => { const onEnter = () => {
if (!(currentGuess.length === 5)) { if (!(currentGuess.length === 5) && !isGameLost) {
setIsNotEnoughLetters(true) setIsNotEnoughLetters(true)
return setTimeout(() => { return setTimeout(() => {
setIsNotEnoughLetters(false) setIsNotEnoughLetters(false)
@ -88,26 +92,12 @@ function App() {
if (guesses.length === 5) { if (guesses.length === 5) {
setStats(addStatsForCompletedGame(stats, guesses.length + 1)) setStats(addStatsForCompletedGame(stats, guesses.length + 1))
setIsGameLost(true) setIsGameLost(true)
return setTimeout(() => {
setIsGameLost(false)
}, 2000)
} }
} }
} }
return ( return (
<div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8"> <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"> <div className="flex w-80 mx-auto items-center mb-8">
<h1 className="text-xl grow font-bold">Not Wordle</h1> <h1 className="text-xl grow font-bold">Not Wordle</h1>
<InformationCircleIcon <InformationCircleIcon
@ -159,6 +149,18 @@ function App() {
> >
About this game About this game
</button> </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> </div>
) )
} }

View file

@ -10,7 +10,7 @@ type Props = {
export const Alert = ({ isOpen, message, variant = 'warning' }: Props) => { export const Alert = ({ isOpen, message, variant = 'warning' }: Props) => {
const classes = classNames( 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-rose-200': variant === 'warning',
'bg-green-200': variant === 'success', 'bg-green-200': variant === 'success',

View file

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