Include symbol names in mandala export filename. (#109)

This fixes #93 by making the exported mandala filenames include the names of the symbols used in them.  So for example, a mandala with circles made up of the `crown_ornate` symbol and the `heart_break` symbol will now have an exported GIF filename of `mandala-crown_ornate-heart_break.gif`.

lib/pages/mandala-page/core.test.tsx

@@ -0,0 +1,16 @@
+import { getCirclesFromDesign, MANDALA_DESIGN_DEFAULTS } from "./core";
+
+describe("getCirclesFromDesign()", () => {
+  it("returns one circle when the second is disabled", () => {
+    expect(getCirclesFromDesign(MANDALA_DESIGN_DEFAULTS)).toHaveLength(1);
+  });
+
+  it("returns two circles when the second is enabled", () => {
+    expect(
+      getCirclesFromDesign({
+        ...MANDALA_DESIGN_DEFAULTS,
+        useTwoCircles: true,
+      })
+    ).toHaveLength(2);
+  });
+});

lib/pages/mandala-page/core.tsx

@@ -220,8 +220,8 @@ export const MANDALA_DESIGN_DEFAULTS = {
 
 export type MandalaDesign = typeof MANDALA_DESIGN_DEFAULTS;
 
-function isDesignAnimated({ circle1, circle2 }: MandalaDesign): boolean {
-  return [circle1, circle2].some((value) => value.animateSymbolRotation);
+function isDesignAnimated(design: MandalaDesign): boolean {
+  return getCirclesFromDesign(design).some((c) => c.animateSymbolRotation);
 }
 
 function createAnimationRenderer({
@@ -272,6 +272,24 @@ const AnimatedMandala: React.FC<{
   return <>{render(animPct)}</>;
 };
 
+export function getCirclesFromDesign(
+  design: MandalaDesign
+): ExtendedMandalaCircleParams[] {
+  const circles: ExtendedMandalaCircleParams[] = [design.circle1];
+
+  if (design.useTwoCircles) {
+    circles.push(design.circle2);
+  }
+
+  return circles;
+}
+
+function getBasename(design: MandalaDesign): string {
+  return `mandala-${getCirclesFromDesign(design)
+    .map((c) => c.data.name)
+    .join("-")}`;
+}
+
 /**
  * A mandala page that starts with the given default mandala configuration.
  *
@@ -379,7 +397,7 @@ export const MandalaPageWithDefaults: React.FC<{
         />
         <div className="thingy">
           <ExportWidget
-            basename="mandala"
+            basename={getBasename(design)}
             svgRef={svgRef}
             animate={
               isAnimated && { duration: secsToMsecs(durationSecs), render }

lib/pages/mandala-page/serialization.ts

@@ -12,6 +12,7 @@ import {
   MANDALA_DESIGN_DEFAULTS,
   ExtendedMandalaCircleParams,
   MandalaDesign,
+  getCirclesFromDesign,
 } from "./core";
 import { fromBase64, toBase64 } from "../../base64";
 
@@ -75,13 +76,9 @@ export const ColorPacker: Packer<string, number> = {
 
 const DesignConfigPacker: Packer<MandalaDesign, AvroMandalaDesign> = {
   pack: (value) => {
-    const circles: AvroCircle[] = [CirclePacker.pack(value.circle1)];
-    if (value.useTwoCircles) {
-      circles.push(CirclePacker.pack(value.circle2));
-    }
     return {
       ...value,
-      circles,
+      circles: getCirclesFromDesign(value).map(CirclePacker.pack),
       baseCompCtx: SvgCompositionContextPacker.pack(value.baseCompCtx),
     };
   },