Game: Refactor Game Simulator

src/features/game/SourceAcademyGame.ts

@@ -13,7 +13,7 @@ import RoomPreview from 'src/features/game/scenes/roomPreview/RoomPreview';
 import Settings from 'src/features/game/scenes/settings/Settings';
 import GameSoundManager from 'src/features/game/sound/GameSoundManager';
 import { mandatory } from 'src/features/game/utils/GameUtils';
-import { GameSimState } from 'src/features/gameSimulator/GameSimulatorTypes';
+import { GameSimulatorState } from 'src/features/gameSimulator/GameSimulatorTypes';
 
 import { AchievementGoal, AchievementItem } from '../achievement/AchievementTypes';
 import { fetchGameChapters } from './chapter/GameChapterHelpers';
@@ -123,7 +123,7 @@ export default class SourceAcademyGame extends Phaser.Game {
     this.global.roomCode = await getRoomPreviewCode();
   }
 
-  public setGameSimState(state: GameSimState) {
+  public setGameSimState(state: GameSimulatorState) {
     this.global.setGameSimState(state);
   }
 

src/features/gameSimulator/GameSimulatorConstants.ts

@@ -0,0 +1,72 @@
+import * as Phaser from 'phaser';
+import { AssetMap, AssetType, ImageAsset } from 'src/features/game/assets/AssetsTypes';
+import FontAssets from 'src/features/game/assets/FontAssets';
+import { screenSize } from 'src/features/game/commons/CommonConstants';
+import { BitmapFontStyle } from 'src/features/game/commons/CommonTypes';
+
+import { dateOneYearFromNow } from './GameSimulatorUtils';
+
+export const gameSimulatorConfig = {
+  debug: true,
+  type: Phaser.CANVAS,
+  width: screenSize.x,
+  height: screenSize.y,
+  physics: {
+    default: 'arcade'
+  },
+  scale: {
+    mode: Phaser.Scale.FIT,
+    parent: 'game-display'
+  },
+  fps: {
+    target: 24
+  }
+};
+
+export const gameSimulatorMenuAssets: AssetMap<ImageAsset> = {
+  gameSimBg: {
+    type: AssetType.Image,
+    key: 'student-room',
+    path: '/locations/deathCube_ext/shields-down.png'
+  },
+  shortButton: { type: AssetType.Image, key: 'short-button', path: '/ui/shortButton.png' },
+  invertedButton: {
+    type: AssetType.Image,
+    key: 'inverted-button',
+    path: '/ui/invertedColorButton.png'
+  },
+  blueUnderlay: { type: AssetType.Image, key: 'blue-underlay', path: '/ui/blueUnderlay.png' },
+  topButton: { type: AssetType.Image, key: 'top-button', path: '/ui/topButton.png' },
+  colorIcon: { type: AssetType.Image, key: 'color-icon', path: '/ui/colorIcon.png' },
+  imageIcon: { type: AssetType.Image, key: 'image-icon', path: '/ui/imageIcon.png' },
+  bboxIcon: { type: AssetType.Image, key: 'bbox-icon', path: '/ui/bboxIcon.png' },
+  handIcon: { type: AssetType.Image, key: 'hand-icon', path: '/ui/handIcon.png' },
+  listIcon: { type: AssetType.Image, key: 'list-icon', path: '/ui/listIcon.png' },
+  eraseIcon: { type: AssetType.Image, key: 'erase-icon', path: '/ui/eraserIcon.png' },
+  iconBg: { type: AssetType.Image, key: 'icon-bg', path: '/ui/modeIconBg.png' }
+};
+
+export const gameSimulatorMenuOptStyle: BitmapFontStyle = {
+  key: FontAssets.zektonDarkFont.key,
+  size: 35,
+  align: Phaser.GameObjects.BitmapText.ALIGN_CENTER
+};
+
+export const gameSimulatorMenuConstants = {
+  maxOptButtonsRow: 2,
+  optButton: { xSpace: screenSize.x * 0.9, ySpace: screenSize.y * 0.5 },
+  gameTxtStorageName: {
+    defaultChapter: 'defaultChapter',
+    checkpointTxt: 'checkpointTxt'
+  }
+};
+
+export const defaultChapter = {
+  id: -1,
+  title: '',
+  imageUrl: '/locations/spaceshipBackground.png',
+  openAt: new Date().toISOString(),
+  closeAt: dateOneYearFromNow(new Date()).toISOString(),
+  isPublished: false,
+  filenames: []
+};

src/features/gameSimulator/scenes/MainMenu.ts → src/features/gameSimulator/GameSimulatorMenu.ts

@@ -11,17 +11,20 @@ import { createButton } from 'src/features/game/utils/ButtonUtils';
 import { mandatory, toS3Path } from 'src/features/game/utils/GameUtils';
 import { calcTableFormatPos } from 'src/features/game/utils/StyleUtils';
 
-import SSImageAssets from '../assets/ImageAssets';
-import { GameSimState } from '../GameSimulatorTypes';
-import mainMenuConstants, { mainMenuOptStyle } from './MainMenuConstants';
+import {
+  gameSimulatorMenuAssets,
+  gameSimulatorMenuConstants,
+  gameSimulatorMenuOptStyle
+} from './GameSimulatorConstants';
+import { GameSimulatorState } from './GameSimulatorTypes';
 
 /**
  * Entry point for Game simulator.
  *
  * User can access different Game simulator
  * functionalities from here.
  */
-class MainMenu extends Phaser.Scene {
+class GameSimulatorMenu extends Phaser.Scene {
   private layerManager?: GameLayerManager;
 
   constructor() {
@@ -36,7 +39,7 @@ class MainMenu extends Phaser.Scene {
     Object.values(ImageAssets).forEach(asset =>
       this.load.image(asset.key, toS3Path(asset.path, false))
     );
-    Object.values(SSImageAssets).forEach(asset =>
+    Object.values(gameSimulatorMenuAssets).forEach(asset =>
       this.load.image(asset.key, toS3Path(asset.path, false))
     );
     Object.values(FontAssets).forEach(asset =>
@@ -60,9 +63,9 @@ class MainMenu extends Phaser.Scene {
 
     const buttonPositions = calcTableFormatPos({
       numOfItems: buttons.length,
-      maxXSpace: mainMenuConstants.optButton.xSpace,
-      maxYSpace: mainMenuConstants.optButton.ySpace,
-      numItemLimit: mainMenuConstants.maxOptButtonsRow,
+      maxXSpace: gameSimulatorMenuConstants.optButton.xSpace,
+      maxYSpace: gameSimulatorMenuConstants.optButton.ySpace,
+      numItemLimit: gameSimulatorMenuConstants.maxOptButtonsRow,
       redistributeLast: true
     });
 
@@ -82,41 +85,41 @@ class MainMenu extends Phaser.Scene {
   private getOptionButtons() {
     return [
       {
-        text: 'Checkpoint Simulator',
+        text: 'Simulate Chapters',
         callback: () => {
-          SourceAcademyGame.getInstance().setGameSimState(GameSimState.CheckpointSim);
+          SourceAcademyGame.getInstance().setGameSimState(GameSimulatorState.CHAPTERSIMULATOR);
         }
       },
       {
-        text: 'Asset Uploader',
+        text: 'Publish / Edit Chapters',
         callback: () => {
-          SourceAcademyGame.getInstance().setGameSimState(GameSimState.AssetUploader);
+          SourceAcademyGame.getInstance().setGameSimState(GameSimulatorState.CHAPTERPUBLISHER);
         }
       },
       {
-        text: 'Chapter Simulator',
+        text: 'View / Upload Assets',
         callback: () => {
-          SourceAcademyGame.getInstance().setGameSimState(GameSimState.ChapterSim);
+          SourceAcademyGame.getInstance().setGameSimState(GameSimulatorState.ASSETVIEWER);
         }
       }
     ];
   }
 
   private createOptButton(text: string, xPos: number, yPos: number, callback: any) {
     return createButton(this, {
-      assetKey: SSImageAssets.invertedButton.key,
+      assetKey: gameSimulatorMenuAssets.invertedButton.key,
       message: text,
       textConfig: { x: 0, y: 0, oriX: 0.5, oriY: 0.5 },
-      bitMapTextStyle: mainMenuOptStyle,
+      bitMapTextStyle: gameSimulatorMenuOptStyle,
       onUp: callback
     }).setPosition(xPos, yPos);
   }
 
   public simulateCheckpoint() {
     const defaultChapterText =
-      sessionStorage.getItem(mainMenuConstants.gameTxtStorageName.defaultChapter) || '';
+      sessionStorage.getItem(gameSimulatorMenuConstants.gameTxtStorageName.defaultChapter) || '';
     const checkpointTxt =
-      sessionStorage.getItem(mainMenuConstants.gameTxtStorageName.checkpointTxt) || '';
+      sessionStorage.getItem(gameSimulatorMenuConstants.gameTxtStorageName.checkpointTxt) || '';
     if (defaultChapterText === '' && checkpointTxt === '') {
       return;
     }
@@ -141,19 +144,19 @@ class MainMenu extends Phaser.Scene {
       this,
       screenCenter.x,
       screenCenter.y,
-      SSImageAssets.gameSimBg.key
+      gameSimulatorMenuAssets.gameSimBg.key
     );
     backgroundImg.setDisplaySize(screenSize.x, screenSize.y);
     const backgroundUnderlay = new Phaser.GameObjects.Image(
       this,
       screenCenter.x,
       screenCenter.y,
-      SSImageAssets.blueUnderlay.key
+      gameSimulatorMenuAssets.blueUnderlay.key
     ).setAlpha(0.5);
     this.getLayerManager().addToLayer(Layer.Background, backgroundImg);
     this.getLayerManager().addToLayer(Layer.Background, backgroundUnderlay);
   }
   public getLayerManager = () => mandatory(this.layerManager);
 }
 
-export default MainMenu;
+export default GameSimulatorMenu;

src/features/gameSimulator/GameSimulatorTypes.ts

@@ -1,8 +1,8 @@
-export enum GameSimState {
-  Default = 'Default',
-  AssetUploader = 'AssetUploader',
-  CheckpointSim = 'CheckpointSim',
-  ChapterSim = 'ChapterSim'
+export enum GameSimulatorState {
+  DEFAULT = 'DEFAULT',
+  ASSETVIEWER = 'ASSETVIEWER',
+  CHAPTERSIMULATOR = 'CHAPTERSIMULATOR',
+  CHAPTERPUBLISHER = 'CHAPTERPUBLISHER'
 }
 
 export type ChapterDetail = {
@@ -14,3 +14,17 @@ export type ChapterDetail = {
   isPublished: boolean;
   imageUrl: string;
 };
+
+export type ChapterSimProps = {
+  chapterDetail: ChapterDetail;
+  chapterFilenames?: string[];
+};
+
+export type AssetProps = {
+  assetPath: string;
+};
+
+export type StorageProps = {
+  storageName: string;
+  s3TxtFiles: string[];
+};

src/features/gameSimulator/GameSimulatorUtils.ts

@@ -0,0 +1,21 @@
+export const createHeadersWithCors = (): Headers => {
+  const headers = new Headers();
+  headers.append('Access-Control-Allow-Origin', '*');
+  return headers;
+};
+
+export const loadFileLocally = (storageName: string, txtFile: File) => {
+  const reader = new FileReader();
+  reader.readAsText(txtFile);
+  reader.onloadend = _ => {
+    if (!reader.result) {
+      return;
+    }
+    sessionStorage.setItem(storageName, reader.result.toString());
+  };
+};
+
+export const dateOneYearFromNow = (date: Date) => {
+  date.setFullYear(date.getFullYear() + 1);
+  return date;
+};

src/pages/academy/gameSimulator/GameSimulator.tsx

@@ -1,32 +1,44 @@
 import React from 'react';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
-import SourceAcademyGame, { AccountInfo } from 'src/features/game/SourceAcademyGame';
-import { GameSimState } from 'src/features/gameSimulator/GameSimulatorTypes';
+import CheckpointTransition from 'src/features/game/scenes/checkpointTransition/CheckpointTransition';
+import GameManager from 'src/features/game/scenes/gameManager/GameManager';
+import SourceAcademyGame, { AccountInfo, GameType } from 'src/features/game/SourceAcademyGame';
+import { gameSimulatorConfig } from 'src/features/gameSimulator/GameSimulatorConstants';
+import GameSimulatorMenu from 'src/features/gameSimulator/GameSimulatorMenu';
+import { GameSimulatorState } from 'src/features/gameSimulator/GameSimulatorTypes';
 
-import GameSimulatorAssetFileUploader from './subcomponents/GameSimulatorAssetFileUploader';
-import GameSimulatorAssetSelection from './subcomponents/GameSimulatorAssetSelection';
-import GameSimulatorChapterSim from './subcomponents/GameSimulatorChapterSim';
-import GameSimulatorCheckpointSim from './subcomponents/GameSimulatorCheckpointSim';
-import { createGameSimulatorGame } from './subcomponents/GameSimulatorGame';
+import AssetViewer from './subcomponents/assetViewer/AssetViewer';
+import ChapterPublisher from './subcomponents/chapterPublisher/ChapterPublisher';
+import ChapterSimulator from './subcomponents/chapterSimulator/ChapterSimulator';
 
 /**
- * Game simulator main page
+ * This component renders the Main Page of the Game Simulator.
  *
- * Displays the following elements:
+ * It displays the following elements:
  * (1) Game Simulator phaser canvas
  * (2) Game Simulator control panel
  *
  * Game Simulator control panel's content can be altered using
- * `setGameSimState` function. This function is passed into story
- * simulator phaser game, so that the GameSimulatorMainMenu buttons
+ * `setGameSimulatorState` function. This function is passed into story
+ * simulator phaser game, so that the GameSimulatorMenu buttons
  * are able to control what is shown on the Game Simulator panel.
  */
-function GameSimulator() {
+const GameSimulator: React.FC = () => {
   const session = useTypedSelector(state => state.session);
-  const [gameSimState, setGameSimState] = React.useState<string>(GameSimState.Default);
+  const [gameSimulatorState, setGameSimulatorState] = React.useState<string>(
+    GameSimulatorState.DEFAULT
+  );
+
+  const createGameSimulatorGame = () => {
+    const game = new SourceAcademyGame(gameSimulatorConfig, GameType.Simulator);
+    game.scene.add('GameSimulatorMenu', GameSimulatorMenu, true);
+    game.scene.add('GameManager', GameManager);
+    game.scene.add('CheckpointTransition', CheckpointTransition);
+    return game;
+  };
 
   React.useEffect(() => {
-    createGameSimulatorGame().setGameSimStateSetter(setGameSimState);
+    createGameSimulatorGame().setGameSimStateSetter(setGameSimulatorState);
   }, []);
 
   React.useEffect(() => {
@@ -42,20 +54,13 @@ function GameSimulator() {
     <div className="GameSimulatorWrapper">
       <div id="game-display" />
       <div className="LeftAlign GameSimulatorPanel">
-        {gameSimState === GameSimState.Default && <h3>Welcome to Game simulator!</h3>}
-        {gameSimState === GameSimState.CheckpointSim && <GameSimulatorCheckpointSim />}
-        {gameSimState === GameSimState.AssetUploader && (
-          <>
-            <h3>Asset uploader</h3>
-            <GameSimulatorAssetFileUploader />
-            <h3>Asset Viewer</h3>
-            <GameSimulatorAssetSelection />
-          </>
-        )}
-        {gameSimState === GameSimState.ChapterSim && <GameSimulatorChapterSim />}
+        {gameSimulatorState === GameSimulatorState.DEFAULT && <h3>Welcome to Game simulator!</h3>}
+        {gameSimulatorState === GameSimulatorState.CHAPTERSIMULATOR && <ChapterSimulator />}
+        {gameSimulatorState === GameSimulatorState.CHAPTERPUBLISHER && <ChapterPublisher />}
+        {gameSimulatorState === GameSimulatorState.ASSETVIEWER && <AssetViewer />}
       </div>
     </div>
   );
-}
+};
 
 export default GameSimulator;