Merge pull request #3 from Vestaboard/feature/emoji-character-codes

Convert emoji colors to character codes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vestaboard/vbml",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The Vestaboard markup language",
   "main": "lib/index.js",
   "scripts": {

src/__tests__/parseComponent.spec.ts

@@ -469,4 +469,12 @@ describe("Parse Component", () => {
       [3, 4],
     ]);
   });
+
+  it("Should convert emoji characters to character codes", () => {
+    const input: IVBMLComponent = {
+      template: "🟥🟧🟨🟩🟦🟪⬜⬛",
+    };
+    const result = parseComponent(1, 8)(input);
+    expect(result).toEqual([[63, 64, 65, 66, 67, 68, 69, 70]]);
+  });
 });

src/emojisToCharacterCodes.ts

@@ -0,0 +1,10 @@
+export const emojisToCharacterCodes = (template: string) =>
+  template
+    .replace(/🟥/g, "{63}")
+    .replace(/🟧/g, "{64}")
+    .replace(/🟨/g, "{65}")
+    .replace(/🟩/g, "{66}")
+    .replace(/🟦/g, "{67}")
+    .replace(/🟪/g, "{68}")
+    .replace(/⬜/g, "{69}")
+    .replace(/⬛/g, "{70}");

src/parseComponent.ts

@@ -9,6 +9,8 @@ import { parseProps } from "./parseProps";
 import { splitWords } from "./splitWords";
 import pipe from "lodash/fp/pipe";
 import map from "lodash/fp/map";
+import { emojisToCharacterCodes } from "./emojisToCharacterCodes";
+
 export const parseComponent =
   (defaultHeight: number, defaultWidth: number, props?: VBMLProps) =>
   (component: IVBMLComponent) => {
@@ -18,15 +20,18 @@ export const parseComponent =
     const height = component?.style?.height || defaultHeight;
     const emptyComponent = createEmptyBoard(height, width);
 
+    const template = "template" in component ? component.template : "";
+
     return pipe(
+      emojisToCharacterCodes,
       parseProps(props || {}),
       splitWords(width),
       getLinesFromWords(width),
       map(convertCharactersToCharacterCodes),
       verticalAlign(height, component?.style?.align || Align.top),
       horizontalAlign(width, component?.style?.justify || Justify.left),
       renderComponent(emptyComponent)
-    )("template" in component ? component.template : "") as number[][];
+    )(template) as number[][];
   };
 
 export const parseAbsoluteComponent =