Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added validation to current row submission #8

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Added validation to current row submission #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
67018ca
add validation to curren row submittion
Jing1524 Jun 25, 2023
d233404
put back the word list in json file, removed partial for testing purpose
Jing1524 Jun 25, 2023
c9c8526
cleaning out logs
Jing1524 Jun 25, 2023
7ace9ff
keep track of current row index, to prevent previous row color change…
Jing1524 Jun 25, 2023
80d85d3
return after invalid subssion to prevent user going into next row
Jing1524 Jun 26, 2023
1f532ce
clear out the logs
Jing1524 Jun 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 50 additions & 41 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,89 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
padding: 2em;
}

.read-the-docs {
color: #888;
color: #888;
}

.board {
display: flex;
flex-direction: column;
row-gap: 5px;
display: flex;
flex-direction: column;
row-gap: 5px;
}

.row {
display: flex;
flex-direction: row;
column-gap: 5px;
display: flex;
flex-direction: row;
column-gap: 5px;
}

.letter {
width: 62px;
height: 62px;
border: 2px solid #3a3a3c;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
line-height: 1;
font-weight: bold;
width: 62px;
height: 62px;
border: 2px solid #3a3a3c;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
line-height: 1;
font-weight: bold;
}

.letter.incorrect {
background: #3a3a3c;
/* background: #3a3a3c; */
background: #888;
}

.letter.correct {
background: #538d4e;
border-color: #538d4e;
background: #538d4e;
border-color: #538d4e;
}

.letter.nearby {
background: #b59f3b;
border-color: #b59f3b;
background: #b59f3b;
border-color: #b59f3b;
}

/* keep the p tag in the dom, to avoid grid shifting */
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
26 changes: 24 additions & 2 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ function App() {
const [gameLost, setGameLost] = useState(false)
const [gameOver, setGameOver] = useState(false)

const [wordList, setWordList] = useState<string[]>([])
// Added state for invalid word error
const [invalidWordError, setInvalidWordError] = useState(false)
const [invalidWordRowIndex, setInvalidWordRowIndex] = useState(-1)

// Load the list of all 5 letter words
useEffect(() => {
const fetchWords = async () => {
Expand All @@ -39,6 +44,8 @@ function App() {
const randomIndex = Math.floor(Math.random() * words.length)
const randomWord = words[randomIndex] as string
setWordleSolution(randomWord.toUpperCase())
// set word list for row submission validation
setWordList(words)
}

fetchWords().catch(error => {
Expand Down Expand Up @@ -72,8 +79,17 @@ function App() {
JSON.stringify(guessedLetters),
) as typeof guessedLetters
const currentRow = newGuessedLetters[currentRowIndex]

// TODO: Check if current row submission already exists in previous row submissions and don't accept if true
// TODO: Check if current row submission is not in the list of words and throw invalid word error if true

//Check if current row submission is not in the list of words and throw invalid word error if true
const isValidWord = wordList.includes(currentRow.join('').toLowerCase())
if (!isValidWord) {
setInvalidWordError(true)
setInvalidWordRowIndex(currentRowIndex) // Store the index of the invalid word
return // prevent user going to next row after invalid error thrown
}

Copy link
Member

@kirandash kirandash Jun 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should also do setInvalidWordError(false) in your code.

Because of this there is a bug now. If you enter a wrong word, it's showing the error message properly. But when user corrects the word, the highlighting of letters does not work. Because invalidWordError is still true.

How to Fix?

  1. You can do setInvalidWordError(false) here in else condition or,
  2. Run a timer and set it to false after 2 seconds or
  3. Set it to false when user hits "Backspace"

I would prefer the second option since that's what is implemented on the official wordle site https://www.nytimes.com/games/wordle/index.html

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Point!

will sort that out later today, and let you know once im done! Thank you for the feedback. :)

const newUserSolution = [...userSolution]
newUserSolution[currentRowIndex] = currentRow.join('')
setUserSolution(newUserSolution)
Expand All @@ -82,6 +98,7 @@ function App() {
const newGuessedLetters = JSON.parse(
JSON.stringify(guessedLetters),
) as typeof guessedLetters

const currentRow = newGuessedLetters[currentRowIndex]
const lastLetterIndex = currentRow.findIndex(
(letter: string) => letter === '',
Expand Down Expand Up @@ -126,6 +143,10 @@ function App() {

return (
<div className="board">
<p className={`${invalidWordError ? 'visible' : 'invisible'}`}>
Not in word list!
</p>

{guessedLetters.map((row, rowIndex) => {
return (
<div className="row" key={uuidv4()}>
Expand All @@ -140,7 +161,8 @@ function App() {
if (
wordleSolution === '' ||
letter === '' ||
userSolution[rowIndex] === ''
userSolution[rowIndex] === '' ||
(invalidWordError && rowIndex === invalidWordRowIndex)
) {
className = ''
} else if (letterIdxInWordleSolution === -1) {
Expand Down