I am learning react native and attemping to build a wordle game but with unlimited plays. how can i reset the game while also changing the word to be guessed? The game works properly – just no way to reset the game + randomize the word (only word is ‘hello’). how do I go about adding these 2 features? I want to have a View pop-up(?) that replaces the keyboard with ‘play again’ like this:
const NUMBER_OF_TRIES = 6
const copyArray = arr => {
return [...arr.map(rows => [...rows])]
}
export default function App () {
const word = 'hello'
const letters = word.split('')
const [rows, setRows] = useState(
new Array(NUMBER_OF_TRIES).fill(new Array(letters.length).fill(''))
)
const [curRow, setCurRow] = useState(0)
const [curCol, setCurCol] = useState(0)
const [gameState, setGameState] = useState('playing') // playing , won , lost
useEffect(() => {
if (curRow > 0) {
checkGameState()
}
}, [curRow])
const checkGameState = () => {
if (checkIfWon()) {
setGameState('won')
Alert.alert('Hurrah', 'You won!', [
{ text: 'Share', onPress: shareScore }
])
} else if (checkIfLost()) {
setGameState('lost')
Alert.alert('You Lose', 'Try again...')
}
}
return (
<SafeAreaView style={styles.container}>
<StatusBar style='light' />
<Text style={styles.title}>wordle</Text>
<ScrollView style={styles.map}>
{rows.map((row, i) => (
<View key={`row-${i}`} style={styles.row}>
{row.map((letter, j) => (
<View
key={`cell-${i}-${j}`}
style={[
styles.cell,
{
borderColor: isCellActive(i, j)
? colors.grey
: colors.darkgrey,
backgroundColor: getCellBGColor(i, j)
}
]}
>
<Text style={styles.cellText}> {letter.toUpperCase()}</Text>
</View>
))}
</View>
))}
</ScrollView>
<Keyboard/>
</SafeAreaView>
)