Game page

[carloshs1994]

Hi @JohnFTitor 👋🏻

Thanks for taking the time to review the project. Here are some things important to note about it:

Sass

The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

Now into the project...

Changes implemented in "game-page" branch

• ✅ My code follows the style guidelines of this project.
• ✅ The mix and match game follows Fisher-Yates Shuffle Algorithm
• ✅ We use the pokeapi to create the images for the cards inside the board
• ✅ We added animations and transitions to the cards to make them more interactive
• ✅ We used a class to store all the game's logic

Final notes

Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

[JohnFTitor]

It would be nice to add a function here that allows the player to see the cards before they're hidden. That way we would allow them to win easily 💯

[carloshs1994]

Hey @JohnFTitor! This is the first time I'm reading this comment, sorry about that. I think this one, in particular, is not something I would like to change because I actually like that you have to flip some cards before you understand what you are looking for. Honestly, I wanted to use random images from the first 200 pokemon so we could have a harder game but I didn't have the time last week. What do you think?

[JohnFTitor]

Hello @carloshs1994
Don't worry. I see your point. Maybe I didn't express myself correctly.
The game should be like that of course. The user needs to flip cards in order to match them.

Question. Is this a memory game?
I thought it was a memory game because in that case, users need to first have a short, quick glance, to see all the cards flipped, before they hide again so the game starts. Because the way it's implemented right now makes you have to be wrong first in order to match them all.

If it was not intended as a memory game, then my bad. Please let me know which is the implementation you want 💯
I agree. It would be a good idea. You can use this function

choose-your-pokemon/src/scripts/modules/APIhandling.js

Lines 1 to 11 in 679f1e1

	const getPokemons = async (startingIndex, numberOfPokemons) => {
	let pokemons = [];
	const finalIndex = (startingIndex + numberOfPokemons) >= 500 ? 500
	: startingIndex + numberOfPokemons;
	for (let i = startingIndex + 1; i <= finalIndex; i += 1) {
	const pokemon = fetch(`https://pokeapi.co/api/v2/pokemon/${i}/`).then((response) => response.json());
	pokemons.push(pokemon);
	}
	pokemons = await Promise.all(pokemons);
	return pokemons;
	};

To get the data within indexes. Please let me know if you have another idea.
Cheers!

[JohnFTitor]

Hi @carloshs1994 👋🏻

I loved how the game looks. You did a great job! 🎉 🎉
There are some things I think could be improved with the project. Please let me know if you think differently and have any questions. 😸

You've done a great job so far! Let's highlight the best approaches within this project:

• ✅ Use of ES6 syntax creating a clean codebase. Especially organizing the functionality in a class. Brilliant.
• ✅ Dynamically Generate the content of the page following the SPA
• ✅ The game is awesome and fun. You did a great job. It was really interesting the logic you implemented.
• ✅ The animation you added when they're matched was an excellent addon. 🐱

Required Changes ♻️

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

Cheers and Happy coding!👏👏👏

---

This is a feature teammate review. Remember that everything said here is intended for both of us to learn and grow as Software Developers 💻 and we may have different approaches or perspectives. That being said, don't hesitate to comment if you disagree with one required change. We can talk everything through 🐱