update display options

hardbulls · Oct 25, 2023 · b22987a · b22987a
1 parent c37f709
commit b22987a
Show file tree

Hide file tree

Showing 12 changed files with 321 additions and 152 deletions.
diff --git a/index.html b/index.html
@@ -4,47 +4,49 @@
   <base href="">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Jura:wght@700&family=Teko&display=swap" rel="stylesheet">
   <script type="module" src="/src/main.ts"></script>
 </head>
 <body>
 <div style="display: flex; justify-content: center">
   <baseball-scoreboard
-    awayLogoSrc="https://static.hardbulls.com/images/icons/icon-180x180.png"
+    awayLogoSrc="https://static.wbsc.org/upload/acfef0c2-5af4-e797-cb4b-550d6173bb34.png"
     homeLogoSrc="https://static.hardbulls.com/images/icons/icon-180x180.png"
+    leagueLogoSrc="https://static.wbsc.org/uploads/federations/8/events/photos/63ac8faa-4b82-1b32-a456-35b1892d8e58.svg"
+    leagueLogoShadow="#8a8a8a"
     hideCounts="false"
     hideBases="false"
-    fontName="Jura"
+    fontName="Courier New"
     fontLineHeight="1.10"
     bases="false,true,true"
     inning="1.5"
-    homeScore="8"
+    homeScore="10"
     awayScore="3"
     homeScore="0"
     balls="2"
     strikes="1"
     outs="1"
     awayScore="0"
     inning="1.0"
-    awayGradient="180,#1653af,#063376,30,50"
-    homeGradient="180,#ff2222,#ea1010,30,50"
+    awayGradient="180,#474747,#334433,30,50"
+    homeGradient="180,#bb0909,#992222,30,50"
     layoutGradient="180,#ebebeb,#e0e0e0,50,50"
     backgroundGradient="180,#000000,#484848,0,100"
     fontColorDark="#292929"
     fontColorLight="#e8e8e8"
-    awayLogoShadow="#575757"
-    homeLogoShadow="#000000"
+    awayLogoShadow="#3b3b3b"
+    homeLogoShadow="#2a2a2a"
     activeInningColor="#e00000"
     inactiveInningColor="#b3b3b3"
     activeOutColor="#e00000"
     inactiveOutColor="#b3b3b3"
     activeBaseColor="#e5c72b"
     inactiveBaseColor="#b3b3b3"
-    awayName="Away"
-    homeName="Home"
+    awayName="BH"
+    homeName="HB"
     fontLineHeight="1.15"
     borderColor="#000000"
     borderSize="3px"
+    outsStyle="dots"
   ></baseball-scoreboard>
 </div>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hardbulls/baseball-scoreboard",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "description": "Web Component that displays a baseball scoreboard for usage in live streams.",
   "main": "dist/main.mjs",

diff --git a/src/CountStyle.ts b/src/CountStyle.ts
@@ -0,0 +1,4 @@
+export enum CountStyle {
+  Text = "text",
+  Dots = "dots",
+}
diff --git a/src/Counts.ts b/src/Counts.ts
@@ -10,6 +10,7 @@ type Props = {
   outs: number;
   layoutGradient: Gradient;
   outsStyle: string;
+  fontColorDark: string;
   activeOutColor: string;
   inactiveOutColor: string;
 };
@@ -19,10 +20,11 @@ export const Counts = ({
   outs,
   layoutGradient,
   outsStyle,
+  fontColorDark,
   activeOutColor,
   inactiveOutColor,
 }: Props) => {
-  const style = `color: state.displaySettings.fontColorDark; background: ${generateGradient(
+  const style = `color: ${fontColorDark}; background: ${generateGradient(
     layoutGradient,
   )}`;
 

diff --git a/src/Inning.ts b/src/Inning.ts
@@ -4,7 +4,7 @@ import { generateGradient } from "./generateGradient.ts";
 
 interface Props {
   inning: number;
-  fontColorDark: string;
+  fontColor: string;
   inactiveInningColor: string;
   activeInningColor: string;
   layoutGradient: Gradient;
@@ -34,7 +34,7 @@ const renderInningArrow = (
 };
 export const Inning = ({
   inning,
-  fontColorDark,
+  fontColor,
   inactiveInningColor,
   activeInningColor,
   layoutGradient,
@@ -44,7 +44,7 @@ export const Inning = ({
   return html`
     <div
       class="inning-container"
-      style="color: ${fontColorDark}; background: ${generateGradient(
+      style="color: ${fontColor}; background: ${generateGradient(
         layoutGradient,
       )}"
     >

diff --git a/src/Logo.ts b/src/Logo.ts
@@ -0,0 +1,44 @@
+import { html } from "lit";
+import { generateGradient } from "./generateGradient.ts";
+import { Gradient } from "./Gradient.ts";
+
+interface Props {
+  backgroundGradient: Gradient;
+  leagueLogoSrc?: string;
+  leagueLogoShadow: string;
+}
+
+export const LeagueLogo = ({
+  backgroundGradient,
+  leagueLogoSrc,
+  leagueLogoShadow,
+}: Props) => {
+  if (!leagueLogoSrc) {
+    return;
+  }
+
+  let leagueLogo;
+
+  if (leagueLogoSrc) {
+    leagueLogo = html`
+      <img
+        src="${leagueLogoSrc}"
+        alt=""
+        height="100%"
+        style="filter: drop-shadow(2px 2px 10px ${leagueLogoShadow}66) drop-shadow(0px 0px 13px ${leagueLogoShadow}22)"
+      />
+    `;
+  }
+
+  return html`
+    <div class="league-logo-container">
+      <div
+        style="display: flex; background: ${generateGradient(
+          backgroundGradient,
+        )}"
+      >
+        <div class="league-logo logo">${leagueLogo}</div>
+      </div>
+    </div>
+  `;
+};
diff --git a/src/Score.ts b/src/Score.ts
@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { generateGradient } from "./generateGradient.ts";
+import { Gradient } from "./Gradient.ts";
+
+interface Props {
+  layoutGradient: Gradient;
+  fontColorDark: string;
+  awayScore: number;
+  homeScore: number;
+}
+
+export const Score = ({
+  awayScore,
+  homeScore,
+  fontColorDark,
+  layoutGradient,
+}: Props) => {
+  return html`
+    <div class="score-values-container">
+      <div
+        class="score-value"
+        style="color: ${fontColorDark}; background: ${generateGradient(
+          layoutGradient,
+        )}"
+      >
+        ${awayScore}
+      </div>
+
+      <div
+        class="score-value"
+        style="color: ${fontColorDark}; background: ${generateGradient(
+          layoutGradient,
+        )}"
+      >
+        ${homeScore}
+      </div>
+    </div>
+  `;
+};
diff --git a/src/ScoreContainer.ts b/src/ScoreContainer.ts
diff --git a/src/TeamLogos.ts b/src/TeamLogos.ts
@@ -0,0 +1,66 @@
+import { html } from "lit";
+import { generateGradient } from "./generateGradient.ts";
+import { Gradient } from "./Gradient.ts";
+
+interface Props {
+  awayGradient: Gradient;
+  homeGradient: Gradient;
+  layoutGradient: Gradient;
+  awayLogoSrc?: string;
+  homeLogoSrc?: string;
+  awayLogoShadow: string;
+  homeLogoShadow: string;
+}
+
+export const TeamLogos = ({
+  awayLogoShadow,
+  homeLogoShadow,
+  awayLogoSrc,
+  homeLogoSrc,
+  awayGradient,
+  homeGradient,
+}: Props) => {
+  let awayLogo;
+
+  if (awayLogoSrc) {
+    awayLogo = html`
+      <img
+        src=${awayLogoSrc}
+        alt=""
+        height="100%"
+        style="filter: drop-shadow(2px 2px 0px ${awayLogoShadow}88) drop-shadow(0px 0px 3px ${awayLogoShadow})"
+      />
+    `;
+  }
+
+  let homeLogo;
+
+  if (homeLogoSrc) {
+    homeLogo = html`
+      <img
+        src=${homeLogoSrc}
+        alt=""
+        height="100%"
+        style="filter: drop-shadow(2px 2px 0px ${homeLogoShadow}88) drop-shadow(0px 0px 3px ${homeLogoShadow})"
+      />
+    `;
+  }
+
+  return html`
+    <div class="team-logos-container">
+      <div
+        style="background: ${generateGradient(awayGradient)}"
+        class="team-logo-row"
+      >
+        <div class="team-logo logo">${awayLogo}</div>
+      </div>
+
+      <div
+        style="background: ${generateGradient(homeGradient)}"
+        class="team-logo-row"
+      >
+        <div class="team-logo logo">${homeLogo}</div>
+      </div>
+    </div>
+  `;
+};