Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI proposal #30

Open
isty2e opened this issue Mar 28, 2018 · 19 comments

Comments

@isty2e
Copy link

commented Mar 28, 2018

ui

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

This comment has been minimized.

Copy link
Owner

commented Mar 28, 2018

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

@isty2e

This comment has been minimized.

Copy link
Author

commented Mar 28, 2018

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

@isty2e

This comment has been minimized.

Copy link
Author

commented Apr 7, 2018

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

ui2

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

@featurecat

This comment has been minimized.

Copy link
Owner

commented Apr 7, 2018

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

@isty2e

This comment has been minimized.

Copy link
Author

commented Apr 7, 2018

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

This comment has been minimized.

Copy link
Owner

commented Apr 7, 2018

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

@bittsitt

This comment has been minimized.

Copy link
Contributor

commented Apr 7, 2018

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:
image

@dfannius

This comment has been minimized.

Copy link
Contributor

commented Apr 7, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Apr 7, 2018

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.
image

@bittsitt

This comment has been minimized.

Copy link
Contributor

commented Apr 12, 2018

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

This comment has been minimized.

Copy link
Owner

commented Apr 12, 2018

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

This comment has been minimized.

Copy link
Author

commented Apr 13, 2018

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

This comment has been minimized.

Copy link
Owner

commented Apr 13, 2018

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

@isty2e

This comment has been minimized.

Copy link
Author

commented Apr 13, 2018

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

This comment has been minimized.

Copy link
Author

commented Apr 13, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Apr 13, 2018

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

This comment has been minimized.

Copy link
Author

commented Apr 14, 2018

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

This comment has been minimized.

Copy link

commented May 8, 2018

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.
image

@WYVYW

This comment has been minimized.

Copy link

commented May 21, 2018

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)

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.