add pitch circles

fab-ui/src/enums.ts

@@ -0,0 +1,21 @@
+
+export const FabCardColor = {
+    RED: "Red",
+    YELLOW: "Yellow",
+    BLUE: "Blue",
+} as const;
+
+export function colorToNumber(color: typeof FabCardColor[keyof typeof FabCardColor]): number {
+    switch (color) {
+        case FabCardColor.RED:
+            return 1;
+        case FabCardColor.YELLOW:
+            return 2;
+        case FabCardColor.BLUE:
+            return 3;
+        default:
+            return 0;
+    }
+}
+
+// export type FabCardColor = typeof FabCardColor[keyof typeof FabCardColor];

fab-ui/src/fab-card-title.ts

@@ -1,5 +1,43 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { FabCardColor, colorToNumber } from './enums';
+
+@customElement("fab-pitch-circles")
+export class FabPitchCircles extends LitElement {
+    static SYMBOL = '●️';
+
+    @property({ type: FabCardColor })
+    color = null;
+
+    render() {
+        let num: number;
+        if (this.color !== null) {
+            num = colorToNumber(this.color);
+        } else {
+            num = 0;
+        }
+        return html`
+            <span class="pitch-circles pitch-circles-${this.color ? String(this.color).toLowerCase() : 'none'}">
+                ${FabPitchCircles.SYMBOL.repeat(num)}
+            </span>
+        `;
+    }
+
+    static styles = css`
+        .pitch-circles {
+            display: inline-block;
+        }
+        .pitch-circles-red {
+            color: red;
+        }
+        .pitch-circles-yellow {
+            color: #FFD600;
+        }
+        .pitch-circles-blue {
+            color: blue;
+        }
+    `;
+}
 
 @customElement("fab-rarity-symbol")
 export class FabRaritySymbol extends LitElement {
@@ -94,6 +132,7 @@ export class FabCardTitle extends LitElement {
                 <span class="card-name">${this.name}</span>
                 <span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
                 <span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>
+                <fab-pitch-circles color="${this.color}"></fab-pitch-circles>
                 <!--<span class="comment">${this.comment}</span>-->
             </span>
         `;