Skip to content

Commit

Permalink
Add player box component
Browse files Browse the repository at this point in the history
  • Loading branch information
@arjanfrans
arjanfrans committed Nov 1, 2023
1 parent dd0770d commit ea89fc2
Show file tree
Hide file tree
Showing 8 changed files with 634 additions and 389 deletions.
229 changes: 157 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,101 +8,186 @@
</head>

<body>
<div style="display: flex; justify-content: center">
<baseball-scoreboard 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,true,true" inning="1.5" homeScore="10" awayScore="3" homeScore="0" balls="2"
strikes="1" outs="1" combineBasesAndInning="true" awayScore="0" inning="1.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" fontLineHeight="1.15" borderColor="#000000"
borderSize="3px" outsStyle="dots" inningStyle="combined"></baseball-scoreboard>
<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"
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
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>

</div>

<div style="display: flex; flex-direction: column; max-width: 400px;">
<div style="display: flex; justify-content: space-between">
<div>Outs</div>
<div>
<input onchange="changeProperty('outs', this.value)" type="number" min="0" max="2" />
</div>
</div>
<div style="display: flex; justify-content: space-between">
<div>Inning</div>
<div>
<input onchange="changeProperty('inning', this.value)" type="number" step="0.5" min="1" max="99.5" />
</div>
</div>
<div style="display: flex; justify-content: space-between">
<div>Home Score</div>
<div>
<input onchange="changeProperty('homeScore', this.value)" type="number" min="0" max="99" />
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Away Score</div>
<div>
<input onchange="changeProperty('awayScore', this.value)" type="number" min="0" max="99" />
</div>
</div>

<div style="display: flex; flex-direction: column; max-width: 400px;">
<div style="display: flex; justify-content: space-between">
<div>Outs</div>
<div>
<input onchange="changeProperty('outs', this.value)" type="number" min="0" max="2" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Balls</div>
<div>
<input onchange="changeProperty('balls', this.value)" type="number" min="0" max="3" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Inning</div>
<div>
<input onchange="changeProperty('inning', this.value)" type="number" step="0.5" min="1" max="99.5" />
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Strikes</div>
<div>
<input onchange="changeProperty('strikes', this.value)" type="number" min="0" max="2" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Home Score</div>
<div>
<input onchange="changeProperty('homeScore', this.value)" type="number" min="0" max="99"/>
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Home Name</div>
<div>
<input onchange="changeProperty('homeName', this.value)" type="text" />
</div>
</div>


<div style="display: flex; justify-content: space-between">
<div>Away Score</div>
<div>
<input onchange="changeProperty('awayScore', this.value)" type="number" min="0" max="99"/>
</div>
<div style="display: flex; justify-content: space-between">
<div>Away Name</div>
<div>
<input onchange="changeProperty('awayName', this.value)" type="text" />
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Balls</div>
<div>
<input onchange="changeProperty('balls', this.value)" type="number" min="0" max="3" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Batter Name</div>
<div>
<input onchange="changeProperty('batterName', this.value)" type="text" />
</div>
</div>


<div style="display: flex; justify-content: space-between">
<div>Strikes</div>
<div>
<input onchange="changeProperty('strikes', this.value)" type="number" min="0" max="2" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Pitcher Name</div>
<div>
<input onchange="changeProperty('pitcherName', this.value)" type="text" />
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Batter Name</div>
<div>
<input onchange="changeProperty('batterName', this.value)" type="text" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Pitcher ERA</div>
<div>
<input onchange="changeProperty('pitcherEra', this.value)" type="number" step="0.1" />
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Batter AVG</div>
<div>
<input onchange="changeProperty('batterAvg', this.value)" type="number" step="0.001" />
</div>
</div>

<div style="display: flex; justify-content: space-between">
<div>Pitcher Name</div>
<div>
<input onchange="changeProperty('pitcherName', this.value)" type="text" />
</div>
<div style="display: flex; justify-content: space-between">
<div>Bases</div>
<div>
<input onchange="changeBase(0, this.checked)" type="checkbox" />
<input onchange="changeBase(1, this.checked)" type="checkbox" />
<input onchange="changeBase(2, this.checked)" type="checkbox" />
</div>

</div>

<script>
const scoreboard = document.querySelector('baseball-scoreboard')
const outs = 0;
</div>

<script>
const scoreboard = document.querySelector("baseball-scoreboard");
const playerboard = document.querySelector("baseball-playerboard");

function changeProperty(property, value) {
scoreboard.setAttribute(property, value);
playerboard.setAttribute(property, value);
}

function changeBase(base, value) {
const bases = scoreboard.getAttribute('bases').split(',').map(v => v === 'true');

function changeProperty(property, value) {
scoreboard.setAttribute(property, value)
}
bases[base] = value;

scoreboard.setAttribute('bases', bases);
}

</script>

</script>


<footer style="text-align: center">
<p>
<a href="https://github.com/hardbulls/baseball-scoreboard">Hard Bulls Baseball Scoreboard</a> - <a
href="https://www.hardbulls.com">hardbulls.com</a>
</p>
<p>
Copyright &copy; Arjan Frans 2023
</p>
</footer>
<footer style="text-align: center">
<p>
<a href="https://github.com/hardbulls/baseball-scoreboard">Hard Bulls Baseball Scoreboard</a> - <a
href="https://www.hardbulls.com">hardbulls.com</a>
</p>
<p>
Copyright &copy; Arjan Frans 2023
</p>
</footer>
</body>

</html>
</html>
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@hardbulls/baseball-scoreboard",
"version": "1.1.1",
"version": "1.1.2",
"private": false,
"description": "Web Component that displays a baseball scoreboard for usage in live streams.",
"main": "dist/main.mjs",
Expand Down
Loading

0 comments on commit ea89fc2

Please sign in to comment.