Make the modal system more compatible with dynamic content

[kuv2707]

Description

Currently, it is a pain to render a modal with content that changes often, like number of players joined, etc. We can do the following to make it better:

• When calling show() to display a modal, we pass an id associated with that modal.
• We add a functionupdateContent to the modal which accepts an id and a JSX, and which just changes the content without changing other parameters passed during the last call to show(). We only change the content if the id of the currently visible modal matches the passed id.
• THaving an id enables us to update only if the modal is actually currently on display.
• We can add a function to the modal context to retrieve the current modal's id. This is a performance optimization since it would help us avoid creating new JSX only for it to be discarded since the ids dont match.

Sample usage

function clickHandler(){
    modal.show("myModal",<div>HI there 100</div>);
}
useEffect(()=>
  modal.updateContent("myModal",
  <div>HI there {someStateVariable}</div>),
[someStateVariable]);

[issue-assigner[bot]]

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

[ritwik-69]

@csoc-bot claim

[issue-assigner[bot]]

@ritwik-69 This issue has been successfully assigned to you! 🚀