Strange Galactic Friends

Appearance

Views and Components ​

Components ​

The advantage of using a frontend framework like Vue.js is that we can create reusable components. In the components folder, you can find components, such as buttons, list components, text fields and the Phaser game component.

Views ​

Currently, there are two routes. Each of these routes has different subviews:

  • StartMenu: The start menu where you can host or join a game. The subviews can be found in the views/start-menu folder.
  • InGame: The actual game where you can select levels and play them. The subviews can be found in the views/in-game folder.

A browser specific issue is that sounds can only be played after a user interaction. This is why on every page load an overlay is shown which shows a cut scene and has a button to start the game.

INFO

More information about the design of the views can be found in the design section.

Start Menu ​

The start menu is split in half. On the left, there are buttons to switch between hosting and joining a game and changing the settings. On the right, you can see the currently selected option.

InGame ​

The in-game view has different subviews which are displayed based on the state of the game store.

Currently, there are the following subviews:

  • ErrorScreen: The error view which is displayed when an error occurs.
  • GameOver: The game-over view which is displayed when the level is completed, the time is over or a player dies.
  • LevelRunning: The actual phaser level.
  • LevelSelection: The level selection view where you can select a level to play.
  • LoadingScreen: The loading screen which is displayed when the client is connecting to the server or loading a level.
  • MenuOverlay: The menu overlay which is displayed when the player presses the escape key. This menu can be accessed from every subview.