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) {
|
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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue