use web component

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",

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 (
-    <div style={{
-      fontFamily: `${state.displaySettings.font?.name}, sans-serif`,
-      fontSize: '32px',
-      display: 'flex',
-      lineHeight: state.displaySettings.fontLineHeight
-    }}>
-      <div style={{
-        background: generateGradient(state.displaySettings.backgroundGradient),
-        border: '2px solid #666',
-        display: 'flex',
-      }}>
-        <Score scoreboard={scoreboard} state={state}></Score>
-        <Inning scoreboard={scoreboard} state={state} />
-        {!state.displaySettings.hideBases && <Bases state={state} scoreboard={scoreboard}></Bases>}
-        {!state.displaySettings.hideCounts && <Counts state={state} scoreboard={scoreboard} />}
-      </div>
-    </div>
+    <BaseballScoreboardComponent
+      hideBases={`${state.displaySettings.hideBases}`}
+      hideCounts={`${state.displaySettings.hideBases}`}
+      homeScore={scoreboard.score[0]}
+      balls={scoreboard.balls}
+      strikes={scoreboard.strikes}
+      outs={scoreboard.outs}
+      awayScore={scoreboard.score[1]}
+      inning={inning}
+      bases={bases}
+      awayGradient={toGradientValue(state.displaySettings.awayGradient)}
+      homeGradient={toGradientValue(state.displaySettings.homeGradient)}
+      layoutGradient={toGradientValue(state.displaySettings.layoutGradient)}
+      backgroundGradient={toGradientValue(state.displaySettings.backgroundGradient)}
+      fontColorDark={state.displaySettings.fontColorDark}
+      fontColorLight={state.displaySettings.fontColorLight}
+      awayLogoSrc={state.awayLogo?.data}
+      homeLogoSrc={state.homeLogo?.data}
+      awayLogoShadow={state.displaySettings.awayLogoShadow}
+      homeLogoShadow={state.displaySettings.homeLogoShadow}
+      activeInningColor={state.displaySettings.activeInningColor}
+      inactiveInningColor={state.displaySettings.inactiveInningColor}
+      activeBaseColor={state.displaySettings.activeBaseColor}
+      inactiveBaseColor={state.displaySettings.inactiveBaseColor}
+      awayName={state.away}
+      homeName={state.home}
+      fontName={state.displaySettings.font?.name}
+      fontLineHeight={state.displaySettings.fontLineHeight}
+    />
   );
 };