requestPointerLock example not working

[quinton-ashley]

Not working on latest Chrome or Safari on macOS

https://p5js.org/reference/p5/requestPointerLock/

Would you like to work on the issue?

no

[quinton-ashley]

[ksen0]

The example works in the editor, so the function itself works (https://editor.p5js.org/ksen0/sketches/Kv_EZjhbb). There's another issue on the website that's currently causing several other problems and is being worked on #790 - so when that's resolved and this issue persists, will need to check more deeply what else may be the problem here

[davepagurek]

Merged that PR! I think it's likely unrelated though, as that error states, we likely need to add allow-pointer-lock to here:

p5.js-website/src/components/CodeEmbed/frame.tsx

Line 167 in 70890af

sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"

@ksen0 agreed that this is a website issue, I'll transfer this to that repo

[davepagurek]

Actually, I'm not sure I have that permission (or at least p5.js-website doesnt show up in the list of repos when I click Transfer Issue.) @ksen0 does it show up for you?

[ksen0]

@davepagurek looks like the issue's already on the website! Here's my Chrome error:

But it's the same Chrome error as in other places that do seem to work, like https://p5js.org/reference/p5/bezierTangent/

The requestPointerLock itself seems to be failing silently for me, which is strange

[davepagurek]

oh, of course, that makes sense why I can't switch it. sorry, got mixed up with my other notifications!

I think the mixed content error is unrelated to the pointer lock one, and the failing item is a <link> tag trying to do some prefetching. So if that fails, it just means clicking a link works the usual way and might be a tad slower than if the linked page was prefetched. The code initiating the blocked request looks like this:

...which doesnt seem to be a thing in our codebase, but rather an Astro-generated thing based on this.

p5.js-website/astro.config.mjs

Lines 51 to 53 in 70890af

	prefetch: {
	defaultStrategy: "viewport",
	prefetchAll: true,

Not sure yet where the http is coming from though, when I add a breakpoint there, all the prefetch links start with https 🤔