[Feature request] - Some feedback after building a cfop tutorials page vs supported stickering or masking profiles

[andyjudson]

Goal

Firstly thanks for developing cubing.js it is amazingly powerful and I'm starting to learn all the things we can do with it.

I've been using it to build a crib sheet for learning CFOP, along with a scramble demo, or cube image generator so I can use the output in tutorials. You can see these here - https://andyjudson.github.io/cubing/

Couple of things have come up on this endeavour, which I can work around but like to at least log that I've built above and to log these frictions, incase there are better hacks or solutions coming soon.

Possible solution

These are my observed frictions, all minor but love to hear if there are work arounds or things coming:

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)?

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.

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.

Alternatives

No response

[lgarron]

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.

[andyjudson]

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;
} 

[andyjudson]

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:------";