CP3108: Game Component (#1058)

* Refactor constants (#2)

- Move ASSETS_HOST to within constants.js
- Add a backend directory to facilitate future communication with the backend
- Add ability to toggle asset hosts

* Setup game state fetcher

Includes implementation to manage active stories

* Refactor save and load data

* Create game testing page

* Create telescope/night filter

* Add test for Game Dev link

* Add override functions

* Retrieve data from backend

* Add more tests for game-dev page and material page

* Deleted unnecessary page

* To use test bucket

* Changed test page to automatically find folder

* Prettified and Updated Snapshots

* Change the story retrieval workflow

Dev users will first attempt to pull from the test bucket. If it fails, then try the live bucket.

Student users will always pull from the live bucket.

* Fixed location of stories

* Json Upload

* Modify test for StoryTable

* Read input JSON file and set override

* Enable the JSON file to simulate customized mission pointer and current date as well

* Fixed bug where tests on PixiJS will fail due to canvas error

Tried pixijs/pixijs#4769 after encountering TypeError: Cannot set property 'fillStyle' of null
It solved the problem with the game-dev component.

* Fully moved completed-quests and collectibles away from localStorage.

Saving and loading of quest and collectibles will come through the user data or from overriding data.

* Save Manager now saves story action sequence and start location to localStorage

* Added new actions and changed state for the addition of game state.

- Made new actiontypes to update game state in the backend and in session.
- Updated tests to accomodate for game state.

* Updated game and gamedev components to accomodate the addition of game state and changes in save manager.

* Deleted non-essential mission pointer override

* Fixed Typo 'hasColletible'.

* Merged GroundControl with gameStateUpdate

* Using SessionStorage for Game State instead of JS

* Minor Cosmetic Changes

* GamePage to load only when all information is gotten

* Fixed some errors and allow for reset json files

* Updated Game Components to use GroundControl

Use Ground Control's assessment overview instead of master.xml file. Less things to keep track of this way.

* Updated Material Table Snapshots

* Minor bugfixes and documentation

- Fixed bug with regards to missing stories, testers now use default story if they have not overriden the game.

- Potential bug fixed With no missions available,  will return leaving a black screen, instead of crashing.

- Fixed bug that stops the game from compiling when the last mission has closed, will now only show last opened mission.

- Added minor documentation

* Point hosts back to default

* Removed console.log function

* Fix bugs in backend.ts

* Prettify code

* Fix bugs in backend.ts

Co-authored-by: Asthenosphere <e0271247@u.nus.edu>
Co-authored-by: wltan <wltan@users.noreply.github.com>
Co-authored-by: travisryte <thuyaoo200@gmail.com>
Co-authored-by: jetkan-yk <jetkan.yk@gmail.com>

Author: 4 people

.env.example

@@ -1,7 +1,7 @@
-REACT_APP_LUMINUS_CLIENT_ID=your_luminus_client_id_here
+REACT_APP_LUMINUS_CLIENT_ID=nus_apps
 REACT_APP_VERSION=$npm_package_version
 REACT_APP_BACKEND_URL=http://localhost:4001
 REACT_APP_USE_BACKEND=TRUE
 REACT_APP_CHATKIT_INSTANCE_LOCATOR=instance_locator_here_otherwise_empty_string
 
-MODULE_BACKEND_URL=http://ec2-54-169-81-133.ap-southeast-1.compute.amazonaws.com
+MODULE_BACKEND_URL=http://ec2-54-169-81-133.ap-southeast-1.compute.amazonaws.com

package-lock.json

@@ -35,6 +35,7 @@
     }
   },
   "dependencies": {
+    "@blueprintjs/datetime": "^3.15.2",
     "@pusher/chatkit-client": "^1.5.0",
     "ace-builds": "^1.4.8",
     "acorn": "^5.7.4",
@@ -122,6 +123,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "husky": "^1.3.1",
+    "jest-canvas-mock": "^2.2.0",
     "local-cors-proxy": "^1.0.2",
     "prettier": "^1.18.2",
     "react-scripts-ts": "^2.16.0",

package.json

@@ -0,0 +1,57 @@
+import * as actionTypes from '../actionTypes';
+import {
+  changeDateAssessment,
+  deleteAssessment,
+  publishAssessment,
+  uploadAssessment
+} from '../groundControl';
+
+test('changeDateAssessment generates correct action object', () => {
+  const id = 10;
+  const openAt = '2020-01-01T00:00:00.000Z';
+  const closeAt = '2021-01-01T00:00:00.000Z';
+  const action = changeDateAssessment(id, openAt, closeAt);
+  expect(action).toEqual({
+    type: actionTypes.CHANGE_DATE_ASSESSMENT,
+    payload: {
+      id,
+      openAt,
+      closeAt
+    }
+  });
+});
+
+test('deleteAssessment generates correct action object', () => {
+  const id = 12;
+  const action = deleteAssessment(id);
+  expect(action).toEqual({
+    type: actionTypes.DELETE_ASSESSMENT,
+    payload: id
+  });
+});
+
+test('publishAssessment generates correct action object', () => {
+  const id = 54;
+  const togglePublishTo = false;
+  const action = publishAssessment(togglePublishTo, id);
+  expect(action).toEqual({
+    type: actionTypes.PUBLISH_ASSESSMENT,
+    payload: {
+      togglePublishTo,
+      id
+    }
+  });
+});
+
+test(' generates correct action object', () => {
+  const file = new File([''], 'testFile');
+  const forceUpdate = true;
+  const action = uploadAssessment(file, forceUpdate);
+  expect(action).toEqual({
+    type: actionTypes.UPLOAD_ASSESSMENT,
+    payload: {
+      file,
+      forceUpdate
+    }
+  });
+});

src/actions/__tests__/groundControl.ts

@@ -1,7 +1,7 @@
 import { Grading, GradingOverview } from '../../components/academy/grading/gradingShape';
 import { IAssessment, IAssessmentOverview } from '../../components/assessment/assessmentShape';
 import { Notification } from '../../components/notification/notificationShape';
-import { Role, Story } from '../../reducers/states';
+import { GameState, Role, Story } from '../../reducers/states';
 import * as actionTypes from '../actionTypes';
 import {
   acknowledgeNotifications,
@@ -156,7 +156,8 @@ test('setUser generates correct action object', () => {
     role: 'student' as Role,
     group: '42D',
     grade: 150,
-    story: {} as Story
+    story: {} as Story,
+    gameState: {} as GameState
   };
   const action = setUser(user);
   expect(action).toEqual({

src/actions/__tests__/session.ts

@@ -125,7 +125,17 @@ export const ACKNOWLEDGE_NOTIFICATIONS = 'ACKNOWLEDGE_NOTIFICATIONS';
 export const UPDATE_NOTIFICATIONS = 'UPDATE_NOTIFICATIONS';
 export const NOTIFY_CHATKIT_USERS = 'NOTIFY_CHATKIT_USERS';
 
-/** Dashboard */
+/** GAMEDEV */
+export const FETCH_TEST_STORIES = 'FETCH_TEST_STORIES';
+export const SAVE_USER_STATE = 'SAVE_USER_STATE';
+export const SET_GAME_STATE = 'SET_GAME_STATE';
+
+/** GroundControl */
+export const CHANGE_DATE_ASSESSMENT = 'CHANGE_DATE_ASSESSMENT';
+export const DELETE_ASSESSMENT = 'DELETE_ASSESSMENT';
+export const PUBLISH_ASSESSMENT = 'PUBLISH_ASSESSMENT';
+export const UPLOAD_ASSESSMENT = 'UPLOAD_ASSESSMENT';
 
+/** Dashboard */
 export const FETCH_GROUP_OVERVIEWS = 'FETCH_GROUP_OVERVIEWS';
 export const UPDATE_GROUP_OVERVIEWS = 'UPDATE_GROUP_OVERVIEWS';

src/actions/actionTypes.ts

@@ -1,5 +1,8 @@
+import { GameState } from 'src/reducers/states';
 import { action } from 'typesafe-actions';
-
 import * as actionTypes from './actionTypes';
 
+export const fetchTestStories = () => action(actionTypes.FETCH_TEST_STORIES);
 export const saveCanvas = (canvas: HTMLCanvasElement) => action(actionTypes.SAVE_CANVAS, canvas);
+export const saveUserData = (gameState: GameState) =>
+  action(actionTypes.SAVE_USER_STATE, gameState);

src/actions/game.ts

@@ -0,0 +1,14 @@
+import { action } from 'typesafe-actions';
+
+import * as actionTypes from './actionTypes';
+
+export const changeDateAssessment = (id: number, openAt: string, closeAt: string) =>
+  action(actionTypes.CHANGE_DATE_ASSESSMENT, { id, openAt, closeAt });
+
+export const deleteAssessment = (id: number) => action(actionTypes.DELETE_ASSESSMENT, id);
+
+export const publishAssessment = (togglePublishTo: boolean, id: number) =>
+  action(actionTypes.PUBLISH_ASSESSMENT, { id, togglePublishTo });
+
+export const uploadAssessment = (file: File, forceUpdate: boolean) =>
+  action(actionTypes.UPLOAD_ASSESSMENT, { file, forceUpdate });

src/actions/groundControl.ts

@@ -2,6 +2,7 @@ export * from './collabEditing';
 export * from './commons';
 export * from './dashboard';
 export * from './game';
+export * from './groundControl';
 export * from './interpreter';
 export * from './material';
 export * from './playground';

src/actions/index.ts

@@ -6,7 +6,7 @@ import {
   Notification,
   NotificationFilterFunction
 } from '../components/notification/notificationShape';
-import { Story } from '../reducers/states';
+import { GameState, Story } from '../reducers/states';
 import * as actionTypes from './actionTypes';
 
 import { Role } from '../reducers/states';
@@ -31,6 +31,8 @@ export const fetchGradingOverviews = (filterToGroup = true) =>
 
 export const login = () => action(actionTypes.LOGIN);
 
+export const setGameState = (gameState: GameState) => action(actionTypes.SET_GAME_STATE, gameState);
+
 export const setTokens = ({
   accessToken,
   refreshToken
@@ -48,7 +50,8 @@ export const setUser = (user: {
   role: Role;
   group: string | null;
   grade: number;
-  story: Story;
+  story?: Story;
+  gameState?: GameState;
 }) => action(actionTypes.SET_USER, user);
 
 export const submitAnswer = (id: number, answer: string | number) =>

src/actions/session.ts

@@ -85,6 +85,15 @@ const NavigationBar: React.SFC<OwnProps> = props => (
       <NavbarGroup align={Alignment.RIGHT}>
         <DefaultChapter />
 
+        <NavLink
+          to={'/academy/groundcontrol'}
+          activeClassName={Classes.ACTIVE}
+          className={classNames('NavigationBar__link', Classes.BUTTON, Classes.MINIMAL)}
+        >
+          <Icon icon="satellite" />
+          <div className="navbar-button-text hidden-xs">Ground Control</div>
+        </NavLink>
+
         <NavLink
           to={'/academy/dashboard'}
           activeClassName={Classes.ACTIVE}
@@ -124,6 +133,15 @@ const NavigationBar: React.SFC<OwnProps> = props => (
             disableHover={true}
           />
         </NavLink>
+
+        <NavLink
+          to={'/academy/gamedev'}
+          activeClassName={Classes.ACTIVE}
+          className={classNames('NavigationBar__link', Classes.BUTTON, Classes.MINIMAL)}
+        >
+          <Icon icon={IconNames.CROWN} />
+          <div className="navbar-button-text hidden-xs">Game Dev</div>
+        </NavLink>
       </NavbarGroup>
     ) : null}
   </Navbar>

src/components/Playground.tsx

@@ -81,6 +81,12 @@ exports[`Grading NavLink renders for Role.Admin 1`] = `
   </Blueprint3.NavbarGroup>
   <Blueprint3.NavbarGroup align=\\"right\\">
     <withRouter(Connect(DefaultChapter)) />
+    <NavLink to=\\"/academy/groundcontrol\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
+      <Blueprint3.Icon icon=\\"satellite\\" />
+      <div className=\\"navbar-button-text hidden-xs\\">
+        Ground Control
+      </div>
+    </NavLink>
     <NavLink to=\\"/academy/dashboard\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
       <Blueprint3.Icon icon=\\"globe\\" />
       <div className=\\"navbar-button-text hidden-xs\\">
@@ -106,6 +112,12 @@ exports[`Grading NavLink renders for Role.Admin 1`] = `
       </div>
       <Connect(NotificationBadge) notificationFilter={[Function]} disableHover={true} />
     </NavLink>
+    <NavLink to=\\"/academy/gamedev\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
+      <Blueprint3.Icon icon=\\"crown\\" />
+      <div className=\\"navbar-button-text hidden-xs\\">
+        Game Dev
+      </div>
+    </NavLink>
   </Blueprint3.NavbarGroup>
 </Blueprint3.Navbar>"
 `;
@@ -150,6 +162,12 @@ exports[`Grading NavLink renders for Role.Staff 1`] = `
   </Blueprint3.NavbarGroup>
   <Blueprint3.NavbarGroup align=\\"right\\">
     <withRouter(Connect(DefaultChapter)) />
+    <NavLink to=\\"/academy/groundcontrol\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
+      <Blueprint3.Icon icon=\\"satellite\\" />
+      <div className=\\"navbar-button-text hidden-xs\\">
+        Ground Control
+      </div>
+    </NavLink>
     <NavLink to=\\"/academy/dashboard\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
       <Blueprint3.Icon icon=\\"globe\\" />
       <div className=\\"navbar-button-text hidden-xs\\">
@@ -175,6 +193,12 @@ exports[`Grading NavLink renders for Role.Staff 1`] = `
       </div>
       <Connect(NotificationBadge) notificationFilter={[Function]} disableHover={true} />
     </NavLink>
+    <NavLink to=\\"/academy/gamedev\\" activeClassName=\\"bp3-active\\" className=\\"NavigationBar__link bp3-button bp3-minimal\\" aria-current=\\"page\\">
+      <Blueprint3.Icon icon=\\"crown\\" />
+      <div className=\\"navbar-button-text hidden-xs\\">
+        Game Dev
+      </div>
+    </NavLink>
   </Blueprint3.NavbarGroup>
 </Blueprint3.Navbar>"
 `;