Merge branch 'P2Fancy' of https://github.com/chekjun/cadet-frontend i…

…nto P2Fancy

.env.example

@@ -53,4 +53,4 @@ REACT_APP_CADET_LOGGER=
 REACT_APP_CADET_LOGGER_INTERVAL=10000
 
 # Link to interative-sicp
-REACT_APP_INTERACTIVE_SICP_URL="http://127.0.0.1:8080/"
+REACT_APP_INTERACTIVE_SICP_DATA_URL="http://127.0.0.1:8080/"

README.md

@@ -4,7 +4,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/source-academy/cadet-frontend/badge.svg?branch=master)](https://coveralls.io/github/source-academy/cadet-frontend?branch=master)
 [![License](https://img.shields.io/github/license/source-academy/cadet-frontend)](https://github.com/source-academy/cadet-frontend/blob/master/LICENSE)
 
-The Source Academy (<https://source-academy.github.io/>) is an immersive online experiential environment for learning programming, developed in the School of Computing at the National University of Singapore. This repository houses the sources for the frontend of the Source Academy, written in ReactJS with Redux.
+The Source Academy (<https://source-academy.github.io/>) is an immersive online experiential environment for learning programming. It is developed by a community of learners (also called "Source Academy") who use the book [Structure and Interpretation of Computer Programs, JavaScript Adaptation](https://source-academy.github.io/interactive-sicp) (SICP JS). This repository houses the sources for the frontend of the Source Academy, written in ReactJS with Redux.
 
 ## Features
 - Playground to write and test programs

src/commons/__tests__/__snapshots__/Markdown.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Markdown page renders correctly 1`] = `
-"<Memo(Markdown) content=\\"\\\\nWelcome to the Source Academy playground!\\\\n\\\\nThe language [_Source_](https://source-academy.github.io/source/) is the official language of the textbook [_Structure and\\\\nInterpretation of Computer Programs, JavaScript Adaptation_](https://source-academy.github.io/sicp/). You have chosen the sublanguage [_Source §1_](https://source-academy.github.io/source/source_1/).\\\\n\\\\nIn the editor on the left, you can use the [_Ace keyboard shortcuts_](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts) \\\\nand also the [_Source Academy keyboard shortcuts_](https://github.com/source-academy/cadet-frontend/wiki/Source-Academy-Keyboard-Shortcuts).\\\\n\\\\n\\" openLinksInNewWindow={true}>
+"<Memo(Markdown) content=\\"\\\\nWelcome to the Source Academy playground!\\\\n\\\\nThe language [_Source_](https://source-academy.github.io/source/) is the official language of the textbook [_Structure and\\\\nInterpretation of Computer Programs, JavaScript Adaptation_](https://source-academy.github.io/interactive-sicp/). You have chosen the sublanguage [_Source §1_](https://source-academy.github.io/source/source_1/).\\\\n\\\\nIn the editor on the left, you can use the [_Ace keyboard shortcuts_](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts) \\\\nand also the [_Source Academy keyboard shortcuts_](https://github.com/source-academy/cadet-frontend/wiki/Source-Academy-Keyboard-Shortcuts).\\\\n\\\\n\\" openLinksInNewWindow={true}>
   <div className=\\"md bp3-running-text\\" dangerouslySetInnerHTML={{...}} />
 </Memo(Markdown)>"
 `;

src/commons/sideContent/__tests__/__snapshots__/SideContentEnvVisualizer.tsx.snap

@@ -11,7 +11,7 @@ exports[`EnvVisualizer component renders correctly 1`] = `
     <br />
     The environment model diagram follows a notation introduced in
      
-    <a href=\\"https://source-academy.github.io/sicp/chapters/3.2.html\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">
+    <a href=\\"https://source-academy.github.io/interactive-sicp/3.2\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">
       <i>
         Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 3, Section 2
       </i>

src/commons/utils/Constants.ts

@@ -31,8 +31,8 @@ const googleApiKey = process.env.REACT_APP_GOOGLE_API_KEY;
 const googleAppId = process.env.REACT_APP_GOOGLE_APP_ID;
 const githubClientId = process.env.REACT_APP_GITHUB_CLIENT_ID || '';
 const githubOAuthProxyUrl = process.env.REACT_APP_GITHUB_OAUTH_PROXY_URL || '';
-const interactiveSicpUrl =
-  process.env.REACT_APP_INTERACTIVE_SICP_URL || 'https://source-academy.github.io/sicp/';
+const interactiveSicpDataUrl =
+  process.env.REACT_APP_INTERACTIVE_SICP_DATA_URL || 'https://source-academy.github.io/sicp/'; // data for interactive-sicp (images and json files)
 
 const authProviders: Map<string, { name: string; endpoint: string; isDefault: boolean }> =
   new Map();
@@ -80,9 +80,9 @@ export enum Links {
   sourceDocs = 'https://source-academy.github.io/source/',
   techSVC = 'mailto:techsvc@comp.nus.edu.sg',
   techSVCNumber = '6516 2736',
-  textbook = 'https://source-academy.github.io/sicp/',
-  textbookChapter2_2 = 'https://source-academy.github.io/sicp/chapters/2.2.html',
-  textbookChapter3_2 = 'https://source-academy.github.io/sicp/chapters/3.2.html',
+  textbook = 'https://source-academy.github.io/interactive-sicp/',
+  textbookChapter2_2 = 'https://source-academy.github.io/interactive-sicp/2.2',
+  textbookChapter3_2 = 'https://source-academy.github.io/interactive-sicp/3.2',
 
   aceHotkeys = 'https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts',
   sourceHotkeys = 'https://github.com/source-academy/cadet-frontend/wiki/Source-Academy-Keyboard-Shortcuts',
@@ -127,7 +127,7 @@ const Constants = {
   sharedbBackendUrl,
   disablePeriods,
   cadetLoggerInterval,
-  interactiveSicpUrl
+  interactiveSicpDataUrl
 };
 
 export default Constants;

src/features/game/scenes/roomPreview/RoomPreview.ts

@@ -139,14 +139,15 @@ export default class RoomPreview extends Phaser.Scene {
 
   public createContext() {
     this.context = createContext(4, [], 'playground', 'default', {
-      scene: this,
-      phaser: Phaser,
-      preloadImageMap: this.preloadImageMap,
-      preloadSoundMap: this.preloadSoundMap,
-      preloadSpritesheetMap: this.preloadSpritesheetMap,
-      remotePath: Constants.assetsFolder,
-      screenSize: screenSize,
-      createAward: (x: number, y: number, key: ItemId) => this.createAward(x, y, key)
+      game: {
+        scene: this,
+        preloadImageMap: this.preloadImageMap,
+        preloadSoundMap: this.preloadSoundMap,
+        preloadSpritesheetMap: this.preloadSpritesheetMap,
+        remotePath: Constants.assetsFolder,
+        screenSize: screenSize,
+        createAward: (x: number, y: number, key: ItemId) => this.createAward(x, y, key)
+      }
     });
   }
 

src/features/sicp/SourceTheme.ts

@@ -2,10 +2,12 @@
  * Source Theme for use with react-syntax-highlighter.
  * Tries to match the Source Theme for Ace Editor in js-slang
  */
+const SourceThemeBackground = '#2c3e50';
+
 export const SourceTheme = {
   'code[class*="language-"]': {
     color: 'white',
-    background: '#2c3e50',
+    background: SourceThemeBackground,
     fontFamily: "'Inconsolata', 'Consolas', monospace",
     textAlign: 'left',
     whiteSpace: 'pre',
@@ -24,7 +26,7 @@ export const SourceTheme = {
   },
   'pre[class*="language-"]': {
     color: 'white',
-    background: '#2c3e50',
+    background: SourceThemeBackground,
     fontFamily: "'Inconsolata', 'Consolas', monospace",
     textAlign: 'left',
     whiteSpace: 'pre',
@@ -45,7 +47,7 @@ export const SourceTheme = {
     borderRadius: '0.3em'
   },
   ':not(pre) > code[class*="language-"]': {
-    background: '#2c3e50',
+    background: SourceThemeBackground,
     padding: '0.1em',
     borderRadius: '0.3em',
     whiteSpace: 'normal'

src/features/sicp/parser/ParseJson.tsx

@@ -116,7 +116,7 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
   <div ref={ref => (refs.current[obj['id']!] = ref)} className="sicp-figure">
     {handleImage(obj, refs)}
     {obj['captionName'] && (
-      <h5>
+      <h5 className="sicp-caption">
         {obj['captionName']}
         {parseArr(obj['captionBody']!, refs)}
       </h5>
@@ -127,15 +127,11 @@ const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
 const handleImage = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   if (obj['src']) {
     return (
-      <div className={'sicp-figure'}>
-        {obj['src'] && (
-          <img
-            src={Constants.interactiveSicpUrl + obj['src']}
-            alt={obj['id']}
-            width={obj['scale']}
-          />
-        )}
-      </div>
+      <img
+        src={Constants.interactiveSicpDataUrl + obj['src']}
+        alt={obj['id']}
+        width={obj['scale']}
+      />
     );
   } else if (obj['snippet']) {
     return processingFunctions['SNIPPET'](obj['snippet'], refs);
@@ -175,6 +171,10 @@ const handleContainer = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   );
 };
 
+const handleReference = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
+  return <div>{parseArr(obj['child']!, refs)}</div>;
+};
+
 const handleText = (text: string) => {
   return <p>{text}</p>;
 };
@@ -221,19 +221,13 @@ export const processingFunctions = {
 
   LaTeX: (_obj: JsonType, _refs: React.MutableRefObject<{}>) => handleText('LaTeX'),
 
-  MATTER: handleContainer,
-
   META: (obj: JsonType, _refs: React.MutableRefObject<{}>) => <em>{obj['body']}</em>,
 
-  METAPHRASE: (obj: JsonType, _refs: React.MutableRefObject<{}>) => <p>&langle; &rangle;</p>,
-
   OL: (obj: JsonType, refs: React.MutableRefObject<{}>) => <OL>{parseArr(obj['child']!, refs)}</OL>,
 
   REF: handleRef,
 
-  REFERENCE: handleContainer,
-
-  REFERENCES: handleContainer,
+  REFERENCE: handleReference,
 
   SECTION: handleContainer,
 
@@ -245,17 +239,13 @@ export const processingFunctions = {
     </h2>
   ),
 
-  SUBSECTION: handleContainer,
-
   SUBSUBHEADING: (obj: JsonType, refs: React.MutableRefObject<{}>) => (
     <h4 className="bp3-heading" ref={ref => (refs.current[obj['id']!] = ref)}>
       <br />
       {parseArr(obj['child']!, refs)}
     </h4>
   ),
 
-  SUBSUBSECTION: handleContainer,
-
   TABLE: (obj: JsonType, refs: React.MutableRefObject<{}>) => (
     <table>
       <tbody>{obj['child']!.map((x, index) => handleTR(x, refs, index))}</tbody>

src/features/sicp/parser/__tests__/ParseJson.tsx

@@ -7,16 +7,16 @@ import { JsonType, parseArr, ParseJsonError, parseObj, processingFunctions } fro
 
 // Tags to process
 const headingTags = ['SUBHEADING', 'SUBSUBHEADING'];
-const sectionTags = ['SECTION', 'SUBSECTION', 'SUBSUBSECTION', 'MATTER', 'CHAPTER', 'REFERENCES'];
 const listTags = ['OL', 'UL'];
 const symbolTags = ['BR', 'LaTeX', 'TeX'];
-const stylingTags = ['B', 'EM', 'JAVASCRIPTINLINE', 'TT', 'METAPHRASE', 'META'];
+const stylingTags = ['B', 'EM', 'JAVASCRIPTINLINE', 'TT', 'META'];
 const latexTags = ['LATEX', 'LATEXINLINE'];
 const linkTags = ['LINK', 'REF', 'FOOTNOTE_REF'];
 
 const epigraphTag = 'EPIGRAPH';
 const tableTag = 'TABLE';
 const exerciseTag = 'EXERCISE';
+const sectionTag = 'SECTION';
 const snippetTag = 'SNIPPET';
 const figureTag = 'FIGURE';
 const displayFootnoteTag = 'DISPLAYFOOTNOTE';
@@ -28,7 +28,7 @@ jest.mock('src/commons/utils/Constants', () => ({
   Links: {
     sourceDocs: ''
   },
-  interactiveSicpUrl: 'source-academy.github.io/sicp/'
+  interactiveSicpDataUrl: 'https://source-academy.github.io/sicp/'
 }));
 
 const mockData = {
@@ -79,12 +79,12 @@ describe('Parse heading', () => {
 });
 
 describe('Parse section', () => {
-  const tags = sectionTags;
+  const tag = sectionTag;
   const text = { tag: 'TEXT', child: [mockData['text'], mockData['text']] };
   const content = [text, text];
   const obj = { body: 'Title', child: content };
 
-  tags.forEach(x => testTagSuccessful(obj, x));
+  testTagSuccessful(obj, tag);
 });
 
 describe('Parse list', () => {