Components and Containers

[twishasaraiya]

Static data will be passed in for now and redux configuration will be done later.

Basic Flow

1. Landing Page from where the user gets 2 options: Start Playing or Login
2. Depending on the user choice he goes to step 3 or 4
3. Login/Signup then move to step 4
4. Quote and Options then depending on answer respective component gets added to the page
5. If user logouts of game, all data will be lost

Components(props)

• Quote and Options(quote,options[])
• Score(score)
• Timer(time left)
• HowToPlay
• Answer(isAnswerCorrect
• NextButton

Containers

• Quote and Options
• Score

Besides these, there is Login/SignUp Component. You can refer this Issue

Please let me know your suggestions and opinions here.

[anantoghosh]

I think timer should not be maintained in the container else a new store will be created every second.
Store would only need something like isPlaying: true

[PN1019]

what about progress component?? I think it will be good to display progression like

question 1 of 20

??
this will help to maintain user interest in game isn't it ??
For this,
it should take two properties

• currentQuestionIndex

• numberOfQuestions

[twishasaraiya]

@PN1019 Yes it could be done but in our current UI designs we have not added progress bar because the number questions (like you said 20) is still debatable and not decided.
Let me know your opinions.

[PN1019]

@twishasaraiya it doesn't matter how many numbers of questions you are planning to move with it totally depends on your call well since you are specifying that UI designs don't have progress bar as of now this can also be included in next version if you don't want to make any changes in UI now..but I think it will good to go with Progression even now ...

Also, how are you planning to move to next question?via NextButton or Timer ?? I think NextButton component should be there since many players can answer the question before the time they need not have to wait for the timer to finish off..!!ok...just checkout NextButton is there in UI design so this will be good to go with ...what say??
And yes agree with @anantoghosh no need to maintain the timer in containers this will take an unnecessary toll on memory...
I don't understand why there is the need for two answer components since there will be only one correct answer? I think we can go with the radio button for that using the only Answer component !!!

[twishasaraiya]

@PN1019 I think the progress bar can be included in the next version since now our focus to make it a PWA first.

Also, I agree with you that there should be a Next Button. Yes, we will be having the next Button once the user has clicked an option. I have updated the component section have a look.

I am assuming you are talking about CorrectAnswer and WrongAnswer. What this means this that there will a text(like Better luck next time) and an image(like an animated cross or tick mark) component added to the page depending on the answer. Let me know what you think about it.

[PN1019]

@twishasaraiya yes I am talking about CorrectAnswer and WrongAnswer.
Okay, got it you want to handle both things separately go with text and image thing you mentioned above ...but this can be done via a function like checkanswer in the same component isn't it ?? Any other reason for creating two separate components?? IDK if I am not wrong both component will do the same thing but with the different response ?? so why we need two separate components to perform this action??Although, as per you, we are also creating Options component which can handle all options and we can move further with Answer component...What say??

[twishasaraiya]

Okay let's have one component called AnswerComponent which display correct response based on checkAnswer method. We will pass in a boolean prop.

[drenther]

The design assets only seem to have mobile UI mockups. Any thoughts or opinions on how it should scale on bigger screen sizes?

[twishasaraiya]

@drenther Thanks for asking since I guess many people would have the same doubt.I think @ayushdev and @varundevpro will be able to explain better since they have designed the mockups.

[ayushdev]

@drenther We can use custom media queries for small, mid, and large screen sizes. As the containers inside pages are very simple, I think they will be handled easily.

[PN1019]

@twishasaraiya I would like to work on this let me know what I can take up ?? Anyone already working on components??

[drenther]

@ayushdev I did not mean the implementation details. Of course, we will use custom media queries. I meant how It should look on tablet and desktops should also be represented in designs for the sake of seamless implementation when different people implement different components. So that the design choices won't be made by everyone on their own but inferred from the design mockups.

To look at it more practically -
Suppose we talk about the drawer menu. That is something useful for the mobile screen but not the desktop screen. Desktops screens have enough space to accommodate those options without a hamburger menu option as well and decisions like how large should the options and quotes sections be on tablet or desktop.

Any thoughts?

[ayushdev]

@drenther I get your point. I thought I would create some but not all samples. As Varun is not available and I too am overwhelmed by academic work, this thing is somewhat overwhelming for me. If you know any prototyping tools, maybe you could help me out.

[twishasaraiya]

@PN1019 So I am assigning this issue to you. You can work on the main QuoteAndOptions Component and the buttons Component as well. Nobody has taken up anything yet but 2 people were interested. I told them to add a comment here first. So far they haven't.
We need to complete this by end of the week, so if you need any help please let me know.

[suhasbansude]

I am interesting to work on QuoteAndOptions component.Can i start work on this.

[twishasaraiya]

@suhasbansude Since I have asked @PN1019 about it. Let's wait for the reply. If he is not working on QuoteandOption then you can definitely take it up.
You could also work on other components and make a PR. Let me know what you are taking up.

[drenther]

@ayushdev Yes, sure. I know my way around some of them. Let me know how you plan to work on this and how can I be of any help.

[PN1019]

@suhasbansude if you wanna take QuoteAndOptions take that up...it just fine with..me.... @twishasaraiya.... thanks...I will work on button components if I am not wrong you mean NextButton ??? If that's the case I am good to go with it.....!!!
BDW it she...!!!

[twishasaraiya]

Okay so @suhasbansude you are taking up
QuoteNOptions component and container.
@PN1019 you will be working on nextButton and Answer so that suhas can call these component when corresponding event occurs.

Also refer to the SampleComponent and SampleContainer we will be following that.

If you have any doubts please free to ask them.

[skarthikeyan96]

@twishasaraiya Can I work on the HowToPlay Instruction Component

[twishasaraiya]

@skarthikeyan96 Yes you can work on it.

[PN1019]

@twishasaraiya you haven't specified any testing guidelines for react components?? It would be good if you will make it standard since many people will be working on components...!!

[twishasaraiya]

I am extremely sorry for late reply as I was busy with college placements and practicals.
I just want to add here that we want the contributors to submit a working PR and a screenshot along with it. We currently don't have any plans of adding Travis since it is required to be setup by repository owner. So currently we will be checking your PR ourselves before merging.

I request you all to submit PR by Sunday or before as soon as possible.

[anantoghosh]

@twishasaraiya I can work on the Timer if no one is working on it.

[twishasaraiya]

Yes please @anantoghosh you can work on it.

[AromaR]

Hi, will be working on the Score Component.

[Rohanhacker]

I'll be working on timer and score component

[twishasaraiya]

@Rohanhacker I m sorry but others are already working on it.

[Rohanhacker]

damm

[Rohanhacker]

is anything available ?
@twishasaraiya

[twishasaraiya]

Nope as of now. You could work on homepage if you want with @ayushdev.