add foreground/background mode

hardbulls · Nov 5, 2023 · 848d6d9 · 848d6d9
1 parent b0f47c4
commit 848d6d9
Show file tree

Hide file tree

Showing 21 changed files with 260 additions and 254 deletions.
diff --git a/.github/reference1.png b/.github/reference1.png
diff --git a/.github/mlb_tv.jpg → .github/reference2.jpg b/.github/mlb_tv.jpg → .github/reference2.jpg
diff --git a/index.html b/index.html
@@ -9,7 +9,9 @@
 
 <body>
 <div style="display: flex; justify-content: center; flex-direction: column; row-gap: 25px; margin: 25px;">
-  <baseball-scoreboard awayLogoSrc="https://static.wbsc.org/upload/acfef0c2-5af4-e797-cb4b-550d6173bb34.png"
+  <baseball-scoreboard
+                       mode="foreground"
+                       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"
@@ -44,7 +46,63 @@
                        borderSize="3px">
   </baseball-scoreboard>
 
+
+  <baseball-scoreboard
+                      mode="normal"
+                       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"
+                       hideInning="false"
+                       fontName="Courier New"
+                       fontLineHeight="1.10"
+                       bases="false,false,false"
+                       inning="1.5"
+                       homeScore="0"
+                       awayScore="0"
+                       balls="0"
+                       strikes="0"
+                       outs="0"
+                       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="#3b3b3b"
+                       homeLogoShadow="#2a2a2a"
+                       activeInningColor="#e00000"
+                       inactiveInningColor="#b3b3b3"
+                       activeOutColor="#e00000"
+                       inactiveOutColor="#b3b3b3"
+                       activeBaseColor="#e5c72b"
+                       inactiveBaseColor="#b3b3b3"
+                       awayName="BH" homeName="HB"
+                       borderColor="#000000"
+                       borderSize="3px">
+  </baseball-scoreboard>
+
+  <baseball-playerboard
+    mode="foreground"
+    fontName="Courier New"
+    fontLineHeight="1.10"
+    inning="1.5"
+    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"
+    borderColor="#000000"
+    borderSize="3px"
+    hideStats="false"
+  >
+  </baseball-playerboard>
+
   <baseball-playerboard
+    mode="normal"
     fontName="Courier New"
     fontLineHeight="1.10"
     inning="1.5"
@@ -159,20 +217,27 @@
 </div>
 
 <script>
-  const scoreboard = document.querySelector("baseball-scoreboard");
-  const playerboard = document.querySelector("baseball-playerboard");
+  const scoreboards = document.querySelectorAll("baseball-scoreboard");
+  const playerboards = document.querySelectorAll("baseball-playerboard");
 
   function changeProperty(property, value) {
-    scoreboard.setAttribute(property, value);
-    playerboard.setAttribute(property, value);
+    for (const scoreboard of scoreboards) {
+      scoreboard.setAttribute(property, value);
+    }
+
+    for (const playerboard of playerboards) {
+      playerboard.setAttribute(property, value);
+    }
   }
 
   function changeBase(base, value) {
-    const bases = scoreboard.getAttribute('bases').split(',').map(v => v === 'true');
+    for (const scoreboard of scoreboards) {
+      const bases = scoreboard.getAttribute('bases').split(',').map(v => v === 'true');
 
-    bases[base] = value;
+      bases[base] = value;
 
-    scoreboard.setAttribute('bases', bases);
+      scoreboard.setAttribute('bases', bases);
+    }
   }
 
 

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

diff --git a/src/Bases.ts b/src/Bases.ts
@@ -7,14 +7,14 @@ interface Props {
   bases: Array<boolean>;
   showInnings: boolean;
   inning: number;
-  fontColor: string;
+  fontClass: string;
   activeInningColor: string;
 }
 
 export const Bases = ({
   activeBaseColor,
   activeInningColor,
-  fontColor,
+  fontClass,
   inning,
   inactiveBaseColor,
   bases,
@@ -36,7 +36,6 @@ export const Bases = ({
       <div class="inning-row">
         ${InningHorizontal({
           inning,
-          fontColor,
           activeInningColor,
         })}
       </div>
@@ -58,12 +57,6 @@ export const Bases = ({
         height: var(--half-height);
       }
 
-      .bases-component {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-
       .base-3d-wrapper {
         transform-style: preserve-3d;
         transform: rotateX(${angle});
@@ -97,7 +90,7 @@ export const Bases = ({
       }
     </style>
 
-    <div class="bases-component">
+    <div class="bases-component ${fontClass}">
       <div class="base-container" style="${basesStyle}">
         <div class="base-3d-wrapper">
           <div class="base-rotate-wrapper">

diff --git a/src/Counts.ts b/src/Counts.ts
@@ -1,5 +1,3 @@
-import { generateGradient } from "./generateGradient.ts";
-import { Gradient } from "./Gradient.ts";
 import { html } from "lit";
 import { OutsText } from "./OutsText.ts";
 import { OutsDots } from "./OutsDots.ts";
@@ -8,36 +6,30 @@ type Props = {
   balls: number;
   strikes: number;
   outs: number;
-  layoutGradient: Gradient;
   outsStyle: string;
-  fontColorDark: string;
+  fontClass: string;
   activeOutColor: string;
   inactiveOutColor: string;
 };
 export const Counts = ({
   balls,
   strikes,
   outs,
-  layoutGradient,
   outsStyle,
-  fontColorDark,
+  fontClass,
   activeOutColor,
   inactiveOutColor,
 }: Props) => {
-  const style = `color: ${fontColorDark}; background: ${generateGradient(
-    layoutGradient,
-  )}`;
-
   return html`
-    <div class="counts-container">
-      <div class="counts-top" style=${style}>
+    <div class="counts-container ${fontClass}">
+      <div class="counts-top background-light">
         <span>${balls}</span>
         <span class="count-separator">-</span>
         <span>${strikes}</span>
       </div>
       ${outsStyle === "text"
-        ? OutsText({ outs, layoutGradient })
-        : OutsDots({ outs, layoutGradient, activeOutColor, inactiveOutColor })}
+        ? OutsText({ outs })
+        : OutsDots({ outs, activeOutColor, inactiveOutColor })}
     </div>
   `;
 };
diff --git a/src/Inning/InningHorizontal.ts b/src/Inning/InningHorizontal.ts
@@ -3,21 +3,15 @@ import { ArrowDirection, InningArrow } from "../InningArrow.ts";
 
 interface Props {
   inning: number;
-  fontColor: string;
   activeInningColor: string;
 }
 
-export const InningHorizontal = ({
-  inning,
-  fontColor,
-  activeInningColor,
-}: Props) => {
+export const InningHorizontal = ({ inning, activeInningColor }: Props) => {
   const isTop = inning % 1 === 0;
 
   return html`
     <style>
       .inning-horizontal {
-        color: ${fontColor};
         display: flex;
         flex-direction: row;
         column-gap: 6px;

diff --git a/src/InningArrow.ts b/src/InningArrow.ts
@@ -20,15 +20,5 @@ export const InningArrow = (
     style += ` border-top: 22px solid ${color};`;
   }
 
-  return html`
-    <style>
-      .inning-indicator-arrow {
-        width: 0;
-        height: 0;
-        border-left: 13px solid transparent;
-        border-right: 13px solid transparent;
-      }
-    </style>
-    <div class="inning-indicator-arrow" style=${style}></div>
-  `;
+  return html` <div class="inning-indicator-arrow" style=${style}></div> `;
 };
diff --git a/src/InningVertical.ts b/src/InningVertical.ts
@@ -1,22 +1,18 @@
 import { html } from "lit";
-import { Gradient } from "./Gradient.js";
-import { generateGradient } from "./generateGradient.js";
 import { ArrowDirection, InningArrow } from "./InningArrow.js";
 
 interface Props {
   inning: number;
-  fontColor: string;
+  fontClass: string;
   inactiveInningColor: string;
   activeInningColor: string;
-  layoutGradient: Gradient;
 }
 
 export const InningVertical = ({
   inning,
-  fontColor,
+  fontClass,
   inactiveInningColor,
   activeInningColor,
-  layoutGradient,
 }: Props) => {
   const isTop = inning % 1 === 0;
 
@@ -35,12 +31,7 @@ export const InningVertical = ({
       }
     </style>
 
-    <div
-      class="inning-vertical"
-      style="color: ${fontColor}; background: ${generateGradient(
-        layoutGradient,
-      )}"
-    >
+    <div class="inning-vertical background-light ${fontClass}">
       ${Math.floor(inning)}
       <div class="inning-indicator-top">
         ${InningArrow(

diff --git a/src/Logo.ts b/src/Logo.ts
@@ -1,18 +1,11 @@
 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) => {
+export const LeagueLogo = ({ leagueLogoSrc, leagueLogoShadow }: Props) => {
   if (!leagueLogoSrc) {
     return;
   }
@@ -32,11 +25,7 @@ export const LeagueLogo = ({
 
   return html`
     <div class="league-logo-container">
-      <div
-        style="display: flex; background: ${generateGradient(
-          backgroundGradient,
-        )}"
-      >
+      <div style="display: flex">
         <div class="league-logo logo">${leagueLogo}</div>
       </div>
     </div>

diff --git a/src/OutsDots.ts b/src/OutsDots.ts
@@ -1,54 +1,18 @@
-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) => {
+export const OutsDots = ({ outs, 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`
-    <style>
-      .outs-dot {
-        height: 25px;
-        width: 25px;
-        border-radius: 50%;
-        display: inline-block;
-      }
-
-      .out-dot-on::after {
-        content: "";
-        height: 25px;
-        width: 25px;
-        border-radius: 50%;
-        display: inline-block;
-
-        margin-left: -1px;
-        margin-top: -1px;
-
-        filter: blur(3px);
-        border: 1px solid ${activeOutColor};
-        animation: opacityAnimation 0.9s 1;
-        opacity: 0;
-      }
-    </style>
-    <div class="counts-bottom" style=${style}>
+    <div class="counts-bottom background-light">
       <div
         class="outs-dot ${outs === 1 || outs === 2 ? "out-dot-on" : ""}"
         style="background-color: ${out1Color}; filter: drop-shadow(0px 0px 1px color-mix(in srgb, ${out1Color} 50%, black));"