🚀 Streamer Setup Guide

📦 Step 1: Install Node.js

  1. Go to nodejs.org/en/download
  2. Click the Windows Installer (.msi) (LTS version recommended)
  3. Run the installer and accept defaults (ensure "Add to PATH" stays checked)
  4. Already have Node? Run node -v in a terminal to verify (v18+ recommended).

🖥️ Step 2: Start the Local Server

  1. Double‑click start_server.bat in the project folder.
  2. You should see: Node.js found! Starting server...
  3. Keep this window open while streaming.

📺 Step 3: Add Overlay to OBS

  1. In OBS, under Sources, click the +.
  2. Select Browser Source (name it e.g. All Perk Streak).
  3. Set the URL to http://localhost:8000/streamer-overlay.html.
  4. Enable Refresh browser when scene becomes active.
  5. Click OK.

🛠️ Step 4: Customize CSS

  1. Open streamer-overlay.css in the project root.
  2. Edit styles (colors, layout, fonts) to match your branding.
  3. Save the file.
  4. In OBS: Right‑click the Browser Source → Properties → click Refresh cache of current page.
  5. Confirm visual changes appear.

🔍 Troubleshooting

  1. Blank overlay? Confirm the server window is running and URL is exactly http://localhost:8000/streamer-overlay.html.