My React Native Journey - 8 - Adding background colors to the Wordle UI

 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}`}
                  style = {[styles.cell,
                             {borderColor: isCellActive(i, j)
                               ? colors.lightgrey
                               : colors.darkgrey,
                               backgroundColor: getCellBGColor(letter,i,j),
                            },
                          ]}>
                  <Text style = {styles.cellText}>{letter.toUpperCase()}</Text>
                </View>
              ))}
          </View>
        ))}
      </ScrollView>\    
The function is provided below.
If we are currently on a new blank row, return the black color.
Else if the letter is in the letters array, and also in the same column as the current column, return primary
color.
Else if the letter is found to be in the letters array, return the secondary color.
Else, return the darkgrey color.

const getCellBGColor = (letter, row, col) => {
    if (row >= curRow) {
      return colors.black;
    }
    if (letter === letters[col]) {
      return colors.primary;
    }
    if (letters.includes(letter)) {
      return colors.secondary;
    }
    return colors.darkgrey;
  }

Adding background colors to the keyboard

In the Keyboard tag, include the following code.

<Keyboard
        onKeyPressed={onKeyPressed}
        greenCaps={getAllLettersWithColor(colors.primary)}
        yellowCaps={getAllLettersWithColor(colors.secondary)}
        greyCaps = {getAllLettersWithColor(colors.darkgrey)}
      />

The function getAllLettersWithColor will take the required color as parameter, and return all the letters
that are part of the array of that color.
const getAllLettersWithColor = (color) => {
    return rows.flatMap((row,i) =>
    row.filter((cell, j) => getCellBGColor(i,j) === color));
  }

greenCaps. yellowCaps and greyCaps, and the code to the keyboard View are all defined in the
keyboard.js component, provided by Vadim.

Next activity is to handle game States - whether we won or lost.


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