Using an SPA to switch out games - Angular, Require.js, and Phaser

[rickbross]

Hi, I was wondering if anyone had any tips as to how I would go about creating a Single Page Application that could switch out different games.

 

I need to allow the user to play a certain number of rounds of a game of mine, and then switch out to another game after they have played all the rounds.

 

Each game will have 1 file for each state of the game. Generally, Boot, Preloader, MainMenu, Game.

 

I am looking to build it in Angular. I just have a few questions...

 

How should I manage all of the files for each game?

I have looked into Require.js. Do I need to load in every file for each game at the beginning or should I load in each game at a time, one after another?

 

How should I manipulate the DOM?

When I switch out the games, should I be destroying the canvas element and the pixi instance and whatnot or should I be switching views or something within Angular?

 

Any help is much appreciated. Also, if you're looking to make some money, I'll pay someone to help.

[rickbross]

Currently, I am loading in every file needed for each game in the dynamic list of games that I am getting via AJAX/JSON.

 

From there, I add every game's state to Phaser and I play the first game and everything is fine.

 

Now, does anyone have any suggestions as to how I move onto the next game? Does anyone see anything wrong with this method? These are fairly simple games.

 

My idea is to just trigger this.state.start('NextGameBoot') since I already have each game's states loaded. 

 

Should I be killing the the canvas, killing Phaser, and then starting completely over by loading the games one after another, or is this okay?

 

I am loading in all the games state files asynchronously via require.js so I don't see a problem... 

[Triplanetary]

Game.destroy() should do the trick, seems like. Then you can create your next game in the usual way and destroy that one when you're done, and so on.