From 6d3069af1ceda6ab623e5fa3dda1bf461f9e8a61 Mon Sep 17 00:00:00 2001 From: Arjan Frans Date: Wed, 18 Oct 2023 21:06:57 +0200 Subject: [PATCH] use web component --- package-lock.json | 65 ++++++++++++++++++++++++++++++++++++ package.json | 4 ++- src/Scoreboard.tsx | 73 ++++++++++++++++++++++++++++------------- src/baseball/Bases.tsx | 28 ---------------- src/baseball/Counts.tsx | 28 ---------------- src/baseball/Inning.tsx | 42 ------------------------ src/baseball/Score.tsx | 57 -------------------------------- 7 files changed, 119 insertions(+), 178 deletions(-) delete mode 100644 src/baseball/Bases.tsx delete mode 100644 src/baseball/Counts.tsx delete mode 100644 src/baseball/Inning.tsx delete mode 100644 src/baseball/Score.tsx diff --git a/package-lock.json b/package-lock.json index c7a82d4..4b0380a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@hardbulls/baseball-scoreboard": "^0.0.1", "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.3", "@types/node": "^16.18.14", @@ -25,6 +26,7 @@ "typescript": "^5.0.2" }, "devDependencies": { + "@lit/react": "^1.0.0", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", @@ -1430,6 +1432,14 @@ "node": ">=6" } }, + "node_modules/@hardbulls/baseball-scoreboard": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@hardbulls/baseball-scoreboard/-/baseball-scoreboard-0.0.1.tgz", + "integrity": "sha512-H9/tJDNRlPJELDHcgK2ANSi9oNG8CAM8bzAM0JPDFk3koxZErYijCVw6Wl5WCMzcqPp5TRO/XEdHew66EwQ3xA==", + "dependencies": { + "lit": "^3.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", @@ -1460,6 +1470,28 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==" }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz", + "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==" + }, + "node_modules/@lit/react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.0.tgz", + "integrity": "sha512-uTuU6vpxtZvCWxcu3GNosckP2JpFWZpMKjhwQ42Bzu/OU9kjStJspA04o7RadecQfx0YiFIImX3qek15BXhaWQ==", + "dev": true, + "peerDependencies": { + "@types/react": "17 || 18" + } + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.0.tgz", + "integrity": "sha512-wn+2+uDcs62ROBmVAwssO4x5xue/uKD3MGGZOXL2sMxReTRIT0JXKyMXeu7gh0aJ4IJNEIG/3aOnUaQvM7BMzQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.2-pre.0" + } + }, "node_modules/@msgpack/msgpack": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-2.8.0.tgz", @@ -2088,6 +2120,11 @@ "integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.5.tgz", + "integrity": "sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "6.7.4", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.4.tgz", @@ -4430,6 +4467,34 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/lit": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.0.0.tgz", + "integrity": "sha512-nQ0teRzU1Kdj++VdmttS2WvIen8M79wChJ6guRKIIym2M3Ansg3Adj9O6yuQh2IpjxiUXlNuS81WKlQ4iL3BmA==", + "dependencies": { + "@lit/reactive-element": "^2.0.0", + "lit-element": "^4.0.0", + "lit-html": "^3.0.0" + } + }, + "node_modules/lit-element": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.0.tgz", + "integrity": "sha512-N6+f7XgusURHl69DUZU6sTBGlIN+9Ixfs3ykkNDfgfTkDYGGOWwHAYBhDqVswnFGyWgQYR2KiSpu4J76Kccs/A==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.2-pre.0", + "@lit/reactive-element": "^2.0.0", + "lit-html": "^3.0.0" + } + }, + "node_modules/lit-html": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.0.0.tgz", + "integrity": "sha512-DNJIE8dNY0dQF2Gs0sdMNUppMQT2/CvV4OVnSdg7BXAsGqkVwsE5bqQ04POfkYH5dBIuGnJYdFz5fYYyNnOxiA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", diff --git a/package.json b/package.json index 9b29e95..960fc1c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "hardbulls-livestream", + "name": "@hardbulls/livestream-control", "description": "Hard Bulls Livestreaming Tool", "version": "0.5.1", "type": "module", @@ -14,6 +14,7 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@hardbulls/baseball-scoreboard": "^0.0.1", "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.3", "@types/node": "^16.18.14", @@ -28,6 +29,7 @@ "typescript": "^5.0.2" }, "devDependencies": { + "@lit/react": "^1.0.0", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", diff --git a/src/Scoreboard.tsx b/src/Scoreboard.tsx index 9eda852..6196d6d 100644 --- a/src/Scoreboard.tsx +++ b/src/Scoreboard.tsx @@ -1,35 +1,64 @@ import { ScoreboardState } from "./baseball/model/ScoreboardState.ts"; -import { generateGradient } from "./service/css.ts"; -import { Score } from "./baseball/Score.tsx"; -import { Inning } from "./baseball/Inning.tsx"; -import { Bases } from "./baseball/Bases.tsx"; -import { Counts } from "./baseball/Counts.tsx"; import { State } from "./baseball/model/State.ts"; +import { createComponent } from "@lit/react"; +import { BaseballScoreboard } from "@hardbulls/baseball-scoreboard"; +import React from "react"; +import { InningHalfEnum } from "./baseball/model/InningHalfEnum.ts"; +import { BaseEnum } from "./baseball/model/BasesEnum.ts"; +import { Gradient } from "./baseball/model/Gradient.ts"; interface Props { state: State; scoreboard: ScoreboardState; } +export const BaseballScoreboardComponent = createComponent({ + tagName: "baseball-scoreboard", + elementClass: BaseballScoreboard, + react: React +}); + export const Scoreboard = ({ state, scoreboard }: Props) => { + const inning = scoreboard.inning.half === InningHalfEnum.TOP ? scoreboard.inning.value : scoreboard.inning.value + 0.5 + const bases = [ + scoreboard.bases.includes(BaseEnum.FIRST), + scoreboard.bases.includes(BaseEnum.SECOND), + scoreboard.bases.includes(BaseEnum.THIRD), + ].join(','); + + const toGradientValue = (gradient: Gradient) => { + return `${gradient.angle},${gradient.startColor},${gradient.endColor},${gradient.startPercentage},${gradient.endPercentage}` + } return ( -
-
- - - {!state.displaySettings.hideBases && } - {!state.displaySettings.hideCounts && } -
-
+ ); }; diff --git a/src/baseball/Bases.tsx b/src/baseball/Bases.tsx deleted file mode 100644 index 0dec8fc..0000000 --- a/src/baseball/Bases.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { BaseEnum } from "./model/BasesEnum"; -import { State } from "./model/State"; -import { ScoreboardState } from "./model/ScoreboardState.ts"; - -interface Props { - scoreboard: ScoreboardState - state: State -} - -export const Bases = ({ state, scoreboard }: Props) => { - const activeBaseStyle = { - backgroundColor: state.displaySettings.activeBaseColor - }; - - const inactiveBaseStyle = { - backgroundColor: state.displaySettings.inactiveBaseColor - }; - - return ( -
-
-
-
-
-
-
- ); -}; diff --git a/src/baseball/Counts.tsx b/src/baseball/Counts.tsx deleted file mode 100644 index 09500e9..0000000 --- a/src/baseball/Counts.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { State } from "./model/State"; -import { generateGradient } from "../service/css"; -import { ScoreboardState } from "./model/ScoreboardState.ts"; - -interface Props { - scoreboard: ScoreboardState - state: State -} -export const Counts = ({scoreboard, state}: Props) => { - const {strikes, balls, outs} = scoreboard; - const style = { - color: state.displaySettings.fontColorDark, - background: generateGradient(state.displaySettings.layoutGradient) - } - return ( -
-
- {balls} - - - {strikes} -
-
- {outs} - out -
-
- ) -} diff --git a/src/baseball/Inning.tsx b/src/baseball/Inning.tsx deleted file mode 100644 index c6b29c1..0000000 --- a/src/baseball/Inning.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import {InningHalfEnum} from "./model/InningHalfEnum"; -import { State } from "./model/State"; -import { generateGradient } from "../service/css"; -import { ScoreboardState } from "./model/ScoreboardState.ts"; - -interface Props { - state: State - scoreboard: ScoreboardState -} - -const renderInningSvg = (inningHalf: InningHalfEnum, isCurrent: boolean, activeColor: string, inactiveColor: string) => { - const upPoints = '5,0 0,7 10,7'; - const downPoints = '5,7 10,0 0,0'; - - return ( - - - - - ) -} -export const Inning = ({state, scoreboard}: Props) => { - const inning = scoreboard.inning; - const inactiveColor = state.displaySettings.inactiveInningColor - const activeColor = state.displaySettings.activeInningColor - - return ( -
- {inning.value} -
- {renderInningSvg(InningHalfEnum.TOP, inning.half === InningHalfEnum.TOP, activeColor, inactiveColor)} -
-
- {renderInningSvg(InningHalfEnum.BOTTOM, inning.half === InningHalfEnum.BOTTOM, activeColor, inactiveColor)} -
-
- ); -} diff --git a/src/baseball/Score.tsx b/src/baseball/Score.tsx deleted file mode 100644 index a40f936..0000000 --- a/src/baseball/Score.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { State } from "./model/State"; -import { generateGradient } from "../service/css"; -import { ScoreboardState } from "./model/ScoreboardState.ts"; - -interface Props { - state: State, - scoreboard: ScoreboardState -} - -export const Score = ({ state, scoreboard }: Props) => { - const { homeLogo, awayLogo, home, away } = state; - const [homeScore, awayScore] = scoreboard.score; - - return ( -
-
-
- {awayLogo?.data && } -
-
- {away} -
-
- {awayScore} -
-
- -
-
- {homeLogo?.data && } -
-
- {home} -
-
- {homeScore} -
-
-
- ); -};