@four-leaf-studios/rl-overlay 1.0.0

package/dist/types/Overlay.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import type { Broadcast } from "./types";
+import { CSSJSON } from "./hooks/useOverlayStyles";
+import "./css/reset.css";
+export type OverlayProps = {
+    broadcast: Broadcast;
+    styles?: string | CSSJSON;
+    children?: ReactNode;
+    preview?: boolean;
+};
+export declare const Overlay: {
+    ({ broadcast, styles, preview, children, }: OverlayProps): React.JSX.Element;
+    Scoreboard: () => React.JSX.Element | null;
+    Teams: () => React.JSX.Element;
+    TargetPlayer: React.MemoExoticComponent<() => React.JSX.Element | null>;
+    TargetBoost: React.MemoExoticComponent<() => React.JSX.Element | null>;
+    Replay: () => React.JSX.Element | null;
+};
+export default Overlay;

package/dist/types/Player.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+type Props = {
+    player: PlayerState;
+};
+declare const _default: React.MemoExoticComponent<({ player }: Props) => React.JSX.Element>;
+export default _default;

package/dist/types/PlayerBoost.d.ts

@@ -0,0 +1,8 @@
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+import React from "react";
+type Props = {
+    team: PlayerState["team"];
+    boost: PlayerState["boost"];
+};
+declare const _default: React.MemoExoticComponent<({ team, boost }: Props) => React.JSX.Element>;
+export default _default;

package/dist/types/Replay.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Replay: () => React.JSX.Element | null;
+export default Replay;

package/dist/types/Scoreboard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Scoreboard: () => React.JSX.Element | null;
+export default Scoreboard;

package/dist/types/ScoreboardGameBox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Broadcast } from "./types";
+interface ScoreboardGameBoxProps {
+    broadcast: Broadcast;
+}
+declare const ScoreboardGameBox: React.FC<ScoreboardGameBoxProps>;
+export default ScoreboardGameBox;

package/dist/types/ScoreboardSeriesBox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ScoreboardSeriesBoxProps {
+    team: any;
+    seriesNumber: number;
+}
+declare const ScoreboardSeriesBox: React.NamedExoticComponent<ScoreboardSeriesBoxProps>;
+export default ScoreboardSeriesBox;

package/dist/types/ScoreboardTeam.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Team } from "./types";
+interface ScoreboardTeamProps {
+    team: Team;
+}
+declare const ScoreboardTeam: React.FC<ScoreboardTeamProps>;
+export default ScoreboardTeam;

package/dist/types/StatItem.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+type Primitive = string | number | boolean;
+type PrimitiveKeys<T> = {
+    [K in keyof T]: T[K] extends Primitive ? K : never;
+}[keyof T];
+type StatItemProps<K extends PrimitiveKeys<PlayerState>> = {
+    id: K;
+    label: string;
+    value: PlayerState[K];
+};
+declare const StatItem: <K extends PrimitiveKeys<PlayerState>>({ id, label, value, }: StatItemProps<K>) => React.JSX.Element;
+export default StatItem;

package/dist/types/TargetBoost.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element | null>;
+export default _default;

package/dist/types/TargetPlayer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element | null>;
+export default _default;

package/dist/types/TargetPlayerLocation.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+type Props = {
+    location: PlayerState["location"];
+};
+declare const _default: React.MemoExoticComponent<({ location }: Props) => React.JSX.Element>;
+export default _default;

package/dist/types/TargetPlayerStats.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+type Props = {
+    targetPlayer: PlayerState;
+};
+declare const _default: React.MemoExoticComponent<({ targetPlayer }: Props) => React.JSX.Element>;
+export default _default;

package/dist/types/Team.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Team } from "./types";
+type Props = {
+    id: Team["id"];
+};
+declare const Team: ({ id }: Props) => React.JSX.Element | null;
+declare const MemoizedTeam: React.MemoExoticComponent<({ id }: Props) => React.JSX.Element | null>;
+export default MemoizedTeam;

package/dist/types/Teams.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Teams: () => React.JSX.Element;
+export default Teams;

package/dist/types/Timer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Timer: React.NamedExoticComponent<{}>;
+export default Timer;

package/dist/types/context/BroadcastContext.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+import { Broadcast } from "../types";
+export declare const BroadcastProvider: React.FC<{
+    broadcast: Broadcast;
+    children: ReactNode;
+}>;
+export declare function useBroadcast(): Broadcast;

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./useOverlayStyles";
+export * from "./useReplay";
+export * from "./useShowGameComponents";
+export * from "./useTargetPlayer";

package/dist/types/hooks/useOverlayStyles.d.ts

@@ -0,0 +1,12 @@
+import type { Broadcast } from "../types";
+export type CSSJSON = {
+    [selector: string]: {
+        [prop: string]: string | number;
+    };
+};
+/**
+ * Hook that injects both team-color variables (from Broadcast)
+ * and optional custom styles (string or JSON) into the document.
+ * Uses `@rysh/json-to-css` for JSON → CSS conversion.
+ */
+export declare function useOverlayStyles(broadcast: Broadcast, styles?: string | CSSJSON): void;

package/dist/types/hooks/useReplay.d.ts

@@ -0,0 +1,7 @@
+declare const useReplay: () => {
+    active: boolean;
+    replayEndEvent: string | undefined;
+    replayStartEvent: string | undefined;
+    isReplay: boolean | undefined;
+};
+export default useReplay;

package/dist/types/hooks/useShowGameComponents.d.ts

@@ -0,0 +1,2 @@
+declare const useShowGameComponents: () => boolean;
+export default useShowGameComponents;

package/dist/types/hooks/useTargetPlayer.d.ts

@@ -0,0 +1,2 @@
+declare const useTargetPlayer: () => import("@four-leaf-studios/rl-socket-hook").PlayerState | null | undefined;
+export default useTargetPlayer;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Overlay";
+export * from "@four-leaf-studios/rl-socket-hook";
+export * from "./hooks/index";

package/dist/types/mockBroadcast.d.ts

@@ -0,0 +1,18 @@
+export declare const mockBroadcastData: {
+    id: string;
+    name: string;
+    slug: string;
+    teams: {
+        id: string;
+        name: string;
+        series_score: number;
+        side: string;
+        color: {
+            primary_color: string;
+            secondary_color: string;
+            mutual_color: string;
+        };
+    }[];
+    series_number: number;
+    top_info_text: string;
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@four-leaf-studios/rl-overlay",
+  "version": "1.0.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prepare": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Four-Leaf-Studios/rl-overlay.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Four-Leaf-Studios/rl-overlay/issues"
+  },
+  "homepage": "https://github.com/Four-Leaf-Studios/rl-overlay#readme",
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/postcss-js": "^4.0.4",
+    "@types/react": "^19.1.2",
+    "postcss-url": "^10.1.3",
+    "rollup": "^4.40.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@four-leaf-studios/rl-socket-hook": "^1.2.2",
+    "@rysh/json-to-css": "^1.0.0",
+    "framer-motion": "^12.9.4"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,55 @@
+// rollup.config.js
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import json from "@rollup/plugin-json";
+import postcss from "rollup-plugin-postcss";
+import postcssUrl from "postcss-url";
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: "dist/index.cjs.js",
+      format: "cjs",
+      exports: "named",
+      sourcemap: true,
+    },
+    {
+      file: "dist/index.esm.js",
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+
+  // suppress the "use client" warning if you want
+  onwarn(warning, handler) {
+    if (warning.code === "MODULE_LEVEL_DIRECTIVE") return;
+    handler(warning);
+  },
+
+  plugins: [
+    peerDepsExternal(),
+    json(),
+
+    // process CSS and inline any url() assets as base64
+    postcss({
+      extract: false,
+      modules: false,
+      minimize: true,
+      sourceMap: true,
+      plugins: [
+        postcssUrl({
+          url: "inline", // inline every asset as data-URI
+          maxSize: Infinity, // no size limit
+          fallback: "copy", // if inline fails, copy file to dist
+        }),
+      ],
+    }),
+
+    resolve(),
+    commonjs(),
+    typescript({ tsconfig: "./tsconfig.json" }),
+  ],
+};

package/src/Overlay.tsx

@@ -0,0 +1,100 @@
+// src/Overlay.tsx
+"use client";
+
+import React, { ReactNode } from "react";
+import { RLProvider, WebsocketData } from "@four-leaf-studios/rl-socket-hook";
+import { BroadcastProvider } from "./context/BroadcastContext";
+import type { Broadcast } from "./types";
+
+import Scoreboard from "./Scoreboard";
+import Teams from "./Teams";
+import TargetPlayer from "./TargetPlayer";
+import TargetBoost from "./TargetBoost";
+import Replay from "./Replay";
+
+import { useOverlayStyles, CSSJSON } from "./hooks/useOverlayStyles";
+import "./css/reset.css";
+
+export type OverlayProps = {
+  broadcast: Broadcast;
+  styles?: string | CSSJSON;
+  children?: ReactNode;
+  preview?: boolean;
+};
+
+export const Overlay = ({
+  broadcast,
+  styles,
+  preview,
+  children,
+}: OverlayProps) => {
+  useOverlayStyles(broadcast, styles);
+
+  return (
+    <BroadcastProvider broadcast={broadcast}>
+      <RLProvider>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            width: "100%",
+            height: "100%",
+            maxWidth: "100%",
+            maxHeight: "100%",
+          }}
+        >
+          {/* The overlay itself */}
+          <div
+            className={`overlay ${preview ? "testing" : ""}`}
+            style={{
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              aspectRatio: "16/9",
+              maxWidth: "1920px",
+              maxHeight: "1080px",
+              display: "block",
+            }}
+          >
+            {children ?? (
+              <>
+                <Scoreboard />
+                <Teams />
+                <TargetPlayer />
+                <TargetBoost />
+                <Replay />
+              </>
+            )}
+          </div>
+
+          {/* Preview data panel on the right */}
+          {preview && (
+            <div
+              className="testing-data"
+              style={{
+                flexGrow: 1,
+                marginLeft: "1rem",
+                overflowY: "auto",
+                backgroundColor: "rgba(0,0,0,0.8)",
+                color: "#black",
+                fontFamily: "monospace",
+                maxHeight: "1080px",
+              }}
+            >
+              <WebsocketData />
+            </div>
+          )}
+        </div>
+      </RLProvider>
+    </BroadcastProvider>
+  );
+};
+
+// expose slots
+Overlay.Scoreboard = Scoreboard;
+Overlay.Teams = Teams;
+Overlay.TargetPlayer = TargetPlayer;
+Overlay.TargetBoost = TargetBoost;
+Overlay.Replay = Replay;
+
+export default Overlay;

package/src/Player.tsx

@@ -0,0 +1,31 @@
+import React, { memo, useRef } from "react";
+import { motion } from "framer-motion";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+import PlayerBoost from "./PlayerBoost";
+
+type Props = {
+  player: PlayerState;
+};
+
+const Player = ({ player }: Props) => {
+  const modifier = player.team === 0 ? "left" : "right";
+
+  return (
+    <motion.div
+      key={player.id}
+      className={`player_box ${modifier}_player_box`}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+    >
+      <div className={`player_boost ${modifier}_player_boost`}>
+        {player.boost}
+      </div>
+      <div className={`player_name ${modifier}_player_name`}>{player.name}</div>
+      <PlayerBoost key={player.id} boost={player.boost} team={player.team} />
+    </motion.div>
+  );
+};
+
+export default memo(Player);

package/src/PlayerBoost.tsx

@@ -0,0 +1,26 @@
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+import React, { memo } from "react";
+import { motion } from "framer-motion";
+
+type Props = {
+  team: PlayerState["team"];
+  boost: PlayerState["boost"];
+};
+
+const PlayerBoost = ({ team, boost }: Props) => {
+  const boostPercent = Math.min(Math.max(boost, 0), 100);
+  const modifier = team === 0 ? "left" : "right";
+
+  return (
+    <div className={`boost_meter ${modifier}_boost_meter`}>
+      <motion.div
+        className={`boost_meter_bar ${modifier}_boost_meter_bar`}
+        initial={{ width: "0%" }}
+        animate={{ width: `${boostPercent}%` }}
+        transition={{ duration: 0.5, ease: "easeInOut" }}
+      />
+    </div>
+  );
+};
+
+export default memo(PlayerBoost);

package/src/Replay.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import useReplay from "./hooks/useReplay";
+
+const Replay = () => {
+  const { active: replayActive } = useReplay();
+
+  if (!replayActive) {
+    return null;
+  }
+
+  return (
+    <div className="replay_box">
+      <div className="replay_text">Replay</div>
+    </div>
+  );
+};
+
+export default Replay;

package/src/Scoreboard.tsx

@@ -0,0 +1,58 @@
+import { motion, AnimatePresence } from "framer-motion";
+import React from "react";
+import useShowGameComponents from "./hooks/useShowGameComponents";
+import { useBroadcast } from "./context/BroadcastContext";
+import ScoreboardTeam from "./ScoreboardTeam";
+import Timer from "./Timer";
+import ScoreboardSeriesBox from "./ScoreboardSeriesBox";
+import ScoreboardGameBox from "./ScoreboardGameBox";
+import useReplay from "./hooks/useReplay";
+
+const Scoreboard = () => {
+  const broadcast = useBroadcast();
+  const showGameComponents = useShowGameComponents();
+  const { active: replayActive } = useReplay();
+
+  if (!broadcast || !broadcast.teams || broadcast.teams.length < 2) {
+    return null;
+  }
+
+  if (!showGameComponents && replayActive) return null;
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={broadcast.id} // Ensures animation runs when broadcast updates
+        className="scoreboard_box"
+        initial={{ y: -100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: -100, opacity: 0 }}
+        transition={{ duration: 0.8, ease: [0.68, -0.55, 0.27, 1.55] }} // Mimics Svelte backInOut
+      >
+        {broadcast?.top_info_text && (
+          <div className="top_bar">{broadcast.top_info_text}</div>
+        )}
+
+        <div className="main_bar">
+          {broadcast.teams.map((team: any, idx: number) => (
+            <ScoreboardTeam key={team.id || idx} team={team} />
+          ))}
+          <Timer />
+        </div>
+
+        <div className="bottom_bar">
+          {broadcast.teams.map((team: any, idx: number) => (
+            <ScoreboardSeriesBox
+              key={team.id || idx}
+              team={team}
+              seriesNumber={broadcast.series_number}
+            />
+          ))}
+          <ScoreboardGameBox broadcast={broadcast} />
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default Scoreboard;

package/src/ScoreboardGameBox.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { useMemo } from "react";
+import { Broadcast } from "./types";
+
+interface ScoreboardGameBoxProps {
+  broadcast: Broadcast;
+}
+
+const ScoreboardGameBox: React.FC<ScoreboardGameBoxProps> = ({ broadcast }) => {
+  const gameNumber = useMemo(() => {
+    if (!broadcast.teams || broadcast.teams.length < 2) return 1;
+    const team0Score = broadcast.teams[0].series_score || 0;
+    const team1Score = broadcast.teams[1].series_score || 0;
+    return team0Score + team1Score + 1;
+  }, [broadcast.teams]);
+
+  return (
+    <div className="game_box">
+      Game {gameNumber} - BO {broadcast.series_number}
+    </div>
+  );
+};
+
+export default ScoreboardGameBox;

package/src/ScoreboardSeriesBox.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { memo } from "react";
+
+interface ScoreboardSeriesBoxProps {
+  team: any;
+  seriesNumber: number;
+}
+
+const ScoreboardSeriesBoxComponent: React.FC<ScoreboardSeriesBoxProps> = ({
+  team,
+  seriesNumber,
+}) => {
+  if (!seriesNumber) return null;
+
+  const bestOf = Number(seriesNumber);
+  const teamSeriesScore = Number(team.series_score) || 0;
+  const pointsCount = Math.ceil(bestOf / 2);
+  const points = Array.from({ length: pointsCount }, (_, index) => index);
+
+  const isLefTeam = team.id === 0;
+  const modifier = isLefTeam ? "left" : "right";
+  const teamColor =
+    team.color?.primary_color || (isLefTeam ? "#0052cc" : "#ff6600");
+
+  return (
+    <div
+      className={`series_box ${modifier}_series_box`}
+      style={{ "--team-color": teamColor } as React.CSSProperties}
+    >
+      {points.map((index) => {
+        const pointClass =
+          index < teamSeriesScore
+            ? `series_score_box_point ${modifier}_series_score_box_point`
+            : `series_score_box_empty ${modifier}_series_score_box_empty`;
+        return <div key={index} className={`series_score_box ${pointClass}`} />;
+      })}
+    </div>
+  );
+};
+
+const ScoreboardSeriesBox = memo(ScoreboardSeriesBoxComponent);
+ScoreboardSeriesBox.displayName = "ScoreboardSeriesBox";
+export default ScoreboardSeriesBox;

package/src/ScoreboardTeam.tsx

@@ -0,0 +1,39 @@
+import { useEventSelector } from "@four-leaf-studios/rl-socket-hook";
+import React from "react";
+import { Team } from "./types";
+
+interface ScoreboardTeamProps {
+  team: Team;
+}
+
+const ScoreboardTeam: React.FC<ScoreboardTeamProps> = ({ team }) => {
+  const score = useEventSelector(
+    "game:update_state",
+    (state) => state?.game.teams?.[team.id]?.score
+  );
+
+  const isLeftTeam = team.id === "0";
+  const modifier = isLeftTeam ? "left" : "right";
+  const teamColor = team?.color?.primary_color;
+
+  return (
+    <div
+      className={`scoreboard_team_box ${modifier}_scoreboard_team_box`}
+      style={{ "--team-color": teamColor } as React.CSSProperties}
+    >
+      <div className={`name_box ${modifier}_name_box`}>
+        {team?.name || (isLeftTeam ? "Blue Team" : "Orange Team")}
+      </div>
+      {team?.logo && (
+        <img
+          className={`logo_box ${modifier}_logo_box`}
+          src={team.logo || "/placeholder.svg"}
+          alt={team.name}
+        />
+      )}
+      <div className={`score_box ${modifier}_score_box`}>{score}</div>
+    </div>
+  );
+};
+
+export default ScoreboardTeam;