Merge branch 'master' into 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/"

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', () => {