How I can uninit kaplay context?

[denisshupenka]

Hi, I'm trying to add a small Kaplay game to my react project, the game is in react component, and I init kaplay in a separate file

`import kaplay from "kaplay";

let k = null;

export const initializeKaplay = () => {
if (k !== null) {
return k;
}

k = kaplay({
width: 1920,
height: 1080,
letterbox: true,
background: [0, 0, 0],
global: false,
buttons: {
jump: {
keyboard: ["space"],
mouse: "left",
},
},
touchToMouse: true,
// debug: false,
});

return k;
};

export const getKaplay = () => k;

export const destroyKaplay = () => {
if (k) {
k.destroyAll();
k = null;
const canvas = document.querySelector("canvas");
if (canvas) canvas.remove();
}
};
`

This context used in a different files, and when game component in unmounted, I use destroyKaplay func.
But when I reopen the game, I have a warning, that KAPLAY already initialized, you are calling kaplay() multiple times, it may lead bugs! And the game is not working correctly..

How I can correctly uninit KAPLAY to avoid this.

[lajbel]

At the moment is not possible quit KAPLAY without that hapening. Why do you need remove KAPLAY instance?

[denisshupenka]

Because the game is not working correctly when I run k.quit() and init kaplay again.
And canvas is stayed on the display when I go to other not game page
I updated the version to 4000.0.0-alpha.4, now there is no warning about KAPLAY already initialized, but the game is not working correctly, for example text is displayed as black blocks

k.add([ k.text(
Welcome to the game
, { font: "mania", size: 32 } ), ]);

[lajbel]

Yes, as I said, KAPLAY doesn't support it correctly. My question is why you need to do k.quit() in first place?

[denisshupenka]

Because the game is in a separate React component and I initialize kaplay when this component is mounted. And when I go to another page, this component is unmounted, but kaplay is still running, and when I go back to the game, it doesn't work correctly. So I need to reset kaplay when the component is unmounted, or restart it correctly, so that the game works correctly.

[dragoncoder047]

Best suggestion I have for the zillions of people that keep trying to stuff KAPLAY into a React component -- IT JUST DOESN'T WORK. DON'T USE REACT AND KAPLAY AT THE SAME TIME ON THE SAME PAGE IF IT'S A SINGLE PAGE APP (SPA). (although if it isn't a SPA, and going to a new page actually triggers a browser refresh, it should work).

If you must, load the kaplay game "fullscreen" in an <iframe> and then communicate with it using postMessage.