remove transparent mode

hardbulls · Mar 27, 2024 · 490de85 · 490de85
1 parent 197e384
commit 490de85
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 137 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,6 @@ Great for usage in a live ticker web application or live streams.
 * Configurable colors, shadows and logos for each team
 * Configurable colors for inning, outs and base indicators
 * Optionally add a brand logo to the scoreboard
-* Transparent mode
 
 ## Usage
 

diff --git a/index.html b/index.html
@@ -9,46 +9,9 @@
 
 <body style="background-color: #00ff00">
 <div style="display: flex; justify-content: center; flex-direction: column; row-gap: 25px; margin: 25px;">
-  <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"
-    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-scoreboard
-    mode="background"
+    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"
@@ -85,25 +48,6 @@
   </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"
-    minNameWidth="10"
-  >
-  </baseball-playerboard>
-
-  <baseball-playerboard
-    mode="background"
     fontName="Courier New"
     fontLineHeight="1.10"
     inning="1.5"
@@ -123,16 +67,6 @@
 </div>
 
 <div style="display: flex; flex-direction: column; max-width: 400px; row-gap: 4px;">
-  <div style="display: flex; justify-content: space-between">
-    <div>Display Mode</div>
-    <div>
-      <select onchange="changeMode(this.value)">
-        <option value="normal">Normal</option>
-        <option value="transparent">Transparent</option>
-      </select>
-    </div>
-  </div>
-
   <div style="display: flex; justify-content: space-between">
     <div>Outs</div>
     <div>
@@ -232,26 +166,6 @@
   const scoreboards = document.querySelectorAll("baseball-scoreboard");
   const playerboards = document.querySelectorAll("baseball-playerboard");
 
-  changeMode("normal");
-
-  function changeMode(value) {
-    if (value === "normal") {
-      scoreboards.item(0).mode = "normal";
-      playerboards.item(0).mode = "normal";
-      scoreboards.item(1).style.display = "none";
-      playerboards.item(1).style.display = "none";
-    } else {
-      scoreboards.item(0).mode = "foreground";
-      playerboards.item(0).mode = "foreground";
-
-      scoreboards.item(1).mode = "background";
-      playerboards.item(1).mode = "background";
-
-      scoreboards.item(1).style.display = "block";
-      playerboards.item(1).style.display = "block";
-    }
-  }
-
   function changeProperty(property, value) {
     for (const scoreboard of scoreboards) {
       scoreboard.setAttribute(property, value);

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/TeamLogos.ts b/src/TeamLogos.ts
@@ -3,8 +3,8 @@ import { html } from "lit";
 interface Props {
   awayLogoSrc?: string;
   homeLogoSrc?: string;
-  awayLogoShadow: string;
-  homeLogoShadow: string;
+  awayLogoShadow?: string;
+  homeLogoShadow?: string;
 }
 
 export const TeamLogos = ({
@@ -14,28 +14,27 @@ export const TeamLogos = ({
   homeLogoSrc,
 }: Props) => {
   let awayLogo;
+  let awayStyle = "";
+  let homeLogo;
+  let homeStyle = "";
+
+  if (awayLogoShadow) {
+    awayStyle = `filter: drop-shadow(2px 2px 0px ${awayLogoShadow}88) drop-shadow(0px 0px 3px ${awayLogoShadow})`;
+  }
 
   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})"
-      />
+      <img src=${awayLogoSrc} alt="" height="100%" style="${awayStyle}" />
     `;
   }
 
-  let homeLogo;
+  if (homeLogoShadow) {
+    homeStyle = `filter: drop-shadow(2px 2px 0px ${homeLogoShadow}88) drop-shadow(0px 0px 3px ${homeLogoShadow})`;
+  }
 
   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})"
-      />
+      <img src=${homeLogoSrc} alt="" height="100%" style="${homeStyle}" />
     `;
   }
 

diff --git a/src/baseball-playerboard.ts b/src/baseball-playerboard.ts
@@ -9,9 +9,6 @@ import { BaseballStyle } from "./baseball-style.ts";
 export class BaseballPlayerboard extends LitElement {
   static styles = [Style];
 
-  @property()
-  mode: "foreground" | "background" | "normal" = "normal";
-
   @property({ type: Number })
   inning = 1.0;
 
@@ -90,8 +87,6 @@ export class BaseballPlayerboard extends LitElement {
     return html`
       <style>
         ${BaseballStyle(
-          this.mode === "foreground",
-          this.mode === "background",
           this.fontColorDark,
           this.fontColorLight,
           awayGradient,

diff --git a/src/baseball-scoreboard.ts b/src/baseball-scoreboard.ts
@@ -15,9 +15,6 @@ import { BaseballStyle } from "./baseball-style.ts";
 export class BaseballScoreboard extends LitElement {
   static styles = [Style];
 
-  @property()
-  mode: "foreground" | "background" | "normal" = "normal";
-
   @property()
   hideBases = "false";
 
@@ -164,8 +161,6 @@ export class BaseballScoreboard extends LitElement {
     return html`
       <style>
         ${BaseballStyle(
-            this.mode === "foreground",
-            this.mode === "background",
             this.fontColorDark,
             this.fontColorLight,
             awayGradient,
@@ -177,34 +172,34 @@ export class BaseballScoreboard extends LitElement {
           display: flex;
           flex-direction: row;
           justify-content: center;
-          opacity: ${this.mode === "background" ? "0" : "1"};
+          opacity: 1;
         }
 
         .league-logo {
           height: calc(var(--half-height) * 2);
-          opacity: ${this.mode === "background" ? "0" : "1"};
+          opacity: 1;
         }
 
         .outs-dot {
           height: 25px;
           width: 25px;
           border-radius: 50%;
-          display: ${this.mode === "background" ? "none" : "inline-block"};
+          display: inline-block;
         }
 
         .bases-component {
           display: flex;
           flex-direction: column;
           justify-content: space-between;
-          opacity: ${this.mode === "background" ? "0" : "1"};
+          opacity: 1;
         }
 
         .out-dot-on::after {
           content: "";
           height: 25px;
           width: 25px;
           border-radius: 50%;
-          display: ${this.mode === "background" ? "none" : "inline-block"};
+          display: inline-block;
 
           margin-left: -1px;
           margin-top: -1px;
@@ -220,7 +215,7 @@ export class BaseballScoreboard extends LitElement {
           height: 0;
           border-left: 13px solid transparent;
           border-right: 13px solid transparent;
-          display: ${this.mode === "background" ? "none" : "inline-block"};
+          display: inline-block;
         }
       </style>
 

diff --git a/src/baseball-style.ts b/src/baseball-style.ts
@@ -3,8 +3,6 @@ import { generateGradient } from "./generateGradient.ts";
 import { Gradient } from "./Gradient.ts";
 
 export const BaseballStyle = (
-  transparentBackgrounds: boolean,
-  transparentFonts: boolean,
   fontColorDark: string,
   fontColorLight: string,
   awayGradient: Gradient,
@@ -14,35 +12,27 @@ export const BaseballStyle = (
 ) => {
   return css`
     .background-away {
-      background: ${unsafeCSS(
-        transparentBackgrounds ? "none" : generateGradient(awayGradient),
-      )};
+      background: ${unsafeCSS(generateGradient(awayGradient))};
     }
 
     .background-home {
-      background: ${unsafeCSS(
-        transparentBackgrounds ? "none" : generateGradient(homeGradient),
-      )};
+      background: ${unsafeCSS(generateGradient(homeGradient))};
     }
 
     .background-light {
-      background: ${unsafeCSS(
-        transparentBackgrounds ? "none" : generateGradient(layoutGradient),
-      )};
+      background: ${unsafeCSS(generateGradient(layoutGradient))};
     }
 
     .background-dark {
-      background: ${unsafeCSS(
-        transparentBackgrounds ? "none" : generateGradient(backgroundGradient),
-      )};
+      background: ${unsafeCSS(generateGradient(backgroundGradient))};
     }
 
     .font-color-dark {
-      color: ${unsafeCSS(transparentFonts ? "rgba(0,0,0,0)" : fontColorDark)};
+      color: ${unsafeCSS(fontColorDark)};
     }
 
     .font-color-light {
-      color: ${unsafeCSS(transparentFonts ? "rgba(0,0,0,0)" : fontColorLight)};
+      color: ${unsafeCSS(fontColorLight)};
     }
   `;
 };