My React Native Journey

Creating a master list words for the game So far, we have worked with the code to work with one word "hello". Now, we will arrange it so that the game is able to select random words from a list. Vadim's tutorial selects a daily word, going by the day, between 1 and 366. So there would be 366 words in his list, and if there are more, they will never be selected. I have kept the same approach, except for a slight deviation that he maintains the list of words in the App.js code itself, I chose to move it to another file. I created a data folder in the root directory, and initially played with trying to read a text file (words.txt) or CSV file (words.csv). It seems there is no easy way of doing this, and honestly, I didn't try very hard. So, I created a words.js file, which exports the list of words, like so. Note that there are 366 words in this list. export const words_list = ['amaze,'amuse,'abyss'....366 words]; So, here is the code in the App.js file:...

 Sharing success on social media In the Wordle game, users post their success by hiding the individual words guessed and only showing the colored squares. This lets other users understand how many tries the poster took to arrive at the correct word. How is this done? When the user wins, we send out a message saying he won. In addition, we show a clickable text field, called Share. On press of this text field, we execute a function called shareScore, which will return the colored rows, and also copy the same to clipboard. For the clipboard,  import * as Clipboard from "expo-clipboard"; Alert.alert('Hurraayy', 'You won', [{text: 'Share', onPress: shareScore}]); Function shareScore: const shareScore = () => {     const textShare = rows.map(                                 (row,i) => row.map(                           ...

 Handling the Game Won or Lost State  If all the letters in the previous row are the same as that in the selected word, the game ends with a message "You have won!".  else, if there are no more tries left, the game ends with the message "Try again tomorrow". Everytime the row changes, the app looks in the previous row, and for each element in the row, it validates it against the letter positions in the selected word. We use the useEffect hook for the purpose. useEffect (() => {     if ( curRow > 0 ) {       checkGameState ();     }   }, [ curRow ])   const checkGameState = () => {       if ( checkifWon ()) {       Alert . alert ( 'Hurraayy' , 'You won' )      } else if ( checkifLost ()) {       Alert . alert ( "Meh" , "Try again tomorrow" )      }   };   const checkifWon = () => {       const row ...

 Adding Background Colors to the grid and the keyboard. Import colors from constants.js (provided by Vadim) Adding background colors to the grid Set the background color of the cell, based on the return value of a function getCellBGColor, which takes the letter itself, the current row, and the current column, and returns the color that is expected.       < ScrollView style = { styles . map } >         { rows . map (( row , i ) => (           < View               key = { `row-${ i }` }               style = { styles . row } >               { row . map (( letter , j ) => (                 < View                   key = { `cell-${ i }-${ j }` }                   s...

Defining the Logic When a key is pressed, the following actions should be implemented: 1. The first entry should be on the leftmost tile of the first row. Subsequent keys should be on the next column of the same row until you run out of columns. At this time, the user should be able to press only CLEAR and ENTER. Pressing any other key will have no effect. 2. Pressing the CLEAR key should clear the last entered key. 3. Pressing the ENTER key should ma tch the entered word against the selected word, to check for correct letters and positions.        a.  If the entire word matches, the game should end with a "You have won" message.     b. If there is a partial match, find out the locations of correct and incorrect matches and color code                accordingly.       c. If the number of tries are completed with no match, the game should end with "Better luck next          ...

Design and Development Approach UI Design: Vadim shares three screenshots of the design for the game. Sharing a relevant one below for reference. Place the WORDLE Title at the top center.  Keyboard at the bottom for the user to select letters and Enter and Clear A 5 * 6 matrix of tiles, to represent 5 letters of the word, and 6 tries to arrive at the selected word.  Colors: White foreground.              Start with all tiles set with a Grey background.              If the chosen letter is part of the selected word, and in the right place, give a Green b/g.              If the chosen letter is part of the selected word, but not in the right place, give an Orange b/g                  Grey for letters not available in the selected word. Development Approach The Game Board Component 1. Define the SafeAreaView...

Issues faced when buildng a Wordle Clone using ReactNative and Expo  Source:  https://www.youtube.com/watch?v=2SpbSIPiDM0 Environment Information that is different from the one used in the video: java version "18.0.1.1" 2022-04-22 node.js - v18.4.0 npm 8.12.2 The first issue I face at 'expo run' is this: Failed to construct transformer:  Error: error:0308010C:digital envelope routines::unsupported Resolved by ' set NODE_OPTIONS =--openssl-legacy-provider' Reference:  https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope- routinesunsupported https://github.com/webpack/webpack/issues/14532#issuecomment-947012063 I did not understand why the issue came up, or how it was resolved.. Will come back to it later. Next, I try to move the list of words to a different file, so they don't clutter the existing code. I create a new file called words_list.js. In this, I export a named constant called word_list that has the list of words...