Implement the Game page

[kuv2707]

Description

This is the most complex part of the project.

Specs

The page should roughly have this appearance:

We primarily focus on functionality, and can later tweak the design as seems fit.

• We should set up a game context, storing the current game state. The context also handles the polling requests, updating game state with the server data etc. That in turn, should be done after some basic game events are handled in the backend.

[issue-assigner[bot]]

Comment '@csoc-bot claim' to get this issue assigned or '@csoc-bot abandon' to get this issue unassigned.

[sksmagr23]

@csoc-bot claim

[issue-assigner[bot]]

@sksmagr23 This issue has been successfully assigned to you! 🚀

[sksmagr23]

@kuv2707 this page should render at which route?

[kuv2707]

@sksmagr23 So here's an outline:

• After choosing whether to host/join a game, the user is redirected to /game with the choice passed as a query param.

• We map the /game route to a component which first reads from the params and makes api calls for the same. For example, if the user wishes to host a game, an api call for that will be made (yet to be implemented on the backend), and an initial game state would be returned, which the client will then use to render the players, their cards, etc.

• Concurrently, a polling request will be sent to the server and the whole event management system should be set up.

I think it would make sense to handle all using a GameContext. The actual Game component will then retrieve the players and their cards from the context and render the UI. The Game component will only be rendered once the initial game state is received from the server (whether hosting or joining a game).

This seems too huge, so it would require many further discussions on the implementation, and can encompass many plan changes.

[sksmagr23]

Ok , I will start implementing things one by one, once the login/signup component is merged

[kuv2707]

IF you are willing to work on this, you can first start with creating a game context module.

• It should export a GameProvider component, which will be mapped to the /game endpoint.
• Once the component mounts, it first checks the type of game from the query params, makes the respective api calls to receive a game state.
• Once it is received, it renders the Game component (focus on it later and render a div for now)
• In another useEffect, we run the polling loop. After a polling response is received, it will contain an updated game state, and our local state should be updated with it.

This body of work can be the first commit in your PR.

[kuv2707]

It would be encouraged if you are open with any problems you face or something in the implementation or architecture you didn't understand - or some suggestion to improve/simplify things. These discussions can be done preferably on the whatsapp group (or sometimes DM)

Once you open a PR, further discussions can be done there. You can "review" your own code and comment on a block of code which warrants maintainers' attention.

[PrathamX595]

@kuv2707 I would like to co contribute on this issue

[kuv2707]

@PrathamX595 Please go ahead, for some reason i am not able to assign this

[kuv2707]

ah done