Destroying States (Or: how to fuse two phaser games in one game.js)

[zack_falcon]

By a client's request, I'm supposed to make two phaser games launch from a single html. I decided to do this via the game.js that (our) phaser template spits out because the games trade data between each other. Here's my code for game.js:

import GameOneBoot from './states/GameOne/boot';
import GameOnePreload from './states/GameOne/preload';
import GameOneTitle from './states/GameOne/title';
import GameOneGameplay from './states/GameOne/gameplay';
import GameTwoBoot from './states/GameTwo/boot';
// etc, etc...
class Game extends Phaser.Game {
{
    constructor() {
        super(config.gameWidth, config.gameHeight, Phaser.AUTO, 'game');
    }
    startGameOne() {
        this.state.add('GameOneBoot', GameOneBoot);
        this.state.add('GameOnePreload', GameOnePreload);
        this.state.add('GameOneGameplay', GameOneGameplay);
        this.state.add('GameOnePostgame', GameOnePostgame);
        this.state.start('GameOneBoot');
    }
    startGameTwo() {
        // Same as GameOne, but GameTwo
    }
    destroyStates() {
        this.state.destroy();
        document.getElementById('mainOverlay').style.display = 'block';
        console.log("States destroyed!");
    }
}
var phaserGame = new Game();
window.globalGame = phaserGame;

The functions startGameOne and startGameTwo are triggered by an HTML menu, so the player can pick what he wants to play right there.

However, I've hit a snag. The function destroyStates (called after a game over screen) does indeed return the player the HTML menu (with a blackened-out-but-still-visible empty game screen behind it), but clicking the menu to play either game again triggers this error:
game.js:3368 Uncaught TypeError: Cannot read property 'stage' of null
    at c.StateManager.a [as start] (game.js:3368)

I thought about just restarting the state, but part of the games change (such as assets) depending on objectives completed from the other one. I also tried not destroying the states, which worked, but the game is still in the background, and I'm not sure running

Quote

this.state.add('GameOneBoot', GameOneBoot);

over and over again is any good. Anything else I can try? Perhaps a way to restart game.js itself?

[espace]

Why don't you create differents states corresponding to your  two games ?

Eg:

Boot_1

Boot_2  

Or 

Boot[0] and Boot[1]

I use a parameter.js who stock the variables and parameters at the first position in my index.html. Like this, all my states have access to this data. When is possible I avoid the use of "this" (ambiguous) and prefer object parameter => it's powerfull. Have you understood ? (Not Englishmen ! )

...