CSE Machine: Added animation for spread instruction

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ env:
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
-  
+
 jobs:
   lint:
     if: github.event.pull_request.draft == false

CONTRIBUTING.md

@@ -16,7 +16,7 @@ To start contributing, create a fork from our repo and send a PR. Refer to [this
 
 The frontend comes with an extensive test suite. To run the tests after you made your modifications, run
 `yarn test`. Regression tests are run automatically when you want to push changes to this repository.
-The regression tests are generated using `jest` and stored as snapshots in `src/\_\_tests\_\_`.  After modifying the frontend, carefully inspect any failing regression tests reported in red in the command line. If you are convinced that the regression tests and not your changes are at fault, you can update the regression tests by running:
+The regression tests are generated using `jest` and stored as snapshots in `src/\_\_tests\_\_`. After modifying the frontend, carefully inspect any failing regression tests reported in red in the command line. If you are convinced that the regression tests and not your changes are at fault, you can update the regression tests by running:
 
 ```bash
 yarn test --updateSnapshot

README.md

@@ -24,7 +24,7 @@ The Source Academy (<https://sourceacademy.org/>) is an immersive online experie
 
 1. Clone this repository and navigate to it using your command line
 
-1. Install the version of `yarn` as specified in `package.json`, `packageManager`. 
+1. Install the version of `yarn` as specified in `package.json`, `packageManager`.
 
    > We recommend using `corepack` to manage the version of `yarn`, you may simply run `corepack enable` to complete this step.
 

_config.yml

@@ -1 +1 @@
-theme: jekyll-theme-cayman
+theme: jekyll-theme-cayman

craco.config.js

@@ -40,17 +40,17 @@ const cracoConfig = {
       // Polyfill Node.js core modules.
       // An empty implementation (false) is provided when there is no browser equivalent.
       webpackConfig.resolve.fallback = {
-        'child_process': false,
-        'constants': require.resolve('constants-browserify'),
-        'fs': false,
-        'http': require.resolve('stream-http'),
-        'https': require.resolve('https-browserify'),
-        'os': require.resolve('os-browserify/browser'),
+        child_process: false,
+        constants: require.resolve('constants-browserify'),
+        fs: false,
+        http: require.resolve('stream-http'),
+        https: require.resolve('https-browserify'),
+        os: require.resolve('os-browserify/browser'),
         'path/posix': require.resolve('path-browserify'),
         'process/browser': require.resolve('process/browser'),
-        'stream': require.resolve('stream-browserify'),
-        'timers': require.resolve('timers-browserify'),
-        'url': require.resolve('url/'),
+        stream: require.resolve('stream-browserify'),
+        timers: require.resolve('timers-browserify'),
+        url: require.resolve('url/')
       };
 
       // workaround .mjs files by Acorn
@@ -60,31 +60,34 @@ const cracoConfig = {
         type: 'javascript/auto',
         resolve: {
           fullySpecified: false
-        },
+        }
       });
 
-      webpackConfig.ignoreWarnings = [{ 
-        // Ignore warnings for dependencies that do not ship with a source map.
-        // This is because we cannot do anything about our dependencies.
-        module: /node_modules/,
-        message: /Failed to parse source map/
-      }, {
-        // Ignore the warnings that occur because js-slang uses dynamic imports
-        // to load Source modules
-        module: /js-slang\/dist\/modules\/loader\/loaders.js/,
-        message: /Critical dependency: the request of a dependency is an expression/
-      }];
+      webpackConfig.ignoreWarnings = [
+        {
+          // Ignore warnings for dependencies that do not ship with a source map.
+          // This is because we cannot do anything about our dependencies.
+          module: /node_modules/,
+          message: /Failed to parse source map/
+        },
+        {
+          // Ignore the warnings that occur because js-slang uses dynamic imports
+          // to load Source modules
+          module: /js-slang\/dist\/modules\/loader\/loaders.js/,
+          message: /Critical dependency: the request of a dependency is an expression/
+        }
+      ];
 
       webpackConfig.plugins = [
         ...webpackConfig.plugins,
         // Make environment variables available in the browser by polyfilling the 'process' Node.js module.
         new webpack.ProvidePlugin({
-          process: 'process/browser',
+          process: 'process/browser'
         }),
         // Make the 'buffer' Node.js module available in the browser.
         new webpack.ProvidePlugin({
-          Buffer: ['buffer', 'Buffer'],
-        }),
+          Buffer: ['buffer', 'Buffer']
+        })
       ];
 
       // Workaround to suppress warnings caused by ts-morph in js-slang
@@ -156,16 +159,14 @@ const cracoConfig = {
       jestConfig.setupFiles = [
         ...jestConfig.setupFiles,
         './src/i18n/i18n.ts' // Setup i18next configuration
-      ]
+      ];
       return jestConfig;
     }
   },
   babel: {
-    presets: [
-      ['@babel/preset-typescript']
-    ]
+    presets: [['@babel/preset-typescript']]
   }
-}
+};
 
 const ignoreModulePaths = (...paths) => {
   const moduleRoot = replaceSlashes('/node_modules/');

eslint.config.mjs

@@ -4,7 +4,7 @@
 import { config, configs } from 'typescript-eslint';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
 // import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default config(
@@ -24,7 +24,7 @@ export default config(
     files: ['**/*.ts*'],
     plugins: {
       'react-hooks': reactHooksPlugin,
-      'react': reactPlugin,
+      react: reactPlugin,
       'simple-import-sort': simpleImportSort
     },
     rules: {

public/externalLibs/sound/soundToneMatrix.js

@@ -36,7 +36,7 @@ var timeout_matrix;
 // for coloring the matrix accordingly while it's being played
 var timeout_color;
 
-var timeout_objects = new Array();
+var timeout_objects = [];
 
 // vector_to_list returns a list that contains the elements of the argument vector
 // in the given order.
@@ -54,7 +54,7 @@ function vector_to_list(vector) {
 function x_y_to_row_column(x, y) {
   var row = Math.floor((y - margin_length) / (square_side_length + distance_between_squares));
   var column = Math.floor((x - margin_length) / (square_side_length + distance_between_squares));
-  return Array(row, column);
+  return [row, column];
 }
 
 // given the row number of a square, return the leftmost coordinate
@@ -365,5 +365,5 @@ function clear_all_timeout() {
     clearTimeout(timeout_objects[i]);
   }
 
-  timeout_objects = new Array();
+  timeout_objects = [];
 }

public/index.html

@@ -1,23 +1,30 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script>
-  <script src="%PUBLIC_URL%/externalLibs/index.js"></script>
-  <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
-  <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
-  <!--
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta name="theme-color" content="#000000" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script>
+        <script src="%PUBLIC_URL%/externalLibs/index.js"></script>
+        <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
+        <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
+        <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/icons/favicon.ico?pr225" />
-  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/apple-touch-icon.png">
-  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata&display=block" />
-  <!--
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="shortcut icon" href="%PUBLIC_URL%/icons/favicon.ico?pr225" />
+        <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="%PUBLIC_URL%/icons/apple-touch-icon.png"
+        />
+        <link
+            rel="stylesheet"
+            type="text/css"
+            href="https://fonts.googleapis.com/css?family=Inconsolata&display=block"
+        />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -26,16 +33,17 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Source Academy</title>
-  <meta name="description" content="Immersive experiential environment for learning programming, developed in the School of Computing at the National University of Singapore." />
-</head>
+        <title>Source Academy</title>
+        <meta
+            name="description"
+            content="Immersive experiential environment for learning programming, developed in the School of Computing at the National University of Singapore."
+        />
+    </head>
 
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-  <!--
+    <body>
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -44,7 +52,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
+    --></body>
 </html>

public/manifest.json

@@ -13,16 +13,16 @@
       "type": "image/png"
     },
     {
-        "src": "icons/android-chrome-256x256.png",
-        "sizes": "256x256",
-        "type": "image/png"
+      "src": "icons/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
     },
     {
       "src": "icons/maskable.png",
       "sizes": "196x196",
       "type": "image/png",
       "purpose": "maskable"
-  }
+    }
   ],
   "start_url": "./",
   "display": "standalone",

src/features/cseMachine/CseMachineAnimation.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { ArrayAccessAnimation } from './animationComponents/ArrayAccessAnimation';
 import { ArrayAssignmentAnimation } from './animationComponents/ArrayAssignmentAnimation';
+import { ArraySpreadAnimation } from './animationComponents/ArraySpreadAnimation';
 import { AssignmentAnimation } from './animationComponents/AssignmentAnimation';
 import { Animatable } from './animationComponents/base/Animatable';
 import { lookupBinding } from './animationComponents/base/AnimationUtils';
@@ -112,6 +113,11 @@ export class CseAnimation {
           );
         }
         break;
+      case 'SpreadElement':
+        CseAnimation.animations.push(
+          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
+        );
+        break;
       case 'AssignmentExpression':
       case 'ArrayExpression':
       case 'BinaryExpression':
@@ -276,6 +282,46 @@ export class CseAnimation {
             )
           );
           break;
+        case InstrType.SPREAD:
+          const prevcontrol = Layout.previousControlComponent.stackItemComponents;
+          const control = Layout.controlComponent.stackItemComponents;
+          const array = Layout.previousStashComponent.stashItemComponents.at(-1)!.arrow!
+            .target! as ArrayValue;
+
+          let currCallInstr;
+          let prevCallInstr;
+
+          for (let i = 0; control.at(-i) != undefined; i++) {
+            if (control.at(-i)?.text.includes('call ')) {
+              // find call instr above
+              currCallInstr = control.at(-i);
+              break;
+            }
+          }
+
+          for (let i = 0; prevcontrol.at(-i) != undefined; i++) {
+            if (prevcontrol.at(-i)?.text.includes('call ')) {
+              // find call instr above
+              prevCallInstr = prevcontrol.at(-i);
+              break;
+            }
+          }
+
+          const resultItems =
+            array.data.length !== 0
+              ? Layout.stashComponent.stashItemComponents.slice(-array.data.length)
+              : [];
+
+          CseAnimation.animations.push(
+            new ArraySpreadAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              resultItems!,
+              currCallInstr!,
+              prevCallInstr!
+            )
+          );
+          break;
         case InstrType.ARRAY_LENGTH:
         case InstrType.BREAK:
         case InstrType.BREAK_MARKER:

src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx

@@ -28,6 +28,7 @@ export class ArrayAccessAnimation extends Animatable {
   private resultAnimation: AnimatedTextbox;
   private resultArrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
   private arrayUnit: ArrayUnit;
+  private out: boolean;
 
   constructor(
     private accInstr: ControlItemComponent,
@@ -46,12 +47,29 @@ export class ArrayAccessAnimation extends Animatable {
       rectProps: { stroke: defaultDangerColor() }
     });
     this.arrayArrowAnimation = new AnimatedGenericArrow(arrayItem.arrow!);
+    // if index is out of range
+    this.out = false;
     // the target should always be an array value
     const array = arrayItem.arrow!.target! as ArrayValue;
-    this.arrayUnit = array.units[parseInt(indexItem.text)];
+
+    // if index access is out of range. if index access is negative, error should be thrown from js-slang at this point
+    const arraylen = array.data.length;
+
+    if (parseInt(indexItem.text) >= arraylen) {
+      this.out = true;
+      this.arrayUnit = array.units[arraylen - 1];
+    } else {
+      this.arrayUnit = array.units[parseInt(indexItem.text)];
+    }
+
     this.resultAnimation = new AnimatedTextbox(resultItem.text, {
       ...getNodeDimensions(resultItem),
-      x: this.arrayUnit.x() + this.arrayUnit.width() / 2 - this.resultItem.width() / 2,
+      // if array index out of range, animate to one unit beyond array
+      x:
+        this.arrayUnit.x() +
+        this.arrayUnit.width() / 2 -
+        this.resultItem.width() / 2 +
+        (this.out ? this.arrayUnit.width() : 0),
       y: this.arrayUnit.y() + this.arrayUnit.height() / 2 - this.resultItem.height() / 2,
       opacity: 0
     });
@@ -79,7 +97,12 @@ export class ArrayAccessAnimation extends Animatable {
     const minInstrItemWidth =
       getTextWidth(this.accInstr.text) + ControlStashConfig.ControlItemTextPadding * 2;
     const indexAboveArrayLocation = {
-      x: this.arrayUnit.x() + this.arrayUnit.width() / 2 - this.indexItem.width() / 2,
+      // if array index out of range, animate to one unit beyond array
+      x:
+        this.arrayUnit.x() +
+        this.arrayUnit.width() / 2 -
+        this.indexItem.width() / 2 +
+        (this.out ? this.arrayUnit.width() : 0),
       y: this.arrayUnit.y() - this.indexItem.height() - 8
     };
     const indexInArrayLocation = {