My React Native Journey - 6 - Design the Wordle UI and set up the UI Code.

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. This ensures that everything on the screen is seen.
2. Set the title at the top.
3. Set the keyboard (by importing from Keyboard components that Vadim has provided) at the bottom.

4. Define the row view.Within the row view, define tiles.

We need a row to have as many cells as there are letters in the word. And we need as many such rows, as there are number of tries available for the player. In our case, this is going to be  5 columns (number of letters in a word)  repeated 6 times (number of tries).

Get the word from the list corresponding to the current day (in numbers from 1 to 365). Split this word into an array called letters. 
const rows = new Array(NUMBER_OF_TRIES).fill(new Array(letters.length).fill('a'))
 
This line of code will create a 6 * 5 matrix, each populated with the letter "a". 

<SafeAreaView >
      <StatusBar />
      <Text>WORDLE</Text>
      <View>
        {rows.map((row) => (
          <View>
              {row.map((cell) => (
                <View >
                  <Text >{cell.toUpperCase()}</Text>
                </View>
              ))}
          </View>
        ))}

      </View>
      <Keyboard/>
    </SafeAreaView>

How the map function works:

For every row in rows, and for every cell in a row, render the value ("a" in this case) of the cell. And since we are converting to Upper Case, it will render a grid of 6 * 5 cells with "A" on them.

The UI is now ready. The next step is to implement the Logic.


      • Comments

      Post a Comment

      Popular posts from this blog

      Reading a pre-populated sqlite database using react native with expo..

      Image
      I recently needed to read an existing sqlite database, and return its contents to the react native front-end on an android emulator.  I  read several related posts on the subject but they all give examples of console logging, never returning.  I faced quite some difficulties, and hence decided to create this post as a blog. Hope it helps someone who comes here looking for a solution. Usually, there are two main issues that you would face. One, you would notice that simply opening a database and fetching won't work. You need to copy the local database to an internal document store and then use that database. Second, you would notice that there is no way of 'returning' the value of  a variable in the traditional sense of the term. You must handle it within the async function itself. So follow me for the solution.  Step 1. Create the root folder. From the terminal in the root folder, create the react native app with expo using : expo init newApp Choose the blank te...
      Read more

      React Hooks - useState Vs useRef (An explanation)

      Image
      I have tried to provide a brief  flowchart representation of how useState, useEffect and useRef work. The source for this explanation is from  WebDev Simplified's you tube channel . Suppose you wanted to show a name field and a count field to count how many times you updated the name field.  The diagram below shows the code (not focussing too much on the syntax and stuff), how one would normally do it, and the challenges/details of how react will work in each case. In general, on the left part of the diagram, I have provided the code, the middle part displays the contents of the form as things happen, and have included some explanation on how it all works on the right part.  Hoping the picture is self-explanatory.  The biggest usecase for useRef is to refer to the elements inside of the HTML. Each element inside the focument has a 'ref' attribute which can be set to anything. Most common use is to set focus to a certain element in the DOM. In the pictorial below...
      Read more