feat: add a scenario selector (#39)

Author: rachel-fenichel

test/index.html

@@ -59,6 +59,10 @@
         margin-top: 10px;
       }
 
+      #scenarioForm {
+        padding-top: 7px;
+      }
+
       #announceWrapper {
         overflow-y: scroll;
         height: 400px;
@@ -80,6 +84,18 @@
         <button id="run">Run Code!</button>
         <div id="output">
           <div id="p5output"></div>
+          <div id="scenarioForm">
+            <form id="options">
+              <label for="scenarioSelect">Scenario:</label>
+              <select
+                name="scenario"
+                id="scenarioSelect"
+                onchange="document.forms.options.submit()">
+                <option value="sun">sun</option>
+                <option value="blank">blank canvas</option>
+              </select>
+            </form>
+          </div>
           <h3 id="description"></h3>
           <p>
             This page is an active site for development of keyboard navigation

test/index.ts

@@ -19,6 +19,24 @@ import {javascriptGenerator} from 'blockly/javascript';
 import {load} from './loadTestBlocks';
 import {runCode, registerRunCodeShortcut} from './runCode';
 
+/**
+ * Load initial workspace state based on the value in the scenario dropdown.
+ *
+ * @param workspace The workspace to load blocks into.
+ */
+function loadScenario(workspace: Blockly.WorkspaceSvg) {
+  const scenarioSelector = location.search.match(/scenario=([^&]+)/);
+  // Default to the sunny day example.
+  const scenarioString = scenarioSelector ? scenarioSelector[1] : 'sun';
+  const selector = document.getElementById(
+    'scenarioSelect',
+  ) as HTMLSelectElement;
+  selector.value = scenarioString;
+
+  // Load the initial state from storage and run the code.
+  load(workspace, scenarioString);
+}
+
 /**
  * Create the workspace, including installing keyboard navigation and
  * change listeners.
@@ -39,8 +57,7 @@ function createWorkspace(): Blockly.WorkspaceSvg {
   // Disable blocks that aren't inside the setup or draw loops.
   workspace.addChangeListener(Blockly.Events.disableOrphans);
 
-  // Load the initial state from storage and run the code.
-  load(workspace);
+  loadScenario(workspace);
   runCode();
 
   return workspace;

test/loadTestBlocks.js

@@ -6,7 +6,7 @@
 
 import * as Blockly from 'blockly/core';
 
-const defaultData = {
+const sunnyDay = {
   'blocks': {
     'languageVersion': 0,
     'blocks': [
@@ -140,12 +140,54 @@ const defaultData = {
   },
 };
 
+const blankCanvas = {
+  'blocks': {
+    'languageVersion': 0,
+    'blocks': [
+      {
+        'type': 'p5_setup',
+        'id': '5.{;T}3Qv}Awi:1M$:ut',
+        'x': 0,
+        'y': 75,
+        'deletable': false,
+        'inputs': {
+          'STATEMENTS': {
+            'block': {
+              'type': 'p5_canvas',
+              'id': 'spya_H-5F=K8+DhedX$y',
+              'deletable': false,
+              'movable': false,
+              'fields': {
+                'WIDTH': 400,
+                'HEIGHT': 400,
+              },
+            },
+          },
+        },
+      },
+      {
+        'type': 'p5_draw',
+        'id': '3iI4f%2#Gmk}=OjI7(8h',
+        'x': 0,
+        'y': 332,
+        'deletable': false,
+      },
+    ],
+  },
+};
+
 /**
  * Loads saved state from local storage into the given workspace.
  * @param {Blockly.Workspace} workspace Blockly workspace to load into.
+ * @param {string} scenarioString Which scenario to load.
  */
-export const load = function (workspace) {
-  const data = JSON.stringify(defaultData);
+export const load = function (workspace, scenarioString) {
+  const scenarioMap = {
+    'blank': blankCanvas,
+    'sun': sunnyDay,
+  };
+
+  const data = JSON.stringify(scenarioMap[scenarioString]);
   // Don't emit events during loading.
   Blockly.Events.disable();
   Blockly.serialization.workspaces.load(JSON.parse(data), workspace, false);