Make boards more consistent

[benjaminpjones]

Currently, there are 3-4 ways to make a standard looking Baduk board:

• BadukBoard (obviously)
• BadukBoardAbstract
• MulticolorGridBoard
• [Coming soon] FractionalBoard

Some features are different by design:

• graph vs grid
• fractional stones
• black and white vs color stones

But some features are mismatched for no good reason (I'm not sure this is a complete list, but this is everything I noticed):

• [ ] last move marker
• [x] score markings
• [ ] stone outlines
• [ ] stone width
• [x] hover indicator
• [ ] margin width
• [ ] line weight

The task is to make the boards more consistent as the differences are quite obvious when they occur together on the game page. There may also be room for deduping the classes. BadukBoard may be implemented as a specialization of BadukBoardAbstract or MulticolorGridBoard, and FractionalBoard may be able to implement all four (although I am hesitant to replace grid-based boards with graph-based boards for performance reasons).

[merowin]

How should the last move marker for Taengeuk Stones look? I like this idea, maybe it could also work well here: https://forums.online-go.com/t/fractional-multicolour-go/36996/64 (though maybe with filled circles for markers instead of squares)

[benjaminpjones]

Yeah that's a tough one. The linked solution looks mostly good, but does it work for gray stones? Another solution might be something like:

if (colors are mostly light) {
    useBlackIndicator();
} else {
    useWhiteIndicator();
}

[JonKo314]

but does it work for gray stones?

For some gray stones it wouldn't work. A filter that does something like (channel + 64) mod 256 for each color channel (r, g or b) would be nice.

Another option would be to define an indicator color for each stone color. And maybe have users pick an indicator color if they are allowed to define the stone color freely.

[JonKo314]

Maybe that's what we want: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast

But it's an "experimental technology" and not supported by any major browser yet.

Apparently mix-blend-mode is also not supported yet "on SVG elements" for most mobile browser: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#browser_compatibility

[merowin]

Couple of observations and thoughts:

• many variants add 3 components for the board: grid, graph, one to choose between the two. This could be reduced to one component as you commented in a recent PR @Jon_Ko . Also these components mostly serve as a mapping from the different game state types to the representation that the inner board component can use. Maybe we could add a function to the Variant interface that can do this mapping, and use it to reduce the number of components?
• many boards now use MulticolorGridBoard or MulticolorGraphBoard because of their flexibility. They are lacking certain features though, like ability to display a score board, annotations (e.g. nice for last-move-indicator), Hoshi points etc. On the other hand BadukBoard implements these features and probably more. We could unify this by adding these features to the multicolor boards and use them throughout.

[benjaminpjones]

many variants add 3 components for the board: grid, graph, one to choose between the two.

:sweat_smile: If we want to kill Grid boards altogether, I'm on board with that too. Would be nice if we can port star points first though.

Also these components mostly serve as a mapping from the different game state types to the representation that the inner board component can use. Maybe we could add a function to the Variant interface that can do this mapping, and use it to reduce the number of components?

I love this idea. If we can totally decouple variant creation from Vue, that's a plus. So it would be great if we could come up with some flexible interface like this that we map everything to:

interface Stone {
    colors?: string[] | string;
    star_point?: bool;
    marker?: string; // this could include "score" markers too? or a separate field?
    marker_color?: string;
}

interface Board {
    shape: BoardPattern;
    board: MulticolorStone[];
    background_color?: string;
}

Then we could make board_map entries optional (i.e. less complicated overhead for implementers!)

We could unify this by adding these features to the multicolor boards and use them throughout.

Agree, it seems reasonable to converge on the Multicolor boards

[merowin]

😅 If we want to kill Grid boards altogether, I'm on board with that too. Would be nice if we can port star points first though.

Now that we've gone through so much trouble to keep 'em, I'm against it! 😝

[benjaminpjones]

Okay, with Baduk migrated (#327), almost every variant is using the Multicolor boards in some form.

Not using Multicolor boards:

• [ ] Fractional

Using Multicolor boards, but can benefit by migrating to uiTransform:

• [ ] Keima
• [x] SFractional
• [ ] Parallel

Since this issue is about style only, let's make the closing criteria: style for Fractional and Multicolor boards align.