I always wanted to help people to use their cognitive skills to remember the things they interact with and therefore, to improve their memories as they grow up
What it does
The app presents the user with 24 icons, each one hidden under a question mark.The icon underneath will reveal itself whenever the user selects its question mark icon and then hides again unless the user selects a matching icon next, whereby the first pair will be formed and recorded in the score above the Reset button. The user will keep unfolding the icons to find the matching pairs until they reach 12, at this point there will be no more hidden icons and the user will have to Reset the game to play again.
How I built it
I installed Expo which includes React Native and then coded the app in VS Code. I didn't install any extra packages. I added the Components folder in the project, in which I added three components, the Header component - which I used to display the title of the app and its stylings, the Score component - which displays the Score of the matching pairs as well as its stylings and lastly the Card component - which displays the cards of the icons from expo vector icons. Then I created the app logic in the App.js file, whereby I imported all the components as well as the helper file which includes the function to shuffle the organization of the cards on the screen every time the user resets the game. In the App.js file , I created a list of icons that I'll be using and since the Card will require a name, source and color, with the help of the expo vector icons list I was able to get all that. Then I created a copy of the cards array and then combined all the cards so that each card can have a pair. Then go through that array and generate a unique ID for each one, set the icon source, and then set it to a closed state by default. Then when the app renders it should create the header, cards, score, and the button for resetting the current game. Please view the whole tutorial here
Challenges I ran into
It was challenging to create a copy of the array of Cards that won't be modified whenever the original copy changes. I find that to be the case with the slice() method, then I used the spread operator but the card wouldn't render and I got the element was invalid error, therefore I had to convert the Cards array to a JSON object using the stringify() method and then to an array object using the parse() method. This worked.
Accomplishments that I'm proud of
I was able to create a copy of the Cards array by converting the array to a JSON object and then back to an array object.
I was able to complete the project by using the Class components instead of Hooks which I'm still learning.
What I learned
I learned to create a copy of an array without using the slice() method or the spread operator. I learned to create a random instance of the game every time a player resets it. I learned to use props to store values of a component, and then updates them every time the state of the game changes.
What's next for Test Your Memory
Next, I want to integrate Lottie so that I can add some animations when the player completes their matches or whenever they get a right match also add levels to the game according to its difficulty.