@four-leaf-studios/rl-overlay 1.0.0

package/test-overlay/src/App.jsx

@@ -0,0 +1,28 @@
+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") // make sure mock-css.css lives in your public/ folder
+      .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} />
+  );
+}

package/test-overlay/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/test-overlay/src/mockBroadcast.js

@@ -0,0 +1,33 @@
+export const mockBroadcastData = {
+  id: "mock-broadcast-id",
+  name: "Mock Broadcast",
+  slug: "mock-broadcast",
+  teams: [
+    {
+      id: "0",
+      name: "Blue Team",
+      series_score: 2,
+      side: "blue",
+      logo: "https://dxbhsrqyrr690.cloudfront.net/sidearm.nextgen.sites/fit.sidearmsports.com/images/responsive_2021/logo-main.svg",
+      color: {
+        primary_color: "#910000",
+        secondary_color: "#ffffff",
+        mutual_color: "#000000",
+      },
+    },
+    {
+      id: "1",
+      name: "Orange Team",
+      series_score: 1,
+      side: "orange",
+      logo: "https://pbs.twimg.com/profile_images/1807909929921269760/wnTKfFoo_400x400.jpg",
+      color: {
+        primary_color: "#106600",
+        secondary_color: "#ffffff",
+        mutual_color: "#000000",
+      },
+    },
+  ],
+  series_number: 5,
+  top_info_text: "RLCS Season X - Regional 1",
+};

package/test-overlay/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES5",              // still emit ES5-compatible code
+    "lib": [
+      "DOM",                      // if you’re targeting browsers
+      "ES2015",                   // includes Array.from, Map, Set, etc
+      "ES2016",
+      "ES2017"
+    ],
+    "module": "ESNext",
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src", "test-overlay/src/mockBroadcast.js"]
+}