[Feature request] - Some feedback after building a cfop tutorials page vs supported stickering or masking profiles about cubing.js HOT 3 OPEN

1. Sticking - The sticking only supporting yellow in D face for cross, f2l, and oll is a pain. I've typically countered this with just using stickering=full and setup-alg=x2, but these can have negative effects, and make it harder to focus on the tutorial. Can we get profiles with the cube flipped, so yellow is U-face, which preserves the masking effects, or is there another way for us to change the side defaults (e.g. U=yellow, D=white)?

It will probably take a while to figure out how to implement this properly, but you can adapt this for now: #224 (comment)

It seems to me that almost everyone who's looking for this feature just wants to be able to show CFOP cases (and similar) with yellow on top. Would a reorientation of z2 for the color scheme be sufficient?

2. Alg Viewer - When playing the cube through an algorithm, I've styled the current move, e.g. increased weight, size, and colour. But I've not been able to work out the css combos to change the background highlight that is applied, or to be override the styling on all the moves to remove the link:action effects e.g. underline + dark blue is horrid.

This is now a bit more practical for me to revisit now that browsers have some new CSS features. I don't know that I can safely open it up to full styling, but do you know which attributes you'll want to adjust?

3. Screenshot - Can we set the format to be png or svg, it seems to use png for 3d viz, and svg for 2d viz, ... I'd like the option to generate a set of images in a consistent format.

This is a much harder problem than it looks like, due to browser API privacy limitations. At this point, I can only advise you to post-process the pictures yourself using e.g. ImageMagick, but I'll definitely be thinking about this.

from cubing.js.

I've got set of masks working for each stage - finding the table in this commit (668179c) documentation was useful - suggest adding this into the api docs.

Masks I've used are below, these are combined with a z2 setup alg, can't decide if prefer dimmed or bright for out of scope stickers, but I now know how to do it, so thank you!!

const mask_default = "EDGES:------------,CORNERS:--------,CENTERS:------";
const mask_f2l = "EDGES:----IIII----,CORNERS:----IIII,CENTERS:-----I";
const mask_oll_cross = "EDGES:----OOOO----,CORNERS:----IIII,CENTERS:------";
const mask_oll_layer = "EDGES:----OOOO----,CORNERS:----OOOO,CENTERS:------";
const mask_pll_corners = "EDGES:----OOOO----,CORNERS:--------,CENTERS:------";

from cubing.js.

Thanks for quick reply. I'll read through the stickering approach in the other thread and see where I get to.

On the alg styling, the css all works for the full alg or the current move, can change colours or sizes for both. But I can't work out the styles accessors for the background highlight - I just wanted to change the colour of it so that it, but it still pretty effective as is. The a:xxx link behaviour styles default styles just clash with dark mode, and the overriding these seems to be ignored, again was just looking to change colour and remove the underline.

twisty-alg-viewer .twisty-alg-move a:hover {
  color: hotpink;
  text-decoration: none;
} 

from cubing.js.