add mode select to preview

hardbulls · Feb 21, 2024 · 2705210 · 2705210
1 parent aae9d97
commit 2705210
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 72 deletions.
diff --git a/index.html b/index.html
@@ -10,78 +10,78 @@
 <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">
+    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="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">
+    mode="background"
+    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
@@ -98,11 +98,12 @@
     borderColor="#000000"
     borderSize="3px"
     hideStats="false"
+    minNameWidth="10"
   >
   </baseball-playerboard>
 
   <baseball-playerboard
-    mode="normal"
+    mode="background"
     fontName="Courier New"
     fontLineHeight="1.10"
     inning="1.5"
@@ -115,12 +116,23 @@
     borderColor="#000000"
     borderSize="3px"
     hideStats="false"
+    minNameWidth="10"
   >
   </baseball-playerboard>
 
 </div>
 
 <div style="display: flex; flex-direction: column; max-width: 400px;">
+  <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>
@@ -220,6 +232,26 @@
   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);
@@ -232,11 +264,11 @@
 
   function changeBase(base, value) {
     for (const scoreboard of scoreboards) {
-      const bases = scoreboard.getAttribute('bases').split(',').map(v => v === 'true');
+      const bases = scoreboard.getAttribute("bases").split(",").map(v => v === "true");
 
       bases[base] = value;
 
-      scoreboard.setAttribute('bases', bases);
+      scoreboard.setAttribute("bases", bases);
     }
   }
 

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

diff --git a/src/Players.ts b/src/Players.ts
@@ -12,6 +12,7 @@ interface Props {
   batterAvg: number;
   pitcherEra: number;
   hideStats: boolean;
+  minNameWidth: number;
 }
 
 export const Players = ({
@@ -21,6 +22,7 @@ export const Players = ({
   hideStats,
   batterAvg,
   pitcherEra,
+  minNameWidth,
 }: Props) => {
   return html`
     <style>
@@ -46,6 +48,7 @@ export const Players = ({
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
+        min-width: ${minNameWidth}ch;
       }
 
       .name-row {

diff --git a/src/baseball-playerboard.ts b/src/baseball-playerboard.ts
@@ -63,6 +63,9 @@ export class BaseballPlayerboard extends LitElement {
   @property()
   hideStats = "false";
 
+  @property({ type: Number })
+  minNameWidth = 18;
+
   private parseGradient(value: string): Gradient {
     const awayGradientValues = value.split(",");
 
@@ -118,6 +121,7 @@ export class BaseballPlayerboard extends LitElement {
             pitcherName: this.pitcherName,
             batterAvg: this.batterAvg,
             pitcherEra: this.pitcherEra,
+            minNameWidth: this.minNameWidth,
           })}
         </div>
       </div>