From 27052108247558618c3cbc4f8fd52c6b5265b477 Mon Sep 17 00:00:00 2001 From: Arjan Frans Date: Wed, 21 Feb 2024 18:34:20 +0100 Subject: [PATCH] add mode select to preview --- index.html | 174 +++++++++++++++++++++--------------- package.json | 2 +- src/Players.ts | 3 + src/baseball-playerboard.ts | 4 + 4 files changed, 111 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index 970c759..8d69a12 100644 --- a/index.html +++ b/index.html @@ -10,78 +10,78 @@
+ 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="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">
+
+
Display Mode
+
+ +
+
+
Outs
@@ -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 index 5762e55..879c773 100644 --- 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 index 62f1a76..9901598 100644 --- 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`