@four-leaf-studios/rl-overlay 1.0.0

package/src/StatItem.tsx

@@ -0,0 +1,31 @@
+// StatItem.tsx
+import React from "react";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+
+// 1. Define what “primitive” means for us:
+type Primitive = string | number | boolean;
+
+// 2. Extract just the keys whose values are Primitive:
+type PrimitiveKeys<T> = {
+  [K in keyof T]: T[K] extends Primitive ? K : never;
+}[keyof T];
+
+// 3. Now K can only be one of those “safe” keys:
+type StatItemProps<K extends PrimitiveKeys<PlayerState>> = {
+  id: K;
+  label: string;
+  value: PlayerState[K]; // guaranteed to be string|number|boolean
+};
+
+const StatItem = <K extends PrimitiveKeys<PlayerState>>({
+  id,
+  label,
+  value,
+}: StatItemProps<K>) => (
+  <li 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>
+);
+
+export default StatItem;

package/src/TargetBoost.tsx

@@ -0,0 +1,63 @@
+import { useEventSelector } from "@four-leaf-studios/rl-socket-hook";
+import { AnimatePresence, motion } from "framer-motion";
+import React, { memo } from "react";
+import useTargetPlayer from "./hooks/useTargetPlayer";
+
+const TargetBoost = () => {
+  const initialized = useEventSelector(
+    "game:update_state",
+    (state) => state?.hasGame
+  );
+  const targetPlayer = useTargetPlayer();
+
+  if (!targetPlayer || !initialized) return null;
+
+  const modifier = targetPlayer.team === 0 ? "left" : "right";
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={targetPlayer.id}
+        className={`target_boost ${modifier}_target_boost`}
+        initial={{ x: 400, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        exit={{ x: 400, opacity: 0, scale: 0.9 }}
+        transition={{ duration: 1, ease: [0.77, 0, 0.175, 1] }} // Quartic easing equivalent
+      >
+        <div
+          className={`target_boost_container ${modifier}_target_boost_container`}
+        >
+          <div
+            className={`target_boost_meter ${modifier}_target_boost_meter`}
+            style={
+              { "--target_boost": targetPlayer.boost } as React.CSSProperties
+            }
+          >
+            <div
+              className={`target_boost_meter_inner ${modifier}_target_boost_meter_inner`}
+            ></div>
+          </div>
+          <svg className="target_boost_svg">
+            <circle
+              className={`target_boost_svg_circle ${modifier}_target_boost_svg_circle`}
+              cx="50%"
+              cy="50%"
+              r="50%"
+            />
+          </svg>
+        </div>
+        <motion.div
+          className={`target_boost_value ${modifier}_target_boost_value`}
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          exit={{ scale: 0 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          {targetPlayer.boost}
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default memo(TargetBoost);

package/src/TargetPlayer.tsx

@@ -0,0 +1,56 @@
+import { useEventSelector } from "@four-leaf-studios/rl-socket-hook";
+import { AnimatePresence, motion } from "framer-motion";
+import React, { memo } from "react";
+import { useBroadcast } from "./context/BroadcastContext";
+import PlayerBoost from "./PlayerBoost";
+import TargetPlayerStats from "./TargetPlayerStats";
+import useTargetPlayer from "./hooks/useTargetPlayer";
+
+const TargetPlayer = () => {
+  const broadcast = useBroadcast();
+  const targetPlayer = useTargetPlayer();
+
+  if (!targetPlayer || !broadcast) return null;
+
+  const teamColor = broadcast.teams[targetPlayer.team].color?.primary_color;
+  const modifier = targetPlayer.team === 0 ? "left" : "right";
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        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
+      >
+        <motion.div
+          className={`stat_box_player ${modifier}_stat_box_player`}
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          {targetPlayer.name}
+        </motion.div>
+
+        {/* Player Stats */}
+        <TargetPlayerStats targetPlayer={targetPlayer} />
+
+        {/* Player Boost */}
+        <motion.div
+          className={`stat_box_player_boost ${modifier}_stat_box_player_boost`}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          <PlayerBoost boost={targetPlayer.boost} team={targetPlayer.team} />
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default memo(TargetPlayer);

package/src/TargetPlayerLocation.tsx

@@ -0,0 +1,27 @@
+import React, { memo } from "react";
+import { motion } from "framer-motion";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+
+type Props = {
+  location: PlayerState["location"];
+};
+
+const TargetPlayerLocation = ({ location }: Props) => {
+  return (
+    <motion.div
+      className="stat_box_statistic stat_box_statistic_player_location"
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 10 }}
+      transition={{ duration: 0.5 }}
+    >
+      <span className="stat_box_statistic_name">Location</span>{" "}
+      <span className="stat_box_statistic_value">
+        X {location.X?.toFixed(2) || 0}, Y {location.Y?.toFixed(2) || 0}, Z{" "}
+        {location.Z?.toFixed(2) || 0}
+      </span>
+    </motion.div>
+  );
+};
+
+export default memo(TargetPlayerLocation);

package/src/TargetPlayerStats.tsx

@@ -0,0 +1,25 @@
+// TargetPlayerStats.tsx
+import React, { memo } from "react";
+import { PlayerState } from "@four-leaf-studios/rl-socket-hook";
+import StatItem from "./StatItem";
+import TargetPlayerLocation from "./TargetPlayerLocation";
+
+type Props = {
+  targetPlayer: PlayerState;
+};
+
+const TargetPlayerStats = ({ targetPlayer }: Props) => (
+  <ul 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} />
+    <StatItem id="goals" label="Goals" value={targetPlayer.goals} />
+    <StatItem id="assists" label="Assists" value={targetPlayer.assists} />
+    <StatItem id="shots" label="Shots" value={targetPlayer.shots} />
+    <StatItem id="saves" label="Saves" value={targetPlayer.saves} />
+    <StatItem id="touches" label="Touches" value={targetPlayer.touches} />
+    <TargetPlayerLocation location={targetPlayer.location} />
+  </ul>
+);
+
+export default memo(TargetPlayerStats);

package/src/Team.tsx

@@ -0,0 +1,45 @@
+import { useEventSelector } from "@four-leaf-studios/rl-socket-hook";
+import { motion, AnimatePresence } from "framer-motion";
+import React, { memo } from "react";
+import { Team } from "./types";
+import Player from "./Player";
+
+type Props = {
+  id: Team["id"];
+};
+
+const Team = ({ id }: Props) => {
+  const players = useEventSelector("game:update_state", (state) => {
+    return (
+      state?.players &&
+      Object.values(state?.players).filter(
+        (player) => player.team.toString() === id
+      )
+    );
+  });
+
+  const isLeft = id === "0";
+  const modifier = isLeft ? "left" : "right";
+
+  if (!players) return null;
+
+  return (
+    <motion.div
+      className={`team_box ${modifier}_team_box`}
+      initial={{ x: isLeft ? -300 : 300, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      exit={{ x: isLeft ? -300 : 300, opacity: 0 }}
+      transition={{ duration: 1, ease: [0.77, 0, 0.175, 1] }}
+    >
+      <AnimatePresence>
+        {players.map((player) => (
+          <Player player={player} key={player.id} />
+        ))}
+      </AnimatePresence>
+    </motion.div>
+  );
+};
+
+const MemoizedTeam = memo(Team);
+MemoizedTeam.displayName = "Team";
+export default MemoizedTeam;

package/src/Teams.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Team from "./Team";
+
+const Teams = () => {
+  return (
+    <>
+      <Team id={"0"} />
+      <Team id={"1"} />
+    </>
+  );
+};
+
+export default Teams;

package/src/Timer.tsx

@@ -0,0 +1,24 @@
+import { useEventSelector } from "@four-leaf-studios/rl-socket-hook";
+import React from "react";
+import { 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
+  );
+
+  // Return null if time_seconds is not available
+  if (typeof time_seconds !== "number") return null;
+
+  const minutes = Math.floor(time_seconds / 60);
+  const seconds = time_seconds % 60;
+  const formattedTime = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+
+  return <span className="time_box">{formattedTime}</span>;
+};
+
+const Timer = memo(TimerComponent);
+Timer.displayName = "Timer";
+export default Timer;

package/src/context/BroadcastContext.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import { Broadcast } from "../types";
+
+const BroadcastContext = createContext<Broadcast | undefined>(undefined);
+
+export const BroadcastProvider: React.FC<{
+  broadcast: Broadcast;
+  children: ReactNode;
+}> = ({ broadcast, children }) => (
+  <BroadcastContext.Provider value={broadcast}>
+    {children}
+  </BroadcastContext.Provider>
+);
+
+export function useBroadcast(): Broadcast {
+  const ctx = useContext(BroadcastContext);
+  if (ctx === undefined) {
+    throw new Error("useBroadcast must be used within a BroadcastProvider");
+  }
+  return ctx;
+}

package/src/css/reset.css

@@ -0,0 +1,280 @@
+/* overlay-reset.css */
+.overlay * {
+  all: unset;
+  line-height: initial;
+}
+
+.overlay.testing {
+  background: url("../assets/overlay-testing-background.png");
+}
+
+body {
+  background-color: transparent !important;
+}
+
+.scoreboard_box {
+  display: flex;
+  flex-flow: column;
+}
+
+.replay_box {
+  position: absolute;
+}
+.top_bar {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  text-align: center;
+  width: fit-content;
+  align-items: center;
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%);
+  padding-top: 0;
+  color: #fff;
+}
+.main_bar {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%);
+  padding-top: 0;
+  color: #fff;
+}
+
+.bottom_bar {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  text-align: center;
+  width: fit-content;
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%);
+  padding-top: 0;
+  color: #fff;
+}
+
+.scoreboard_team_box {
+  display: flex;
+}
+.left_scoreboard_team_box {
+  order: 0;
+}
+
+.right_scoreboard_team_box {
+  order: 2;
+}
+
+.time_box {
+  order: 1;
+}
+
+/* Left Side of scoreboard */
+.left_score_box {
+  order: 3;
+}
+
+.left_name_box {
+  order: 2;
+}
+
+.left_logo_box {
+  order: 1;
+}
+
+/* Righ Side */
+.right_score_box {
+  order: 1;
+}
+
+.right_name_box {
+  order: 2;
+}
+
+.right_logo_box {
+  order: 3;
+}
+
+/* Default Styles */
+.logo_box {
+  object-fit: scale-down;
+  box-sizing: border-box;
+}
+
+.name_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.series_box {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.left_series_box {
+  order: 0;
+}
+
+.right_series_box {
+  order: 2;
+  flex-direction: row-reverse;
+}
+
+.score_box,
+.time_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.game_box {
+  order: 1;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.team_box {
+  display: flex;
+  flex-flow: column;
+  color: #fff;
+}
+
+.player_box {
+  display: flex;
+  position: relative;
+}
+
+.boost_meter_bar {
+  height: 100%;
+  transition: width 0.35s;
+  display: block;
+}
+
+.right_boost_meter_bar {
+  margin-left: auto;
+}
+
+.stat_box {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  color: #fff;
+  align-items: center;
+}
+
+.stat_box_statistics {
+  display: flex;
+}
+
+.stat_box_statistic_name {
+  order: 2;
+}
+
+.stat_box_statistic_value {
+  font-weight: bold;
+}
+
+.stat_box_player_boost {
+  margin-top: 5px;
+}
+
+/* Target Boost */
+.target_boost {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  color: #fff;
+  align-items: center;
+}
+
+.target_boost_container {
+  display: flex;
+  position: relative;
+  bottom: 0;
+  left: 0;
+  color: #fff;
+  align-items: center;
+}
+
+.target_boost_meter {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+.left_target_boost_meter {
+  background: conic-gradient(
+    var(--team-left-primary, #0052cc) calc(var(--target_boost) * 1%),
+    transparent calc(var(--target_boost) * 1%)
+  );
+}
+
+.right_target_boost_meter {
+  background: conic-gradient(
+    var(--team-right-primary, #ff6600) calc(var(--target_boost) * 1%),
+    transparent calc(var(--target_boost) * 1%)
+  );
+}
+
+.target_boost_meter_inner {
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.target_boost_svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.target_boost_svg_circle {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 2;
+}
+
+.target_boost_value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+/* Replay Box */
+.replay_box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 10px 20px;
+  border-radius: 4px;
+}
+
+.replay_text {
+  font-size: 24px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}

package/src/hooks/index.ts

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

package/src/hooks/useOverlayStyles.ts

@@ -0,0 +1,107 @@
+// src/hooks/useOverlayStyles.ts
+import { useEffect } from "react";
+import jsonToCss from "@rysh/json-to-css";
+import type { Broadcast, Color } 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 function useOverlayStyles(
+  broadcast: Broadcast,
+  styles?: string | CSSJSON
+) {
+  useEffect(() => {
+    if (!broadcast?.teams) return;
+
+    const shade = (c: string, pct: number): string => {
+      const hex = c.replace("#", "");
+      const num = parseInt(hex, 16);
+      const amt = Math.round(2.55 * pct);
+      let R = (num >> 16) + amt;
+      let G = ((num >> 8) & 0xff) + amt;
+      let B = (num & 0xff) + amt;
+      R = Math.min(255, Math.max(0, R));
+      G = Math.min(255, Math.max(0, G));
+      B = Math.min(255, Math.max(0, B));
+      return (
+        "#" +
+        ((1 << 24) + (R << 16) + (G << 8) + B)
+          .toString(16)
+          .slice(1)
+          .toUpperCase()
+      );
+    };
+
+    const defaultBlue: Color = {
+      id: "",
+      name: "",
+      primary_color: "#0052cc",
+      secondary_color: "#ffffff",
+      mutual_color: "#00a8ff",
+      created_at: "",
+      created_by: null,
+    };
+    const defaultOrange: Color = {
+      id: "",
+      name: "",
+      primary_color: "#ff6600",
+      secondary_color: "#ffffff",
+      mutual_color: "#ffaa00",
+      created_at: "",
+      created_by: null,
+    };
+
+    const blueColor =
+      broadcast.teams.find((t) => t.side === "blue")?.color ?? defaultBlue;
+    const orangeColor =
+      broadcast.teams.find((t) => t.side === "orange")?.color ?? defaultOrange;
+
+    const teamJSON: CSSJSON = {
+      ":root": {
+        "--team-left-primary": blueColor.primary_color,
+        "--team-left-primary-light": shade(blueColor.primary_color, 20),
+        "--team-left-primary-dark": shade(blueColor.primary_color, -20),
+        "--team-left-secondary": blueColor.secondary_color,
+        "--team-left-mutual":
+          blueColor.mutual_color ?? defaultBlue.mutual_color!,
+
+        "--team-right-primary": orangeColor.primary_color,
+        "--team-right-primary-light": shade(orangeColor.primary_color, 20),
+        "--team-right-primary-dark": shade(orangeColor.primary_color, -20),
+        "--team-right-secondary": orangeColor.secondary_color,
+        "--team-right-mutual":
+          orangeColor.mutual_color ?? defaultOrange.mutual_color!,
+      },
+    };
+
+    // ==== CHANGE HERE: pass a second arg (root selector) ====
+    let cssText: string;
+    if (styles && typeof styles === "object") {
+      const merged: CSSJSON = { ...teamJSON, ...styles };
+      cssText = jsonToCss(merged, ""); // <- empty string scopes at top
+    } else {
+      cssText = jsonToCss(teamJSON, ""); // <- ditto
+      if (typeof styles === "string") {
+        cssText += "\n\n" + styles;
+      }
+    }
+
+    const styleEl = document.createElement("style");
+    styleEl.id = "overlay-styles";
+    styleEl.textContent = cssText;
+    document.getElementById("overlay-styles")?.remove();
+    document.head.appendChild(styleEl);
+
+    return () => {
+      document.getElementById("overlay-styles")?.remove();
+    };
+  }, [broadcast, styles]);
+}