Suggestion: Hint button to show arrows temporarily

[olleeriksson]

This is a suggestion that I've come to realize I personally would love to have in the study section. And one I'd be more than happy to implement myself in a Pull Request. I already have the dev environment up and running so it should be pretty simple. But, only if you think it's a good idea, and don't have any other thoughts or ideas.

So, I've been using the study training feature on my mobile phone quite a bit when I get some free time here and there. And it's great, pretty much the only tool out there that allows you to play out the repertoire against the computer. But one thing annoys me, and it's when I have forgotten the move and need to turn on the arrows. On a mobile phone display the options are below the visible portion, so I have to scroll down. And then when I click on Show arrows the page reloads, so then I have to again scroll down to disable the arrows, and then finally scroll up to be back on the board. I would love for all of this to be a one click operation available right below the board without having to scroll. Click on a large and easy to read "Hint" button with your finger that will display the arrows, and only temporary, so that you don't have to turn them off. It gives you a bit of help and then you are off on your own again.

This button could work independently of the "Show arrows" option. My suggestion is to put it above the comments, even if that might mean scrolling to see the full comment. But having it below the comments would work too. Another option (maybe in addition to the above suggested feature) would be to reduce the size of the study title, perhaps only on mobile devices.

Here is a simple suggestion, I added also a < button because I had an idea of adding a takeback button as well, but it's not really part of this feature request, though I'd be happy to hear your comment on that as well (I can write another issue and try to implement that too).

If you think this is a good idea I'd be happy to draw something up and suggest to you until you are happy with it. Or if you have any thoughts or ideas around this yourself, or if you want to do this on your own.

[ArneVogel]

And then when I click on Show arrows the page reloads What os/browser are you using? I don't experience this behavior on android/firefox android/chrome. This seems to higher priority fix, partially even fixing the use case.

It gives you a bit of help and then you are off on your own again. So only for the particular move? I like the idea, I would be happy to merge if you implemented it.

I had an idea of adding a takeback button as well I would need some more info on this. I currently don't see the point.

---

Some thoughts about the implementation: There is very little screen space left at certain points. Particularly at the very beginning when the how to use hint is shown.

I am not sure if adding a button would fit in the old design.

Maybe this would be a good point to redesign this. Looking at this with some distance after not using it for some time it is not clear which buttons are settings (move delay, show arrows, slow reset, key move) and which ones perform misc. actions (stockfish, favorite, progress).

My initial ideas are:

1. Move all of them below the board to get some space
2. Add some space between the board options and general actions and add a label for both categories
3. Some of the options need a better options for understanding them. On desktop they have a title attribute which shows the help on hover but this is not obvious and doesn't work on mobile.

[olleeriksson]

And then when I click on Show arrows the page reloads What os/browser are you using? I don't experience this behavior on android/firefox android/chrome. This seems to higher priority fix, partially even fixing the use case.

It gives you a bit of help and then you are off on your own again. So only for the particular move? I like the idea, I would be happy to merge if you implemented it.

Well, maybe "reload" is the wrong word. There is no SPA reload. But it scrolls to the top of the page when you enable the arrows, and that doesn't happen when you hide them. This is one thing that prevented me from just "flicker" the switch on-and-off since the switch disappeared from under my finger on the phone, thus another reason for wanting a Hint button. It happens on Chrome on my mobile phone, but also in the desktop version (version 107.0.5304.107) if you enable Toggle Device Toolbar in Chrome's dev tools.

If the scrolling issue was fixed there might be less of a reason for a separate Hint button, but other things that speak in favor of a Hint button is that the Show/hide arrows link is a bit hard to hit quickly especially with a finger on the mobile phone quickly since it's located between several other options, and I had to scroll down in the first place to find it. So if there was an easy-to-hit control (link or button) readily visible while viewing the board on a mobile phone, that would do it for me. Options include moving the Show/hide arrows higher up, making it bigger maybe etc. But I was thinking a Hint button would only require hitting it once to turn on the arrows because they could automatically be removed once a move is made. No need to turn off the arrows manually again then.

I had an idea of adding a takeback button as well I would need some more info on this. I currently don't see the point.

It was just something I was missing, the option to regret a move, see what the repertoire would respond with if I had done another possible move for example. I thought it could allow me to take back several moves, even all the way back to the start, allowing me to start another line even if I wanted to. Another option (or maybe in addition) would be to add a "Reset" button, or a "Back to starting position". Now you have to play the line to the end if you want to start over.

I am not sure if adding a button would fit in the old design.

Maybe this would be a good point to redesign this.

I agree with everything you said. My button suggestion does not fit particularly well into the current design. I give you that. Also, there is very little space, especially in the beginning with all the messages.

Maybe the Study title could be made smaller? Would it be awkward to truncate a long study title and keep it on one line (mobile device)?

As for the Hint button/feature, I am mostly concerned with how the site appears on a mobile device because that's where I'll be using it mostly, but I like your ideas. All I want for the Hint button is for something large enough to easy to hit with a finger, always visible (difficult to do since if you put it below the comments it could get pushed down below the end of the screen).

And about the type of option (radio button or not) and the wording on the options themselves I agree too. With Show/hide arrows for example, the blue circle is filled when you hide the arrows which I've always felt should be the opposite. It should be blue when they are enabled.

Some ideas on top of my mind:

• Stockfish -> Play against computer
• Favorite (good name and action)
• Show/hide arrows -> Blue circle for arrows, hollow circle for no arrows and text that flips between: "Showing arrows" and "No arrows"
• Fast/slow board reset -> Static icon with flips between: "Board reset delay: fast" and "Board reset delay: slow"

But it's not really until you try it that you see what works and what doesn't. :)

Thoughts?

[ArneVogel]

I fixed the scroll up to the top with https://github.com/ArneVogel/listudy/commit/c4fb56775cefd0aa67b654ce6eff2385a43156f7

Maybe the Study title could be made smaller? Would it be awkward to truncate a long study title and keep it on one line (mobile device)?

Why would the title need to be smaller? Scrolling shouldn't be a problem if you could see (some) settings and have a signifier that you could scroll down for more.

[olleeriksson]

Awesome! :) I saw that code line and actually tested it myself, and didn't see a change, but that was before I realized I had to Ctrl+Shift reload my localhost page to actually see the difference. Now it works!

Fixing this issue solves part of my problem. The other was having to scroll down, and turning on and then off the arrows again. On a mobile device the "Show arrows" link/control is quite small. I thought it would have been very neat to have a button that you could click just once, and it would show the arrows but only temporarily. Having a smaller title was just an idea that could reduce the need for scrolling a little, but it's fine.

I'll see what ideas I can come up with, and let you give your thoughts on it.

[ArneVogel]

Yes, im still open to have the hint button. I made the fix regardless without intending for this to replace the need for the hint button

[olleeriksson]

Alright, here are some suggestions. I've already sort of half-tested them. So I figure you can tell me what you think about each option and then I can put up either one or multiple PR's, depending on what you prefer, for the ones you like.

1. Moving the options the bottom of the screen:

Note that this screenshot contains a few other changes which are described below as separate points:

2. Hints for this move!

At the top of the right side panel I’ve added a “Hints for this move” link, which turns on the arrows but only for the current move. As soon as you make the move they go back to whatever the Arrows-option specify. Having this as a separate option I find to be a very convenient option, especially on a mobile phone. The rest of the options you don’t need as often so they are further down.

3. Multiple options for arrows

I’ve also added more options for the arrows and renamed the label slightly. There is now the following options. Note that the icon stays the same regardless of choice.

4. New option: Reset board button

How about adding an option to reset the board, useful if you played into the wrong line or just want to start over? Kind of an alternative to a Takeback button I guess.

5. New option labels: Key move

I renamed the “Key move” options slightly. I think maybe it’s more self-explanatory this way? I don’t know.

6. New option labels: Board reset delay

Same thing here, a slight renaming of the label. What do you think?

[ArneVogel]

Overall I like it, some comments:

For 1. on desktop the options should probably align to the left with the board. On mobile maybe try aligning the settings and the chapter selection with the description offset.

For 2. does the icon change when activated? I can add a filled out flag to the font.

3, 5, 6. are great. Maybe additionally change Stockfish to "Play against Stockfish" and Favorite to "Favorite study".

4 I am thinking if there is not a more descriptive label since the action isn't really with the board. Maybe "Reset line" or "Reset position".

[olleeriksson]

Good points.

For 1. Should everything, including the "Show hints.." and comments also be aligned or you prefer them without margin?

I'll change the Stockfish and Favourite labels too.

Absolutely, I'll give it a go. Maybe Reset line? You just let me know if you change your mind.

Is it ok if I put all of this in one commit, or do you prefer separate ones? If you do I can do that too, no problem.

A few quick question, just to get your thoughts on a few other things I've come to realize would be great additions. Not sure if I'm taking on too much work but here, but it's interesting to hear your thoughts, if it's worth pursuing.

1. Saving the settings in local storage and have them preserve between user sessions?
2. A link to Liches Analysis board for quick analysis of a position.
3. Maybe re-evaluate showing comments for current and opposite side moves. I find that a bit strange.

Just want to hear your thoughts, if any of this is worth considering..? I'm having a good flow here, but if at any point you feel like I'm doing too much, just let me know and I'll leave it where it is.

[ArneVogel]

Yes I show hints and comments should probably also get aligned.

I have no preference on commits. Whatever works for you.

1. Yes that would be great. I thought about that too at some point but never got to it.
2. I would be ok with that, I think it was suggested by somebody else before.
3. Maybe the comments should be prefixed with the line they specify like 12...Nf3 comment \n 12...Be3 comment 13. e6 opponent comment? But I would also be open to other suggestions.

[olleeriksson]

1 & 2. Great. Maybe I'll get to that later then. We'll see.

3. Do you necessarily want to see comments from the other side? I actually already tested something like prefixing them with the move. I wasn't convinced, but maybe it's at least better. I'll create another issue on it if I get around to it so we'll keep as much as possible separated here. I've already mixed a little too many things into this issue and commit. :)

[olleeriksson]

I forgot to answer your question:

For 2. does the icon change when activated? I can add a filled out flag to the font.

No it doesn't. But the arrows appear so it's pretty obvious you've clicked on it. So if it's ok I'd leave it at that.

But if you have other icons that might fit the any option better feel free to suggest them. I did feel a little bit limited in the number of icons available, though I'd say its a minor issue.

[ArneVogel]

Do you necessarily want to see comments from the other side? Me personally, no. When I made studies for myself I always build them knowing the limitations of listudy and kept them for the point of view of the player.

But some people wrote comments for the other side for the possible replies and asked for them to be shown. So that's the reason they are currently shown. I think it probably best to keep supporting that in some way to not break studies already created with the old system in mind.

---

Anything from https://github.com/lichess-org/lila/tree/master/public/font :

As well as https://fontawesome.com/v4/icons/ would work for fonts to be added.

[olleeriksson]

Do you necessarily want to see comments from the other side? Me personally, no. When I made studies for myself I always build them knowing the limitations of listudy and kept them for the point of view of the player. But some people wrote comments for the other side for the possible replies and asked for them to be shown. So that's the reason they are currently shown. I think it probably best to keep supporting that in some way to not break studies already created with the old system in mind.

Ok, I agree. So I guess the only way is to introduce an another option for "display opposite side's comments" which is on by default. Would that be an acceptable way to do it?

Now (with the PR) that the options are below the board maybe that opens up for introducing a few more options without cluttering the interface.

[olleeriksson]

Implemented!