bug: conflicts between `navigation()` and Safari's `navigation()`

[dragoncoder047]

Describe the bug

This bug does not occur in Chrome or Firefox, it only occurs in Safari. The game just fails to load.

Version

3001.0.0-alpha.19 loaded from unpkg.

To Reproduce

Call kaplay(). That's it!!

Expected behavior

The game works!

Screenshots

[lajbel]

will investigate, I don't have Safari lol, that's the only problem

[lajbel]

can you disable globals and test if it works?

[lajbel]

Is global: false in kaplay({})

[niceEli]

Testing KAPLAY alpha 18.1 on iOS/iPadOS Safari I don't have this issue

[niceEli]

After further testing on alpha 19.1 there also seems to be no issues. What version of kaplay are you using?

[dragoncoder047]

Im using whatever loads from https://unpkg.com/kaplay@3001.0.0-alpha.19.1/dist/kaplay.js -- 3001alpha19.1, I guess. And I am on Mac Safari, not iPad.

[dragoncoder047]

Is global: false in kaplay({})

never mind, this fixes the "read only property" error.

But shouldn't this be documented somewhere ("known bug: you can't use global: true in Safari")?

[lajbel]

It was to confirm what is related to the error, will investigate more

[lajbel]

It still happens?

[dragoncoder047]

It still happens?

hang on, will test

[dragoncoder047]

It still happens?

hang on, will test

yes

and this is with bleeding edge from #301

[lajbel]

I don't have a safari device (only iPhone, and there works) so it's kinda hard to test but the bug seems to be here:

kaplay.ts 1326

    if (gopt.global !== false) {
        for (const key in k) {
            (<any> window[<any> key]) = k[key as keyof KAPLAYCtx];
        }
    }

[lajbel]

Maybe window is readonly in Safari? or we are assigning a readonly prop that's present only on Safari?

[dragoncoder047]

I figured out what is the problem: navigation() conflicts with the Navigation API that can be enabled in Safari with a feature flag (I have it turned on and it must be readonly).

I found it by adding:

    if (gopt.global !== false) {
        for (const key in k) {
+           console.log("adding key:", key);
            (<any> window[<any> key]) = k[key as keyof KAPLAYCtx];
        }
    }

and I got

Stinks that the WebKit people couldn't get the error message to say which property was readonly, that would have made it so much more obvious from the beginning...

[lajbel]

we probably should change it

[dragoncoder047]

My suggestion would be "navigator" because that's what the component makes the object into, and the docs for it use that language too

[dragoncoder047]

gosh, whoops, never mind, that one conflicts with an even importanter property!!

[mflerackers]

Yes, navigator was my first choice, but I couldn't use it due to that reason. That's why I took navigation. We had the same problem with anchor, which was called origin originally.