search

itaditya / trick-or-treat-game

Play it for free here
https://trick-or-treat.netlify.com/
16 stars 17 forks source link

Allow user to hide the instructions #60

Closed itaditya closed 4 years ago

itaditya commented 4 years ago

Since the list of instructions is very long and is not needed once user has played the game once. We should do this.

Render the instructions inside the details tag of HTML5.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#HTML_in_summaries

The details tag has an attribute called open that can be used to tell the browser if the section should be shown by default or not.

We want that if the user has come for the first time they should see the Instructions open. But if they play the next time then keep the Instructions section hidden by default.

How to find if user has played before or not?

Use the localStorage data! In localStorage we keep a record of all the users score in the key 'userMoves'. So if there is no data in the usermoves key then it must mean that user is new to the game and so we show the instructions in the expanded state. But if there is data present in usermoves we show the instructions accordion in the collapsed state.

rajat2502 commented 4 years ago

I can try this one!!!

itaditya commented 4 years ago

Cool, let me know if you need any help!