@four-leaf-studios/rl-overlay 1.0.4 → 1.1.0

package/dist/types/Overlay.d.ts

@@ -1,15 +1,14 @@
-import React, { ReactNode } from "react";
-import type { Broadcast } from "./types";
-import { CSSJSON } from "./hooks/useOverlayStyles";
+import React from "react";
+import type { Broadcast, OverlayObject } from "./types";
 import "./css/reset.css";
 export type OverlayProps = {
     broadcast: Broadcast;
-    styles?: string | CSSJSON;
-    children?: ReactNode;
+    overlay: OverlayObject;
     preview?: boolean;
+    renderSlot?: (comp: OverlayObject["components"][number], Comp: any) => React.ReactNode;
 };
 export declare const Overlay: {
-    ({ broadcast, styles, preview, children, }: OverlayProps): React.JSX.Element;
+    ({ broadcast, overlay, preview, renderSlot, }: OverlayProps): React.JSX.Element;
     Scoreboard: () => React.JSX.Element | null;
     Teams: () => React.JSX.Element;
     TargetPlayer: React.MemoExoticComponent<() => React.JSX.Element | null>;

package/dist/types/OverlaySlot.d.ts

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from "react";
+import type { OverlayComponentData } from "./types";
+type OverlaySlotProps = {
+    component: OverlayComponentData;
+    children: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const OverlaySlot: ({ component, children, ...rest }: OverlaySlotProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ component, children, ...rest }: OverlaySlotProps) => React.JSX.Element>;
+export default _default;

package/dist/types/index.d.ts

@@ -13,5 +13,7 @@ export * from "./TargetPlayerLocation";
 export * from "./TargetPlayerStats";
 export * from "./Team";
 export * from "./Timer";
+export * from "./OverlaySlot";
 export * from "@four-leaf-studios/rl-socket-hook";
 export * from "./hooks/index";
+export * from "./registry";

package/dist/types/registry.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const componentRegistry: Record<string, React.ComponentType<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@four-leaf-studios/rl-overlay",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/types/index.d.ts",
@@ -9,6 +9,8 @@
   },
   "scripts": {
     "build": "rollup -c",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepare": "npm run build"
   },
   "repository": {
@@ -23,6 +25,8 @@
   },
   "homepage": "https://github.com/Four-Leaf-Studios/rl-overlay#readme",
   "peerDependencies": {
+    "@four-leaf-studios/rl-socket-hook": "^1.2.4",
+    "framer-motion": "^12.9.4",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -33,18 +37,21 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/postcss-js": "^4.0.4",
     "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.1.1",
     "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"
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.6"
   },
   "dependencies": {
-    "@four-leaf-studios/rl-socket-hook": "^1.2.4",
-    "@rysh/json-to-css": "^1.0.0",
-    "framer-motion": "^12.9.4"
+    "@rysh/json-to-css": "^1.0.0"
   }
 }

package/src/Overlay.tsx

@@ -1,10 +1,9 @@
-// src/Overlay.tsx
 "use client";
 
-import React, { ReactNode } from "react";
+import React from "react";
 import { RLProvider, WebsocketData } from "@four-leaf-studios/rl-socket-hook";
 import { BroadcastProvider } from "./context/BroadcastContext";
-import type { Broadcast } from "./types";
+import type { Broadcast, OverlayObject } from "./types";
 
 import Scoreboard from "./Scoreboard";
 import Teams from "./Teams";
@@ -12,37 +11,38 @@ import TargetPlayer from "./TargetPlayer";
 import TargetBoost from "./TargetBoost";
 import Replay from "./Replay";
 
-import { useOverlayStyles, CSSJSON } from "./hooks/useOverlayStyles";
 import "./css/reset.css";
+import { componentRegistry } from "./registry";
+import OverlaySlot from "./OverlaySlot";
 
 export type OverlayProps = {
   broadcast: Broadcast;
-  styles?: string | CSSJSON;
-  children?: ReactNode;
+  overlay: OverlayObject;
   preview?: boolean;
+  renderSlot?: (
+    comp: OverlayObject["components"][number],
+    Comp: any
+  ) => React.ReactNode;
 };
 
 export const Overlay = ({
   broadcast,
-  styles,
+  overlay,
   preview,
-  children,
+  renderSlot,
 }: OverlayProps) => {
-  useOverlayStyles(broadcast, styles);
+  const { components } = overlay;
+
+  // Collect CSS into one block
+  const cssString = components.map((c) => c.css).join("\n");
 
   return (
     <BroadcastProvider broadcast={broadcast}>
       <RLProvider>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            width: "100%",
-            height: "100%",
-            maxWidth: "100%",
-            maxHeight: "100%",
-          }}
-        >
+        <div className="overlay-wrapper">
+          {/* Inject all component CSS */}
+          <style>{cssString}</style>
+
           {/* The overlay itself */}
           <div
             className={`overlay ${preview ? "testing" : ""}`}
@@ -56,31 +56,33 @@ export const Overlay = ({
               display: "block",
             }}
           >
-            {children ?? (
-              <>
-                <Scoreboard />
-                <Teams />
-                <TargetPlayer />
-                <TargetBoost />
-                <Replay />
-              </>
-            )}
+            {components.map((comp) => {
+              const Comp = componentRegistry[comp.code_id];
+              if (!Comp) {
+                return (
+                  <div key={comp.id} style={{ color: "red", fontSize: "14px" }}>
+                    Missing component: {comp.code_id}
+                  </div>
+                );
+              }
+
+              if (renderSlot) {
+                // delegate to editor if provided
+                return renderSlot(comp, Comp);
+              }
+
+              // default (non-edit mode)
+              return (
+                <OverlaySlot key={comp.id} component={comp}>
+                  <Comp {...comp} />
+                </OverlaySlot>
+              );
+            })}
           </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",
-              }}
-            >
+            <div className="testing-data">
               <WebsocketData />
             </div>
           )}
@@ -90,7 +92,7 @@ export const Overlay = ({
   );
 };
 
-// expose slots
+// expose slots (optional if you want named exports)
 Overlay.Scoreboard = Scoreboard;
 Overlay.Teams = Teams;
 Overlay.TargetPlayer = TargetPlayer;

package/src/OverlaySlot.tsx

@@ -0,0 +1,35 @@
+import React, { memo, type ReactNode } from "react";
+import type { OverlayComponentData } from "./types";
+
+type OverlaySlotProps = {
+  component: OverlayComponentData;
+  children: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>; // ✅ allow div props
+
+export const OverlaySlot = ({
+  component,
+  children,
+  ...rest
+}: OverlaySlotProps) => {
+  const { id, name, position } = component;
+
+  return (
+    <div
+      className="overlay-slot"
+      data-component-id={id}
+      data-component-name={name}
+      style={{
+        position: "absolute",
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+        width: position?.width ?? "auto",
+        height: position?.height ?? "auto",
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default memo(OverlaySlot);

package/src/Player.tsx

@@ -13,6 +13,7 @@ export const Player = ({ player }: Props) => {
   return (
     <motion.div
       key={player.id}
+      data-component-id="Player"
       className={`player_box ${modifier}_player_box`}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}

package/src/PlayerBoost.tsx

@@ -12,7 +12,10 @@ export const PlayerBoost = ({ team, boost }: Props) => {
   const modifier = team === 0 ? "left" : "right";
 
   return (
-    <div className={`boost_meter ${modifier}_boost_meter`}>
+    <div
+      data-component-id="PlayerBoost"
+      className={`boost_meter ${modifier}_boost_meter`}
+    >
       <motion.div
         className={`boost_meter_bar ${modifier}_boost_meter_bar`}
         initial={{ width: "0%" }}

package/src/Scoreboard.tsx

@@ -24,6 +24,7 @@ export const Scoreboard = () => {
     <AnimatePresence mode="wait">
       <motion.div
         key={broadcast.id} // Ensures animation runs when broadcast updates
+        data-component-id="Scoreboard"
         className="scoreboard_box"
         initial={{ y: -100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}

package/src/ScoreboardGameBox.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { Broadcast } from "./types";
 
 interface ScoreboardGameBoxProps {
@@ -18,7 +16,7 @@ export const ScoreboardGameBox: React.FC<ScoreboardGameBoxProps> = ({
   }, [broadcast.teams]);
 
   return (
-    <div className="game_box">
+    <div data-component-id="ScoreboardGameBox" className="game_box">
       Game {gameNumber} - BO {broadcast.series_number}
     </div>
   );

package/src/ScoreboardSeriesBox.tsx

@@ -1,6 +1,4 @@
-import React from "react";
-
-import { memo } from "react";
+import React, { memo } from "react";
 import { Team } from "./types";
 
 interface ScoreboardSeriesBoxProps {
@@ -25,6 +23,7 @@ export const ScoreboardSeriesBoxComponent: React.FC<
 
   return (
     <div
+      data-component-id="ScoreboardSeriesBox"
       className={`series_box ${modifier}_series_box`}
       style={{ "--team-color": teamColor } as React.CSSProperties}
     >

package/src/ScoreboardTeam.tsx

@@ -18,6 +18,7 @@ export const ScoreboardTeam: React.FC<ScoreboardTeamProps> = ({ team }) => {
 
   return (
     <div
+      data-component-id="ScoreboardTeam"
       className={`scoreboard_team_box ${modifier}_scoreboard_team_box`}
       style={{ "--team-color": teamColor } as React.CSSProperties}
     >

package/src/StatItem.tsx

@@ -22,7 +22,10 @@ export const StatItem = <K extends PrimitiveKeys<PlayerState>>({
   label,
   value,
 }: StatItemProps<K>) => (
-  <li className={`stat_box_statistic stat_box_statistic_player_${id}`}>
+  <li
+    data-component-id="StatItem"
+    className={`stat_box_statistic stat_box_statistic_player_${id}`}
+  >
     <span className="stat_box_statistic_name">{label}</span>
     <span className="stat_box_statistic_value">{value}</span>
   </li>

package/src/TargetBoost.tsx

@@ -17,6 +17,7 @@ export const TargetBoost = () => {
   return (
     <AnimatePresence mode="wait">
       <motion.div
+        data-component-id="TargetBoost"
         key={targetPlayer.id}
         className={`target_boost ${modifier}_target_boost`}
         initial={{ x: 400, opacity: 0 }}

package/src/TargetPlayer.tsx

@@ -1,3 +1,5 @@
+// src/components/TargetPlayer.tsx
+
 import { AnimatePresence, motion } from "framer-motion";
 import React, { memo } from "react";
 import { useBroadcast } from "./context/BroadcastContext";
@@ -9,21 +11,31 @@ export const TargetPlayer = () => {
   const broadcast = useBroadcast();
   const targetPlayer = useTargetPlayer();
 
-  if (!targetPlayer || !broadcast) return null;
+  // Safeguard conditions
+  if (
+    !targetPlayer ||
+    !broadcast ||
+    !broadcast.teams ||
+    !broadcast.teams[targetPlayer.team]
+  ) {
+    return null;
+  }
 
-  const teamColor = broadcast.teams[targetPlayer.team].color?.primary_color;
+  const teamData = broadcast.teams[targetPlayer.team];
+  const teamColor = teamData?.color?.primary_color ?? "#ffffff";
   const modifier = targetPlayer.team === 0 ? "left" : "right";
 
   return (
     <AnimatePresence mode="wait">
       <motion.div
+        data-component-id="TargetPlayer"
         key={targetPlayer.id}
         className={`stat_box ${modifier}_stat_box`}
         style={{ "--team-color": teamColor } as React.CSSProperties}
         initial={{ x: modifier === "left" ? -300 : 300, opacity: 0 }}
         animate={{ x: 0, opacity: 1 }}
         exit={{ x: modifier === "left" ? -300 : 300, opacity: 0 }}
-        transition={{ duration: 0.8, ease: [0.77, 0, 0.175, 1] }} // Quartic easing equivalent
+        transition={{ duration: 0.8, ease: [0.77, 0, 0.175, 1] }}
       >
         <motion.div
           className={`stat_box_player ${modifier}_stat_box_player`}

package/src/TargetPlayerLocation.tsx

@@ -9,6 +9,7 @@ type Props = {
 export const TargetPlayerLocation = ({ location }: Props) => {
   return (
     <motion.div
+      data-component-id="TargetPlayerLocation"
       className="stat_box_statistic stat_box_statistic_player_location"
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}

package/src/TargetPlayerStats.tsx

@@ -9,7 +9,7 @@ type Props = {
 };
 
 export const TargetPlayerStats = ({ targetPlayer }: Props) => (
-  <ul className="stat_box_statistics">
+  <ul data-component-id="TargetPlayerStats" className="stat_box_statistics">
     <StatItem id="id" label="ID" value={targetPlayer.id} />
     <StatItem id="team" label="Team" value={targetPlayer.team} />
     <StatItem id="score" label="Score" value={targetPlayer.score} />

package/src/Team.tsx

@@ -25,6 +25,7 @@ export const Team = ({ id }: Props) => {
 
   return (
     <motion.div
+      data-component-id="Team"
       className={`team_box ${modifier}_team_box`}
       initial={{ x: isLeft ? -300 : 300, opacity: 0 }}
       animate={{ x: 0, opacity: 1 }}

package/src/Timer.tsx

@@ -1,12 +1,11 @@
 import { useEventSelector } from "@four-leaf-studios/rl-socket-hook";
-import React from "react";
-import { memo } from "react";
+import React, { memo } from "react";
 
 const TimerComponent: React.FC = () => {
   // Add proper null checks to prevent "Cannot read properties of undefined" error
   const time_seconds = useEventSelector(
     "game:update_state",
-    (state) => state?.game?.time_seconds
+    (state) => state?.game?.time_seconds,
   );
 
   // Return null if time_seconds is not available
@@ -16,7 +15,11 @@ const TimerComponent: React.FC = () => {
   const seconds = time_seconds % 60;
   const formattedTime = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
 
-  return <span className="time_box">{formattedTime}</span>;
+  return (
+    <span data-component-id="Timer" className="time_box">
+      {formattedTime}
+    </span>
+  );
 };
 
 export const Timer = memo(TimerComponent);