CP3108: Game Component

.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.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",

src/actions/__tests__/groundControl.ts

@@ -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__/session.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/actionTypes.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/game.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/groundControl.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/index.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/session.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/components/academy/NavigationBar.tsx

@@ -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/academy/__tests__/__snapshots__/NavigationBar.tsx.snap

@@ -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>"
 `;