UI proposal

[isty2e]

I think the UI of Wgo.js is quite simple yet useful enough, so it would be great if lizzie can have an interface like that. The picture above is a sample image of what it may look like.

• A range slider to navigate through the game, with the field right next to it showing the move number, and users can also type a move number in the field.
• The leftmost button is a menu button, which is expanded when clicked to show Load sgf/Save sgf/Toggle coordinate etc.
• The button in the middle would be a pause/think button or whatsoever, which pauses or restart thinking.
• And a help button, which shows the functionalities of UI elements on-screen, probably with corresponding keyboard shortcuts.

[featurecat]

I like this UI! I'll probably add it. do you have any ideas for how to use the massive left/right space?

[isty2e]

Uhm, not sure about it. Fixing the aspect ratio can be one thing, but not sure if it is desirable...

[isty2e]

Updated to show players info and winrate (#75), not sure it is visually pleasing enough...

Probably the location of upper elements and margins have to be adjusted somehow.

[featurecat]

Wow, that looks really cool! Reminds me of Crazystone and of course wgo.

[isty2e]

Maybe it is a good idea to implement a responsive UI, which changes depending on the aspect ratio of the window. Probably the horizontal mode can contain much more information since it has more space (though no idea what the layout would be), such as a decent graph for winrate.

[featurecat]

Yeah I want to do something informative and interesting. When there's space I can display more information.

[bittsitt]

Oh, that looks really nice! I think this layout is great!

There should also be a display of variations, the sabaki one that is vertical is really nice and fits better on the screen IMO. The moves can be color-coded so that good moves are green, red moves are red (in-between orange or whatever). In addition, there should be some coding to show moves where there is a comment. I did a quick mock-up, the color-coding is not visible enough, but you get the idea:

[dfannius]

It might also be interesting to consider color-coding nodes by the evaluation of the position, rather than the change in evaluation from the parent. I think both systems could be useful in different ways.

[bittsitt]

On chessbomb they use color-coding on the moves to visualize when a player makes a mistake. There it is easy to see if black or white made a mistake since they are listed like this: 1. d4 c5 2. Bh2 Kf2. I was trying to find an easy way to visualise who made the mistake when looking at the tree and came up with the one shown below where I put two moves on each row (one black and one white). I prefer this functionality wise, but the simplicity of the other one looks nicer.

[bittsitt]

I've added a PR with a variation tree: #87

With a vertical variation tree (which I think makes sense since the space available aligns better with the dimensions of the tree), it might more sense to have the buttons vertical on the side and have them point up and down instead (so basically rotate the button bar 90 degrees). Then you can maximise the size of the board. Not sure if it looks as nice as above though..

[featurecat]

If we have the variation tree on the right, I think we don't need the slider. The buttons would be nice. Maybe they can go along the whole bottom of the screen, not just the board. @ the variation tree, I'm going to make the board recenter itself when the variations screen pops up, like Sabaki. Variation tree pane will be resizable. Maybe the winrate indicator could go on top of the variation tree? I like maximizing the board size too. I think it would look great.

[isty2e]

As I said, ideally we can consider constructing two UI's depending on the aspect ratio, though it will be a hard work. I personally use Lizzie on a pivotted monitor pivotted, for example :)

[featurecat]

what would the second UI look like? as shown? what is your aspect ratio?

[isty2e]

10:16, so the suggested UI will probably fit better to such an aspect ratio. For 16:10 or 16:9, I'm still thinking about it, but we can probably fix the buttons at the bottom, split players info into left and right, and have a winrate graph on the left while placing the variations tree on the right.

[isty2e]

And... Personally I'm not a big fan of sabaki style branch UI. If someone would like to see all the nodes (moves) then it is of course decent, but if one cares only about variations themselves, I think it is unnecessarily complicated and consumes too much space.

[bittsitt]

Are you saying you don't want a variation tree at all, or that you just want to look at one at the time? Is there a program that has a layout you like?

I've done a bit of work today on a winrate graph. I thought of it as a nice gimmick first, but after looking at the result, it is really really useful (I think). It is the winrate, last move at once for all the moves made. Unfortunately, I have some stupid bug somewhere. Might find it tonight, but I'm getting tired..

[isty2e]

My opinion is that as long as one can navigate through variations, it is not mandatory for one to use the sabaki style tree. It has a desirable property such that it shows the presence of all branches including nested one, but it also occupy too large space and is not very efficient unless one already knows which variations there are. I will come up with another UI when I have free time.

[WYVYW]

Lizzie will be used only on pc in the near future, Therefore I would prefer the win rate bar on the side of the board like on lichess, which utilizes the space on widescreen monitor better. Game-Info (like players) should also be on the side as long as there is no individual choice.

[WYVYW]

Another UI proposal

• winrate for actual situation on the side of the board
• vertical move slider with move number on it
• vertical winrate-graph showing blunders
• vertical arranged navigation buttons
• gametree showing move numers or in analysis mode winrate and blunderrings as proposed in another issue
• a window showing variations (for actual move in review mode or for last move in game mode)