Offline variants help

[veloce]

Since we have all variant playable offline it would be nice to have the same help pages the website has but embedded in the app to be seen offline.

Help would be accessible from offline games menus and displayed in a modal window (like the one for the tournament FAQ).

[gurditsbedi]

i would like to contribute to this feature. I have good experience with javascript(es6, react, react-native). I have no experience with Cordova. How much difficult will it be to contribute?

[veloce]

Great! If you have good experience with javascript and react there is no difficulty to write this feature in my opinion. You'll want to read more about mithril which has some differences with react but is also a VDOM lib with components. Cordova is not an issue here.

Quick summary of how I see this feature:

• [ ] use tournament faq as a basis to create a mithril component that shows a static html help page (take the layout and sytle of it)
• [ ] this component provides the modal, content is passed with the chilldren prop
• [ ] take the html from the website (don't include videos)
• [ ] add a "Rules" button in both AI and OTB screens menu, which shows the modal

[gurditsbedi]

So, Should the information of all chess variants be in rendered in a single modal?

Where should I keep this file? It is going to be referenced by ai and otb screen. I am thinking of src/ui/chessVariantsFaq.tsx

Where should be the trigger button? I think this information should be in offline and also online modes? Going by your idea... The trigger button should be in the start screen(which comes when app is in offline mode), below the buttons computer and over the board.?

[veloce]

There should be one HTML (mithril template) file per variant I think. Then the help modal composant requires the proper file according to the variant prop. So there is one help page per variant.

You're right, this help should also comes with online games. I think the game menu is a good place:

[gurditsbedi]

As per line 10 there is this interface parameter root. What will be the equivalent for the helper variant modal?

[veloce]

It was a way to reference tournament because I needed the tournament infos to display help. But it was not a good idea. You don't need it for the modal. Instead you'll want to delegate modal content creation the modal caller. So your modal component don't know about its content (you pass it via children prop).

[hieuxlu]

@veloce I will continue working on this. I assume the requirement does not change. Please confirm below some points below:

• Icon used: fa fa-book
• i18n/en-US: Rule
• What should I do for remaining i18n texts?
• In Web UI, variant rule is linked to variant title (as screenshot below). Do you think it's we should do something similar?

• Web UI

[veloce]

@hieuxlu thanks for contributing! I'm fine with the button (and the icon) in the modal. You can hardcode 'Rules' as a string directly and not use the i18n function, since we don't have any translation available for this now.

[hieuxlu]

I still want to confirm if we really want to add this button to Menu. There's a lot of different menus, and in each menu, the option list can be different based on game states. We must also only add this button when the game is not standard, and is an actual variant.

So this will bring extra complication when we introduce more menus, more options, we might forget to add this little rule button in the future.

What I'm proposing is instead we can just link the rule directly to variant title just like in the web version as in below screenshot.

For mobile, I think we can have these options

1. (Preferred) Add a question mark to variant title (this looks like the web version)

2. Use external link.

I prefer option 1. And it's better than adding a rule button all over the places in different menus. So what do you think @veloce