Front-end planning.

[MichaelPachec0]

This will be used as conversation on how the back-end will be structured and will reference other issues pertaining to more specific bugs/enhancements. The specific issues that will be referenced here will talk about what the front-end will do and can then be assigned individually.

Issues to tackle:

• Creating the base memory game structure. #15
• Flipping animation to reveal the pokemon. #16
• Create CSS file #19
• Create RESET button #20
• Logic to check if the cards match #25
• Sending a request to the backend API #26
• Rendering the pokemon cards to the DOM. #27
• Logic to keep score #28
• Creating a header that asks for user name, then displays it and their score #31
• UI FIX: Pokemon image is too small. #44
• REFACTOR: Event handler should be contained in a function. #48
• REFACTOR: Rendering Pokemon cards to DOM. #49
• Duplicate copies of front-end code #54

[MichaelPachec0]

For now there isnt any issues but as people comment here issues can be opened and tracked.

[JoeDravarol]

After re-reading the conversations I think we are using this Frontend Mentor as design inspiration provided by @istarlet. Alysanne mention that we could use pokemon cards instead for the memory game.

I think within the time scope we will only be able to tackle the main memory game feature. We would need someone to find some pokemon cards image first, ideally 8 pokemons would be enough since we would have so setup the request for the images on each request in the backend.

[JoeDravarol]

These was some issues suggestion provided by Alysanne to tackle on the Frontend:

Issues to tackle:

• Setting up fetch request to the backend.
• Displaying cards in the DOM.
• Flipping animations
• Logic to identify match cards.
• Creating the layout.

[JoeDravarol]

I think it would be great to assign people to tackle #15 and #16 today, so that we have the base styling ready for when we will tackle the DOM logics on Monday.

[MichaelPachec0]

I think it would be great to assign people to tackle #15 and #16 today, so that we have the base styling ready for when we will tackle the DOM logics on Monday.

I agree, just in case be sure to post it in the discord channel so everyone knows about it.

[harris2310]

Hello Michael,
I'll work on issue #15 and see what I can do.
Should it be vanilla Javascript, or can I use react for it.

[JoeDravarol]

I think it would be great to assign people to tackle #15 and #16 today, so that we have the base styling ready for when we will tackle the DOM logics on Monday.

I agree, just in case be sure to post it in the discord channel so everyone knows about it.

I've asked @jericashall for permission just waiting for approval. I'm currently at work at the moment, once I have the approval to start #15 #16 I'll let you know and it would be great if you could post it on Discord on my behalf. Thanks in Advance!

[JoeDravarol]

Hello Michael, I'll work on issue #15 and see what I can do. Should it be vanilla Javascript, or can I use react for it.

Note: #15 should just be HTML and CSS only. We'll be working on the JavaScript DOM and NodeJs on Monday I believe.

Ideally it should be in vanilla JavaScript because majority of the member has not learn React and this project should be beginner friendly. It would be great if you don't start on the issue just yet since we are waiting for @jericashall approval so that we can have multiple people colloborate on it after the Office hours today.

[tmills0203]

Hello Michael, I'll work on issue #15 and see what I can do. Should it be vanilla Javascript, or can I use react for it.

Note: #15 should just be HTML and CSS only. We'll be working on the JavaScript DOM and NodeJs on Monday I believe.

Ideally it should be in vanilla JavaScript because majority of the member has not learn React and this project should be beginner friendly. It would be great if you don't start on the issue just yet since we are waiting for @jericashall approval so that we can have multiple people colloborate on it after the Office hours today.

I agree that vanilla JS should be used since we haven't learn react yet.

[harris2310]

Okay I'll start working on it,

Thanks for the communication!

[tmills0203]

Don't worry about starting yet, I think the others would like to discuss the design first.

[harris2310]

Sure, let me know if there's something I can start with right now!

[tmills0203]

Sure, let me know if there's something I can start with right now!

hey Harris, I got the ok from @jericashall to go ahead start on #15.

[jericashall]

I responded to a couple people on discord but wanted to write here, too.
For issue #15 - I think people are interpreting this in different ways. Harris seems to be interpreting it as the javascript logic for the game, and Joe is interpreting it as page layout structure with css.
I think we definitely want someone to work on html/css layout ahead of time. Whoever wants to take that issue is fine. Someone could also outline the game logic but getting the specifics done will be hard without the api finished.
Issue #16 should be fine to work on, you can pick if you'd like to work with JS or CSS animations.

As for react - I don't think we should use that on this project. Lots of the project contributors are only familiar with vanilla javascript at this point.

Also, Joe mentioned someone finding Pokemon cards to use. Someone in the API issue said they had an idea for that, so I'm waiting to hear back from them.

[JoeDravarol]

I responded to a couple people on discord but wanted to write here, too. For issue #15 - I think people are interpreting this in different ways. Harris seems to be interpreting it as the javascript logic for the game, and Joe is interpreting it as page layout structure with css. I think we definitely want someone to work on html/css layout ahead of time. Whoever wants to take that issue is fine. Someone could also outline the game logic but getting the specifics done will be hard without the api finished.

In regards to issue #15 I think it should only be page layout structure with css because we don't have any data to work with yet as it will be coming from the back end. Also since there are 13 of us collaborating, I am thinking we should split each features into its own issue so everyone will be able to contribute at least once. So If @harris2310 was to work on both the layout stucture, CSS and JavaScript a lot of people will not have the opportunity to able to contribute.

Unless we assign multiple people on the same issue, where the assign collaborators are in a Discord voice chat; we could have one person sharing their screen as the main coder and bounce idea of each other. I have seen people doing it this way during the group project night. This is open for discussion.

[jericashall]

Yeah, I agree the JS will be hard to do without the API. We can split out issues into smaller or tickets or have multiple people work on one ticket. We're trying to plan a synchronous time on Monday for most people to meet, so we could have some people work on things together during that time.

[MichaelPachec0]

as i mentioned to the group in the vc chat. As front end devs you are in charge of what output you get, you get to decide for the most part what the output should be. Assume in this case that the back-end developers will give you everything you need to start the project and work from there.

The mockup in #15 is a great example of what to expect, you have a general idea that you expect an array of strings that contain a url to the poke image. We also know they [array] needs to be randomized, the back-end also needs to take care of that since that was what was specified as a requirement as part of the project.

You also need a way of keeping score. This can be setup either as sending a separate object, or a big meta object that contains everything.
This is a mockup object that could be sent to you(i opted to send it as one big object because its going to be easier for you and the backend groups (both know what data is expected to be sent to the client):

resp = {
    name: "name of the player",
    points: 100,
    level: 3,
   //This might be a little too advanced but since the mockup defines it then
   // im including it here
    timer: date_object
   // array of links to pokemon in question
   // since this is a simple game worrying about cheaters should be secondary issue, 
   // more important is get this working 
   poke_array: ["url to poke 1", "url to poke 2", ... "url to poke n"]
}

take this idea and make it you own front end 💯 devs

[harris2310]

Got it, I'll just write the css and html structure of the tiles

[MichaelPachec0]

just posted the examples for in the back-end api issue as a comment here
any questions welcome here or in the issue page itself