add dots for outs

index.html

@@ -23,7 +23,7 @@
     homeScore="0"
     balls="2"
     strikes="1"
-    outs="2"
+    outs="1"
     awayScore="0"
     inning="1.0"
     awayGradient="180,#1653af,#063376,30,50"
@@ -36,6 +36,8 @@
     homeLogoShadow="#000000"
     activeInningColor="#e00000"
     inactiveInningColor="#b3b3b3"
+    activeOutColor="#e00000"
+    inactiveOutColor="#b3b3b3"
     activeBaseColor="#e5c72b"
     inactiveBaseColor="#b3b3b3"
     awayName="Away"

src/Counts.ts

@@ -1,14 +1,27 @@
 import { generateGradient } from "./generateGradient.ts";
 import { Gradient } from "./Gradient.ts";
 import { html } from "lit";
+import { OutsText } from "./OutsText.ts";
+import { OutsDots } from "./OutsDots.ts";
 
-interface Props {
+type Props = {
   balls: number;
   strikes: number;
   outs: number;
   layoutGradient: Gradient;
-}
-export const Counts = ({ balls, strikes, outs, layoutGradient }: Props) => {
+  outsStyle: string;
+  activeOutColor: string;
+  inactiveOutColor: string;
+};
+export const Counts = ({
+  balls,
+  strikes,
+  outs,
+  layoutGradient,
+  outsStyle,
+  activeOutColor,
+  inactiveOutColor,
+}: Props) => {
   const style = `color: state.displaySettings.fontColorDark; background: ${generateGradient(
     layoutGradient,
   )}`;
@@ -20,10 +33,9 @@ export const Counts = ({ balls, strikes, outs, layoutGradient }: Props) => {
         <span class="count-separator">-</span>
         <span>${strikes}</span>
       </div>
-      <div class="counts-bottom" style=${style}>
-        <span class="outs-count">${outs}</span>
-        <span class="outs-text">out</span>
-      </div>
+      ${outsStyle === "text"
+        ? OutsText({ outs, layoutGradient })
+        : OutsDots({ outs, layoutGradient, activeOutColor, inactiveOutColor })}
     </div>
   `;
 };

src/OutsDots.ts

@@ -0,0 +1,38 @@
+import { generateGradient } from "./generateGradient.ts";
+import { Gradient } from "./Gradient.ts";
+import { html } from "lit";
+
+interface Props {
+  outs: number;
+  layoutGradient: Gradient;
+  activeOutColor: string;
+  inactiveOutColor: string;
+}
+
+export const OutsDots = ({
+  outs,
+  layoutGradient,
+  activeOutColor,
+  inactiveOutColor,
+}: Props) => {
+  const out1Color =
+    outs === 1 || outs === 2 ? activeOutColor : inactiveOutColor;
+  const out2Color = outs === 2 ? activeOutColor : inactiveOutColor;
+
+  const style = `color: state.displaySettings.fontColorDark; background: ${generateGradient(
+    layoutGradient,
+  )};`;
+
+  return html`
+    <div class="counts-bottom" style=${style}>
+      <div
+        class="outs-dot"
+        style="background-color: ${out1Color}; filter: drop-shadow(0px 0px 1px color-mix(in srgb, ${out1Color} 50%, black));"
+      ></div>
+      <div
+        class="outs-dot"
+        style="background-color: ${out2Color}; filter: drop-shadow(0px 0px 1px color-mix(in srgb, ${out2Color} 50%, black))"
+      ></div>
+    </div>
+  `;
+};

src/OutsText.ts

@@ -0,0 +1,21 @@
+import { generateGradient } from "./generateGradient.ts";
+import { Gradient } from "./Gradient.ts";
+import { html } from "lit";
+
+interface Props {
+  outs: number;
+  layoutGradient: Gradient;
+}
+
+export const OutsText = ({ outs, layoutGradient }: Props) => {
+  const style = `color: state.displaySettings.fontColorDark; background: ${generateGradient(
+    layoutGradient,
+  )}`;
+
+  return html`
+    <div class="counts-bottom" style=${style}>
+      <span class="outs-count">${outs}</span>
+      <span class="outs-text">out</span>
+    </div>
+  `;
+};

src/main.ts

@@ -18,22 +18,22 @@ export class BaseballScoreboard extends LitElement {
   @property()
   hideCounts = "false";
 
-  @property()
+  @property({ type: Number })
   homeScore = 0;
 
-  @property()
+  @property({ type: Number })
   balls = 0;
 
-  @property()
+  @property({ type: Number })
   strikes = 0;
 
-  @property()
+  @property({ type: Number })
   outs = 0;
 
-  @property()
+  @property({ type: Number })
   awayScore = 0;
 
-  @property()
+  @property({ type: Number })
   inning = 1.0;
 
   @property()
@@ -75,6 +75,12 @@ export class BaseballScoreboard extends LitElement {
   @property()
   inactiveInningColor = "#b3b3b3";
 
+  @property()
+  activeOutColor = "#e00000";
+
+  @property()
+  inactiveOutColor = "#b3b3b3";
+
   @property()
   activeBaseColor = "#e00000";
 
@@ -90,7 +96,7 @@ export class BaseballScoreboard extends LitElement {
   @property()
   fontName = "Open Sans";
 
-  @property()
+  @property({ type: Number })
   fontLineHeight = 1.15;
 
   @property()
@@ -103,6 +109,9 @@ export class BaseballScoreboard extends LitElement {
   backgroundImage =
     "https://www.hardbulls.com/clubdesk/fileservlet?inline=true&type=image&id=253";
 
+  @property()
+  outsStyle = "dots";
+
   private parseGradient(value: string): Gradient {
     const awayGradientValues = value.split(",");
 
@@ -172,7 +181,10 @@ export class BaseballScoreboard extends LitElement {
                         balls: this.balls,
                         strikes: this.strikes,
                         outs: this.outs,
+                        activeOutColor: this.activeOutColor,
+                        inactiveOutColor: this.inactiveOutColor,
                         layoutGradient: layoutGradient,
+                        outsStyle: this.outsStyle,
                       })
                     : ""
                 }

src/style.ts

@@ -16,6 +16,13 @@ export const Style = css`
     perspective: 120px;
   }
 
+  .outs-dot {
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
   .base-3d-wrapper {
     transform-style: preserve-3d;
     transform: rotateX(20deg);