@four-leaf-studios/rl-overlay 1.0.5 → 1.1.1

package/test-overlay/src/App.jsx

@@ -1,28 +1,78 @@
-import React, { useState, useEffect } from "react";
-import { Overlay } from "@four-leaf-studios/rl-overlay";
-import { mockBroadcastData } from "./mockBroadcast";
-
-export default function App() {
-  const [cssText, setCssText] = useState("");
-
-  useEffect(() => {
-    fetch("/mock-css.css")
-      .then((res) => {
-        if (!res.ok) throw new Error("Failed to load CSS");
-        return res.text();
-      })
-      .then(setCssText)
-      .catch((err) => {
-        console.error(err);
-        setCssText("");
-      });
-  }, [setCssText]);
-
-  if (!cssText) {
-    return <div>Loading styles…</div>;
-  }
-
-  return (
-    <Overlay broadcast={mockBroadcastData} styles={cssText} preview={true} />
-  );
-}
+import React, { useState, useEffect } from "react";
+import { Overlay } from "@four-leaf-studios/rl-overlay";
+import { mockBroadcastData } from "./mockBroadcast";
+
+/**
+ * Build an overlay config from a CSS theme string.
+ * Each component in the registry gets its own entry.
+ * The CSS is applied to the first component since all CSS
+ * gets concatenated into a single <style> block anyway.
+ */
+const buildOverlay = (css) => ({
+  components: [
+    {
+      id: "scoreboard",
+      name: "Scoreboard",
+      css: css, // all theme CSS goes here
+      code_id: "Scoreboard",
+      position: { top: 20, left: 560, width: 800, height: 130 },
+    },
+    {
+      id: "teams",
+      name: "Teams",
+      css: "",
+      code_id: "Teams",
+      position: { top: 200, left: 0, width: 350, height: 700 },
+    },
+    {
+      id: "target-player",
+      name: "Target Player",
+      css: "",
+      code_id: "TargetPlayer",
+      position: { top: 850, left: 560, width: 800, height: 200 },
+    },
+    {
+      id: "target-boost",
+      name: "Target Boost",
+      css: "",
+      code_id: "TargetBoost",
+      position: { top: 750, left: 1700, width: 200, height: 200 },
+    },
+    {
+      id: "replay",
+      name: "Replay",
+      css: "",
+      code_id: "Replay",
+      position: { top: 20, left: 860, width: 200, height: 50 },
+    },
+  ],
+});
+
+export default function App() {
+  const [cssText, setCssText] = useState("");
+
+  useEffect(() => {
+    fetch("/mock-css.css")
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load CSS");
+        return res.text();
+      })
+      .then(setCssText)
+      .catch((err) => {
+        console.error(err);
+        setCssText("");
+      });
+  }, []);
+
+  if (!cssText) {
+    return <div>Loading styles…</div>;
+  }
+
+  return (
+    <Overlay
+      broadcast={mockBroadcastData}
+      overlay={buildOverlay(cssText)}
+      preview={true}
+    />
+  );
+}

package/tests/BroadcastContext.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+import {
+  BroadcastProvider,
+  useBroadcast,
+} from "../src/context/BroadcastContext";
+import { mockBroadcast } from "./fixtures";
+
+describe("BroadcastContext", () => {
+  it("provides broadcast data to children", () => {
+    const TestConsumer = () => {
+      const broadcast = useBroadcast();
+      return <div data-testid="name">{broadcast.name}</div>;
+    };
+
+    const { getByTestId } = render(
+      <BroadcastProvider broadcast={mockBroadcast}>
+        <TestConsumer />
+      </BroadcastProvider>,
+    );
+
+    expect(getByTestId("name").textContent).toBe("Test Broadcast");
+  });
+
+  it("throws when useBroadcast is used outside provider", () => {
+    const TestConsumer = () => {
+      const broadcast = useBroadcast();
+      return <div>{broadcast.name}</div>;
+    };
+
+    // Suppress React error boundary noise
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    expect(() => render(<TestConsumer />)).toThrow(
+      "useBroadcast must be used within a BroadcastProvider",
+    );
+
+    spy.mockRestore();
+  });
+});

package/tests/Overlay.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { Overlay } from "../src/Overlay";
+import { mockBroadcast, mockOverlay } from "./fixtures";
+
+vi.mock("@four-leaf-studios/rl-socket-hook", () => ({
+  useEventSelector: vi.fn(() => null),
+  useEvent: vi.fn(() => null),
+  RLProvider: ({ children }: { children: React.ReactNode }) =>
+    React.createElement("div", { "data-testid": "rl-provider" }, children),
+  WebsocketData: () =>
+    React.createElement("div", { "data-testid": "websocket-data" }),
+}));
+
+describe("Overlay", () => {
+  it("renders overlay wrapper with components", () => {
+    const { container } = render(
+      <Overlay broadcast={mockBroadcast} overlay={mockOverlay} />,
+    );
+
+    expect(container.querySelector(".overlay-wrapper")).toBeInTheDocument();
+    expect(container.querySelector(".overlay")).toBeInTheDocument();
+  });
+
+  it("renders overlay slots for each component", () => {
+    const { container } = render(
+      <Overlay broadcast={mockBroadcast} overlay={mockOverlay} />,
+    );
+
+    const slots = container.querySelectorAll(".overlay-slot");
+    expect(slots).toHaveLength(mockOverlay.components.length);
+  });
+
+  it("injects CSS from components into a style tag", () => {
+    const { container } = render(
+      <Overlay broadcast={mockBroadcast} overlay={mockOverlay} />,
+    );
+
+    const style = container.querySelector("style");
+    expect(style).toBeInTheDocument();
+    expect(style?.textContent).toContain(".scoreboard_box");
+    expect(style?.textContent).toContain(".team_box");
+  });
+
+  it("shows preview data panel when preview is true", () => {
+    const { container } = render(
+      <Overlay broadcast={mockBroadcast} overlay={mockOverlay} preview />,
+    );
+
+    expect(container.querySelector(".testing")).toBeInTheDocument();
+    expect(container.querySelector(".testing-data")).toBeInTheDocument();
+  });
+
+  it("does not show preview panel when preview is false", () => {
+    const { container } = render(
+      <Overlay broadcast={mockBroadcast} overlay={mockOverlay} />,
+    );
+
+    expect(container.querySelector(".testing-data")).not.toBeInTheDocument();
+  });
+
+  it("shows missing component message for unknown code_id", () => {
+    const overlayWithBadComponent = {
+      components: [
+        {
+          id: "comp-bad",
+          name: "Unknown",
+          css: "",
+          code_id: "NonExistent",
+          position: { top: 0, left: 0 },
+        },
+      ],
+    };
+
+    render(
+      <Overlay broadcast={mockBroadcast} overlay={overlayWithBadComponent} />,
+    );
+
+    expect(
+      screen.getByText(/Missing component: NonExistent/),
+    ).toBeInTheDocument();
+  });
+
+  it("uses renderSlot when provided", () => {
+    const renderSlot = vi.fn((comp, Comp) =>
+      React.createElement("div", {
+        key: comp.id,
+        "data-testid": "custom-slot",
+      }),
+    );
+
+    render(
+      <Overlay
+        broadcast={mockBroadcast}
+        overlay={mockOverlay}
+        renderSlot={renderSlot}
+      />,
+    );
+
+    expect(renderSlot).toHaveBeenCalledTimes(mockOverlay.components.length);
+    expect(screen.getAllByTestId("custom-slot")).toHaveLength(
+      mockOverlay.components.length,
+    );
+  });
+});

package/tests/OverlaySlot.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+import { OverlaySlot } from "../src/OverlaySlot";
+
+describe("OverlaySlot", () => {
+  const baseComponent = {
+    id: "slot-1",
+    name: "TestSlot",
+    css: "",
+    code_id: "TestComponent",
+    position: { top: 50, left: 100, width: 200, height: 150 },
+  };
+
+  it("renders children inside positioned container", () => {
+    const { container, getByText } = render(
+      <OverlaySlot component={baseComponent}>
+        <span>Content</span>
+      </OverlaySlot>,
+    );
+
+    expect(getByText("Content")).toBeInTheDocument();
+    const slot = container.querySelector(".overlay-slot");
+    expect(slot).toBeInTheDocument();
+  });
+
+  it("applies position styles from component data", () => {
+    const { container } = render(
+      <OverlaySlot component={baseComponent}>
+        <span>Content</span>
+      </OverlaySlot>,
+    );
+
+    const slot = container.querySelector(".overlay-slot") as HTMLElement;
+    expect(slot.style.position).toBe("absolute");
+    expect(slot.style.top).toBe("50px");
+    expect(slot.style.left).toBe("100px");
+    expect(slot.style.width).toBe("200px");
+    expect(slot.style.height).toBe("150px");
+  });
+
+  it("uses default position values when position is undefined", () => {
+    const componentNoPosition = { ...baseComponent, position: undefined };
+    const { container } = render(
+      <OverlaySlot component={componentNoPosition}>
+        <span>Content</span>
+      </OverlaySlot>,
+    );
+
+    const slot = container.querySelector(".overlay-slot") as HTMLElement;
+    expect(slot.style.top).toBe("0px");
+    expect(slot.style.left).toBe("0px");
+    expect(slot.style.width).toBe("auto");
+    expect(slot.style.height).toBe("auto");
+  });
+
+  it("sets data attributes from component", () => {
+    const { container } = render(
+      <OverlaySlot component={baseComponent}>
+        <span>Content</span>
+      </OverlaySlot>,
+    );
+
+    const slot = container.querySelector(".overlay-slot");
+    expect(slot?.getAttribute("data-component-id")).toBe("slot-1");
+    expect(slot?.getAttribute("data-component-name")).toBe("TestSlot");
+  });
+
+  it("passes extra div props through", () => {
+    const { container } = render(
+      <OverlaySlot component={baseComponent} data-custom="value">
+        <span>Content</span>
+      </OverlaySlot>,
+    );
+
+    const slot = container.querySelector(".overlay-slot");
+    expect(slot?.getAttribute("data-custom")).toBe("value");
+  });
+});

package/tests/PlayerBoost.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+import { PlayerBoost } from "../src/PlayerBoost";
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, className, ...props }: any) =>
+      React.createElement("div", { className, ...props }, children),
+  },
+  AnimatePresence: ({ children }: any) => children,
+}));
+
+describe("PlayerBoost", () => {
+  it("renders boost meter for left team", () => {
+    const { container } = render(<PlayerBoost team={0} boost={50} />);
+
+    expect(container.querySelector(".boost_meter")).toBeInTheDocument();
+    expect(container.querySelector(".left_boost_meter")).toBeInTheDocument();
+  });
+
+  it("renders boost meter for right team", () => {
+    const { container } = render(<PlayerBoost team={1} boost={50} />);
+
+    expect(container.querySelector(".right_boost_meter")).toBeInTheDocument();
+  });
+
+  it("clamps boost to 0-100 range", () => {
+    const { container: containerOver } = render(
+      <PlayerBoost team={0} boost={150} />,
+    );
+    const barOver = containerOver.querySelector(
+      ".boost_meter_bar",
+    ) as HTMLElement;
+    // framer-motion is mocked, so we check the animate prop isn't applied
+    // but the component should clamp internally
+    expect(barOver).toBeInTheDocument();
+
+    const { container: containerUnder } = render(
+      <PlayerBoost team={0} boost={-50} />,
+    );
+    const barUnder = containerUnder.querySelector(
+      ".boost_meter_bar",
+    ) as HTMLElement;
+    expect(barUnder).toBeInTheDocument();
+  });
+});

package/tests/Replay.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { Replay } from "../src/Replay";
+
+vi.mock("@four-leaf-studios/rl-socket-hook", () => ({
+  useEventSelector: vi.fn(() => null),
+  useEvent: vi.fn(() => null),
+}));
+
+// We need to mock useReplay since it depends on the socket hook
+const mockUseReplay = vi.fn();
+vi.mock("../src/hooks/useReplay", () => ({
+  default: () => mockUseReplay(),
+}));
+
+describe("Replay", () => {
+  it("renders replay box when replay is active", () => {
+    mockUseReplay.mockReturnValue({ active: true });
+    render(<Replay />);
+    expect(screen.getByText("Replay")).toBeInTheDocument();
+  });
+
+  it("returns null when replay is not active", () => {
+    mockUseReplay.mockReturnValue({ active: false });
+    const { container } = render(<Replay />);
+    expect(container.innerHTML).toBe("");
+  });
+});

package/tests/ScoreboardGameBox.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { ScoreboardGameBox } from "../src/ScoreboardGameBox";
+import { mockBroadcast } from "./fixtures";
+
+describe("ScoreboardGameBox", () => {
+  it("calculates game number from series scores", () => {
+    render(<ScoreboardGameBox broadcast={mockBroadcast} />);
+
+    // Blue has 2, Orange has 1, so game number = 2 + 1 + 1 = 4
+    expect(screen.getByText("Game 4 - BO 5")).toBeInTheDocument();
+  });
+
+  it("shows game 1 when no series scores", () => {
+    const freshBroadcast = {
+      ...mockBroadcast,
+      teams: mockBroadcast.teams.map((t) => ({ ...t, series_score: 0 })),
+    };
+
+    render(<ScoreboardGameBox broadcast={freshBroadcast} />);
+    expect(screen.getByText("Game 1 - BO 5")).toBeInTheDocument();
+  });
+
+  it("handles missing teams gracefully", () => {
+    const noTeamsBroadcast = {
+      ...mockBroadcast,
+      teams: [],
+    };
+
+    render(<ScoreboardGameBox broadcast={noTeamsBroadcast as any} />);
+    // With no teams, defaults to game 1
+    expect(screen.getByText("Game 1 - BO 5")).toBeInTheDocument();
+  });
+});

package/tests/ScoreboardSeriesBox.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { ScoreboardSeriesBoxComponent } from "../src/ScoreboardSeriesBox";
+import { mockBroadcast } from "./fixtures";
+
+describe("ScoreboardSeriesBox", () => {
+  const team = mockBroadcast.teams[0]; // series_score: 2
+
+  it("renders correct number of score indicators for BO5", () => {
+    const { container } = render(
+      <ScoreboardSeriesBoxComponent team={team} seriesNumber={5} />,
+    );
+
+    // BO5 → ceil(5/2) = 3 indicators
+    const boxes = container.querySelectorAll(".series_score_box");
+    expect(boxes).toHaveLength(3);
+  });
+
+  it("marks filled indicators based on series_score", () => {
+    const { container } = render(
+      <ScoreboardSeriesBoxComponent team={team} seriesNumber={5} />,
+    );
+
+    // team has series_score=2, so 2 filled, 1 empty
+    const filled = container.querySelectorAll(".left_series_score_box_point");
+    const empty = container.querySelectorAll(".left_series_score_box_empty");
+    expect(filled).toHaveLength(2);
+    expect(empty).toHaveLength(1);
+  });
+
+  it("returns null when seriesNumber is 0", () => {
+    const { container } = render(
+      <ScoreboardSeriesBoxComponent team={team} seriesNumber={0} />,
+    );
+
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("applies correct modifier for right team", () => {
+    const rightTeam = mockBroadcast.teams[1]; // id: "1"
+    const { container } = render(
+      <ScoreboardSeriesBoxComponent team={rightTeam} seriesNumber={5} />,
+    );
+
+    expect(container.querySelector(".right_series_box")).toBeInTheDocument();
+  });
+});

package/tests/StatItem.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { StatItem } from "../src/StatItem";
+
+describe("StatItem", () => {
+  it("renders label and value", () => {
+    render(<StatItem id="goals" label="Goals" value={5} />);
+
+    expect(screen.getByText("Goals")).toBeInTheDocument();
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("applies correct CSS class based on id", () => {
+    const { container } = render(
+      <StatItem id="assists" label="Assists" value={3} />,
+    );
+
+    expect(
+      container.querySelector(".stat_box_statistic_player_assists"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders string values", () => {
+    render(<StatItem id="name" label="Name" value="TestPlayer" />);
+    expect(screen.getByText("TestPlayer")).toBeInTheDocument();
+  });
+
+  it("renders numeric zero", () => {
+    render(<StatItem id="saves" label="Saves" value={0} />);
+    expect(screen.getByText("0")).toBeInTheDocument();
+  });
+});

package/tests/__mocks__/@four-leaf-studios/rl-socket-hook.ts

@@ -0,0 +1,10 @@
+import { vi } from "vitest";
+import React from "react";
+
+// Mock the rl-socket-hook module
+export const useEventSelector = vi.fn(() => null);
+export const useEvent = vi.fn(() => null);
+export const RLProvider = ({ children }: { children: React.ReactNode }) =>
+  React.createElement("div", { "data-testid": "rl-provider" }, children);
+export const WebsocketData = () =>
+  React.createElement("div", { "data-testid": "websocket-data" });

package/tests/fixtures.ts

@@ -0,0 +1,96 @@
+import type { Broadcast, OverlayObject } from "../src/types";
+
+export const mockBroadcast: Broadcast = {
+  id: "broadcast-1",
+  name: "Test Broadcast",
+  status: "active",
+  overlay_id: "overlay-1",
+  featured: false,
+  top_info_text: "Grand Finals",
+  series_number: 5,
+  created_at: "2025-01-01T00:00:00Z",
+  created_by: null,
+  teams: [
+    {
+      id: "0",
+      broadcast_id: "broadcast-1",
+      session_id: null,
+      organization_id: null,
+      color_id: null,
+      name: "Blue Strikers",
+      series_score: 2,
+      logo: null,
+      side: "blue",
+      created_at: "2025-01-01T00:00:00Z",
+      created_by: null,
+      color: {
+        id: "color-1",
+        name: "Blue",
+        primary_color: "#0052cc",
+        secondary_color: "#ffffff",
+        mutual_color: "#00a8ff",
+        created_at: "2025-01-01T00:00:00Z",
+        created_by: null,
+      },
+    },
+    {
+      id: "1",
+      broadcast_id: "broadcast-1",
+      session_id: null,
+      organization_id: null,
+      color_id: null,
+      name: "Orange Thunder",
+      series_score: 1,
+      logo: null,
+      side: "orange",
+      created_at: "2025-01-01T00:00:00Z",
+      created_by: null,
+      color: {
+        id: "color-2",
+        name: "Orange",
+        primary_color: "#ff6600",
+        secondary_color: "#ffffff",
+        mutual_color: "#ffaa00",
+        created_at: "2025-01-01T00:00:00Z",
+        created_by: null,
+      },
+    },
+  ],
+};
+
+export const mockOverlay: OverlayObject = {
+  components: [
+    {
+      id: "comp-1",
+      name: "Scoreboard",
+      css: ".scoreboard_box { display: flex; }",
+      code_id: "Scoreboard",
+      position: { top: 0, left: 400, width: 500, height: 100 },
+    },
+    {
+      id: "comp-2",
+      name: "Teams",
+      css: ".team_box { display: flex; }",
+      code_id: "Teams",
+      position: { top: 200, left: 0, width: 300, height: 600 },
+    },
+  ],
+};
+
+export const mockPlayerState = {
+  id: "player-1",
+  name: "TestPlayer",
+  team: 0,
+  score: 200,
+  goals: 1,
+  assists: 2,
+  shots: 5,
+  saves: 3,
+  touches: 40,
+  boost: 75,
+  speed: 1200,
+  isDead: false,
+  isSonic: false,
+  hasBall: false,
+  location: { X: 100.5, Y: -200.3, Z: 50.0 },
+};

package/tests/registry.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { componentRegistry } from "../src/registry";
+
+describe("componentRegistry", () => {
+  it("contains all expected components", () => {
+    const expectedKeys = [
+      "Scoreboard",
+      "Teams",
+      "TargetPlayer",
+      "TargetBoost",
+      "Replay",
+      "Timer",
+      "PlayerBoost",
+    ];
+
+    for (const key of expectedKeys) {
+      expect(componentRegistry).toHaveProperty(key);
+      // Components may be functions or memo objects
+      expect(componentRegistry[key]).toBeTruthy();
+    }
+  });
+
+  it("does not contain unexpected entries", () => {
+    const keys = Object.keys(componentRegistry);
+    expect(keys.length).toBe(7);
+  });
+});

package/tests/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";