Finish transfer of scratch PR

.github/workflows/ci.yml

@@ -14,6 +14,12 @@ jobs:
       uses: actions/checkout@v2
       with:
         path: simulator
+        submodules: recursive
+    - name: Install Simulator system dependencies
+      run: sudo apt-get update && sudo apt-get install -y wget git cmake build-essential swig zlib1g-dev doxygen default-jre python2.7
+    - name: Install Simulator dependencies
+      run: yarn run build-deps
+      working-directory: simulator
     - name: Install Simulator modules
       # Specifying an alternative cache folder to work around a race condition issue in yarn,
       # which seems to occur b/c of how ivygate is referenced from GitHub.

README.md

@@ -16,6 +16,7 @@ Simulates a botball/JBC style demobot with a built in IDE.
 - [CMake](https://cmake.org/)
 - [SWIG 4+](https://swig.org/)
 - [Python 3.7 or newer](https://www.python.org/)
+- [Also python 2.7]
 
 ### Debian/Ubuntu
 ```bash
@@ -71,11 +72,52 @@ git lfs pull
 
 ```bash
 # Python 3.7+ is required for the build process
-python3 dependencies/build.py
-```
+yarn run build-deps
+# The build-deps command executes:
+"python3 dependencies/build.py && yarn add file:dependencies/kipr-scratch/kipr-scratch --cache-folder ./.yarncache",
 
+```
 Tip: if you are experiencing issues with this step, you may try deleting the repository and follow the steps listed above again.
 
+### Notes on building dependencies
+```python3 dependencies/build.py```
+
+1. Run some setup checks
+2. Build libwallaby (probably only need to do this once)
+3. Delete ''unnecessary blocks' from scratch-blocks/blocks-vertical (renames them with a .old extension)
+    - 'event.js',
+    - 'extensions.js',
+    - 'default_toolbox.js',
+    - 'looks.js',
+    - 'motion.js',
+    - 'sensing.js',
+    - 'sound.js'
+
+
+4. blockify libwallaby
+    - Input is libwallaby-build, output is in scratch-blocks/blocks_vertical
+    - Start by parsing the xml result of the libwallaby build
+      - Essentially getting all the functions from the included files and cdecl nodes
+      - Ends up with a list of modules and their functions
+    - For all functions, needs to generate a blockly block of the module_function with
+      with the correct parameters and return types.
+      - Only does it for analog, digital, wait_for, time, motor, and servo modules
+    - Patches the colors in core/colours.js for the new modules from info in module_hsl.json
+    - Writes a new default_toolbox.js - this is what we have access to pick from
+    - Modifies the category names in the vertical extensions file, removing 'sounds', 'motion', 
+      'looks', 'event', 'sensing', 'pen', but adding our modules
+    - Modifies the messages to include those from our modules and the program start
+    - Modifies the css flyout style
+    - Modifies the field variables to remove non initialization case
+
+
+5. Patch the scratch-blocks package.json to use python2
+
+6. Install the scratch blocks
+
+
+
+
 ## Install JavaScript Dependencies
 
 Navigate to the root directory of this repository, then run:

src/components/Challenge/ChallengeMenu.tsx

@@ -56,7 +56,7 @@ export interface MenuProps extends StyleProps, ThemeProps {
   onShowAll: () => void;
   onHideAll: () => void;
 
-  onRunClick: () => void;
+  onRunClick?: () => void;
   onStopClick: () => void;
   onResetChallengeClick: () => void;
 
@@ -247,7 +247,7 @@ class ChallengeMenu extends React.PureComponent<Props, State> {
         <RunItem
           theme={theme}
           onClick={SimulatorState.isStopped(simulatorState) ? onRunClick : undefined}
-          disabled={!SimulatorState.isStopped(simulatorState)}
+          disabled={!onRunClick || !SimulatorState.isStopped(simulatorState)}
           style={{ borderLeft: `1px solid ${theme.borderColor}` }}
         >
           <ItemIcon icon={faPlay} />

src/components/Challenge/SimMenu.tsx

@@ -75,7 +75,7 @@ export interface MenuPublicProps extends StyleProps, ThemeProps {
   onShowAll: () => void;
   onHideAll: () => void;
 
-  onRunClick: () => void;
+  onRunClick?: () => void;
   onStopClick: () => void;
   onResetWorldClick: () => void;
 
@@ -315,7 +315,7 @@ class SimMenu extends React.PureComponent<Props, State> {
         <RunItem
           theme={theme}
           onClick={SimulatorState.isStopped(simulatorState) ? onRunClick : undefined}
-          disabled={!SimulatorState.isStopped(simulatorState)}
+          disabled={!onRunClick || !SimulatorState.isStopped(simulatorState)}
           style={{ borderLeft: `1px solid ${theme.borderColor}` }}
         >
           <ItemIcon icon={faPlay} />

src/components/Editor/Editor.tsx

@@ -13,13 +13,15 @@ import { Ivygate, Message } from 'ivygate';
 import LanguageSelectCharm from './LanguageSelectCharm';
 import ProgrammingLanguage from '../../programming/compiler/ProgrammingLanguage';
 
-import { faArrowsRotate, faFileDownload, faIndent } from '@fortawesome/free-solid-svg-icons';
+import { faArrowsRotate, faCompress, faExpand, faFileDownload, faIndent } from '@fortawesome/free-solid-svg-icons';
+// import { faArrowsRotate, faFileDownload, faIndent } from '@fortawesome/free-solid-svg-icons';
 import Script from '../../state/State/Scene/Script';
 import Dict from '../../util/objectOps/Dict';
 
 import * as monaco from 'monaco-editor';
 import tr from '@i18n';
 import LocalizedString from '../../util/LocalizedString';
+import ScratchEditor from './ScratchEditor';
 
 export enum EditorActionState {
   None,
@@ -35,7 +37,9 @@ export interface EditorPublicProps extends StyleProps, ThemeProps {
   messages?: Message[];
   autocomplete: boolean;
 
-  onDocumentationGoToFuzzy?: (query: string, language: 'c' | 'python') => void;
+  onDocumentationGoToFuzzy?: (query: string, language: 'c' | 'python' | 'scratch') => void;
+
+  mini?: boolean;
 }
 
 interface EditorPrivateProps {
@@ -75,6 +79,8 @@ export namespace EditorBarTarget {
     onDownloadCode: () => void;
     onResetCode: () => void;
     onErrorClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mini?: boolean;
+    onMiniClick?: () => void;
   }
 }
 
@@ -104,15 +110,27 @@ export const createEditorBarComponents = ({
         onLanguageChange: target.onLanguageChange,
       }));
 
-      editorBar.push(BarComponent.create(Button, {
-        theme,
-        onClick: target.onIndentCode,
-        children:
-          <>
-            <FontAwesome icon={faIndent} />
-            {' '} {LocalizedString.lookup(tr('Indent'), locale)}
-          </>
-      }));
+      if (target.language !== 'scratch') {
+        editorBar.push(BarComponent.create(Button, {
+          theme,
+          onClick: target.onIndentCode,
+          children:
+            <>
+              <FontAwesome icon={faIndent} />
+              {' '} {LocalizedString.lookup(tr('Indent'), locale)}
+            </>
+        }));
+      } else {
+        /* editorBar.push(BarComponent.create(Button, {
+          theme,
+          onClick: target.onMiniClick,
+          children:
+            <>
+              <Fa icon={target.mini ? faExpand : faCompress} />
+              {' '} {LocalizedString.lookup(target.mini ? tr('Show Toolbox') : tr('Hide Toolbox'), locale)}
+            </>
+        })); */
+      }
 
       editorBar.push(BarComponent.create(Button, {
         theme,
@@ -171,8 +189,7 @@ export const IVYGATE_LANGUAGE_MAPPING: Dict<string> = {
   'ecmascript': 'javascript',
 };
 
-const DOCUMENTATION_LANGUAGE_MAPPING: { [key in ProgrammingLanguage | Script.Language]: 'c' | 'python' | undefined } = {
-  'ecmascript': undefined,
+const DOCUMENTATION_LANGUAGE_MAPPING: { [key in ProgrammingLanguage | Script.Language]?: 'c' | 'python' | 'scratch' | undefined } = {
   'python': 'python',
   'c': 'c',
   'cpp': 'c',
@@ -232,11 +249,22 @@ class Editor extends React.PureComponent<Props, State> {
       onCodeChange,
       messages,
       autocomplete,
-      language
+      language,
+      mini
     } = this.props;
 
-    return (
-      <Container theme={theme} style={style} className={className}>
+    let component: JSX.Element;
+    if (language === 'scratch') {
+      component = (
+        <ScratchEditor
+          code={code}
+          onCodeChange={onCodeChange}
+          theme={theme}
+          toolboxHidden={mini}
+        />
+      );
+    } else {
+      component = (
         <Ivygate
           ref={this.bindIvygate_}
           code={code}
@@ -245,7 +273,14 @@ class Editor extends React.PureComponent<Props, State> {
           onCodeChange={onCodeChange}
           autocomplete={autocomplete}
         />
+      );
+    }
+
+    return (
+      <Container theme={theme} style={style} className={className}>
+        {component}
       </Container>
+
     );
   }
 }

src/components/Editor/LanguageSelectCharm.tsx

@@ -29,6 +29,9 @@ const OPTIONS: ComboBox.Option[] = [{
 }, {
   text: 'Python',
   data: 'python'
+}, {
+  text: 'Scratch',
+  data: 'scratch'
 }];
 
 const Label = styled('div', {