Add support for crowns as a charge

Images come from http://www.vikinganswerlady.com/Stars/Heraldry_SVG_Images/index.htm

src/app/blason-parser/chargeParser.ts

@@ -4,6 +4,9 @@ import {
   charges,
   Cross,
   crossLimbs,
+  Crown,
+  CrownType,
+  crownTypes,
   Eagle,
   EagleAttitude,
   eagleAttitudes,
@@ -215,6 +218,26 @@ const mulletParser = (): P.Parser<Mullet> => {
   });
 };
 
+const crownParser = (count: SupportedNumber) => {
+  const crownNameParser = P.regex(/crowns?/i).desc('crown');
+  const crownTypeParser: P.Parser<CrownType> = buildAltParser(crownTypes, identity);
+
+  return P.seq(
+    crownNameParser.skip(P.whitespace).then(crownTypeParser),
+    countAndDispositionParser(count),
+    P.whitespace.then(tinctureParserFromName).fallback(or)
+  ).map(
+    ([type, countAndDisposition, tincture]): Crown => {
+      return {
+        name: 'crown',
+        countAndDisposition,
+        type,
+        tincture,
+      };
+    }
+  );
+};
+
 const fimbriatedParser: P.Parser<MetalsAndColours | null> = P.whitespace
   .then(P.string('fimbriated'))
   .then(P.whitespace)
@@ -288,6 +311,8 @@ export function chargeParser(): P.Parser<Exclude<Charge, Cross>> {
         return lozengeParser();
       } else if (charge === 'mullet') {
         return mulletParser();
+      } else if (charge === 'crown') {
+        return countParser.trim(P.optWhitespace).chain<Crown>((count) => crownParser(count));
       } else {
         return cannotHappen(charge);
       }

src/app/from-blason/blason.helpers.ts

@@ -17,7 +17,8 @@ function allDeclaredTincturesOfCharge(charge: Charge): Array<Tincture> {
     charge.name === 'roundel' ||
     charge.name === 'lozenge' ||
     charge.name === 'cross' ||
-    charge.name === 'mullet'
+    charge.name === 'mullet' ||
+    charge.name === 'crown'
   ) {
     return [charge.tincture];
   } else {

src/app/from-blason/coats-of-arms-parts/ChargeDisplay.tsx

@@ -10,6 +10,7 @@ import { RoundelDisplay } from './charge/roundel/RoundelDisplay';
 import { LozengeDisplay } from './charge/lozenge/LozengeDisplay';
 import { CrossDisplay } from './charge/cross/CrossDisplay';
 import { MulletDisplay } from './charge/mullet/MulletDisplay';
+import { CrownDisplay } from './charge/crown/CrownDisplay';
 import { SimpleBlasonShape } from './blasonDisplay.helper';
 import { EscutcheonChargeDisplay } from './charge/escutcheon/EscutcheonChargeDisplay';
 
@@ -101,6 +102,16 @@ export const ChargeDisplay = ({ charge, dimension, fillFromTincture, shape, onCl
         onClick={onClick}
       />
     );
+  } else if (charge.name === 'crown') {
+    return (
+      <CrownDisplay
+        charge={charge}
+        dimension={dimension}
+        fillFromTincture={fillFromTincture}
+        shape={shape}
+        onClick={onClick}
+      />
+    );
   } else {
     return cannotHappen(charge);
   }

src/app/from-blason/coats-of-arms-parts/charge/crown/CrownDisplay.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Crown } from '../../../../model/charge';
+import { Tincture } from '../../../../model/tincture';
+import { UnitCrownDisplay } from './UnitCrownDisplay';
+import { Dimension, scale } from '../../../../model/dimension';
+import { getChargePositions } from '../charge.helper';
+import { SimpleBlasonShape } from '../../blasonDisplay.helper';
+
+type Props = {
+  charge: Crown;
+  dimension: Dimension;
+  shape: SimpleBlasonShape;
+  fillFromTincture: (tincture: Tincture) => string;
+  onClick: () => void;
+};
+export const CrownDisplay = ({ charge, dimension, fillFromTincture, shape, onClick }: Props) => {
+  const { count, disposition } = charge.countAndDisposition;
+  const { cellWidth, cellHeight, positions } = getChargePositions(count, disposition, shape);
+  const { width, height } = dimension;
+  const computedDimension = scale(dimension, Math.min(2.2 * cellWidth, 0.8 * cellHeight));
+
+  return (
+    <>
+      {positions.map(([cx, cy], idx) => {
+        const centerX = cx * width;
+        const centerY = cy * height;
+        return (
+          <g
+            key={idx}
+            transform={`translate(${centerX - computedDimension.width / 2} ${centerY - computedDimension.height / 2} )`}
+          >
+            <UnitCrownDisplay
+              charge={charge}
+              dimension={computedDimension}
+              fillFromTincture={fillFromTincture}
+              onClick={onClick}
+            />
+          </g>
+        );
+      })}
+    </>
+  );
+};

src/app/from-blason/coats-of-arms-parts/charge/crown/SvgCrownDovetailed.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Dimension } from '../../../../model/dimension';
+
+const SvgCrownDovetailed = (props: { dimension: Dimension; stroke: string; mainFill: string; onClick: () => void }) => {
+  const [strokeWidth, setStrokeWidth] = useState(1);
+  const onMouseDown = () => setStrokeWidth(1 + 2);
+  const onMouseUp = () => setStrokeWidth(1);
+
+  const onClick = props.onClick;
+  return (
+    <svg viewBox="0 0 105.9 37.5051" width={props.dimension.width} height={props.dimension.height}>
+      <g stroke={props.stroke} strokeLinecap="round" strokeLinejoin="round" transform="translate(1.2,-1.2)">
+        <g transform="translate(0,-5.625)">
+          <path
+            d="M89.38 37.51 L91.08 37.51 A306.668 529.699 0 0 1 103.5 8.03 L84.76 8.03 L87.62 24.28 L70.57 24.28 L73.44         8.03 L57.41 8.03 L60.28 24.28 L43.22 24.28 L46.09 8.03 L29.18 8.03 L32.05 24.28 L15 24.28 L17.86 8.03         L0 8.03 L12.41 37.51 L14.12 37.51 a0.392049 0.392049 0 0 1 -0.00757792 -0.0767068 a0.392049 0.392049         0 0 1 0.392045 -0.392045 L88.99 37.04 a0.392049 0.392049 0 0 1 0.392045 0.392045 a0.392049 0.392049         0 0 1 -0.00757792 0.0767068 Z"
+            fill={props.mainFill}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            strokeWidth={strokeWidth}
+            onClick={onClick}
+            style={{ cursor: 'pointer' }}
+          />
+        </g>
+        <g transform="translate(9.63281,-2.84217E-014)">
+          <path
+            d="M2.25 37.51 L81.98 37.51 A3.23098 3.23098 -180 0 0 81.98 31.32 L2.25 31.32 A3.25195 3.25195 -180 0 0 2.25         37.51 Z"
+            fill={props.mainFill}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            strokeWidth={strokeWidth}
+            onClick={onClick}
+            style={{ cursor: 'pointer' }}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default SvgCrownDovetailed;