feat(client/curriculum): add dialogue animations (#52543)

tools/challenge-parser/parser/__fixtures__/scene.md

@@ -0,0 +1,47 @@
+# --description--
+
+This challenge has a scene.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": { "x": 50, "y": 0, "z": 1.5 },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.1-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 2.6,
+      "finishTimestamp": 4
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 0.7,
+      "finishTime": 2.4,
+      "dialogue": {
+        "text": "I'm Maria, the team lead.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.4
+    }
+  ]
+}
+```

tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap

@@ -18,6 +18,60 @@ a container directive
 }
 `;
 
+exports[`challenge parser it should parse md with a scene 1`] = `
+{
+  "assignments": [],
+  "description": "<section id="description">
+<p>This challenge has a scene.</p>
+</section>",
+  "scene": {
+    "commands": [
+      {
+        "character": "Maria",
+        "opacity": 1,
+        "startTime": 0,
+      },
+      {
+        "character": "Maria",
+        "dialogue": {
+          "align": "center",
+          "text": "I'm Maria, the team lead.",
+        },
+        "finishTime": 2.4,
+        "startTime": 0.7,
+      },
+      {
+        "character": "Maria",
+        "opacity": 0,
+        "startTime": 3.4,
+      },
+    ],
+    "setup": {
+      "audio": {
+        "filename": "1.1-1.mp3",
+        "finishTimestamp": 4,
+        "startTime": 1,
+        "startTimestamp": 2.6,
+      },
+      "background": "company2-center.png",
+      "characters": [
+        {
+          "character": "Maria",
+          "opacity": 0,
+          "position": {
+            "x": 50,
+            "y": 0,
+            "z": 1.5,
+          },
+        },
+      ],
+    },
+  },
+  "solutions": [],
+  "tests": [],
+}
+`;
+
 exports[`challenge parser it should parse video questions 1`] = `
 {
   "assignments": [],

tools/challenge-parser/parser/index.acceptance.test.js

@@ -58,4 +58,11 @@ describe('challenge parser', () => {
     );
     expect(parsed).toMatchSnapshot();
   });
+
+  it('it should parse md with a scene', async () => {
+    const parsed = await parseMD(
+      path.resolve(__dirname, '__fixtures__/scene.md')
+    );
+    expect(parsed).toMatchSnapshot();
+  });
 });

tools/challenge-parser/parser/index.js

@@ -14,6 +14,7 @@ const addAssignment = require('./plugins/add-assignment');
 const replaceImports = require('./plugins/replace-imports');
 const restoreDirectives = require('./plugins/restore-directives');
 const tableAndStrikeThrough = require('./plugins/table-and-strikethrough');
+const addScene = require('./plugins/add-scene');
 
 // by convention, anything that adds to file.data has the name add<name>.
 const processor = unified()
@@ -48,6 +49,7 @@ const processor = unified()
   .use(addFillInTheBlank)
   .use(addVideoQuestion)
   .use(addAssignment)
+  .use(addScene)
   .use(addTests)
   .use(addText, ['description', 'instructions', 'notes']);
 

tools/challenge-parser/parser/plugins/add-scene.js

@@ -0,0 +1,25 @@
+const getAllBetween = require('./utils/between-headings');
+
+function plugin() {
+  return transformer;
+
+  function transformer(tree, file) {
+    const sceneNodes = getAllBetween(tree, '--scene--');
+
+    if (sceneNodes.length > 0) {
+      if (sceneNodes.length !== 1) {
+        throw Error('You can only have one item in a scene, a JSON array.');
+      }
+
+      if (sceneNodes[0].type !== 'code' || sceneNodes[0].lang !== 'json') {
+        throw Error('A scene must have a ```json code block');
+      }
+
+      // throws if we can't parse it.
+      const sceneJson = JSON.parse(sceneNodes[0].value);
+      file.data.scene = sceneJson;
+    }
+  }
+}
+
+module.exports = plugin;