[Feature request] Twisty Player onclick event

[Dave2ooo]

Goal

In Twisty Player, I want to be able to detect when the user clicks on the element where the puzzle is shown, i.e. div.visualisation-wrapper is clicked.
Dragging the puzzle could also be detected separately.

In my F2L Trainer, I would like to get to the next training case by clicking on the cube in Twisty Player.
Adding a click event listener to the whole Twisty Player would make the controls of Twisty Player unusable.

I imagine using this feature like that:

document.querySelector('twisty-player').addEventListener('"puzzle-click", callbackClick);
document.querySelector('twisty-player').addEventListener('"puzzle-drag", callbackDrag);

Possible solution

Add a click event listener to visualizationWrapperElem that triggers a new event puzzle-click.

I don't know if it would be that simple.

Alternatives

Add the posibility to make the #shadow-root of Twisty Player open.

[lgarron]

This sounds pretty reasonable. I don't know when I could get around to implementing it, but I'd be happy to review a PR.

[lgarron]

@Dave2ooo, could I ask you to describe more about your use case? I've been thinking about how to adapt your PR, but it's much larger in scope than the use cases in this issue. I think the appropriate way forward definitely depends on the scope of use cases.

[Dave2ooo]

For my F2L Trainer, I want the users to be able to get the next scramble by pressing (clicking) the cube. Right now, the user has to press a separate button to get the next scramble. Pressing the cube would be more comfortable than pressing the smaller button.

You can try it.
Before I knew TwistyPlayer I implemented the same feature with images instead of the TwistyPlayer.

1. Go to my F2L Trainer.
2. Press some cubes to make the background yellow.
3. Press train in the top right corner.
4. Press the gear icon in the top left corner.
5. Select 2D Image: Hint -> Hint image -> 2D Image
6. Confirm

One more thing:
When you use my F2L Trainer with TwistyPlayer, you will notice a small refresh button apprearing on the TwistyPlayer when the user interacts with TwistyPlayer. This button resets the view.
I really like this feature but I would like the button to only show when the cube is dragged away from the initial view.
Right now, I can only listen to events of the whole TwistyPlayer element. That means, the "reset view" button also appears when pressing e,g. the play button.

[lgarron]

Sounds to me like the main feature you need are:

• A way to treat the entire player like a button.
• A way to let the user explore different orientations of the puzzle, while making it clear how to reset the view if they would like.

The former should certainly already be possible, and you can even change the cursor using CSS.

For the latter, that sounds like a useful feature, but I'd like to hear a feature request from more people before designing such a feature it at this time. However, for now it should be possible for you to at least listen for when the orientation is not the default orientation. I'll see if I can prepare some sample code for you to do this.

[lgarron]

However, for now it should be possible for you to at least listen for when the orientation is not the default orientation. I'll see if I can prepare some sample code for you to do this.

Okay, I think this will do what you want:

import { TwistyPlayer } from "cubing/twisty";

const player = document.body.appendChild(new TwistyPlayer());
const resetButton = document.body.appendChild(document.createElement("button"));
resetButton.textContent = "🔄 Reset view";

player.experimentalModel.twistySceneModel.orbitCoordinatesRequest.addFreshListener(
  (v) => {
    resetButton.disabled = (v === "auto"); // Could also toggle `.hidden`
  },
);

resetButton.addEventListener("click", () => {
  player.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set("auto");
});